초보자를 위한 문자열, 숫자, 불린값 기초 개념
코딩을 하다 보면 데이터를 많이 다루게 됩니다.
그런데 이 데이터도 각각 종류가 있다는 사실, 알고 계셨나요?
자바스크립트에서는 데이터를 변수에 저장할 수 있는데,
그 데이터에는 자료형(Data Type) 이라는 성격이 있습니다.
오늘은 자바스크립트에서 가장 기본이 되는
3가지 자료형(문자형, 숫자형, 논리형) 을 쉬운 비유와 예제로 배워볼께요.
자료형이란?
자료형이란, 데이터의 종류를 말합니다.
변수에 어떤 종류의 값이 들어있는지를 알려주는 정보예요.
자바스크립트의 대표적인 자료형은 아래와 같습니다.
| 자료형 | 설명 | 예시코드 | 주의사항 |
| 문자형 (String) | 따옴표로 감싼 글자 | "Hello" '123' | 숫자도 따옴표 있으면 문자형 |
| 숫자형 (Number) | 연산 가능한 숫자 | 100 2.14 | Number("100") 은 문자형 숫자 |
| 논리형 (Boolean) | 참 / 거짓을 나타내는 값 | true false | 조건문 / 비교 결과로 자주 사용 |
| null | 일부러 "값 없음" 을 지정 | null | 값이 '없음'을 명시함 |
| undefined | 아직 값이 없는 상태 | undefined | 변수 선언만 했을 때 기본값 |
1. 문자형 데이터 (String)
문자형 데이터는 글자나 숫자를 따옴표로 감싼 것이예요.
큰 따옴표 (" ") 나 작은 따옴표 (' ') 둘 다 사용 가능합니다.
"100" 처럼 숫자처럼 보여도 따옴표가 있으면 이건 숫자가 아닌 글자예요.
이런 경우 문자형 숫자라고 합니다.
HTML 태그도 문자로 저장할 수 있어요.
따옴표로 감싼 태그 문자열은 실제 HTML처럼 출력될 수 있습니다.
2. 숫자형 데이터 (Number)
숫자형은 계산 가능한 숫자예요.
"500" 은 따옴표가 있으니 문자형이예요.
이렇게 하면 계산이 안되지만,
Number("500") 으로 넘버를 쓰면 진짜 숫자로 바뀝니다.
3. 논리형 데이터 (Boolean)
논리형은 오직 두 가지 값만 있어요.
- true : 참
- false : 거짓
주로 비교 연산이나 조건문에서 사용됩니다.
Boolean() 함수로 데이터의 참 / 거짓 확인하기
값이 없는 경우 (0, null, undefined, 비어있는 문자형) 에는
false 를 반환합니다.
값이 있는 경우는 대부분 true 입니다.
4. 값이 없는 상태의 자료형 (null, undefined 의 차이점)
| 구분 | 의미 | 예시 |
| null | 일부러 비워둔 값 | var a = null; |
| undefined | 변수는 선언됐지만 값이 없음 | var a; |
typeof 연산자 (자료형 확인 도구)
변수 안에 어떤 자료형이 들어있는지 알고 싶으면
typeof 를 사용하면 됩니다.
X-ray 처럼 변수 안을 들여다 볼 수 있는 도구입니다.
복습 퀴즈
1. "123" 은 숫자형일까요, 문자형일까요?
2. Boolean(0) 는 어떤 값을 반환할까요?
3. 숫자처럼 생긴 문자 "500" 을 진짜 숫자로 바꾸는 방법은?
4. Boolean(" ") 의 결과는?
5. null 과 undefined 의 차이를 설명해보세요.
6. typeof true 는 어떤 결과를 출력할까요?
마무리하며
오늘은 변수에 들어갈 수 있는 다양한 자료형을 배워봤어요.
자바스크립트를 쓸 때 데이터의 성격을 이해하고 있어야
오류 없이, 원하는 결과를 만들 수 있습니다.
다음 편에서는 연산자 (+, -, == 등) 을 배워볼 거예요.
이 연산자로 숫자와 문자를 가지고 계산하거나
비교하는 방법을 알려드릴께요.