배열 내장함수 - filter / splice / slice

1. filter

-배열 안에서 특정 조건을 확인 한 후, 조건에 맞는 인자로 새로운 배열을 만드는 함수

 

예제) 아래 JS 배열의 내장함수 키워드를 객체로 포함하는 todos 배열을 확인 한 후 done값이 'clear'인 내장함수키워드를 새로운 배열로 만들어라

 

정답)

const todos = [
  {
    id: 'map',
    text: '자바스크립트 내장함수',
    done: 'clear',
  },
  {
    id: 'indexOf',
    text: '자바스크립트 내장함수',
    done: 'clear',
  },
  {
    id: 'filter',
    text: '자바스크립트 내장함수',
    done: 'doing',
  }
]

const index = todos.filter(todo => todo.done === 'clear');
console.log(index);

/* (2) [Object, Object]
0: Object
id: "map"
text: "자바스크립트 내장함수"
done: "clear"
1: Object
id: "indexOf"
text: "자바스크립트 내장함수"
done: "clear" */

 

 

2. splice

-배열 안에서 특정 항목을 제거할 때 사용, 제거하는 원소가 몇번째인지 명시를 해주어야 한다.\

ctrl+x의 느낌으로 이해하면 될 것 같다.

항목을 제거함으로써 기존의 함수를 건드리며, 잘라낸 함수를 따로 배열화해서 빼는것도 가능하다

ex) 변수명.splice(a,b) =>(a: 제거를 원하는 값의 index시작값, b: 제거를 원하는 개수)

 

예제) num이라는 배열속에서 1, 2를 제거한 후 3~5의 값만 남도록 만들어라

const num = [1, 2, 3, 4, 5]
num.splice(0,2);
console.log(num)

 

splice(a,b)에서 파라미터값은 꼭 숫자가 아니어도 가능하다

예를들면

const num = [1, 2, 3, 4, 5]

//제거의 시작지점을 indexOf함수를 사용하여 변수화 함
const index = num.indexOf(1);

//잘라내는 값을 변수에 담을 수 있다
const spliced = num.splice(index,2);


console.log(num); //[3,4,5]
console.log(spliced); // [1,2]

 

이렇게도 표현이 가능하다

 

 

3. slice

-배열 안에서 특정 항목을 새로운 배열로 만들어 내는데 사용, 제거하는 원소가 몇번째인지 명시를 해주어야 한다.

항목을 잘라내지만 ctrl+x가 아닌 ctrl+c의 느낌이다. 기존의 배열을 건드리지 않는다

ex) 변수명.slice(a,b) =>이 경우 b값의 바로 앞까지만 잘라낸다

 

위의 splice의 예제를 slice로 변경해보면서 그 차이를 확인해보자

 

const num = [1, 2, 3, 4, 5]
const index = num.indexOf(1);

//변수 index값인 0부터 배열번호 2번(3을 의미)의 바로 앞까지 숫자를 ctrl+c한다
const sliced = num.slice(index,2);

console.log(num); //[1,2,3,4,5]
console.log(sliced); //[1,2]