CH2. 자료와 변수- 기본 자료형

02-1 기본 자료형

1. 문자열 자료형

1) 문자열 만들기

자바스크립트에서는 문자가 하나든 여러 개든 모두 문자열 자료형이라고 한다.

>'Hello World'
"Hello World" --> 콘솔 출력이 큰따옴표로 감싸져 있으면 문자열을 의미

>"Hello World"
"Hello World"

ㄴ문자열 만드는 방법은 2가지가 있는데 큰따옴표를 사용하는 방법과 작은따옴표를 사용하는 방법이다.

>"This is \"string\""
"This is "string""

>'This is \'string\''
"This is 'string'"

ㄴ따옴표를 문자 그대로 사용하고 싶다면 이스케이프 문자(\)를 사용하여 따옴표를 문자 그대로 출력할 수 있다.

>'동해물과 백두산이\n마르고 닳도록'
"동해물과 백두산이
마르고 닳도록"

>'이름\t나이\t지역'
"이름    나이    지역"

>"\\ \\ \\ \\"
"\ \ \ \"

ㄴ또 다른 기능을 하는 이스케이프 문자가 존재한다.

• \n: 줄바꿈
• \t: 탭
• \\: \ 그자체를 의미

2) 문자열 연산자

>"Hello" + "World"
"HelloWorld"

ㄴ문자열 연결 연산자(+)를 사용하면 문자열을 연결할 수 있다.

>"Hello"[0]
"H"

>"Hello"[2]
"l"

ㄴ 문자열 뒤에 []안에 위치를 나타내는 숫자인 인덱스를 입력하면 해당 위치의 문자를 선택할 수 있다.

3) 문자열 길이 구하기 

 >"안녕하세요".length
5

>"hello world".length
11

>"".length
0

ㄴ 문자열의 length 속성을 사용하면 문자열의 길이를 구할 수 있다.

 

2.  숫자 자료형

>273
273

>52.273
52.273

ㄴ자바스크립트는 소수점이 있는 숫자와 없는 숫자 모두 같은 자료형으로 인식한다.

연산자	설명
+	더하기 연산자
-	빼기 연산자
*	곱하기 연산자
/	나누기 연산자
%	나누기

> 5+3*2
11

> (5+3)*2
16

> 16/5
3.2

> parseInt(16/5) --> parseInt는 정수로 변환시켜준다. 따라서 몫을 구할 때 사용할 수 있다.
3 

> 16%5
1

 

3. 불 자료형

1) 불 만들기

불 자료형은 ture, false 두 가지이다.

두 대상을 비교할 수 있는 비교 연산자를 이용하여 불을 만들 수 있다.

연산자	설명
===	양쪽이 같다
!==	양쪽이 다르다
>	왼쪽이 더 크다
<	오른쪽이 더 크다
>=	왼쪽이 더 크거나 같다
<=	오른쪽이 더 크거나 같다

> 52 > 273
false
>'가방' > '하마'
false

 

2) 불 부정 연산자

> !true
false
> !false
true

ㄴ 논리 부정 연산자 ! 기호를 사용하면 참을 거짓으로 거짓을 참으로 바꾼다.

 

3) 불 논리합/ 논리곱 연산자

연산자	설명
&&	논리곱 연산자
||	논리합 연산자

 

&& 연산자				|| 연산자
좌변	우변	결과		좌변	우변	결과
true	true	true		true	true	true
true	false	false		true	false	true
false	true	false		false	true	true
false	false	false		false	false	false

 

4. 자료형 검사

> typeof('hello world')
"string"

> typeof(273)
"number"

>typeof(true)
"boolean"

>typeof 10 === 'number'
True

 

5. 좀 더 알아보기

1) 템플릿 문자열

 >console.log("273+52의 값은' + (273+52) + '입니다!") --> 과거의 표현식 삽입 방법
"273+52의 값은 325입니다!"

>console.log(`273+52의 값은 ${273+52}입니다!`) --> 템플릿 문자열 사용
"273+52의 값은 325입니다!"

ㄴ 템플릿 문자열은 백틱(`) 기호로 감싸고 문자열 내부에 ${} 기호를 사용하여 표현식을 넣으면 문자열 안에서 계산된다.

 

2) == / != 연산자와 === / !== 연산자

> 1=='1' --> 어떻게든 변환하면 값이 같아지므로 true
true

> 1==='1' --> 자료형이 다르므로 false
false

> ""==[] --> 빈 문자열은 false, 빈 배열 []도 false로 변환되므로 값이 같고 true
true

> ""===[] --> 자료형이 다르므로 false
false

ㄴ ==와 != 연산자는 '값이 같은지'를 비교하고 ===와 !==는 '값과 자료형이 같은지'를 비교한다.