일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
- mysql 재설치 명령어
- mysql purge
- 리액트
- 리액트 tailwind css
- mysql
- 리눅스
- Docker ubuntu
- mysql 재설치
- next.js tailwind css
- react
- next.js tailwindcss
- mysql uninstall
- mysql fix install
- react typescript
- javascript
- react tailwindcss
- react 기초
- 도커
- 리액트 문법
- mysql error
- react tailwind css
- PHP
- mysql broken install
- next.js css framework
- Android
- Python
- Docker
- mysql 삭제
- 리액트 tailwindcss
- 안드로이드
- Today
- Total
Developer_hong
map, reduce, reduceRight 본문
map
반복문을 돌면서 배열 안의 요소를 1대1로 매핑한다고 이해하면 됩니다
어떻게 매핑할것인지를 함수 내부에 정의하면 된다
참고사항으로 map은 배열을 매핑해줄 뿐 기존 객체를 수정하지 않는다
배열.map( (요소, 인덱스, 배열) => { return 요소 }) ;
// 기본 사용 방법
const numbs = [1, 2, 3];
let result = numbs.map( (n) => {
console.log(n);
return n;
});
-> 결과 : 1, 2, 3 (result 에는 [ 1, 2, 3 ] 저장됨)
// 각 요소의 짝수, 홀수 여부
const numbs = [1, 2, 3];
result = numbs.map(n) => {
if ( n % 2) {
return "홀수";
}
return "짝수";
});
-> 결과 : result에는 [ '홀수', '짝수', '홀수' ] 저장됨
reduce
덧셈 함수로 잘못들 알고 있는 경우가 많은데, 대부분 예시로 덧셈을 들어서 그렇다
누적 값을 사용한다고 이해하면 된다
참고사항으로 초기값을 적어주지 않는 경우에는 0번째 인덱스의 값이 초기값이 된다
배열.reduce( (누적값, 현재값, 인덱스, 요소) => { return 결과 }, 초기값 );
// 숫자의 합 (초기값 0 )
const numbs = [1, 2, 3];
result = numbs.reduce( (acc, cur, i) => {
console.log ( acc, cur, i );
return acc + cur;
}, 0 );
-> 결과 : ( result에는 6이 저장됨 )
0 1 0
1 2 1
3 3 2
// 숫자의 합 (초기값 0 )
const numbs = [2, 3, 4];
result = numbs.reduce( (acc, cur, i) => {
console.log ( acc, cur, i );
return acc + cur;
});
-> 결과 : ( result에는 9가 저장됨 ), 초기값이 없어서 0번째 인덱스에 해당하는 1이 초기값이 되고, 인덱스는 1부터 시작한다
2 3 1
5 4 2
reduceRight
reduceRight와 reduce의 동작은 같다
하지만 요소 순회를 오른쪽에서부터 왼쪽으로 한다는 점이 다르다
// 숫자의 합 (초기값 0 )
const numbs = [1, 2, 3];
result = numbs.reduce( (acc, cur, i) => {
console.log ( acc, cur, i );
return acc + cur;
}, 0 );
-> 결과 : ( result에는 6이 저장됨 )
0 3 2
3 2 1
5 1 0
'프로그래밍 > Java.Script' 카테고리의 다른 글
JavaScript Array Filter (0) | 2022.11.03 |
---|---|
ES5, ES6, 호이스팅(hoisting) (0) | 2022.05.28 |
[JavaScript] 자바스크립트 콘솔 이름 출력 방법 소스 (0) | 2021.05.13 |