[JS30] - 14) JS References VS Copying

gygy·2021년 10월 28일
0

Javascript 30 Challenge

목록 보기
14/30
post-thumbnail

const age2 = age와 같은 형태로 배열과 객체를 얕은 복사하면,
age2를 수정해도 원본배열인 age가 수정된다.

이에 대해서는 지난 포스팅 Premitive & Reference를 살펴보자



🍍 배열

🍑 얕은 복사

얕은 복사란 객체를 복사할 때 원래값과 같은 참조를 가리키는 것을 말한다.

🥝 Array.slice()

얕은 복사이긴 한데, 깊은 복사 같은 얕은 복사라고 한다..slice는 새로운 배열을 반환해 다른 참조값을 지닌다.

    const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];

    const team2 = players.slice();
    team2[1]="changed"
    console.log(team2 === players)//false

//['Wes', 'changed', 'Ryan', 'Lux']    ['Wes', 'Sarah', 'Ryan', 'Lux']

🥝 [].concat(Array)

🥝 Array.from(Array)



🍍 객체

🍑 얕은 복사

🥝 Object.assign({}, object)

const cap2 = Object.assign({}, person, { number: 99});


🍑 깊은 복사 Deep Copy

    1. 재귀함수를 통한 복사
    1. JSON.stringify()
    1. lodash 라이브러리 사용

이해가 안되는 부분들이 있었다.

예를 들면 얕은 복사는 한 뎁스만 복사하는 동시에 원본 배열에 대한 참조값을 유지하는 방식인데,얕은 복사에 포함되는 slice()는 다른 참조값을 가지고 수정사항이 원본배열에 반영되지 않는다.

이 부분에 대해서는 모던 자바스크립트를 참고해 아래 포스팅에 따로 정리해두었다.
얕은복사 : slice는 원본배열을 변경하지 않는데 왜 얕은 복사일까?

Reference

https://bbaktaeho-95.tistory.com/37

profile
Why?에서 시작해 How를 찾는 과정을 좋아합니다. 그 고민과 성장의 과정을 꾸준히 기록하고자 합니다.

0개의 댓글