JS 배열에 요소 추가하는 방법 (mutable, immutable)

이번 포스트에서는 자바스크립트 배열에 요소를 추가하는 방법에 대해 알아보자.

배열에 요소를 추가할 수 있도록 해주는 방식은 mutable(가변) 그리고 immutable(불변) 방식으로 나뉜다. 

---

Mutable(가변) 방식

기존의 선언된 배열을 변경시키는 메서드로는 push, unshift, splice가 있다.

직접 인덱스로 접근해 변경시키는 방법 또한 기존 배열 객체를 변경시키는 행위이기 때문에 함께 추가했다.

 

아래 동물 배열에 닭을 추가하는 방법을 살펴보자.

const animal = ['🐯', '🐴', '🐇'];

원래라면 가변 함수를 사용하기 때문에 아래 예시를 실행할때마다 animal 배열이 변경되겠지만

독립적으로 실행된다고 가정하겠다.

첫번째 요소로 추가하기 (unshift, splice)- [🐔, 🐯, 🐴, 🐇] 

animal.unshift('🐔');
animal.splice(0, 0, '🐔');

마지막 요소로 추가하기 (push, splice) - [🐯, 🐴, 🐇, 🐔]

animal.push('🐔');
animal.splice(array.length, 0, '🐔');

// 인덱스로 접근해서 마지막 요소로 추가
animal[array.length] = '🐔';

n번째 인덱스에 추가하기 (splice) - [🐯, 🐔, 🐴, 🐇]  (2번째)

animal.splice(1, 0, '🐔');
animal[1] = '🐔';

위 예제에서 Array 프로토타입의 메서드인 unshift, push, splice를 사용 시 

새로 추가할 요소값 하나만 전달했지만 여러 개를 입력하면 입력한 순서대로 추가된다. 

 

animal.unshift('🐔','🐨','🐷'); // ['🐔','🐨','🐷', '🐯', '🐴', '🐇']

 

 

splice도 마찬가지로 첫 번째 인자는 요소를 추가할 인덱스, 두 번째 인자는 해당 인덱스로부터 삭제할 요수의 수, 그 이후에 추가할 요소들을 순서대로 넘겨주면 된다.

 

animal.splice(0, 0, '🐔','🐨','🐷'); // ['🐔','🐨','🐷', '🐯', '🐴', '🐇']

 

 

---

Immutable(불변) 방식

 

기존의 배열을 변경시키지 않고 새로운 배열을 사용하는 concat 그리고 spread(...) 문법이 있다.

보통은 여러개의 배열을 합칠 때 많이 사용하는 방식들이긴 하지만 요소를 추가할 때도 사용할 수 있다.

 

const animal = ['🐯', '🐴', '🐇'];

 

첫 번째 요소로 추가하기 - [ 🐔, 🐯, 🐴, 🐇] 

['🐔'].concat(animal);
[🐔, ...animal]

마지막 요소로 추가하기 - [ 🐯, 🐴, 🐇,🐔] 

animal.concat('🐔');
[...animal, 🐔]

 

concat은 주로 여러 개의 배열을 하나의 배열로 합칠 때 주로 쓰이는데 인자로 배열들 또는 값 (Arrays and/or values)을 받는다. 

 

spread는 말 그대로 객체또는 배열을 펼치는 문법이다. 이를 사용하면 기존 배열의 요소들을 펼친 후 배열 리터럴 방식을 통해 추가할 요소와 함께 재선언을 해서 사용할 수 있다.

 

---

Mutable(가변) 또는 Immutable(불변) 어떤 방식을 사용해야하나?

상황에 따라 다르다.

Redux 같은 상태 라이브러리를 사용할 경우 상태의 변경을 기록하는 게 중요하기 때문에

불변성을 유지하도록 immutable 방식을 사용해 상태를 수정해줘야 한다. 

 

immutable 한 방식은 부수효과(side effect)가 없기때문에

일반적으로 mutable한 방식보다 선호되는 경우가 많다.

 

하지만 그렇다고 해서 mutable 방식을 쓰면 안 되는 건 절대 아니다.

부수효과가 없음을 확신할 수 있는 경우 concat 보다는 push 또는 unshift를 사용해서 요소를 추가하는 게 직관적이고 빠르다. 

 

push vs concat 성능 차이

Javascript Array.push is 945x faster than Array.concat 🤯🤔