arr.reduce() 와 arr.reduceRight()
reduce와 reduceRight는 배열을 기반으로 값 하나를 도출할 때 사용됩니다.
let value = arr.reduce(callback(accumulator, currentValue, index, array), initialValue);
배열.reduce(callback(누적값, 현재값, 인덱스, 요소), 초기값);
Array.reduceRight() : 끝 인덱스 부터 시작한다는 점을 제외하고는 reduce()와 유사하다.
reduce()는 빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 callback 함수를 한 번씩 실행하는데, 콜백 함수는 다음의 네 인수를 받습니다:
- accumulator
- currentValue
- currentIndex
- array
콜백의 최초 호출 때 accumulator와 currentValue는 다음 두 가지 값 중 하나를 가질 수 있습니다.
만약 reduce() 함수 호출에서 initialValue를 제공한 경우, accumulator는 initialValue와 같고 currentValue는 배열의 첫 번째 값과 같습니다.
initialValue를 제공하지 않았다면, accumulator는 배열의 첫 번째 값과 같고 currentValue는 두 번째와 같습니다.
매개변수로 함수만 전달한 경우
| let sum = ar.reduce((total, value)=> total + value); |
두번째 매개 변수로 초기값을 전달한 경우
sum = ar.reduce(function(acc, item, index, array){
console.log(`${acc} - ${item} - ${index} - ${array}`)
return acc + item;
}, 100);
|
reduce를 이용하여 팩토리알 값을 구해보자
|
factorial = [1, 2, 3, 4, 5].reduce((acc, item, index)=>{ console.log(`${acc} - ${item} - ${index}`)
return acc * item;
}, 1);
|
ex12.html 파일을 다음과 같이 만듭니다.
|
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript Array</title>
<script>
let ar = [];
for (let i = 0; i < 10; i++) ar.push(i+1);
document.write(`${ar.length}개 : ${ar}<br>`);
let sum = ar.reduce((total, value)=> total + value);
document.write(`합계 : ${sum}<br>`);
sum = ar.reduce(function(acc, item, index, array){
console.log(`${acc} - ${item} - ${index} - ${array}`)
return acc + item;
}, 100);
document.write(`합계 : ${sum}<br><hr>`);
let factorial = [1, 2, 3, 4, 5].reduce((s, n)=> s * n);
document.write(`10! = ${factorial}<br>`);
factorial = [1, 2, 3, 4, 5].reduce((acc, item, index)=>{
console.log(`${acc} - ${item} - ${index}`)
return acc * item;
}, 1);
document.write(`10! = ${factorial}<br><hr>`);
let str = [11, 22, 33, 44, 55].reduce((acc, item, index, array)=> `${acc} array[${index}] = ${item} = ${array[index]}<br>`, '');
document.write(`${str}<br><hr>`);
const zodiac1 = "쥐,소,호랑이,토끼,용,뱀,말,양,원숭이,닭,개,돼지".split(",");
const zodiac2 = "자,축,인,묘,진,사,오,미,신,유,술,해".split(",");
const zodiac3 = "子,丑,寅,卯,辰,巳,午,未,申,酉,戌,亥".split(",");
str = zodiac1.reduce((acc, item, index)=>`${acc} ${item}(${zodiac2[index]}, ${zodiac3[index]})<br>`,'');
document.write(`${str}<br><hr>`);
// Array.reduceRight() : 끝 인덱스 부터 시작한다는 점을 제외하고는 reduce()와 유사하다.
str = zodiac1.reduceRight((acc, item, index)=>`${acc} ${item}(${zodiac2[index]}, ${zodiac3[index]})<br>`,'');
document.write(`${str}<br><hr>`);
factorial = [1, 2, 3, 4, 5].reduceRight((acc, item, index)=>{
console.log(`${acc} - ${item} - ${index}`)
return acc * item;
}, 1);
document.write(`10! = ${factorial}<br><hr>`);
</script>
</head>
<body>
</body>
</html>
|
cs |
실행 결과 입니다.
'Front End > Javascript' 카테고리의 다른 글
| [JavaScript] 맵(Map) 객체의 map[key]는 객체 접근입니다. (0) | 2024.10.23 |
|---|---|
| [JavaScript] 맵(Map) 객체의 set(), get() (0) | 2024.10.23 |
| [JavaScript] 배열 map() (0) | 2024.10.23 |
| [JavaScript] 배열 sort() (0) | 2024.10.23 |
| [JavaScript] 배열 filter(), reverse(), every(), some() (0) | 2024.10.23 |
