데이터 타입 - 얕은 복사 / 깊은 복사

이한결·2023년 1월 20일
0

부트 캠프

목록 보기
18/98
post-thumbnail
post-custom-banner

1월 20일 여정 12일차이다.

오늘의 Today I Learned

Problem

자바스크립트에서의 얕은 복사와 깊은 복사... 너무 어려웠다. 더 자세한 정보가 필요했다.

try

항해99에서 제공한 문서로는 부족했다. 결국 구글에 검색하여 여러자료를 찾아보기로 했다.

solve

일단 자바스크립트에는 원시값과 참조값이 존재한다고 한다.

원시값: 기본 자료형(단순한 데이터) => Number, String, Boolean, Null, Undefined

참조값: 여러 자료형으로 구성되는 메모리에 저장된 객체. => Object 등
참조값은 한마디로 변수에 저장된 메모리 공간 참조(위치 값)를 뜻한다.

그럼 깊은 복사부터 알아보자

원시값을 복사 할때 메모리에 공간을 할당하게 된다. 그래서 복사를 하여 수정해도 기존 원시값은 수정되지 않는다.

이것을 깊은 복사라고 한다.

const a = 'a';
let b = 'b';
 
b = 'c';
 
console.log(a); // 'a';
console.log(b); // 'c';
 
// 기존 값에 영향을 끼치지 않는다

그러나 반대로 참조값을 복사 할 때는 달라진다. 복사된 변수 혹은 객체가 저장된 메모리 참조를 가리키고 있지만 똑같은 참조를 가리키고 있다. 그래서 만약 객체를 수정하면 기존 변수에 값도 같이 수정된다. 이게 얕은 복사이다.

const a = {
  one: 1,
  two: 2,
};
let b = a;
 
b.one = 3;
 
console.log(a); // { one: 3, two: 2 } 출력
console.log(b); // { one: 3, two: 2 } 출력
 
// 기존 값에 영향을 끼친다.

knew

slice() 메소드는 얕은 복사의 대표적인 예이다. slice() 메소드를 사용할 때는 기존의 값을 copy하여 copy한 값을 slice() 사용해야 한다.

마지막으로

너무 복잡한 하루였다. 지금은 조금 이해 하기가 힘들더라도 꾸준히 복습해야 된다는 것을 느꼈다.

profile
평범한 삶을 위하여
post-custom-banner

0개의 댓글