일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 번역
- android
- H2O
- 해석
- javascript
- 프래그먼트
- mariadb
- techEmpower
- unity
- Portfolio
- error
- 한글
- java
- MySQL
- kakao
- php
- 컴퓨터과학총론
- 자바
- 개발자
- 개발
- 구글
- 안드로이드
- C lanuage
- centOS7
- it
- server
- C
- caddy
- NGINX
- ubuntu
- Today
- Total
개발모음집
javascript foreach, map, reduce 본문
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) 함수를 실행하고, 하나의 결과값을 반환합니다.
리듀서 함수는 네 개의 인자를 가집니다.
- 누산기accumulator (acc)
- 현재 값 (cur)
- 현재 인덱스 (idx)
- 원본 배열 (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
'client' 카테고리의 다른 글
eslint rule, arrow function 허용하기 (0) | 2020.07.03 |
---|---|
d3.js responsive chart 하는 법 (0) | 2020.07.02 |
javascript prototype (프로토타입) (0) | 2020.06.30 |
javascript closure (클로저) (0) | 2020.06.29 |
javascript execution context (실행 콘텍스트) (0) | 2020.06.28 |