개요
JavaScript에서 객체를 다룰 때, 특정 프로퍼티(키) 하나만 제외하고 나머지 값들을 추출해야 하는 경우가 자주 있습니다. 이럴 때 구조 분해 할당(Destructuring Assignment)과 나머지 매개변수(Rest Parameter) 문법을 함께 사용하면 아주 간단하게 해결할 수 있습니다.
핵심 아이디어는 구조 분해 시 원하는 키를 먼저 추출한 뒤, 전개 연산자(...)를 활용해 나머지 프로퍼티들을 새로운 객체로 모으는 것입니다.
예제 코드
다음은 객체에서 firstName 키 하나만 제외하고 나머지 값을 추출하는 전체 예제입니다.
<!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;
}
.result {
color: red;
}
</style>
</head>
<body>
<h1>특정 키를 제외한 객체 구조 분해</h1>
<div class="sample">{"firstName":"Rohit","lastName":"Sharma","age":22}</div>
<div class="result"></div>
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 객체가 구조 분해되어 결과가 표시됩니다.</h3>
<script>
let resEle = document.querySelector(".result");
let obj = {
firstName: "Rohit",
lastName: "Sharma",
age: 22,
};
let { firstName, ...restParam } = obj;
document.querySelector(".Btn").addEventListener("click", () => {
resEle.innerHTML += "firstName = " + firstName + "<br>";
resEle.innerHTML += "restParam.lastName = " + restParam.lastName + "<br>";
resEle.innerHTML += "restParam.age = " + restParam.age + "<br>";
});
</script>
</body>
</html>코드 설명
이 예제의 핵심은 다음 한 줄입니다.
let { firstName, ...restParam } = obj;firstName: 객체에서 해당 키의 값을 별도 변수로 추출합니다....restParam:firstName을 제외한 나머지 모든 프로퍼티(lastName,age)가 새로운 객체로 담깁니다.
버튼을 클릭하면 추출된 firstName 값과, 나머지 프로퍼티를 담고 있는 restParam 객체 내부의 값들이 화면에 순서대로 출력됩니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
'클릭하세요' 버튼을 누르면 아래와 같이 구조 분해 결과가 출력됩니다.
마무리
나머지 매개변수(Rest Parameter)를 활용한 구조 분해는 ES6(ES2015)부터 지원되는 문법으로, 객체에서 불필요한 키를 손쉽게 제거하거나 특정 필드만 분리할 때 매우 유용합니다. 반복문 없이 한 줄의 코드로 처리할 수 있어 코드의 가독성과 유지보수성이 크게 향상됩니다.