[JavaScript] 원시 자료형과 참조 자료형

FMA·2024년 3월 30일

HTML/CSS/JS

목록 보기
6/9

1. 원시 자료형 vs 참조 자료형

원시 자료형(primitive data type) : 고정된 저장 공간을 차지하는 데이터

  • string, number, bigint, boolean, undefined, symbol, (null)
  • 할당될 때 변수에 값(value) 자체가 담김
  • 데이터를 복사한 뒤 변경해도 원래의 데이터에 영향이 가지 않음
let a = 1;
let b = a;
b = 2;
a; //1

참조 자료형(reference data type) : 대량의 데이터를 다루기 적합

  • 배열(array), 객체(object), 함수(function)
  • 할당될 때 보관함의 주소(reference)가 담김
  • 데이터를 복사한 뒤 변경하면 원래의 데이터에 영향이 감
let e = [10,20]let f = e;
f[0] = 50;
e;//[50,20]

2. 원시 자료형

원시 자료형의 변수에는 하나의 데이터만 담긴다.

  • 값 자체에 대한 변경이 불가능하지만, 변수에 다른 데이터를 할당할수는 있다.
let word = "hello world!"
word = "hello dyract!"
// word라는 변수에 >>재할당<<을 하여 변수에 담긴 내용을 변경할 수 있음

const num1 = 123;
num1 = 123456789; // 에러 발생
// const 키워드로 선언하면 재할당은 불가

3. 참조 자료형

참조 자료형은 데이터가 위치한 곳(메모리상 주소)를 가리키는 주소가 변수에 저장된다.

데이터 보관함은 동적(dynamic)으로 변하며, heap이라고 부른다.

  • 대량의 데이터를 관리하는 경우에는 고정된 데이터 공간을 사용하는 것이 비효율적이기 때문.

console.log('dyract' === 'dyract'); //true
console.log(3.14 === 3.14); //true
console.log([1,2,3] === [1,2,3]); //false, 주소값이 같은지를 확인하기 때문
console.log({ foo: 'bar' } === { foo: 'bar' }) //false, 주소값이 같은지를 확인하기 때문

*함수로 인자를 전달할 때

let score = 80;
function doStuff(value) {
  value = 90;
}

doStuff(score)

함수 doStuff에 score의 값을 인자로 전달하여 실행하면 매개변수 value에 score의 값 80이 전달되고, vaule에 90이 할당된다. 다만 score의 값 80은 주소값이 아닌 값 자체를 복사해서 전달하기 때문에 함수에서 어떤 일이 발생하건 관계없이 score는 초기에 할당된 값 80이 그대로 유지된다.

let player = { score: 3 };
function doStuff(obj) { 
  obj.score = 2;
}

doStuff(player); //play.score : 2

함수가 실행되면 매개변수 obj에 변수 player의 값이 할당되며, 이것은 { score : 3 }의 주소값이다. obj.score에 2를 할당하면 obj와 plauyer은 같은 주소값을 가지고 있기 때문에 player.score도 2가 된다.

0개의 댓글