자료형
자료형(data type)이란 자바스크립트에서 사용할 수 있는 데이터의 종류를 의미합니다. 자바스크립트의 자료형은 기본 자료형과 참조 자료형으로 구분합니다.
기본 자료형으로는 문자, 숫자, 논리, undefined, null, Symbol 자료형이 있고, 참조 자료형에는 객체(object)가 있습니다.
기본 자료형 (Primitive Type)
기본 자료형은 값 자체를 저장하는 방식입니다.
| 자료형 | 설명 |
|---|---|
| string | 문자열 |
| number | 숫자 (정수, 실수 구분 없음) |
| boolean | 논리값 (true, false) |
| undefined | 값이 아직 정의되지 않음 |
| null | 명시적으로 비어있는 값 |
| symbol | 유일한 식별자 (ES6) |
문자열
자바스크립트에서 문자열은 "Hello" 또는 'Hello'처럼 큰따옴표 또는 작은따옴표로 감싸서 표현합니다.
문자열에 따옴표가 포함된 경우
문자열을 따옴표로 감쌀 때 다음과 같이 문자열 안에 따옴표가 포함되어 있으면 문자열을 정의할 때 조금 복잡해집니다.
let string1 = "문자열은 큰따옴표(")로 감싸면 됩니다."; // 따옴표의 짝이 맞지 않아 문법 오류 발생
let string2 = '문자열은 작음따옴표(')로 감싸면 됩니다.'; // 따옴표의 짝이 맞지 않아 문법 오류 발생이런 경우에는 작성하려는 문자열에 포함되지 않은 따옴표로 문자열을 감싸서 정의합니다.
문자열에 작음따옴표가 포함되어 있다면 큰따옴표로 감싸고, 큰따옴표가 포함되어 있다면 작은따옴표로 감쌉니다.
let string1 = '문자열은 큰따옴표(")로 감싸면 됩니다."';
let string2 = "문자열은 작음따옴표(')로 감싸면 됩니다.";문자열 연결 연산자
문자열 연결 연산자(+)는 우리가 알고 있는 덧셈 기호와 같습니다. 자바스크립트는 문자열과 문자열을 덧셈 기호로 연산하면 서로 연결되는 특성이 있습니다.
let string = '문자열' + "연결 연산자";
console.log(string);문자열 연결 연산자이스케이프 문자
이스케이프 문자는 웹 브라우저가 사용자 의도와 다르게 문자열을 해석할 때 사용합니다. 자바스크립트에서는 역슬래시(\)를 붙여 이스케이프 문자로 사용합니다. 예를 들어, 웹 브라우저는 문자열에 들어 있는 큰따옴표나 작은따옴표에 역슬래시를 붙이면 일반적인 따옴표로 인식합니다.
let string = '문자열은 큰따옴표(")나 작은따옴표(\')로 감싸면 됩니다.';문자 인식 외에도 이스케이프 문자를 사용해 다양한 기능을 표현할 수 있습니다. 자바스크립트에서 이스케이프 문자를 써서 표현할 수 있는 주요 기능은 다음과 같습니다.
| 사용법 | 설명 |
|---|---|
| \' | 작은따옴표 |
| \" | 큰따옴표 |
| \n | 줄 바꿈 |
| \t | 수평 탭 |
| \ | 역슬래시 |
템플릿 문자열
ES6에서 추가된 템플릿 문자열은 백틱(`)으로 문자열을 정의하는 방법입니다.
템플릿 문자열은 기존 문자열 정의 방식처럼 큰따옴표나 작은따옴표로 문자열을 정의하지 않기 때문에 문자열에 큰따옴표나 작은따옴표가 있어도 영향을 받지 않습니다.
let string = `문자열은 큰따옴표(")나 작은따옴표(')로 감싸면 됩니다.`;템플릿은 기존 문자열과는 다른 특징이 있습니다.
첫째, Enter를 눌렀을 때 줄 바꿈이 적용됩니다. 이스케이프 문자를 사용하지 않아도 됩니다.
let string = `문자열은 큰따옴표(")나
작은따옴표(')로 감싸면 됩니다.`;둘째, ${} 문법을 이용해 문자열에 변수 또는 식을 넣을 수 있습니다.
let dan = 3;
let gugu = 8;
let string = `${dan} 곱하기 ${gugu}은 ${dan * gugu}입니다.`;숫자형
자바스크립트는 정수와 실수를 구분하지 않고 전부 하나의 숫자 자료형(숫자형)으로 취급합니다. 예를 들어, 10이나 0.1이나 자바스크립트는 같은 숫자형입니다.
다만, 실수를 사용할 때는 주의해야 합니다. 자바스크립트는 실수를 부동 소수점 방식으로 표현하는데, 실수를 부동 소수점 방식으로 표현하면 실수 계산이 정확하지 않습니다 (IEEE 754 부동소수점 방식의 한계).
예시
let sum = 0.1 + 0.2;
console.log(sum);결과
0.30000000000000004논리형
논리 자료형(논리형)은 참 또는 거짓에 해당하는 논리 값인 true, false를 의미합니다. 논리형은 오직 true와 false 두 값만 있습니다.
논리형의 독특한 점은 논리적인 연산으로 구할 수 있다는 점입니다.
let boolean1 = 10 < 20;
let boolean2 = 10 > 20;
console.log(boolean1); // true
console.log(boolean2); // falseundefined
변수나 상수를 컴퓨터 메모리 공간에 선언하면 반드시 생성한 공간에 저장할 데이터를 할당해야 합니다. 할당하지 않을 경우 자바스크립트 내부적으로 변수와 상수 공간에 임시로 데이터를 할당하는데, 이때 할당되는 값이 undefined입니다.
자바스크립트의 undefined는 다른 자료형과는 다르게 사용자가 임의로 정하고 할당하는 자료형이 아닙니다.
변수는 선언만 하고 값을 할당하지 않으면 자바스크립트는 자동으로 undefined 값을 할당합니다.
let empty;
console.log(empty); // undefinednull
null 자료형은 null 값 하나만 있으며, 변수나 상수를 선언하고 의도적으로 선언한 공간을 비워둘 때 할당합니다.
null은 프로그래머가 의도적으로 “값이 없음”을 명시할 때 사용합니다.
let empty = null;
console.log(empty); // nullundefined는 자바스크립트 시스템에 의해 설정되고, null은 개발자가 직접 설정하는 비어 있음입니다.
참조 자료형 (Reference Type)
참조 자료형은 값이 아닌 주소(참조)를 저장하며, 대표적으로 객체(object)가 있습니다.
객체는 다음과 같은 하위 유형을 포함합니다.
- 배열 (Array)
- 객체 리터럴 (Object Literal)
- 함수 (Function)
객체
객체(object)는 자바스크립트의 핵심적인 자료형입니다. 앞에서 언급한 기본 자료형을 제외하고 자바스크립트에서 거의 모든 데이터와 자료구조는 객체라고 봐야 합니다.
객체 자료형에서 파생되는 자료형으로 배열, 객체 리터럴, 함수가 있습니다.
배열
배열(array)은 복수의 데이터를 정의할 수 있는 자료형입니다. 배열을 사용하면 하나의 자료형에 여러 개의 데이터를 정의할 수 있습니다 (여러 개의 값을 순서대로 저장하는 자료형).
let score = [80, 90, 70, 100];- 요소(element): 배열 안의 각각의 데이터
- 인덱스(index): 각 요소의 순서 (0부터 시작), 배열의 요소에 접근할 때 사용
객체 리터럴
객체 리터럴은 객체를 정의하는 가장 간단한 방법입니다. 객체 리터럴은 객체를 정의할 때 중괄호({})를 사용하며, 중괄호 안에는 키(key)와 값(value)의 한 쌍으로 이루어진 속성(property)이 들어갑니다.
구조
{
key1: value1,
key2: value2
}- key(속성명): 데이터를 설명하는 이름
- value(속성값): 실제 데이터
객체 리터럴은 배열처럼 여러 값을 하나로 묶을 수 있지만, 배열과는 다르게 값을 키로 구분합니다. 객체 리터럴은 키가 있기 때문에 각 값의 의미를 바로 파악할 수 있습니다.
let score = {
koreanScore: 80,
englishScore: 90,
mathScore: 70,
scienceScore: 100
};함수
함수는 특정 작업을 수행하는 코드 블록이며, 자바스크립트에서는 하나의 자료형(참조형)입니다.
함수도 변수처럼 다룰 수 있고, 실행 가능한 값으로 간주됩니다.
구조
function 함수이름(매개변수1, 매개변수2, ...) {
// 실행할 코드
return 반환값;
}- 함수 이름: 함수의 식별자 (익명 함수일 경우 생략 가능)
- 매개변수(Parameter): 함수 외부로부터 입력받는 값
- 코드 블록: 실행할 작업을 묶어 놓은 영역
- 반환값(Return): 함수가 실행된 결과로 돌려주는 값
예시
function greet(name) {
return `Hello, ${name}!`;
};
console.log(greet("JavaScript")); // Hello, JavaScript!함수도 "값"입니다.
함수는 변수에 할당할 수 있습니다. 이를 함수 표현식(function expression)이라고 부릅니다.
const greet = function(name) {
return `Hello, ${name}!`;
};
console.log(greet("JS")); // Hello, JS!- 함수는 변수에 저장할 수도 있고, 다른 함수에 인자로 넘기거나 반환할 수도 있습니다. 이처럼 함수는 값처럼 사용할 수 있는 참조형 데이터입니다.
