[중앙정보처리학원] JavaScript * 핵심 개념과 주요 문법

 

원시 자료형과 참조 자료형

Stack

 

머릿 속에 떠올려보자. 

1 칸 당 메모리를 가지고 있다고 상상을 해보자.

 

 

 

 

원시자료형

 

 

해당 값을 저장하면 ? 

 

 

이런 식으로 각 스택에 순서대로 저장 되는 것을 '원시 자료형' 이라 함.

JavaScript에서는 6개의 자료형(number, string, boolean, undefined, null)을 원시 자료형으로 구분함.

// 원시 자료형(primitive type): number, string, boolean, undefined, null
42, 'string', true, undefined, null

 

 

특징

• 원시 값을 갖는 변수를 다른 변수에 할당하면 원시 값 자체가 복사

let num = 20;
let copiedNum = num;

원시 자료형은 값 자체가 복사됨. 즉, 변수 num과 변수 copiedNum은 동일하게 20이라는 값.

• 원시 자료형은 변경 불가능한 값임.

let num = 20;
num = 30;

 

Stack 2칸을 사용하게 된다

메모리 내부에서는 30이라는 원시 값을 저장하기 위한 새로운 공간을 확보한 뒤, 그 공간에 num이라는 이름을 붙이고 30을 저장합니다.

• 계속 쌓이면 어떡함? Garbage collector 가 있다

 

 

 

 

 

 

참조 자료형

 

 

 

• 참조 자료형은 주소값을 복사함.
• 특별한 공간에 주소값이 저장되고 주소값이 변수에 저장함.JavaScript는 참조 자료형을 어떻게 저장할까요? JavaScript는 특별한 저장 공간에 참조 자료형을 저장한 후, 그 저장공간을 참조할 수 있는 주소값을 변수에 저장합니다. 이때 참조 자료형을 저장하는 특별한 저장 공간을 힙(heap)이라고 부르기도 합니다. 따라서 변수 arr에 해당하는 저장공간에는 주소값이 저장되어 있고, 그 주소값을 통해 참조 자료형에 접근할 수 있습니다. 이를 참조한다(refer)고 합니다.

let arr = [0, 1, 2, 3];

 

 

 

각각의 Strack에 주소값이 저장 되며 이 공간은 heap이라고도 부른다. 참조 자료형으로는 

['배열', '함수', '객체'] 가 있음. 깊은복사 해야함.

 

 

 

 

heap이라는 공간에는 이런 식으로 저장이 된다고 생각하면 됨. 그렇게 Stack과 이어지는 것임.
(변수 arr에 해당하는 저장공간에는 주소값이 저장되어 있고, 그 주소값을 통해 참조 자료형에 접근 할 수 있다.)

 

 

 

 

 

arr[3] = '3';
arr.push(4);
arr.shift();

console.log(arr); // [1, 2, '3', 4]

심지어 변경가능 heap에 주소값안에 정보 변경가능함.

원시 자료형의 경우 값의 크기가 거의 일정하기 때문에 새로운 공간을 확보하여 값을 복사하는 방법이 유용하지만, 크기가 일정하지 않은 참조 자료형의 경우 매번 값을 복사한다면 그만큼 효율성은 떨어질 수밖에 없습니다. 이런 이유로 참조 자료형은 변경이 가능하도록 설계되어 있습니다.

 

 

 

 

 

 

 

 

 

그런데

 

 

 

 

둘다

원본을 변경한다면?

// 원시 자료형이 참조된 변수를 다른 변수에 할당하기
let num = 20;
let copiedNum = num;

// 참조 자료형이 할당된 변수를 다른 변수에 할당하기
let arr = [0, 1, 2, 3];
let copiedArr = arr;

// 두 변수가 같은지 확인하기 - 1
console.log(num === copiedNum); // ?
console.log(arr === copiedArr); // ?

// 원본을 변경하기
num = 30;
arr.push(4);

// 두 변수가 같은지 확인하기 - 2
console.log(num === copiedNum); // ?
console.log(arr === copiedArr); // ?

// 이 두 변수의 현재 상태는?
console.log(copiedNum); // ?
console.log(copiedArr); // ?

원시자료형 상관 없음

참조자료형은 영향받음

원시 자료형은 원본(num)에 다른 값을 재할당해도 복사본(copiedNum)에 영향을 미치지 않습니다. 반면에 참조 자료형은 원본(arr)을 변경하면 복사본(copiedArr)도 영향을 받는 것을 확인할 수 있었습니다.

값 자체를 복사하는 원시 자료형과는 달리, 참조 자료형을 할당한 변수를 다른 변수에 할당할 경우 같은 주소를 참조하고 있기 때문입니다.