211013 개발기록: return 에 씌여진 화살표함수 (feat. 콜백함수)

return 내부에 화살표함수가 어떤 의미로 씌였는지 모르겠다고,  다른 개발자분이 아래 코드에서 질문을 주셨다 (내가 짠 코드는 아니다..)

const searchData = (keyWord) => {
  return new Promise((resolve, reject) => {
    let result = dataArr.filter(this.isMatch(keyWord));
    resolve(result);
  });
};

// 매칭하는 함수 : 키워드를 텍스트 필드에 넣었을 때, name | email | company 세 개 중에 하나라도 있으면 결과를 리턴합니다.
const isMatch = (keyWord) => {
  return (value) => {
    let result =
      value["name"].indexOf(keyWord) !== -1 ||
      value["email"].indexOf(keyWord) !== -1 ||
      value["company"].indexOf(keyWord) !== -1;
    return result;
  };
};

isMatch 함수 내부 return 영역에 화살표 함수가 존재한다.
이때 value 가 어디서 나온 것인지 헷갈렸는데, 해당 함수는 위의 searchData 함수의 filter의 콜백함수이다.
해당 콜백함수를 isMatch 라는 화살표 함수로 빼낸 형태인데 이를 추출 전으로 변경하면 아래와 같다.
즉 value 는 dataArr 객체의 원소가 된다.

const searchData = (keyWord) => {
  return new Promise((resolve, reject) => {
    let result = dataArr.filter((value) => {
      return (
        value["name"].indexOf(keyWord) !== -1 ||
        value["email"].indexOf(keyWord) !== -1 ||
        value["company"].indexOf(keyWord) !== -1
      );
    });
    resolve(result);
  });
};

만약 위 처럼 return 부분에 화살표함수가 존재하면 다른 함수의 콜백함수가 아닌지 의심해볼 필요가 있다.

 

 

추가 ) filter() 와 map()의 조합

filter 함수를 공부하다 알게된  filter() 와 map() 을 조합하여 다중 조건 만들기. 

const guys = [
  { name: "Kyle", salary: 500000 },
  { name: "Lim", salary: 400000 },
  { name: "Kim", salary: 300000 },
  { name: "Jacky", salary: 200000 },
];

const highSalaryMan = guys
  .filter((man) => man.salary > 300000)
  .map((man) => man.name);
console.log(highSalaryMan);

filter 를 사용하여 연봉이 300000 보다 높은 객체를 찾는 것은 어렵지 않다.

여기에 더해, map() 함수를 적용하면 연봉조건을 만족하는 객체의 이름(name) 프로퍼티만 깔끔하게 뽑아낼 수 있다.