Post
Reduce
새로운 배열을 반환하는데, 값을 누적시켜서 반환하는 메소드
const calc = [0, 1, 2, 3, 4].reduce(function (
accumulator,
currentValue,
currentIndex,
array
) {
return accumulator + currentValue;
});
console.log(calc); // 10
accumulator: 누산기. 콜백의 반환값을 누적
currentValue: 처리할 현재 요소
currentIndex: 처리할 현재 요소의 인덱스. initialValue가 있는 경우 0, 아니면 1부터 시작.(Optional)
array: reduce()를 호출한 배열.(Optional)
initialValue: 콜백 최초 호출 시 첫번째 인수를 제공하는 값. 초기값을 제공하지 않으면 배열의 첫번째 요소를 사용한다.
JavaScript
const calc = [10, 11, 12, 13, 14].reduce(function (
accumulator,
currentValue,
currentIndex,
array
) {
return accumulator + currentValue;
});
console.log(calc); // 60
JavaScript
const calc = [10, 11, 12, 13, 14].reduce(function (
accumulator,
currentValue,
currentIndex,
array
) {
return accumulator + currentValue;
},
100);
console.log(calc); // 160
Reduce로 배열 내 홀수 개수 찾기
JavaScript
arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const sum = arr.reduce(function (acc, current, idx) {
if (current % 2 == 1) {
acc++;
}
return acc;
}, 0);
console.log(sum); // 5
Reduce로 HTML 조작하기
HTML
<script src="./lodash.js"></script>
<script src="./test.js" defer></script>
</head>
<body>
<div class="test"></div>
</body>
JavaScript
const test = document.querySelector(".test");
const numbers = [1, 2, 3, 4, 5];
const suffled = _.shuffle(numbers);
const html = suffled.reduce(function (acc, item, idx) {
if (idx < suffled.length - 1) {
return (acc += `<li>${item}</li>`);
} else {
return (acc += `<li>${item}</li></ul>`);
}
}, "<ul>");
test.innerHTML = html;
ON BROWSER
'JavaScript related' 카테고리의 다른 글
| JavaScript Cat MBTI test (0) | 2023.02.01 |
|---|---|
| JavaScript find & filter & charAt (0) | 2023.02.01 |
| JavaScript beforeunload (0) | 2023.02.01 |
| JavaScript Event Delegation (0) | 2023.01.31 |
| JavaScript target & currentTarget (0) | 2023.01.31 |