프로그래밍에서 프로그램이 처리할 수 있는 모든 것을 자료(data)라고 부르며, 자료 형태에 따라 나눠놓은 것을 자료형(data type)이라고 한다.
자바스크립트는 다양한 종류의 자료형을 제공한다.
가장 기본적이면서도 많이 사용하는 자료형은
1. 숫자
2. 문자열
3. 불
문자열 자료형
alert()함수 또는 console.log() 메소드의 매개변수에 들어가는 "Hello World"와 같은 문자들의 집합을 문자열이라고 한다. 자바스크립트에서는 문자가 하나든 여러개든 모두 문자열 자료형이라고 한다.
자바스크립트는 문자열을 생성할 때, 큰따옴표를 사용하거나 작은따옴표를 사용하여 생성한다. 예외적으로 문자열 안에 다옴표를 사용해야 한다면 문자열 내외부에 서로 다른 종류의 따옴표를 사용하면 된다.
문자열 연산자
문자열 사이에 덧셈 기호(+)를 사용하면 문자열을 연결할 수 있다. 이를 문자열 연결 연산자라고 부른다.
문자열 내부의 문자 하나를 선택할 떄는 문자 선택 연산자를 사용한다.
문자열[숫자]이때 위치를 나타내는 숫자를 인덱스라고 부른다. 인덱스는 0부터 센다.
문자열 길이 구하기
문자열 내부의 문자 개수를 문자열 길이라고 표현한다. 문자열 길이를 구할 때는 length 속성을 사용한다. 문자열 뒤에 온점(.)을 찍고 length라고 입력해주면 된다.
숫자 자료형
숫자 연산자
숫자 자료형을 사용하면 다음 표의 숫자 연산자로 기본적인 사칙 연산을 할 수 있다.
| 연산자 | 설명 | 연산자 | 설명 |
|---|---|---|---|
| + | 더하기 연산자 | * | 곱하기 연산자 |
| - | 빼기 연산자 | / | 나누기 연산자 |
숫자 연산자는 일반적인 사칙연산의 우선순위를 따른다.
이외에 나머지 연산자도 있는데
| 연산자 | 설명 |
|---|---|
| % | 나머지 연산자 |
나머지 연산자는 좌변을 우변으로 나눈 나머지를 출력하는 연산자이다.
불 자료형
자바스크립트에서 참과 거짓 값을 표현할 때 불 자료형을 사용한다. 불 자료형은 true와 false로 두가지이다. 불은 단순하게 true와 false를 입력하여 만들 수 있다.
또한 두 대상을 비교할 수 있는 비교 연산자를 사용해도 불을 만들 수 있다. 비교 연산자는 다음과 같다.
| 연산자 | 설명 |
|---|---|
| === | 양쪽이 같다. |
| !== | 양쪽이 다르다. |
| > | 왼쪽이 더 크다. |
| < | 오른쪽이 더 크다. |
| >= | 왼쪽이 더 크거나 같다. |
| <= | 오른쪽이 더 크거나 같다. |
불 자료형은 보통 이러한 에시에 사용된다.
if(불 표현식) {
불 표현식이 참일 때 실행할 문장
}조건문 괄호 안의 불 표현식이 참이면 중괄호 속 문장을 실행하고, 거짓이면 중괄호 속 문장을 무시한다.
불 부정 연산자
문자열과 숫자에 연산자를 적용할 수 있는 것처럼 불에도 연산자를 적용할 수 있다. 불 부정 연산자에서 논리 부정 연산자는 ! 기호를 사용하면 참을 거짓으로, 거짓을 참으로 바꾼다.
> !true
flase
> !false
true불 논리합/논리곱 연산자
| 연산자 | 설명 |
|---|---|
| && | 논리곱 연산자(그리고, and) |
| || | 논리합 연산자(이거나, or) |
&&연산자는 양쪽 변의 값이 모두 true일 때 true를 결과로 낸다. 이외에는 모두 false를 반환한다. 반면 ||연산자는 양쪽 변의 값 중 하나만 true여도 true를 결과로 반환한다.
더 알아보기1 템플릿 문자열
과거에 자바스크립트 문자열 내부에 표현식을 삽입할 때 다음과 같이 문자열 연결 연살자(+)를 사용해야 했다.
console.log('표현식 273 + 52의 값은' + (273 + 52) + '입니다...!')
> 표현식 273 + 52의 값은 325입니다...!문제가 있는 것은 아니지만, 표현식을 많이 결합하면 코드가 복잡해진다. 자바스크립트에는 템플릿 문자열이라는 기능이 추가되어 이러한 코드를 간단하게 작성할 수 있게 되었다.
템플릿 문자열은 백틱() 기호로 감싸 만든다. 문자열 내부에 ${...}`기호를 사용하여 표현식을 넣으면 표현식이 문자열 안에서 계산된다.
console.log(`표현식 273 + 52의 값은 ${273 + 52}입니다...!`)
> 표현식 273 + 52의 값은 325입니다...!상수와 변수
상수는 '항상 같은수'라는 의미로 값에 이름을 한 번 붙이면 수정할 수 없다. 반면 변수는 '변할 수 있는 수'로 값을 수정할 수 있다.
상수를 만드는 과정을 선언이라고 표현하고 const 키워드로 다음과 같이 선언한다.
const 이름 = 값상수
상수를 선언한 뒤에는 상수 이름을 사용하여 자료를 활용할 수 있다.
특정한 이름의 상수는 한 파일에서 한 번만 선언할 수 있다. 만약 같은 이름으로 상수를 한 번 더 선언하면 다음과 같은 오류가 발생한다.
Uncaught SyntaxError: Identifier 'name' has already been declared상수는 한 번만 선언할 수 있으므로 선언할 때 반드시 값을 함께 지정해줘야 한다. 상수를 선언할 때 값을 지정해주지 않는다면 다음과 같은 오류가 발생한다.
const pi
> Uncaught SyntaxError: Missing initializer in const declaration한 번 선언된 상수의 자료는 변경할 수 없다.
변수
변수를 만들 때는 let 키워드를 사용한다.
let 이름 = 값마찬가지로 변수를 선언하면 뒤에 활용할 수 있다. 기본적인 사용 방법은 상수와 같다.
변수의 값을 변경할 때는 변수 이름 뒤에 = 기호를 입력하고 값을 넣어주면 된다.
변수 = 값변수에 적용할 수 있는 연산자
복합 대입 연산자
대입 연산자와 다른 연산자를 함께 사용하는 연산자이다.
| 복합 대입 연산자 | 설명 | 사용 에 | 의미 |
|---|---|---|---|
| += | 기존 변수의 값에 값을 더한다. | a+=1 | a=a+1 |
| -= | 기존 변수의 값에 값을 뺀다. | a-=1 | a=a-1 |
| *= | 기존 변수의 값에 값을 곱한다. | a+=1 | a=a*1 |
| /= | 기존 변수의 값에 값을 나눈다. | a/=1 | a=a/1 |
| %= | 기존 변수의 값에 나머지를 구한다. | a%=1 | a=a%1 |
예시)
let value = 10;
>undefined
value += 10
>20
value
>20증감 연산자
| 증감 연산자 | 설명 |
|---|---|
| 변수++ | 기존의 변수 값에 1을 더한다. |
| ++변수 | 기존의 변수 값에 1을 더한다. |
| 변수-- | 기존의 변수 값에 1을 뺀다. |
| --변수 | 기존의 변수 값에 1을 뺀다. |
Undefined 자료형
상수와 변수를 사용하면 undefined 자료형을 확인할 수 있다. 어떠한 경우에 undefined 자료형이 나오는지 살펴보자.
상수와 변수로 선언하지 않은 식별자
값이 없는 변수
자료형 변환
숫자 자료형으로 변환하기
Number(자료)Number("$273")
> NaN //값은 숫자로 나타낼 수 없지만
typeof(Number("$273"))
> "number" //자료형은 숫자가 맞다.불을 숫자로 변환하면 다음과 같이 된다.
Number(true)
> 1
Number(false)
> 0문자열 자료형으로 변환하기
String(자료)String(52.273) //숫자 자료형이 문자열 자료형으로 변환
> "52.273"
String(true) //불 자료형이 문자열 자료형으로 변환
> "true"
String(false)
> "false"불 자료형으로 변환하기
Boolean(자료)대부분의 자료는 불로 변환했을 때 true로 변환된다. 다만 0, NaN, '...' 혹은 ""(빈 문자열), null, undefined라는 5개의 자료형은 false로 변환된다.
- 0
- NaN
- ""
- null
- undefined
논리 부정 연산자를 사용해 자료형 변환하기
!!273
> true
!!0
> false
!!'안녕하세요'
> true
!!''
> false확인문제
사용자로부터 숫자를 입력받아 cm를 inch 단위로 변환하여 출력하는 프로그램을 만들어보세요.
//숫자를 입력받는 부분
const input = prompt('몇 inch입니까?')
//입력을 숫자로 변경하고 inch단위로 변경
const inch = Number(input);
const cm = inch * 2.54
//출력
alert(`${inch}inch는 ${cm}입니다.`)