[JS] 배열 내장함수 filter, splice, slice

filter

특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만듦.

todos 배열에서 done 값이 false 인 항목들만 따로 추출해서 새로운 배열을 만들어 보면 아래와 같이 할 수 있다.

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];

const tasksNotDone = todos.filter(todo => todo.done === false);
#위의 코드를 아래와 같이 바꾸어도 동작함#
const tasksNotDone = todos.filter(todo => !todo.done);
console.log(tasksNotDone);

 

 

splice

배열에서 특정 항목을 제거할 때 사용.

condt sumbers = [10, 20, 30, 40];

위 배열에서 30을 지우려면 30이 몇번째 index 인지 알아낸 후 splice를 통해 지워야 함

const sumbers = [10, 20, 30, 40];
const index = number.indexOf(30);
numbers.splice(index,1);
console.log(numbers);

splice의 첫번째 인자는 몇번째를 지울지, 두번째 인자는 해당 인덱스로부터 몇개를 지울지를 뜻함.

 

slice

배열을 잘라낼 때 사용하는데, splice와 비슷하지만 기존의 배열을 건드리지 않음.

(splice는 기존의 numbers를 변화시키나, slice는 변화시키지 않고 새로운 변수에 복사해옴)

const numbers = [10, 20, 30, 40];
const sliced = numbers.slice(0,2);//0번째 부터 2 전까지

console.log(sliced);
console.log(numbers);

 

출처 - 벨로퍼트와 함께하는 모던 자바스크립트