728x90
inject 및 foldl이라고도 하는 reduce는 값 목록을 단일 값으로 요약합니다.
사용형식 : _.reduce(배열이나 객체, 함수, [함수의 첫 번째 매개변수로 전달될 초기값], [context])
|
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
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UnderScore.js 연습</title>
<script src="https://unpkg.com/jquery@3.6.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/underscore@1.13.6/underscore-umd-min.js"></script>
<style type="text/css">
div { border: 1px solid gray; padding: 5px; margin: 5px; }
</style>
<script type="text/javascript">
$(function(){
// inject 및 foldl이라고도 하는 reduce는 값 목록을 단일 값으로 요약합니다.
// reduce : _.reduce(list, iteratee, [memo], [context])
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
$("#result").append(array + "<hr>");
// 세번째 인수는 두번째 인수인 함수의 첫번째 인수의 초기값입니다.
let sum = _.reduce(array, (sum, value) => {
console.log(sum + " ====> " + value);
return sum + value;
}, 0);
$("#result").append(sum + "<hr>");
let object = {"one":10,"two":20,"three":30};
let multiple = _.reduce(object, (multiple, value) => {
console.log(multiple + " ====> " + value);
return multiple * value;
}, 1);
$("#result").append(multiple + "<hr>");
// reduceRight : 오른쪽부터 시작됩니다.
let ar = _.reduceRight([[0, 1, 2], [1, 2, 3], [2, 3, 4]], (a, b) => {
console.log(a + " ====> " + b);
return a.concat(b);
},[]);
$("#result").append(typeof(ar) + " : " + ar + "<hr>");
let strArray = _.reduceRight("한놈,두식이,석삼,너구리".split(","), (a, b) => {
console.log(a + " ====> " + b);
return a.concat(" " + b);
},[]);
$("#result").append(typeof(strArray) + " : " + strArray);
});
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
|
cs |
실행 결과 화면 입니다.
1. 배열을 만들고 출력을 해보았습니다.
|
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
$("#result").append(array + "<hr>");
|
2. 세 번째 매개변수로 0을 지정했습니다. 그 값이 반복함수의 첫 번째 매개변수인 sum에 저장됩니다. 그래서 sum에 배열에서 넘어온 요소값 value와 더하기를 합니다. 결국 배열 요소들의 합계가 구해져서 반환 됩니다.
|
// 세번째 인수는 두번째 인수인 함수의 첫번째 인수의 초기값입니다.
let sum = _.reduce(array, (sum, value) => {
console.log(sum + " ====> " + value);
return sum + value;
}, 0);
$("#result").append(sum + "<hr>");
|
결과
| 55 |
로그 출력값입니다. 두 변수의 값의 변화를 확인해 보세요
3. 객체를 선언 합니다. 세 번째 매개변수로 1을 지정했습니다. 그 값이 반복함수의 첫 번째 매개변수인 multiple 에 저장됩니다. 그래서 object에서 넘어온 속성값 value와 곱하기를 합니다. 결국 배열 요소들의 곱한값이 구해져서 반환 됩니다.
|
let object = {"one":10,"two":20,"three":30};
let multiple = _.reduce(object, (multiple, value) => {
console.log(multiple + " ====> " + value);
return multiple * value;
}, 1);
$("#result").append(multiple + "<hr>");
|
결과
| 6000 |
로그 출력값입니다. 두 변수의 값의 변화를 확인해 보세요
4. _.reduceRight()함수는 데이터의 오른쪽 부터 시작 됩니다. 세 번째 매개변수로 빈 배열을 지정했습니다. 2차원 배열의 마지막 행요소부터 첫번째 행요소까지 반복하면서 concat함수를 이용하여 붙이기를 수행합니다.
|
// reduceRight : 오른쪽부터 시작됩니다.
let ar = _.reduceRight([[0, 1, 2], [1, 2, 3], [2, 3, 4]], (a, b) => {
console.log(a + " ====> " + b);
return a.concat(b);
},[]);
$("#result").append(typeof(ar) + " : " + ar + "<hr>");
|
결과
| object : 2,3,4,1,2,3,0,1,2 |
로그 출력값입니다. 두 변수의 값의 변화를 확인해 보세요
5. 다음의 코드는 4번의 내용과 같습니다. 단지 데이터가 문자열 배열일 뿐입니다.
|
let strArray = _.reduceRight("한놈,두식이,석삼,너구리".split(","), (a, b) => {
console.log(a + " ====> " + b);
return a.concat(" " + b);
},[]);
$("#result").append(typeof(strArray) + " : " + strArray);
|
결과
| object : 너구리, 석삼, 두식이, 한놈 |
로그 출력값입니다. 두 변수의 값의 변화를 확인해 보세요
728x90
'JavaScript > underscore.js' 카테고리의 다른 글
| _.findWhere() 함수 사용법 (0) | 2023.02.24 |
|---|---|
| _.find()함수 사용법 (0) | 2023.02.24 |
| _.map() 함수 사용법 (0) | 2023.02.24 |
| Underscore 함수들의 세 번째 매개변수 Context 사용하기 (0) | 2023.02.24 |
| _each() 함수 사용법 (0) | 2023.02.24 |
