[JS] 자바스크립트 선언과 할당 - 참조형

Chipmunk_jeong·2021년 8월 2일
0

TIL

목록 보기
54/62
post-thumbnail

해당 블로깅은 인프런의 강의를 들으며 공부한 내용을 정리한 글입니다.
ES5 기준 핵심 내용을 공부하면서 작성하는 블로깅

자바스크립트 선언과 할당 - 기본형

Reference Type


앞에서 기본형타입의 데이터가 선언및 할당이 되었을때 일어나는 일을 살펴보았다. 그럼 이제 참조형타입의 데이터가 어떻게 되는지 원리를 알아보자.

const obj = { a: 10, b:20 };

하나의 객체를 선언하고 할당하였다면,

1. obj라는 이름을 가진 1004번메모리를 생성하고 값은 3001번 메모리에 생성한다.
2. 3001번메모리에 값을 생성하려고 보니 데이터가 한개가 아니다(객체)
그래서 5111번부터 여러개의 메모리주소를 할당하고(필요만큼) 그 주소값을 3001번메모리가 가진다.
3. 그럼 5111번에는 a라는 이름을가진 공간이, 5112번에는 b라는 이름을 가진 공간이 생성된다.
4. 그리고 각각 5111번과 5112번은 10과 20이라는 데이터를 저장하기위해 또 다른 메모리에 값을 저장한 뒤 메모리주소를 가져온다.(값이 저장된 메모리가 3003, 3004)

객체의 복사

자 그럼 기본형의 복사와 객체의 복사는 다른점이 존재하는데,
그것의 원리를 알아보자.

const obj = {a : 10, b: 20};
const copytObj = obj;

위의 코드가 선언되고 실행된다면,
1004번에서 바라보는 @3001의 메모리를 똑같이 바라보게된다.
그럼 이제 copyObj의 a값을 30으로 변경하게 된다면

  1. 우선 copyObj가 바라보는 @3001로 찾아간다.
  2. @3001에는 @5111부터 여러개의 주소를 담고있기에 해당 주소로 찾아간다.
  3. @5111에서 a를 찾았고 원래 a의 값인 10@3003에 저장되어있는 상태 그럼 새로운 값 30을 할당하기위해서는 @3005라는 새로운 메모리에 30을 할당한 뒤 @5111의 값에는 @3005의 메모리 주소가 들어간다.
    또한 @3003의주소에 있는 10은 더이상 도달불가능 상태임으로 가비지 컬렉션이 해당 주소를 초기화 시킨다.

그럼 obj라는 변수의값을 copyObj라는 변수에 복사를 한뒤, copyObja값을 변경하게되면 결국 objcopyObj의 값은@3001이라는 참조값은 변하지 않고 같은곳을 참조하기에 한곳에서 변화가 다른곳에도 영향을 미친다.
그래서 obja의 값도 30으로 변하게 된다.

그래서 객체나 배열을 복사하기위해서는 원본 배열의 값과 똑같은 값을 가진 새로운 객체 또는 배열을 다시 할당해야한다.

// 1번째 복사 방법
let obj = { a: 10, b: 20};
let copyObj = { ...obj };
// 2번째 복사 방법
let obj = { a: 10, b: 20};
let copyObj = Object.assign({}, obj);

객체 내부에 또다른 객체 or 배열이 존재할 시 재귀적으로 복사를 해줘야 한다

profile
Web Developer

0개의 댓글