[mjt] 자바스크립트의 자료형(Data type)에 대해 알아보자.
자바스크립트의 자료형(Data type)에 대해 알아보자.
자바스크립트에는 8가지 기본 자료형이 있다. 자료형이란 프로그래밍 언어로 조작할 수 있는 값의 유형을 말하며, 7개의 원시타입, 1개의 참조타입으로 나뉜다.
자료형의 종류
-
원시 타입- Number(숫자형): 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용함 (정수의 한계는 ±253)
- BigInt: 길이 제약 없이 정수를 나타낼 수 있음
- String(문자형): 빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용함
- Boolean(불린형): true, false를 나타낼 때 사용함
- null: null 값만을 위한 독립 자료형임. (null은 알 수 없는 값을 나타냄)
- undefined: undefined 값만을 위한 독립 자료형임. (undefined는 할당되지 않은 값을 나타냄)
- Symbol(심볼형): 객체의 고유 식별자를 만들 때 사용함
-
참조 타입- Object(객체형): 복잡한 데이터 구조를 표현할 때 사용함
원시, 참조 자료형의 차이
원시 자료형은 값 자체를 복사하지만, 참조 자료형은 메모리 주소를 참조한다는 차이를 이해해야한다.
2-1) 원시 자료형의 예시
-
a는 값10을 저장하고 있음 -
b = a는a의 값을 복사하여b에 저장함 -
b의 값을 변경해도a의 값은 영향을 받지 않음 - 영향을 받지 않는 이유는 원시 자료형이 값 자체를 복사하기 때문이다.
let a = 10;
let b = a; // a값을 b에 저장
b = 20;
console.log(a); // 10
console.log(b); // 20
2-2) 참조 자료형의 예시
-
obj1은 객체의 메모리 주소를 참조한다. -
obj2 = obj1은obj1의 주소값을obj2에 복사한다. - 따라서
obj2를 통해 객체를 수정하면obj1도 동일한 객체를 참조하기 때문에 영향을 받는다. - 영향을 받는 이유는 자료형이 메모리 주소를 참조하기 때문입니다.
2-3) 참조 자료형은 그럼 어떻게 복사해?
참조 자료형의 복사 문제를 해결하기 위해 얕은 복사와 깊은 복사 방법을 사용하면 된다. 이는 이전에 JavaScript의 얕은 복사, 깊은 복사 글을 작성했었는데, 요약하자면 아래와 같다.
-
얕은 복사는 1차 속성만을 복사한다. 즉, 중첩된 객체는 배열은 여전히 원본 객체와 참조를 공유함 (Spread 연산자) -
깊은 복사는 객체의 모든 계층을 재귀적으로 복사하여 완전히 새로운 객체를 생성한다. 중첩된 객체도 독립저긍로 복사되기 때문에 원본 객체와 완전히 분리된다. (JSON 방식)
심볼 타입을 본 적이 있음?
솔직히 심볼타입은 한번도 못본 것 같다. 사용법은 아래와 같다.
const id = Symbol("id"); // 고유한 심볼 생성
const user = {
name: "rarrit",
[id]: 1234, // 심볼을 프로퍼티 키로 사용
};
console.log(user[id]); // 1234
console.log(user); // { name: "rarrit" }
Symbol은 항상 고유하므로, 다른 코드나 라이브러리에서 같은 키를 사용해도 충돌하지 않는다. 그런데, 심볼을 잘 안쓰는 이유는 무엇인지 알아보자면 아래와 같다.
- 대체 기능의 존재: 대부분의 경우, 심볼 대신 문자열이나 변수로 해결 가능함
- 가독성 문제: 심볼은 익숙하지 않은 개발자에게 이해하기 어렵고, 디버깅 시 문자열처럼 확인이 쉽지 않음
못본 이유가 있다.
회고
자바스크립트의 자료형을 다시 한번 복습해보면서, 얕은 복사와 깊은 복사까지 다시 공부하게 되었다. 참조 타입 자료형을 사용할 때에 불변성에 따라 잘 사용하도록 해야겠다.