자바스크립트 문법/배열_반복문_객체

arr.filter(callback)

자무카 2022. 10. 28.

arr.filter(callback)

** 코어 자바 스크립트
 

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

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
words 배열에서
원하는 요소만 뽑아서(필터) -> 원하는 조건을 callback 으로.
각 요소를 시험할 콜백 함수(true->반환) : 내부적으로 for 가 있다는 의미
배열을 만든다. --> return 값 이 배열
다음 세 가지 매개변수를 받습니다.
  1. element : 처리할 현재 요소.
  2. index : 처리할 현재 요소의 인덱스.
  3. array : filter를 호출한 배열.

thisArg : callback을 실행할 때 this로 사용하는 값.

// arr 에서 e를 조건으로 필터해서, newArr 만들기.
// filter 의 매개변수로 callback 함수는 arr의 e를 매개변수로 받아서, true 면, e 를 리턴하도록.
// filter 메서드는 콜백함수에서 e 를 받아서, 새로운 배열을 생성

const arr = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
var newArr = arr.filter(e => e.length > 6)

console.log(newArr);

// 콜백 함수(화살표 함수 풀어쓰면)
// const newArr = arr.filter(function(e){
//   return e.length > 6;
// });

arr.filter 를 직접 만들어 보기 : myfilter() 만들기

myfilter() 는 callback 함수를 매개변수로 받아야 한다.

arr.myfilter(callback)

** 딥다이브 배열 참조 : https://tourwings.tistory.com/281

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

function myfilter(arr, callback){ // 매개변수에서 var,let 처럼, callback앞에 function 이 생략
  var result = [];
  for(var i=0; i < arr.length; i++){
    var current = arr[i];
    if(callback(current)){
      result.push(current);
    }
  }
  return result;
}

newWords = myfilter(words, e=>e.length > 6);
console.log(newWords);

요소 추출, 제거 메서드 만들기(Deepdive Array 예제)

class Users {
  constructor() {
    this.users = [
      {id: 1, name: 'Lee'},
      {id: 2, name: 'kang'}
    ];
  }
  // 요소 추출
  findById(id){
    return this.users.filter(user=>user.id === id);
  }

  // 요소 제거. id 와 다른 것만 선택해서, 배열로 만든다. -> 같은 요소는 remove
  remove(id) {
    this.users = this.users.filter(user => user.id !== id);
  }
}

const users = new Users();
let user = users.findById(2);
console.log(user);

users.remove(1);
user = users.findById(1);
console.log(user);

 

댓글