2020-05-23 게시 됨Javascript

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

map()

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

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()

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

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를 반환합니다.

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) 함수를 실행하고, 하나의 결과값을 반환합니다

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 forEach()의 업그레이드 every(), some()

every()

배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트합니다.

빈 배열에서 호출하면 무조건 true를 반환합니다.

중간에 통과하지 않는 요소가 있으면( return false인 경우) 더이상 반복하지 않고 종료됩니다.

const array1 = [1, 30, 39, 29, 10, 13];
const array2 = [1, 30, 41, 29, 10, 13];

const result1 = array1.every((currentValue) => currentValue < 40);
console.log(result1);
// expected output: true

const result2 = array2.every((currentValue) => currentValue < 40);
console.log(result2);
// expected output: false

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

some()

배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트합니다.

빈 배열에서 호출하면 무조건 false를 반환합니다.

중간에 어떤 요소라도 통과하면( return true인 경우) 더이상 반복하지 않고 종료됩니다.

const array1 = [1, 2, 3, 4, 5];
const array2 = [1, 5, 3, 3, 7];

const result1 = array1.some((element) => element % 2 === 0);
console.log(result1);
// expected output: true

const result2 = array2.some((element) => element % 2 === 0);
console.log(result2);
// expected output: false

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

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

map()

filter()

find()

reduce()

Javascript forEach()의 업그레이드 every(), some()

every()

some()

Tags

Categories

Recent

Archives