개발모음집

javascript foreach, map, reduce 본문

client

javascript foreach, map, reduce

void 2020. 7. 1. 10:00

1) for ~ each : for문이랑 같은 내용

사전적 의미

for
each : ~마다, 제각기, 각각의

고유명사

forEach()는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행합니다. 삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않습니다. (예: 희소 배열)
forEach()
 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다

Array.prototype.forEach(callback[, thisArg])

- callback : function (currentValue[, index[, originalArray]]) 
- currentValue`: 현재값 
- index: 현재 인덱스 
- originalArray: 원본 배열 
- thisArg: this에 할당할 대상. 생략시 global객체

출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

2) map 

for문을 돌려서 새로운 배열을 만드는 목적 그래서 return 필수

사전적의미

지도

고유명사 

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

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

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

 

 

3) reduce

for문을 돌려서 최종적으로 다른 무언가(숫자일수도 문자일 수도, 여러 타입이 될 수 있다.)를 만드는 목적 그래서 return 필수 

 

사전적의미

줄이다, 축소하다, 할인, 인하

(index를 줄여가며 순회할 수 있어서 reduce)

고유명사

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

 

리듀서 함수는 네 개의 인자를 가집니다.

  1. 누산기accumulator (acc)
  2. 현재 값 (cur)
  3. 현재 인덱스 (idx)
  4. 원본 배열 (src)
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