들어가며
자바스크립트는 동적으로 타입을 결정하는 언어로, 변수를 선언할 때 타입을 명시하지 않습니다. 이러한 특성 때문에 자바스크립트는 원시타입과 참조타입 두 가지 종류의 데이터 타입을 제공합니다. 원시타입은 단일 값을 나타내며 변수에는 해당 값을 직접 저장합니다. 반면, 참조타입은 여러 개의 값을 포함하는 객체나 배열 등을 나타내며 변수에는 해당 값의 메모리 주소를 저장합니다. 이번 글에서는 자바스크립트의 원시타입과 참조타입에 대해 자세히 살펴보겠습니다.
원시타입, Primitive Type
원시타입에는 다음과 같은 6가지 종류가 있습니다.
1. 숫자(number): 정수, 부동소수점 숫자, NaN(Not a Number), Infinity 등을 나타냅니다.
2. 문자열(string): 문자열을 나타냅니다.
3. 불리언(boolean): true 또는 false 값을 나타냅니다.
4. null: 값이 없음을 나타냅니다.
5. undefined: 값이 할당되지 않음을 나타냅니다.
6. 심볼(symbol): ES6에서 추가된 데이터 타입으로, 객체 속성의 키로 사용됩니다.
원시타입의 값은 변수에 직접 저장되고, 값이 복사될 때 변수와 함께 복사됩니다. 이러한 특성 때문에 두 변수가 독립적인 값을 가지게 됩니다.
let a = 10;
let b = a;
a = 20;
console.log(a); // 20
console.log(b); // 10
위 예제에서 변수 a에 값을 할당한 후 변수 b에 a 값을 할당합니다. 그러나 a 값을 변경하더라도 b 값은 변경되지 않습니다. 이는 변수 a와 b가 각각의 값을 가지고 있기 때문입니다.
참조타입, Reference Type
참조타입은 객체(object)와 배열(array), 함수(function) 등을 포함합니다. 참조타입의 값은 객체나 배열이 저장된 메모리 주소를 가리키는 포인터입니다. 변수에 할당된 값은 메모리 주소이며, 이 주소를 통해 객체나 배열에 접근할 수 있습니다.
let person = { name: 'Joon', age: 30 };
let anotherPerson = person;
위 예제에서 객체 person을 생성하고, 이 객체를 anotherPerson 변수에 할당합니다. 이때 anotherPerson 변수에는 person 객체의 메모리 주소가 저장됩니다.
anotherPerson.age = 25;
console.log(person.age); // 25
여기서 anotherPerson 변수의 age 속성 값을 변경하면, person 객체의 age 속성 값도 함께 변경됩니다. 이는 person과 anotherPerson 변수가 같은 객체를 가리키기 때문입니다.
값은 변수에 직접 저장되지 않고, 메모리의 힙(heap)에 저장됩니다. 따라서 참조타입의 값은 변수와 함께 복사되지 않으며, 변수가 참조하는 객체나 배열이 변경되면 변수의 값도 변경됩니다.
정리
원시타입 | 참조타입 | |
값 | 단일 값 | 여러 개의 값으로 이루어진 객체나 배열 등 |
할당 | 변수에 직접 값이 저장됨 | 변수에는 객체나 배열의 메모리 주소가 저장됨 |
크기 | 고정된 크기 | 동적으로 할당되는 크기 |
비교 | 값 자체를 비교 | 참조하는 메모리 주소를 비교 |
복사 | 값이 복사됨 | 참조하는 메모리 주소가 복사됨 |
소멸 | 변수가 소멸되면 함께 소멸 | 가비지 수집기에 의해 자동 소멸됨 |
종류 | 숫자, 문자열, 불리언 등 | 객체, 배열, 함수 등 |
마치며
자바스크립트의 원시타입과 참조타입은 각각의 특성 때문에 다른 방식으로 메모리를 관리하고 값을 다룹니다. 이러한 차이점을 이해하고 적절한 방식으로 변수를 사용하는 것은 자바스크립트 개발에서 중요한 부분입니다. 오늘 다룬 내용을 토대로, 자바스크립트에서 변수와 데이터 타입을 다룰 때에는 항상 각각의 특성을 고려하여 적절한 방식으로 변수를 선언하고 값을 할당하는 것이 좋습니다.
'PROGRAMMING > Javascript & Typescript' 카테고리의 다른 글
[Javacscript] Reactive X 기본편 ( feat. RxJS ) (36) | 2024.01.13 |
---|---|
[Javascript] null vs undefined (37) | 2023.04.02 |
[Javascript] 스택과 큐 직접 구현하기 (feat. 자료구조, ES6 Class, Node.js) (50) | 2023.03.29 |
[Javascript] 자바스크립트 물음표(?) 2개 / 느낌표(!) 2개 / 물결(~) 2개 연산자(feat.예시코드) (33) | 2023.03.07 |
[Typescript] 타입스크립트, 정의 | 특징 | 비교 | 장단점 | 설치방법 | 문법 (feat.mac / window) (26) | 2023.03.03 |