Javascript Array 가공 map(), filter(), find(), reduce()

map()

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

1
2
3
4
5
6
7
8
9
10
11
const array1 = [1, 4, 9, 16];
const array2 = [{ id: 1, value: 'a'}, { id: 2}, { id: 3, value: 'b'}];

const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]

const map2 = array2.map(item => item.value);
console.log(map2);
// expected output: Array ['a', undefined, 'b']

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

filter()

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

1
2
3
4
5
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"]

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

find()

메서드는 주어진 판별 함수를 만족하는 첫 번째 요소을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.

1
2
3
4
5
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.find(word => word.length > 6);
console.log(result);
// expected output: "exuberant"

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/find

reduce()

배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다

1
2
3
4
5
6
7
8
9
10
11
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Javascript Array 가공 map(), filter(), find(), reduce()

http://crazythink.github.io/2020/05/23/map-filter-find-reduce/

Author

Daeyoung Kim

Posted on

2020-05-23

Updated on

2020-05-23

Licensed under

댓글