JavaScript에서 여러 개의 값을 함수에 전달할 때, 각각의 매개변수를 일일이 나열하는 대신 객체 하나로 묶어서 전달하면 코드가 훨씬 깔끔해집니다. 특히 구조 분해 할당(Destructuring)을 활용하면 함수 선언부에서 필요한 값만 곧바로 추출할 수 있어 가독성과 유지보수성이 크게 향상됩니다.
구조 분해 할당으로 객체 전달하기
함수의 매개변수 자리에 중괄호 { }를 사용하면, 전달받은 객체에서 원하는 속성들을 자동으로 분해하여 사용할 수 있습니다. 아래 예제에서는 addNum({ a, b, c, d }) 형태로 네 개의 속성값을 받아 합계를 계산합니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<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;
}
.sample {
color: red;
}
</style>
</head>
<body>
<h1>매개변수 객체를 함수에 전달하기</h1>
<div class="result"><br /></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 4개의 객체 값을 함수에 전달하여 더합니다</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
function addNum({ a, b, c, d }) {
return a + b + c + d;
}
let obj = {
a: 22,
b: 33,
c: 7,
d: 9,
};
BtnEle.addEventListener("click", () => {
resEle.innerHTML = " 매개변수들의 합계 = " + addNum(obj);
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 객체 obj에 담긴 네 개의 값(22, 33, 7, 9)이 addNum() 함수로 전달되고, 구조 분해 할당을 통해 각 속성이 추출된 후 합계인 71이 화면에 표시됩니다.
정리
이처럼 객체와 구조 분해 할당을 함께 사용하면 다음과 같은 장점이 있습니다.
- 매개변수 순서에 종속되지 않습니다. 호출 시 인자 순서를 잘못 넘길 위험이 없습니다.
- 필요한 값만 선택적으로 받을 수 있습니다. 객체에 더 많은 속성이 있어도 함수는 필요한 것만 추출합니다.
- 기본값 설정이 쉽습니다. { a = 0, b = 0 }처럼 기본값을 지정해 유연하게 처리할 수 있습니다.