반복문 없이 Array.prototype.filter()로 쉽게 재배열 하기

📚 Testing JavaScript Applications 를 공부하면서, 장바구니 시스템을 사용하면서 선택 삭제, 전체 삭제 기능을 만들어보았다.

그 중 선택 삭제 기능에서, 책 예제에 있는 것을 그대로 받아들이기 보다, 좀 더 모던하게 보여줄 순 없을까를 고민했다.

---

책 예제 코드

class Cart {
  constructor() {
    this.items = [];
  }
  addToCart(item) {
    this.items.push(item);
  }
  removeFromCart(item) {
    for (let i = 0; i < this.items.length; i++) {
      const currentItem = this.items[i];
      if (currentItem === item) {
        this.items.splice(i, 1);
      }
    }
  }
}

Array.prototype.splice()

책의 예제를 보면,

1. for 문을 통해 장바구니에 담긴 아이템 수 만큼 `currentItem`에 순서대로 재배열한다.

2. 만약 재배열 과정 중에 removeFromCart()로 선언한 아이템이 발견 될 경우 해당 순서를 찾아 splice() 메서드를 통해 삭제한다.

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.

 

// 구조
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
    
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "May"]

`for` 반복문 없이 사용할 수 있는 재배열 메서드가 있지 않을까 해서 찾아보았다.

Array.prototype.filter()

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

// 구조
arr.filter(callback(element[, index[, array]])[, thisArg])

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter((word) => word.length > 6);

console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]

 

최종 완성 코드

class Cart {
  constructor() {
    this.items = [];
  }
  addToCart(item) {
    this.items.push(item);
  }
  removeFromCart(item) {
    this.items = this.items.filter((currentItems) => currentItems !== item);
  }
}

훨씬 모던한 코드..! 😊 화살표 함수 표현과 함께 쓸 수 있어 좋은듯.

장바구니 전체 삭제의 경우엔 test code와 함께 올려보겠다!