TIL_mutable, immutable

Array method

배열을 입력받아 원하는 데이터를 얻기위해 다양한 메소드들을 사용한다.

push, pop, shift, unshift, splice, slice, concat, join 등이 있다.

배열과 관련된 코플릿을 풀다가 다양한 문제에 직면하게 되었다.

파라미터로 입력받은 배열을 새로운 변수에 할당했는데, 왜 새로운 변수에 push를 했는데 원본 배열도 수정되지?

파라미터로 받은 배열을 slice를 하고 다시 배열을 리턴했는데, 왜 아무런 수정이 되지 않지?

이 문제들이 발생했던 이유는 바로 mutable과 immutable을 이해하지 못해서였다.

mutable

변경 가능하다.

mutable한 메소드를 사용했을 경우, 해당 데이터는 물론 원본데이터까지 변경된다.

let arr = [1,2,3,4,5];
newArr = arr;
newArr.pop();

console.log(arr); // [1,2,3,4]

mutable한 메소드는 다음과 같다.

push, pop, shift, unshift, splice

immutable

변할 수 없다.

immutable한 메소드를 사용했을 경우, 메소드 결과값만 리턴할 뿐, 데이터는 변경되지 않는다.

let arr = [1,2,3,4,5];

return arr.slice(0,2); // [1,2]
console.log(arr); // [1,2,3,4,5]

immutable한 메소드는 다음과 같다.

slice, concat, join

참고사항

만약, 원본데이터를 수정하지않고, push나 pop등 mutable한 메소드를 사용하고 싶다면, 원본데이터를 slice() 메소드를 사용하여 새로운 변수에다 할당하고, 그 변수에 mutable한 메소드를 사용하면 된다.

여기서 slice()는 한마디로 복사, 붙여넣기이다.
해당 배열을 복사해서 새로운 주소값을 가진 배열을 반환해주는 메소드이다.

let arr = [1,2,3,4,5];

let newArr = arr.slice();

newArr.pop();

console.log(arr); // [1,2,3,4,5]
console.log(newArr); // [1,2,3,4]