JavaScript 문법 - array/object의 값을 수정하고 싶을때

Reference Type - 참조 타입

let data1 = [1,2,3];
let data2 = data1; // data2 == data1

console.log(data1 == data2)//true

자바스크립트에서 array와 object형으로 자료를 만들면, 그 자료들은 RAM이라는 가상공간에 저장되며,

array, object로 선언된 변수에는 자료를 가리키는 '메모리 주소'만 저장된다.

즉 위 코드에서

data2라는 변수에는 [1,2,3]을 가리키는 '메모리 주소'가 저장되며,

data1은 data2를 그대로 복사한 것이기 때문에 data2에 있는 메모리 주소가 data1에 그대로 복사된 것이다.

따라서 [1,2,3]이라는 값을 [2,3,3]으로 변경시키면 data1, data2 안에 저장되어있는 메모리 주소는 변하지 않기 때문에

data1, data2 모두 똑같이[2,3,3]이라는 값이 나오게 된다.

 

그렇다면 data1과 data2를 각각 독립적으로 다른 자료를 가리키게 할 수는 없을까?

spread operator(스프레드 연산자)

let data1 = [1,2,3];
let data2 = [...data1]; //data1 != data2

console.log(data1 == data2)// false

스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체를 개별 요소로 분리시킬 수 있다. 즉 참조가 아닌 '값'을 복사하게 되기 때문에, 다른 자료를 가리키게 할 수 있다.

따라서 위의 data1과 data2는 겉으로 보기에는 같은 값을 가리키고 있지만 사실 다른 값을 가리키고 있는 것이다.

예를 들어, data2의 자료를 [2,2,3]으로 바꾸면 data2는 [2,2,3]을 가리키게 되는 것이고, data1은 그대로 [1,2,3]을 가리키고 있는 것이다.