live-small / JsDeepDive_Study

모던 자바스크립트 deep dive 책 스터디

Home Page:https://github.com/live-small/JsDeepDive_Study/wiki

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[토의] 참조값을 복사해 이용하는 경우가 있나요?

live-small opened this issue · comments

commented

질문

객체의 참조값을 복사해 이용하는 경우가 있나요?

상세내용

객체를 할당할 경우, 그 객체의 주소값을 참조한다.
그렇기에, 원본 또는 사본 중 어느 한쪽에서 객체를 변경하면 서로 영향을 주고 받는다.

참고

let person = { 
   name: 'live-small', 
   age : '24', 
} 

let newPerson = person; 
newPerson.name = "minji"; 
console.log(person.name); // minji 

연관챕터

11장 (p151)

추가공부

객체의 참조값을 복사하게 되면 구조적 부작용이 많다. 그렇다면 객체를 어떻게 복사할 수 있을까?

객체의 복사

  • 얕은 복사는 한 단계 깊이까지만 복사하는 경우를 의미.
    • 구현 : array.slice(obj), { ...obj }, Object.assign({ }, obj)
  • 깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사함.
    • 구현 : 재귀, JSON.parse & JSON.stringify

JSON.parse & JSON.stringify 동작방식

  1. JSON.stringify : 원시값 혹은 객체를 모두 문자열(원시값)으로 변환
  2. JSON.parse : 문자열을 다시 js 데이터 타입에 맞춰 변환
    핵심 문자열은 원시타입이기에 변경될 수 없다 -> 새로 할당됨
let origin = [ 1, 2, [ 'string', 'json' ]; 
let deepCopy  = JSON.parse(JSON.stringify(origin)); 

ref

  1. 깊은복사
    https://medium.com/watcha/%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC%EC%99%80-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC%EC%97%90-%EB%8C%80%ED%95%9C-%EC%8B%AC%EB%8F%84%EC%9E%88%EB%8A%94-%EC%9D%B4%EC%95%BC%EA%B8%B0-2f7d797e008a

  2. Object.assign
    https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

객체의 얕은 복사를 하는 것이 객체의 참조값을 복사하는 것과 어떻게 보면 같은 것이라고 생각합니다.

commented

객체는 값이 담긴 메모리 주소값을 가지고 있습니다.
따라서, 객체를 복사하면 값이 아니라, 그 값이 담긴 메모리 주소(=참조값)를 받습니다.
값을 변경할 경우, 참조하고 있는 모든 객체에 반영되기에, 구조적 부작용이 많아 이를 활용한 예시는 찾아보기 어려웠습니다.

그래서, 참조가 아닌 객체를 복사할 수 있는 방법에 대해 공부해 정리했습니다.
본 이슈는 닫겠습니다.