[lodash] 배열 인덱스로 삭제 방법, pullAt() 알아보기

가장 인기있는 자바스크립트 라이브러리 lodash를 사용하여 배열의 값을 인덱스(index) 값으로 삭제하는 방법을 알아보겠습니다.

lodash pullAt() 알아보기

lodash 라이브러리는 자바스크립트의 배열 또는 객체를 다룰 때 역시 매우 유용한 다양한 메소드를 제공합니다. 만약, 배열에서 특정 인덱스의 요소를 삭제할 때 어떤 방법이 있을까요? 여러 방법이 있지만 그 중 사용할 수 있는 함수 중 하나가 바로 pullAt()입니다. 이 메소드는 주어진 인덱스 위치에 있는 요소를 배열에서 제거하고, 제거된 요소들을 배열로 반환합니다.


[ 알아둘 것 ]
참고로 pullAt()을 사용한 방식은 배열을 직접 변경(mutate)하는 함수입니다. 이런 이유로 기존 배열의 구조를 바꾸고 싶을 때 사용할 수 있으며 내부 자식 요소의 객체를 가지고 있는 경우 사용에 주의가 필요합니다. 참조 형태의 값 변경을 피하길 원하는 경우 clone() 또는 cloneDeep()을 함께 사용해야 할 수 있습니다.

pullAt() 사용 방법 및 예제보기

다음으로 pullAt() 메소드를 사용하는 방법을 알아봅니다. 기본적인 문법은 아래와 같습니다.

_.pullAt(array, [인덱스])

여기서 각각 아래의 값들을 나타냅니다.

- array (Array) : 대상 배열
- [인덱스] (Array | number) : 배열에서 제거하고자 하는 요소의 인덱스를 담은 배열

위 값들 중 인덱스는 배열과 숫자 모두 가능합니다. 즉 여러 개를 한번에 제거하거나 하나씩 제외하는 것 모두 가능합니다. 그럼 간략한 예제를 알아봅니다.


@ 인덱스를 사용하여 하나의 값 삭제하기
아래 예제는 배열에서 두 번째 인덱스의 값 1에 해당하는 'b'만 삭제하는 예제입니다. 실행하면 결과는 어떻게 되는지 확인해보세요.

출력 결과 'b'만 삭제된 것을 알 수 있습니다. 만약 여러 개를 동시에 삭제하려면 다음과 같습니다.


@ 여러 개의 인덱스를 사용하여 한 번에 삭제하기
아래 예제는 배열에서 첫 번째, 세 번째 인덱스의 값만 삭제하는 예제입니다. 이 경우 두 번째 인자인 인덱스 값을 숫자가 아닌 배열로 넘겨주어야합니다. 실행하면 결과는 다음과 같습니다.

출력결과 1, 2번째 인덱스에 해당하는 값들은 삭제되고 'a'만 남게됩니다. 이와 같이 여러 개의 값들을 한 번에 제외할 때 매우 용이합니다. 여기까지 pullAt()을 사용하는 방법을 알아보았는데요 ~ 아래와 같이 비슷한 다른 방법도 생각할 수 있습니다.

팁 및 정보) 비슷한 함수 및 메소드는?

제일 먼저 같은 lodash는 배열에서 요소를 제거하는 다른 함수도 사용 가능합니다. 예를 들어, _.filter() 또는 _.remove()를 사용하여 조건에 따라 값을 제외할 수 있습니다. 다만 _.pullAt()과 달리 인덱스를 사용하지 않습니다. 인덱스를 사용하지 않는다면 _.pull() 메소드 역시 사용이 가능합니다.

추가로 자바스크립트 배열 함수 splice()도 유용한 방법입니다. 만약 순수 자바스크립트로 구현하길 원하는 경우 splice()를 사용하는 방법이 대표적이라 하겠습니다.