map(), filter(), find()

자주 사용하고 있는 map()과 filter()에 대해 정리해 보았다.

반복이 필요하면 map(), 조건에 만족하는 모든 요소가 필요하면 filter() ,조건에 만족하는 첫 번째 요소만 필요하면 find()를 사용하면 된다.

map()

배열 내의 모든 요소 각각에 대하여 주어진 함수(callback 함수) 적용 후 새로운 배열을 반환한다.

문법 : arr.map(callback(currentValue[, index[, array]])[, thisArg]) (Optional - index, array, thisArg)

const array = [1, 4, 8, 12, 16];
const parameters = array.map((x, index, arr) =>{console.log(x, index,arr)})

//결과
// 1 0  [1,4,8,12,16]
// 4 1  [1,4,8,12,16]
// 8 2  [1,4,8,12,16]
// 12 3 [1,4,8,12,16]
// 16 4 [1,4,8,12,16]

// 일반 함수
const map1 = array.map(function(x) {
    return x * 2
})
// [2,8,16,24,32]

// 화살표 함수
const map2 = array.map((x) => x * 2)
// [2,8,16,24,32]

 

 

filter()

배열을 순회하며 요소마다 조건 확인 후 ( 콜백 함수는 boolean값을 리턴 한다. - 조건에 맞으면 true, 맞지 않으면 false를 반환 ) 조건을 만족하는 원소들로( 결과가 true인 요소만 ) 필터링 된 새로운 배열을 반환한다.

문법 : filter(callbackFn, thisArg) (Optional - thisArg)

const drinks = ['water', 'beer', 'coffee', 'jucie', 'latte', 'coke'];

const result = drinks.filter((drink) => drink.length > 5);
console.log(result);
// ["coffee"]

 

find()

배열에서 제공된 테스트 함수를 만족하는 첫 번째 요소를 반환합니다. 만족하는 값이 없으면 undefined가 반환 된다.

문법 : find(callbackFn, thisArg) (Optional - thisArg)

const array = [3, 12, 20, 100, 40];

const found = array.find((element) => element > 10);
console.log(found);
// 12

const found = array.find((element) => element < 3);
console.log(found);
// undefined

 

 

참고

Array.prototype.map() - JavaScript | MDN

 

Array.prototype.filter() - JavaScript | MDN

 

Array.prototype.find() - JavaScript | MDN