JavaScript - find(), filter(), map()

클론코딩을 하거나 혼자 코딩을 할 때, 다른 문서를 참고하거나 할 경우에 정말 많이 등장하는
find(), filter(), map()에 대해서 간단하게 정리를 해보았다.

find()

• map(), filter() 같은 메소드들의 단점은 처리를 하는 도중 한 배열 안에 있는 모든 데이터를 확인한 후 변경 및 삭제를 한다.
• find()는 이를 방지하기 위해 주어진 판별 함수를 만족하는 첫 번째 요소 값을 반환한다.

const newArr = [1,2,3,4,5];

newArr.find(num => num === 3);
// 3 -> find는 값의 형태로 반환한다.

newArr.find(num => num === 9);
// undefined

newArr.filter(num => num === 3);
// [3] -> filter는 배열 형태로 반환한다.

filter()

• 주어진 판별 함수를 만족하는 요소들을 모아서 새로운 배열로 반환한다.
• filter는 조건문을 만족한 요소들을 반환한다.

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

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

map()

• callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 생성한다.
• map은 함수가 적용된 새로운 요소를 반환한다.

let numbers = [1,4,9];

let roots = numbers.map(function(num) {
  return Math.sqrt(num);
});

// or

let roots = numbers.map((num) => Math.sqrt(num))

• 여러가지 값을 반환해야할 때는 filter(), map()을 사용하고 한 가지 값만을 효율적으로 빠르게 얻으려면 find()를 사용하면 될 것 같다.

참고 - https://velog.io/@gillog/javascript-.find // https://velog.io/@tjdud0123/javascript-map-filter-%ED%95%A8%EC%88%98