* 불변성 (immutable)
* 예시로 보는 불변성
const originArray = ['123', '456', '789'];
const newArray = originArray;
originArray.push(10);
originArray.push(11);
originArray.push(12);
originArray.unshift(0);
console.log(originArray);
console.log(newArray);
- 두 배열의 요소는 동일하다.
- 원본 배열이 변하면 새로운 변수에 담긴 배열도 변한다.
- 이유는??? 원본배열을 새로운 변수에 담아 냈을때 원본배열의 참조가 새로운 변수의 참조에도 할당이 되기 때문이다.
- Copy by reference (참조에 의한 호출) 이다.
* 해결방법
const newArray = [...originArray];
* 불변성을 지키는 방법은??
- 배열을 복사한다. (Shallow copy and deep copy)
- 새로운 배열을 반환하는 메서드들을 활용한다.
- ex) filter, map, slice
- 원본 배열에 지장이 없는지 MDN문서를 통해서 확인한다.
[함께 참조하면 좋은 내용들]
https://latte1114.tistory.com/315 (값vs참조)
https://latte1114.tistory.com/337 (Spread operator)
https://latte1114.tistory.com/333 (Shallow copy)
'Study > JavaScript(Clean code)' 카테고리의 다른 글
[JavaScript][clean-code] map vs forEach (0) | 2022.06.05 |
---|---|
[JavaScript][clean-code] for문 배열 고차 함수로 리팩터링 & 배열 메서드 체이닝 (0) | 2022.06.05 |
[JavaScript][clean-code] 유사 배열 객체 (0) | 2022.06.03 |
[JavaScript][clean-code] 배열 요소에 접근하기(구조 분해 할당) (0) | 2022.06.01 |
[JavaScript][clean-code] Array.length (0) | 2022.06.01 |