JavaScript에서 객체에 reduce 메소드를 적용하는 방법

reduce() 메소드는 본래 배열 전용 메소드이지만, Object.values() 메소드와 함께 사용하면 객체의 값들에도 손쉽게 적용할 수 있습니다. 이 글에서는 버튼을 클릭하면 객체에 담긴 모든 숫자 값을 곱하는 예제를 통해 그 방법을 살펴보겠습니다.

동작 원리

Object.values(객체)는 객체가 가진 값들을 배열 형태로 반환합니다. 반환된 배열에 reduce()를 호출하면 각 요소를 누산기(a)와 차례로 연산하여 하나의 최종 값으로 줄일 수 있습니다.

예제 코드

다음은 JavaScript에서 객체에 reduce 메소드를 적용하는 코드입니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,.sample {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
    .result {
        color: red;
    }
</style>
</head>
<body>
<h1>JavaScript에서 객체에 대한 reduce 메소드</h1>
<div class="sample">{ a:6, b:2, c:9, d:5}</div>
<div class="result"><br /></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 객체의 값들이 서로 곱해집니다</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let multiplyObj = {
        a: 6,
        b: 2,
        c: 9,
        d: 5,
    };
    BtnEle.addEventListener("click", () => {
        let multiplyTotal = Object.values(multiplyObj).reduce((a, b) => a * b);
        resEle.innerHTML += "객체 값들의 곱 = " + multiplyTotal;
    });
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

JavaScript에서 객체에 reduce 메소드를 적용하는 방법

'CLICK HERE' 버튼을 클릭하면 −

JavaScript에서 객체에 reduce 메소드를 적용하는 방법

코드 설명

multiplyObj 객체에는 a: 6, b: 2, c: 9, d: 5의 네 개 값이 저장되어 있습니다.
Object.values(multiplyObj)는 [6, 2, 9, 5]라는 배열을 반환합니다.
reduce((a, b) => a * b)는 배열 요소를 왼쪽부터 차례로 곱하여 6 × 2 × 9 × 5 = 540이라는 최종 결과를 만듭니다.
버튼을 클릭하면 계산된 결과가 .result 요소에 출력됩니다.