자바스크립트 04 문자열 메서드의 mutable, immutable 이란?

1. 현재의 무드: 좋습니다. 그렇지만 숙면이 필요합니다. 

2. 오늘 학습한 내용 중 키워드: 배열 메소드 중 mutable, immutable한 메서드의 구분과 사용

3. 오늘 학습한 내용 요약: 

 

배열은 

 

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

 

이렇게 대괄호 [] 내에 요소값 여러개가 들어갈 수 있는 값들의 모음집을 이야기합니다. 

처음 배운 '변수' 에는 

 

let var1 = 1;
let var2 = 2;
let var3 = 3;
let var4 = 4;

 

이처럼 하나의 값만 할당해 줄 수 있기 때문에, 대량의 데이터를 다루는 데에 상당한 비효율을 초래합니다.

그래서 배열에 나열해서 넣어주면, 대량의 데이터를 다루는 데에 편해지는 이점이 있습니다.

그러면 우리는 배열의 각 값들에 접근을 하거나, 지우거나, 더하거나... 하는 작업들을 하면서 데이터를 만지고 싶어집니다.

이럴때 사용할 수 있는 것이 배열의 메서드입니다.

 

그런데, 배열의 메서드 들 중, mutable 한 것과 immutable 한 것이 구분됩니다.

 

mutable 한 걸 먼저 보자면,

 

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

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

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

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

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

 

이 네 가지 메서드를 대표적인 예로 들 수 있습니다. 제거하는 기능을 수행하는 메서드 두개 pop()과 shift()는 제거하는 해당 값을 리턴합니다. 더해주는 기능을 수행하는 메서드 두개 push(), unshift()는 더해준 후의 arr.length를 리턴합니다. 

 

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

arr.splice(start)
arr.splice(start, deleteCount)
arr.splice(start, deleteCount, item1)
arr.splice(start, deleteCount, item1, item2, itemN)

 

mutable한 메서드로 splice()를 또 예로 들 수 있습니다. 

위에 나열된 Syntax대로 사용합니다. 변경을 시작하는 인덱스 번호인 start, 지울 요소의 개수인 deleteCount, 대체하여 넣어 줄 요소를 item1, item2, itemN으로 나열하여줍니다. 여러 개 요소의 제거가 가능하기 때문인지, 리턴 값은 배열의 형태로 리턴됩니다. 

 

여기까지는, 배열 내의 요소 값을 직접 변환해주는 mutable한 메서드를 살펴보았습니다.

 

지금부터는 배열은 그대로 유지하되, 해당 메서드의 리턴 값으로만 의도된 기능을 수행한 결과값을 내주는 immutable한 메서드를 살펴보겠습니다. 

 

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

let newArr1 = arr.slice(0,2) // [1, 2]
let newArr2 = arr.slice(2) // [3, 4]
let newArr3 = arr.slice(-2) // [3, 4]
let newArr4 = arr.slice(2, -1) // [3]
let newArr3 = arr.slice() // [1, 2, 3, 4]

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

arr.slice(start, stop)
arr.slice(start)
arr.slice() // 복붙

 

가장 대표적으로는 slice() 가 있습니다. 잘라서 원하는 곳만 복붙해주는 기능이라고 생각하면 쉽습니다. start번째 요소에서 시작해서 stop번째 요소 직전까지만 복사해줍니다. immutable이라 arr에 들어 있는 값은 변하지 않습니다. 따라서, 다른 변수를 선언해 그 변수에 할당해주어 사용해야 합니다. 

 

let first = [1, 2, 3, 4]
let second = [5, 6, 7, 8]

let combine = first.concat(second) // [1, 2, 3, 4, 5, 6, 7, 8]

console.log(first) // [1, 2, 3, 4]
console.log(second) // [5, 6, 7, 8]
console.log(combine) // [1, 2, 3, 4, 5, 6, 7, 8]

 

두 배열을 merge 해주는 concat() 메서드입니다. 마찬가지로 first, second라는 배열의 값은 변하지 않았습니다. 

 

https://www.sitepoint.com/immutable-array-methods-javascript/

Immutable Array Methods: Write Cleaner JavaScript Code - SitePoint

이 글에 mutable, immutable 배열 메서드에 대해 잘 정리되어 있으며, 둘 중 어떤 것이 유리한지 + 어떻게 함수로 만들어 대체할 수 있는지까지 잘 나와있어서 첨부합니다!