JavaScript에서 함수 매개변수 구조 분해(Destructuring)란?
JavaScript의 구조 분해 할당(Destructuring)은 ES6(ES2015)에서 도입된 문법으로, 객체나 배열의 값을 간결하게 추출하여 변수에 담을 수 있게 해줍니다. 특히 함수 매개변수에 이 문법을 적용하면, 인자로 전달된 객체에서 필요한 속성만 곧바로 꺼내 사용할 수 있어 코드가 훨씬 깔끔하고 가독성이 높아집니다.
또한 구조 분해 시 기본값(default value)을 지정할 수 있어, 객체에 해당 속성이 없거나 undefined로 전달되더라도 안전하게 초기값을 사용할 수 있다는 장점이 있습니다.
예제 코드
다음 코드는 함수 매개변수를 구조 분해하여 합계를 계산하는 방법을 보여줍니다 −
<!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;
}
.sample,
.result {
font-size: 18px;
font-weight: 500;
color: red;
}
.result {
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>De structuring function parameters</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to call a function and pass above object to it as argument</h3>
<script>
let sampleEle = document.querySelector(".sample");
let resultEle = document.querySelector(".result");
sampleEle.innerHTML = "{a:22,b:44,c:55,d:99}";
function add({ a = 0, b = 0, c = 0, d = 0 }) {
return a + b + c + d;
}
document.querySelector(".Btn").addEventListener("click", () => {
resultEle.innerHTML += "Sum = " + add({ a: 22, b: 44, c: 55, d: 99 });
});
</script>
</body>
</html>
코드 설명
- add({ a = 0, b = 0, c = 0, d = 0 }) : 함수 선언부에서 매개변수 자리에 중괄호를 사용해 객체를 바로 구조 분해합니다. 각 속성에는 기본값 0이 지정되어 있어, 일부 속성이 누락되어도 오류 없이 계산됩니다.
- add({ a: 22, b: 44, c: 55, d: 99 }) : 버튼 클릭 시 네 개의 속성을 가진 객체를 인자로 전달하며, 함수 내부에서는 각 값이 더해져 합계 220이 반환됩니다.
실행 결과
페이지 로드 시 화면에는 다음과 같이 샘플 객체가 표시됩니다 −
'CLICK HERE' 버튼을 클릭하면 아래와 같이 계산된 합계가 출력됩니다 −
마무리
이처럼 구조 분해 할당을 함수 매개변수에 활용하면, 객체에서 필요한 값만 선택적으로 꺼내 쓸 수 있고 기본값 설정을 통해 예외 상황도 손쉽게 처리할 수 있습니다. 복잡한 객체를 다루는 실무 코드에서 코드 품질과 유지보수성을 높이는 데 큰 도움이 되는 패턴이니 꼭 익혀두시기 바랍니다.