[SEB_FE_44] JS(8) - JavaScript Koans

유영준·2023년 3월 6일
post-thumbnail

오늘 배운 주제


  • JavaScript Koans

오늘 배운 내용


  • Object.js
it('Object를 함수의 전달인자로 전달할 경우, reference가 전달됩니다.', function () {
    const obj = {
      mastermind: 'Joker',
      henchwoman: 'Harley',
      relations: ['Anarky', 'Duela Dent', 'Lucy'],
      twins: {
        'Jared Leto': 'Suicide Squad',
        'Joaquin Phoenix': 'Joker',
        'Heath Ledger': 'The Dark Knight',
        'Jack Nicholson': 'Tim Burton Batman',
      },
    };

    function passedByReference(refObj) {
      refObj.henchwoman = 'Adam West';
    }
    passedByReference(obj);
    expect(obj.henchwoman).to.equal('Adam West');

    const assignedObj = obj;
    assignedObj['relations'] = [1, 2, 3];
    expect(obj['relations']).to.deep.equal([1, 2, 3]);

    const copiedObj = Object.assign({}, obj);
    copiedObj.mastermind = 'James Wood';
    expect(obj.mastermind).to.equal('Joker');

    obj.henchwoman = 'Harley';
    expect(copiedObj.henchwoman).to.equal('Adam West');

    delete obj.twins['Jared Leto'];
    expect('Jared Leto' in copiedObj.twins).to.equal(false); // 이해안됨

한겹만 복사되니까 -> 얕은 복사
결론 : 완전한 깊은 복사는 편하게 구현할 수 있는 방법은 없다...!!

오늘의 과제


나는 assign은 얕은 복사로만 알고 있었고 마지막 코드의 정답이 당연히 true라고 생각했지만 정답은 false여서 여러 블로그를 참고함

copiedObj는 obj를 assign하고 obj.twins['Jared Leto']를 삭제하면 copiedObj는 바뀌지 않는다고 생각함

원시값은 복사를 해도 바뀌지 않고 참조값은 복사를 하면 바뀐다!
이게 true인 이유

assign은 잘 쓰이지 않는걸로 알고 있지만 Koans를 통해 assign 개념을 완벽하게 이해하게됨

Referece

https://scotch.io/bar-talk/copying-objects-in-javascript
https://medium.com/watcha/깊은-복사와-얕은-복사에-대한-심도있는-이야기-2f7d797e008a

profile
프론트엔드 개발자 준비 중

0개의 댓글