JavaScript로 개발하다 보면 객체 배열의 키(key) 이름을 바꿔야 하는 경우가 종종 있습니다. 이때 중요한 것은 원본 배열을 훼손하지 않고 새로운 형태의 배열을 만들어내는 것입니다. 가장 깔끔한 방법은 배열의 map() 메서드를 활용하는 것입니다.
핵심 원리
map() 메서드는 기존 배열을 직접 수정하는 대신, 콜백 함수의 반환값으로 구성된 새로운 배열을 반환합니다. 따라서 각 객체에 대해 새로운 키에 기존 값을 복사한 뒤, 더 이상 필요 없는 기존 키를 delete 연산자로 제거하면 키 이름이 변경된 새 배열을 얻을 수 있습니다.
예제 코드
다음은 JavaScript에서 원본 배열을 변경하지 않고 객체 키를 변경하는 전체 코드입니다.
<!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;
}
</style>
</head>
<body>
<h1>원본 배열을 변경하지 않고 객체 키 변경하기</h1>
<button class="Btn">CLICK HERE</button>
<h3>
위 버튼을 클릭하면 name 키가 fullName으로 변경됩니다.
</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let resEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
let obj = [
{ name: "Rohan Sharma", age: 12 },
{ name: "Shawn Mendes", age: 18 },
{ name: "Michael Shaw", age: 15 },
{ name: "Mitch Johansson", age: 19 },
];
BtnEle.addEventListener("click", () => {
obj = obj.map((ele) => {
ele["fullName"] = ele["name"];
delete ele["name"];
return ele;
});
console.log(obj);
});
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
'CLICK HERE' 버튼을 클릭한 뒤 브라우저 개발자 도구의 콘솔(Console) 탭에서 결과를 확인하면, 모든 객체의 name 키가 fullName 키로 대체된 것을 볼 수 있습니다.
코드 동작 방식
- map() 메서드: 배열의 각 요소를 순회하며 콜백 함수의 결과로 새로운 배열을 생성합니다. 원본 배열 변수 자체는 그대로 유지됩니다.
- 새 키 할당:
ele["fullName"] = ele["name"]코드로 기존name값을fullName키에 복사합니다. - delete 연산자:
delete ele["name"]을 통해 더 이상 필요 없는 기존 키를 객체에서 제거합니다.
참고: 내부 객체까지 완전히 보존하는 방법
위 예제에서 map()은 새로운 배열을 만들지만, 배열 안의 각 객체는 원본과 동일한 참조를 공유합니다. 내부 객체까지 원본을 건드리지 않으려면 스프레드 연산자(...)와 구조 분해 할당을 함께 사용하는 것이 좋습니다.
obj = obj.map(({ name, ...rest }) => ({ fullName: name, ...rest }));
이 한 줄의 코드는 각 객체를 새로 복사하면서 name 키만 fullName으로 교체하고, 나머지 속성(age 등)은 그대로 유지합니다. 불변성(immutability)을 지켜야 하는 React나 Redux 환경에서 특히 유용한 패턴입니다.