프리코스 (6) - Javascript : 2.데이터 타입, 3.String 문자열

2.데이터 타입

• 변수에 숫자만 넣어봤는데, 숫자 외에도 다양한 데이터/값 넣을 수 

let myNumber2=200;

console.log(myNumber2)

 

 

2-1. 기본형 데이터

1)Number 

왼쪽 값과 오른쪽 값을 처리하여 하나의 값으로 만드는 연산자를 이항 연산자

이항 연산자 중에서 산수에 사용하는 연산자를 산술 연산자

let myNumber2 = 200;

 

console. log (myNumber2)

 

→ 200 

• 숫자니까 사칙연산 가능  (연산에 대한 결과 도출 가능→ 숫자라서 가능한 거)

let myNumber1 = 100;

let myNumber2 = 2;

let myNumber3 = 200;

let myNumber4 = 1;

 

console. log (myNumber1 + myNumber4)

→ 101 

 

console. log (myNumber3 * myNumber4)

→ 200 

 

console. log (myNumber3 - myNumber4)

→ 199 

 

console. log (myNumber3 / myNumber4)

→ 200   (나누기 한 결과 = 몫, 

나머지도 구할 수 ‘검색= javascript calculate remain’  

console. log (7%2);      → 7을 2로 나눈 나머지

1 

 

---

2)String 

 

모든 문자열은 string 

 

• ‘ ‘ or “ “  있어야. 잇으면 문자열 

 

console. log (‘coffee’) = coffee

console. log (“coffee”) = coffee

let myNumber= ‘Code Kim’;

 

console. log (myNumber) 

 

→ Code Kim 

** Console log로는 string과 number을 같이 사용 가능

 (서로 다른 데이터 타입 → , 로 구분)

 

let number1= 100

let number2= 200

 

console. log (‘100 plus 200 equals to’, number1+number2 )

 

→ 100 plus 200 equals to 300

console. log (‘number1:’ , number1 )

→ number1: 100 

 

→ ‘ ‘ 있는 ‘number1’은 string 문자열 

→ number1은 변수

const myDream = "being a good software developer";

 

console.log("My dream is ", myDream, "❣️")

→ My dream is  being a good software developer ❣️

let a= 'Hello';

let b= ' World,';  →띄어쓰기 지켰기때문에 띄어져서 나옴, 문자열이기때문에 숫자와 다르게 ‘’ 해야 

let c= 2022;

console.log(a + b + c)

→ Hello World,2022

---

3)Boolean 불리언 

 

• 참과 거짓을 데이터로 표시 (참, 거짓이 값)  
• 오답노트 True, false에 “ “ 씌우면 안 됨. 

let myAnswer = true;

let myAnswer = false;

 

console.log(myAnswer)

 

→ true

console.log(false)  →불리언 fasle

console.log(“false”) —> 텍스트 false

 

다름 

 

---

4)Undefined & Null 

 

• 둘다 정의되지 않았다. 없다 

 

변수는 처음 선언된 경우 초기 값으로 undefined, 즉 정의되지 않은 값을 갖습니다.

 

선언된 변수가 특정한 값을 갖기 위해서는 대입연산자를 사용해 그 값을 대입해주어야 합니다.

let a;       →  let a= Hello 이런식으로 

console.log(a) // --> return undefined

변수는 선언 되었지만, 아직 값을 할당받지 못했기 때문에 함수의 결과가 undefined

** 더하기 연산을 수행하도록 되어있지만, 숫자가 아니기 때문에 NaN이 뜨는 것을 확인할 수 있습니다.

• (NaN : Not A Number의 줄임말)

 

• undefined:변수만 만들어놓고 값을 아직 하나도 안 만들었다. 

선언은 됐지만 아직 값/데이터 value가 할당되지 않은

•  null :값이 아예 없는. (정해지지 않은 거랑 다름) 

사용자가 '빈 값(blank)'으로 준 value 값 → 사용자가 준 거기에, 자바스크립트가 자동적으로 null 이란 값을 줄 수는 없다

 

let name; // undefined     아직 값/데이터 value가 할당되지 않은

name = null; // null       사용자가 '빈 값(blank)'으로 준 value 값 

console.log(typeof null);       // object ( '값이 없음(blank)'을 의미하는 '할당된' value이기 때문)

console.log(typeof undefined);  // undefined

 

 

---

2-2.참조형 데이터

1)Array    [    ]

• 값이 일렬로 모여있는 배열 
• 대괄호 사이에 각기 다른 데이터들이 들어가 있음, 그 데이터가 한데 모여있는 → ‘배열의 요소' 
• 일반적인 숫자 numbr, 문자열 string , 불리언타입의 true false 가 들어올 수도
• 대괄호가 있어야만! 

 

let studentsName=[ ‘Code Kim’, ‘Wecode Lee’] 

console.log{studentsName]

→ [‘Code Kim’, ‘Wecode Lee’] 

• 배열의 데이터인덱스(index) 이용

let cities = ["서울", "대전", "부산"]

 

cities[0]; // 서울

cities[1]; // 대전

cities[2]; // 부산

---

2)Object     {  } 

• array는 데이터를 나열하기만 하면 되는데, 객체는 특정한 데이터를 저장할 때, 앞에 key(=name)라고 해서 이름(=값 ‘Code Kim’)을 붙임  {name: ‘Code Kim’, isDeveloper: true} 
• { } 

let myObject={name: ‘Code Kim’, isDeveloper: true} 

console.log{myObject}

→  {name: ‘Code Kim’, isDeveloper: true}

---

3)Function 함수 

• 함수 이름을 붙이고, () 이름 붙여주고 {} 

---

3.String 문자열

String + 배열

아래와 같이 여러 string 값을 변수에 할당해봅니다. 여러 도시를 한 번에 나열하기 위해 city 라는 변수명은 고정하고 뒤에 붙는 숫자만 바꿔주었습니다.

const city0 = "서울";

const city1 = "대전";

const city2 = "대구";

const city3 = "부산";

const city4 = "광주";

const city5 = "제주도";

위에 할당한 도시와 관련된 변수를 다음과 같이 활용해 alert를 띄울 수 있습니다. 한국에 존재하는 모든 도시는 약 85개이므로 85번 새로운 도시 변수를 선언하고 할당하면 충분히 추가할 수 있겠네요!

alert(city1 + "에 오신 것을 환영합니다.");

alert(city2 + "에 오신 것을 환영합니다.");

모든 변수를 일일이 선언하게 되면 비효율적입니다.

이렇게 많은 데이터의 수를 하나의 변수로 관리할 때 필요한 자료구조가 바로 '배열' 입니다.

 

---

• 문자열 (한국, 중국, 일본어 다 됨 )

 

1. 변수 명을 let으로 선언하고, ‘’ or “ “에 값을 담는다

let greeting=’Hello’ 

console.log(greeting)

→ Hello 

 

여러개할때 구조 쓴느 법 이렇게 모아서 

let greeting=’Hello’

let greet=’world’ 

 

console.log(greeting) 

console.log(greet)

 

---

2. 띄어쓰기 공백도 다 포함됨 / 반영됨 

---

3. 문자열 두개 합치기(+)

• 합치는 기능 가능함  (더하기만 가능)
• 문자는 나누기 빼기★곱하기 안됨 

 

let name = "wecode";

namename

→ wecodewecde

 

방법: 더하기 연산자 +operator 

• const str은 let 과 같이 변수 선언할때 쓰는 

console.log(‘Hello’ + ‘   ‘ + ‘YJ’) → Hello    YJ (합쳐지고 뛰어진것도 반영)

let greeting=’Hello’

let greet=’world’ 

console.log(greeting +greet)   → HelloYJ (띄어쓰기 없음)

 

let greeting=’Hello’

let greet=’world’ 

console.log(greeting + ‘   ‘  + greet)   → HelloYJ (띄어쓰기 됨)

 

—> 변수에는 ‘’ or “ “ 안하는것 

console.log(22)  → 22       숫자 

console.log(‘22’) → 22      문자열

 

서로 다르다는 것! 

 

console.log( 2 + ‘2’) → 22   문자열이 됨 (number data + string data = string data ) 

 

console.log( 2 +2) → 4

---

4. 문자열 총 길이 .length

• 문자열 총 길이 구할 떄 쓰는 것 .length

 

const myString = ‘Hello’

console.log(myString.length)      변수니까 ‘’ or “” 없고

→ 5 

• 변수 없이 문자열만 해도 가능 

console.log(‘pepsi’.length)     문자열이니까 ‘ ‘ or “” 있어야 

 

• console찍을때 내가 어떤 변수를 찍고 있는지 알려주는게 좋음

console.log(“The length of pepsi is”, ‘pepsi’.length)      , 찍고 다른 거 쓰겠다고 했으니 

→ The length of pepsi is 5         숫자 5 

 

, 랑 더하기는 다른 것

console.log(“The length of pepsi is”+ ‘pepsi’.length)  

→ The length of pepsi is 5     숫자와 문자열이 합쳐서 둘다 문자열이 됨. 숫자 5가 문자열이 됨. (코딩에서 숫자 5가 색깔 문자와 똑같이 보임)

 

averageLength

console.log에서는 두 길이 값의 평균

 → console.log((변수1 +변수2) / 2)

---

5. toUpperCase 모두 대문자 

• 문자열 모두 대문자 만들기 

 

let name = "wecode";

name.toUpperCase() // "WECODE"

 

---

6. 문자열에서 텍스트 위치 

• 0부터 시작 

 

.indexOf >> 특정 텍스트의 포함 유무 및 위치 확인 

let name = "wecode";

 

name.indexOf('c') // 2

 name.indexOf('j') // -1

---

Replit exercise 

19. String

19-1. String 파헤치기!

앞서 쌍따옴표("") 혹은 홑따옴표('') 안에 텍스트가 들어가면 문자열(String) 임을 확인할 수 있었습니다.

둘 중에 어떤 것을 써야 하는지는 자신이 속한 그룹, 회사, 프로젝트 내에서 정한 규칙에 따라 달라지게 됩니다.

개발자는 각자 자신이 근무하는 회사의 모두 그렇게 코딩 컨벤션(코드 작성 가이드)을 체크하고 그 문화를 따를 필요가 있습니다.

코딩 컨벤션을 가장 잘 작성한 회사 중 좋은 예시로 airbnb를 들 수 있습니다.

다음의 링크를 타고 들어가 직접 확인해보세요!. 👉 에어비앤비 코딩컨벤션

const singleQuote = '홑따옴표로도 문자열이 표현이 됩니다';

const doubleQuote = "쌍따옴표로도 문자열이 표현이 됩니다";

---

19-2. 대소문자 바꾸기

String형에서 제공하는 기본 함수들 중 대표적으로, 대소문자를 변환해주는 함수가 있습니다.

• 👉 String 함수 참고자료

이런 함수는 언제 필요 할까요? 일단 아래의 결과를 console.log로 확인해 봅시다.

console.log('js' === 'js'); // true

console.log('Js' === 'js'); // false

결과에서 확인할 수 있듯이 String의 대소문자가 구분됩니다.

웹사이트에 검색기능이 있는 경우 Js 라고 검색 했을 때, J 가 정확히 대문자인 것만 찾아주는 것이 아니라, 대소문자 구분 없이 js 라는 단어가 포함된 모든 컨텐츠를 찾고 싶을 수가 있습니다.

아래와 같이 임의의 String을 작성하고 toUpperCase 와 toLowerCase 메서드를 호출하여 반환되는 값을 확인해 봅시다.

const lastName = 'Code Kim';

const upperLastName = lastName.toUpperCase();

const lowerLastName = lastName.toLowerCase();

 

console.log(lastName); // Code Kim

console.log(upperLastName); // CODE KIM

console.log(lowerLastName); // code kim

lastName이라는 변수에 String형의 값을 할당하면, lastName 변수는 String형의 변수가 됩니다.

따라서 lastName 은 String형이 제공하는 모든 메서드를 사용할 수 있게 됩니다.

toUpperCase 와 toLowerCase 함수는 String에서 제공하는 메서드 입니다.

그리고 console 에서 확인한 것과 같이, lastName에 toUpperCase 함수를 사용한다고 lastName 변수의 값 자체가 바뀌지는 않았습니다.

lastName 는 이전 값을 그대로 갖고 있습니다.

19-3. 문자 길이

배열의 길이를 length라는 속성으로 확인할 수 있었던 것과 같이, 문자인 String형도 동일한 방법으로 길이를 확인할 수 있습니다.

length 는 자주 사용하는 속성 중 하나 입니다.

예를 들어 회원가입 시 입력하는 이름, 휴대폰 번호 등을 올바르게 입력했는지 확인할 때 유용하게 활용할 수 있습니다.

다음은 휴대폰 번호(phoneNumber)가 11자리가 아니면 alert창을 보여주는 예시입니다.

if (phoneNumber.length !== 11) {

 alert("휴대폰 번호를 올바르게 입력해주세요!");

}

또다른 예시를 확인해보겠습니다.

const name = prompt("성함을 입력해주세요.");

 

if (name.length === 2) {

 alert("외자이시군요! 이름이 예쁘네요.");

} else if (name.length === 1) {

 alert("제대로 입력하셨나요?");

} else {

 alert("멋진 이름입니다.");

}

참고.

휴대폰 번호는 01012349876과 같이 항상 0으로 시작합니다.

아시다시피 0으로 시작하는 숫자 표현은 없습니다. (아이스크림 023개 주세요. 라고 하지는 않죠!)

그래서 휴대폰 번호는 숫자로 이루어져 있지만,

문자열로 관리해야 첫 숫자로 "0"을 사용할 수 있습니다.

아래의 결과가 어떤가요?

const phoneNumber = 01012349876;

 

console.log(phoneNumber);

console.log(phoneNumber.length);

이와 같이 phoneNumber 는 Number형이며, 앞의 0이 없이 뒷 숫자만 할당되었습니다.

또한, Number형에는 length 라는 속성이 존재하지 않습니다.

그렇기 때문에, 휴대폰 번호를 온전히 표시하고 length 속성을 이용하려면

아래와 같이 String형으로 저장해야합니다.

const phoneNumber = "01012349876";

 

console.log(phoneNumber);

console.log(phoneNumber.length);

---

19-4. 문자열 찾기

const info = "JavaScript는 프로그래밍 언어이다.";

info라는 변수에 "프로그래밍" 이라는 단어가 포함되어 있는지 알고 싶습니다.

indexOf 메서드는 특정 문자열이 포함되어있는지 확인하고,

만약 있다면 몇 번 째 순서에 해당 문자열이 있는지 알려 줍니다.

그리고 해당 문자열이 없다면 -1을 반환합니다.

 

이렇게 특정 문자열을 찾는 함수가 왜 필요 할까요?

일례로, 댓글에 욕설이 포함되면 달지 못하도록 차단할 때 사용할 수 있습니다.

차단할 단어 모음이 존재한다고 하고, 사용자가 댓글을 입력한 뒤 "댓글 달기"를 누를 때,

차단할 단어 모음 중에 하나라도 매치되면 댓글을 달지 못하도록 막을 수 있습니다.

const info = "JavaScript는 프로래밍 언어이다.";

const firstChar = info.indexOf("프로래밍");

 

console.log(info, firstChar);

 

if (firstChar !== -1) {

 info = info.slice(0, firstChar) + "프로그래밍" + info.slice(firstChar+4, info.length);

}

 

console.log(info);

위는 "프로래밍" 이라는 오타를 "프로그래밍" 이라고 바꾸어 주는 코드입니다.

코드를 한 줄 한 줄 설명하면,

1. info 문구에서 "프로래밍"이 시작되는 index 는 12입니다.
2. if (firstChar !== -1)
3. info.slice(0, firstChar)
4. info.slice(firstChar+4, info.length);