웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > lodash

lodash remove() 메소드 알아보기, 배열 값 삭제

Last Modified : 2023-10-29 / Created : 2023-05-07
3,589
View Count
lodash 라이브러리에서 배열에 사용하는 메소드 중 remove()에 대하여 알아봅니다.




# lodash remove() 메소드


lodash의 remove() 메소드는 배열에 사용하는 메소드로 배열의 특정 값을 삭제할 때 사용할 수 있습니다. 즉 [1, 2, 3] 배열에서 3만 삭제하여 [1, 2]를 얻을 때 사용하는 것이 가능합니다. 참고로 _.remove() 메소드는 함수시 삭제된 값을 리턴하게 됩니다.

remove() 메소드의 간단한 문법은 아래와 같습니다.

_.remove(targetArray, conditionFunction)

위와 같이 두 가지 인자를 받으며 각각 아래와 같이 사용됩니다.

// targetArray<Array> : 대상이 되는 배열
// conditionFunction<Function> : 삭제할 값의 true 조건을 가지는 함수

즉 두 번째 인자 함수에서 true 값에 일치하는 값들은 모두 삭제되게됩니다.


! lodash remove() 메소드 알아보기


아래에서 간단한 예제를 만들어보도록 하겠습니다. 아래의 예제를 봐주세요.
const _ = require('lodash');
let myArray = [1, 2, 3, 4];

위 myArray에서 3을 제외하기 위해서 아래와 같이 _.remove()를 사용할 수 있습니다.
_.remove(myArray, function(item) {
  return item === 3;
});

결과는 아래와 같습니다.
console.log(myArray);

// Result
[1, 2, 4]

결과를 보시는 것처럼 [1, 2, 4]가 나타나게 됩니다. 즉 함수의 조건과 일치한 값들은 배열에서 제외(삭제)됩니다. 간단하게 배열의 값을 제거하는 데 매우 쉽게 사용할 수 있습니다.


[참고] lodash remove()와 비슷한 filter() 메소드
참고로 비슷한 메소드로 _.filter() 메소드를 사용하는 것 역시 가능합니다. 다만 filter의 경우 기존 값을 변경하지 않고 새로운 배열을 반환하는 점이 차이점입니다. 또한 filter()는 remove()와 반대로 해당하는 값만 필터링하기 위한 조건 함수를 사용합니다.
function(item) {
  return item !== 3;
}

이제 아래에서 동일하게 예제를 만들어봅니다. 
const _ = require('lodash');
let myArray = [1, 2, 3, 4,];
let newArray = _.filter(myArray, function(item) {
  return item !== 3;
});

다시 결과를 확인하면 아래와 같습니다.
console.log(newArray);

// Result
[1, 2, 4]

결과를 확인하면 함수를 사용하여 값을 제거한 것 역시 비슷합니다. 다만 가장 큰 차이점은 immutability한 방식으로 새로운 값을 반환하는 점이 차이점입니다. 


[참고] 순수 자바스크립트를 사용하는 방법
다음으로 라이브러리 없이 구현하는 방법도 알아봅니다. 자바스크립트 Array 메소드에 비슷한 _.filter()가 존재합니다. 이 메소드를 사용하여 값을 삭제할 수 있죠. 아래에서 동일하게 에제를 만들어 확인해보겠습니다.
let myArray = [1, 2, 3, 4];
let newArray = myArray.filter(function(item) {
  return item !== 3;
});

이제 결과를 확인합니다.
console.log(newArray);

// Result
[1, 2, 4]

확인 결과 동일하게 원하는 값 3만 제거하는 것이 가능했습니다.

추가로 해당 배열의 index를 알고 있거나 index를 얻은 후 splice()를 사용하는 것도 가능합니다.
let myArray = [1, 2, 3, 4];

해당 인덱스를 알기 위해서 indexOf()를 사용하면 됩니다.
let myIndex = myArray.indexOf(3);

if (index !== -1) {
  myArray.splice(index, 1);
}

이제 결과를 확인해봅니다.
console.log(myArray);

// Result
[1, 2, 4]

이처럼 filter() 및 splice() 순수 자바스크립트를 사용한 방법도 알아봤습니다.


여기까지 lodash 메소드 중 배열의 값을 삭제하는데 사용할 수 있는 remove() 메소드에 대하여 자세히 알아보았습니다.

Previous

[lodash] take 메서드 알아보기, 배열 길이 정하기

Previous

lodash concat() 메소드 알아보기