[JavaScript 내장함수 다루기 ②] Array.Prototype.Filter, 조건에 부합하는 값만 반환한다.

Array.Prototype.Filter(callback)

• Filter 함수는 자바스크립트를 쓸 때 자주 쓰이는 함수 중 하나로, 배열 원소들 중 일부 값을 추출해내기 위하여 사용한다.
• 사용방법은 filter의 매개변수로 callback 함수를 두되, 해당 함수는 return 값으로 true 혹은 false 값을 갖는 함수여야 한다.

const objArr = [
    {
      id: 1,
      data: "리액트 초급 배우기",
      checked: true,
    },
    {
      id: 2,
      data: "리액트 중급 배우기",
      checked: true,
    },
    {
      id: 3,
      data: "리액트 고급 배우기",
      checked: false,
    },
 ]

const filterdObjArr = objArr.filter((obj) => obj.id !== 2); // 아이디가 2가 아닌 값만을 반환한다. 
console.log(filterdObjArr); 

/* 
[{
id: 1,
data: "리액트 초급 배우기",
checked: true,
},{
id: 3, 
data: "리액트 고급 배우기", 
checked: false
}]
*/

 

• 결과에서 보듯, 해당 함수의 조건에 맞는(반환 값이 true) 경우의 원소만 반환하는 것을 알 수 있다. 
• 이를 살짝 응용하면 리액트를 쓸 때, 실제로 값이 삭제된 것은 아니기 때문에 불변성을 유지하며 값을 삭제하는데 활용될 수 있다. (불변성과 리액트에 관하여선 추후에 해당 포스트에서 다뤄보겠다)