{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/20-10-06-destructuring-assignment/", "result": {"data":{"site":{"siteMetadata":{"title":"irrationnelle","author":"irrationnelle","siteUrl":"https://dev.rase.blog","comment":{"disqusShortName":"","utterances":"irrationnelle/devlog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"1ec87807-6c3f-52a1-9729-ba1852637791","excerpt":"간단한 의문이지만 코드 리뷰 중 비구조화 할당을 사용해서 프로퍼티 변경하는 것을 보았다. 공간 복잡도 측면에서 상대적으로 메모리 사용이 널널해진 요즘은 immutable…","html":"

간단한 의문이지만 코드 리뷰 중 비구조화 할당을 사용해서 프로퍼티 변경하는 것을 보았다.

\n

공간 복잡도 측면에서 상대적으로 메모리 사용이 널널해진 요즘은 immutable 한 변경, 아니 재할당을 곧잘 보는데 이런 식으로 오브젝트의 프로퍼티를 변경하는 것을 보니 원하는 것처럼 참조 변경이 이루어지는지 궁금해서 찾아보았다.

\n

결론적으로 비구조화 할당을 이용하여 선언한 변수가 원시 타입이 아니면 얕은 복사가 이루어져서 메모리 참조를 공유한다.

\n
const { expect } = require('chai');\n\ndescribe('비구조화 할당을 사용해서', ()=> {\n    it('복사한 오브젝트의 오브젝트 타입 프로퍼티를 변경하면 원본의 프로퍼티도 변한다.', () => {\n        const originalObj = {\n            subObj: {\n                value: 10\n            }\n        };\n        const {subObj} = originalObj;\n        subObj.value = 20;\n\n        expect(originalObj.subObj.value).to.equal(20);\n        expect(originalObj.subObj.value).not.to.equal(10);\n    })\n\n    it('복사한 오브젝트의 원시 타입 프로퍼티를 변경하면 원본의 프로퍼티는 변하지 않는다.', () => {\n        const originalObj = {\n            value: 10\n        };\n        let {value} = originalObj;\n        value = 20;\n\n        expect(originalObj.value).not.to.equal(20);\n        expect(value).to.equal(20);\n        expect(originalObj.value).to.equal(10);\n    })\n})
\n

위 테스트를 수행하면 오브젝트 타입인 경우 얕은 복사가 이루어지는 것을 알 수 있다.

","frontmatter":{"title":"비구조화 할당은 얕은 복사","date":"October 06, 2020"}}},"pageContext":{"slug":"/20-10-06-destructuring-assignment/","previous":{"fields":{"slug":"/20-09-19-contributon-epilogue/"},"frontmatter":{"title":"2020 오픈소스 컨트리뷰톤 Mocha 후기","category":"Dev","draft":false}},"next":{"fields":{"slug":"/20-10-17-cypress-helper/"},"frontmatter":{"title":"Typescript 환경에서 Cypress helper 함수 만들기","category":"e2e","draft":false}}}}, "staticQueryHashes": ["3128451518","3474900066"]}