[JavaScript] 기본형(Primitive)과 참조형(Reference) 데이터 타입

Moon·2024년 12월 4일

JavaScript

JavaScript | 기초

목록 보기

46/48

자바스크립트에서 데이터를 다룰 때, 기본형(Primitive Type)과 참조형(Reference Type)으로 나뉜다.

기본형은 값 자체를 변수에 할당하고, 참조형은 값의 주소를 변수에 할당한다.

이번 글에서는 기본형과 참조형의 차이점과 동작 원리를 코드 예제를 통해 살펴본다.

기본형(Primitive Type)

기본형 데이터 타입에는 다음이 포함된다:

숫자(Number)
문자열(String)
불리언(Boolean)
null
undefined

기본형 데이터는 변수에 값 자체가 저장된다. 값을 복사하거나 변경하더라도 서로 독립적으로 동작한다.

예제: 기본형의 동작 원리

let x = 3; // 변수 x에 숫자 3 할당
let y = x; // 변수 y에 x의 값을 복사
console.log(x); // 출력: 3
console.log(y); // 출력: 3

// y의 값을 변경
y = 5;
console.log(x); // 출력: 3 (x는 영향을 받지 않음)
console.log(y); // 출력: 5

설명

x에 3을 할당하면, 변수 x에 숫자 3이 저장된다.
y = x를 수행하면, 변수 x의 값 3이 y로 복사된다.
이후 y의 값을 변경하더라도, x와 y는 독립적으로 동작하므로 서로 영향을 주지 않는다.

참조형(Reference Type)

참조형 데이터 타입에는 다음이 포함된다:

객체(Object)
배열(Array)
함수(Function)

참조형 데이터는 변수에 값 자체가 아닌 값의 주소가 저장된다.

이로 인해 같은 객체를 참조하는 변수를 통해 객체의 내용을 변경하면, 다른 변수에도 동일하게 영향을 미친다.

예제: 참조형의 동작 원리

let x = { name: "Alice" }; // 객체를 변수 x에 할당
let y = x; // x의 주소 값을 y에 복사
console.log(x); // 출력: { name: "Alice" }
console.log(y); // 출력: { name: "Alice" }

// y에 새로운 프로퍼티 추가
y.age = 25;
console.log(x); // 출력: { name: "Alice", age: 25 }
console.log(y); // 출력: { name: "Alice", age: 25 }

설명

객체 { name: "Alice" }는 메모리 어딘가에 저장되고, 변수 x에는 그 주소가 할당된다.
y = x를 수행하면, x의 주소 값이 y로 복사된다. 결과적으로 x와 y는 같은 객체를 참조하게 된다.
y.age = 25로 y를 수정하면, x도 영향을 받아 객체 { name: "Alice", age: 25 }가 된다.

기본형 vs 참조형 비교

특징	기본형(Primitive)	참조형(Reference)
데이터 저장 방식	값 자체를 저장	값의 주소를 저장
값 복사 방식	값을 복사하여 독립적으로 동작	주소를 복사하여 동일한 객체를 참조
값 변경 시	서로 독립적으로 동작	한쪽을 변경하면 다른 쪽도 영향을 받음

코드로 이해하기

기본형 동작

let a = 10;
let b = a;
b = 20;

console.log(a); // 출력: 10
console.log(b); // 출력: 20

참조형 동작

let obj1 = { name: "Bob" };
let obj2 = obj1;

obj2.age = 30;
console.log(obj1); // 출력: { name: "Bob", age: 30 }
console.log(obj2); // 출력: { name: "Bob", age: 30 }