깊은복사 , 얕은복사

자바스크립트 공부하면서 정말 어렵다고 느끼는 개념인거 같아서 .. 한번더 복습하는김에 글로 남겨서 나중에 햇갈릴때도 볼라고

블로그에 기입해본다

 

원시값 복사

원시값을 저장한 변수는 실제 데이터값이 저장되는데, 변수(age1)의 값을 변경해도 age 의 값은 변경되지 않습니다.
그이유는 원시값은 읽기 전용으로 변경 불가능한 값이며 원시 값을 할당한 변수는 원시 값 자체를 값으로 갖는다.

let age = 12;
let age1 = age;  // 12

age1 = 22;

console.log(age);  // 12
console.log(age1); // 22

참조란

객체를 담은 변수를 다시 다른 변수에 대입하면 참조입니다.

let a = [[], "hello", {}]
let b = a 

참조는 a , b 변수는 서로 다른 메모리 주소를 가지고 있지만 참조값은 서로 같기 때문에 한쪽을 바꾸게 되면 다른 한쪽도 바뀌어버린다.

let a = [[], "hello", {}]
let b = a 

b[1] = "hi"
a[1] = "hi"

서로 참조값을 공유하는걸 원치 않을때 얕은복사를 사용하게 된다

let a = [[], "hello", {}]
let b = [...a] // 스프레드 문법이라고 하며 원본배열은 바꾸지 않고 새로운 배열만 바꿀수 있습니다.

b[1] = "hi"
a[1] = "hello"

하지만 얕은복사에 문제점이 존재하는데

let a = [[], "hello", {}]
let b = [...a]

b[0].push(1)을 하게 되면 a[0] 도 따라서 값이 바뀌어 버린다.

왜그러냐면 얕은복사를 하게 되면 0번째 인덱스와 2번째 인덱스는 참조이기때문에 두 변수가 같은곳을 참조하고 있어서 같이 서로 공유하게 된다, 그러면 왜 1번째 인덱스는 바뀌지 않느냐 하면 2번째 인덱스는 원시값은 참조가 없기때문에 복사가 되지 않는것입니다.
따라서 배열을 얕은복사한다고 하였을때 배열의 케이스 [] 는 얕은복사가 되지만 안에 있는 객체는 참조가 되기때문에 서로 값을 공유합니다, 그럼 안에 있는 객체도 참조하고 싶지 않다면? 그때 깊은복사를 하는것입니다.
깊은복사를 하는 가장 쉬운 코드를 입력해보자

let c = Json.parse(Json.stringify(a)) 를 하는것입니다, 
이렇게 하면 작성하게 되면 
c[0].push(1)을 하여도 a[0]은 그대로 빈배열을 나타냅니다.

봐도봐도 정말 잘 모르겠고.. 계속해서 복습하면서 이해할라고 노력해야겠다.