JavaScript - 변수를 활용해 객체 키 동적으로 설정하는 방법

JavaScript에서 변수 값을 객체의 키(key)로 설정하려면 대괄호 표기법([])을 사용해야 합니다. 점 표기법(.)은 고정된 속성 이름에만 사용할 수 있지만, 대괄호 표기법은 변수나 표현식의 결과값을 키로 동적으로 활용할 수 있다는 큰 장점이 있습니다.

예를 들어 obj[변수명] = 값 형태로 작성하면, 변수에 담긴 문자열이 그대로 객체의 새로운 키가 됩니다.

전체 예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>변수로 객체 키 설정</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample {
        font-size: 18px;
        font-weight: 500;
        color: red;
    }
</style>
</head>
<body>
<h1>변수로 객체 키 설정 예제</h1>
속성 이름 입력 <input class="pName" type="text" /><br />
속성 값 입력 <input class="pName" type="text" />
<br />
<div class="sample"></div>
<button class="Btn">클릭하세요</button>
<h3>
위의 버튼을 클릭하면 입력 필드에 작성한 내용이 각각
객체의 속성 이름과 값으로 설정됩니다.
</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    let propertyKey = document.querySelector(".pName");
    let propertyValue = document.querySelectorAll(".pName")[1];
    let testObj = {
        a: "Hello",
    };
    document.querySelector(".Btn").addEventListener("click", () => {
        testObj[propertyKey.value] = propertyValue.value;
        sampleEle.innerHTML = "testObj[" + propertyKey.value + "] = "+testObj[propertyKey.value];
    });
</script>
</body>
</html>

코드 핵심 설명

testObj[propertyKey.value] = propertyValue.value; — 사용자가 입력한 문자열을 키로 하여 객체에 새로운 속성을 추가하는 부분입니다. 여기서 대괄호 안의 값이 평가되어 그 결과가 키로 사용됩니다.
버튼 클릭 시 .sample 영역에 testObj[키] = 값 형태로 결과가 출력되어 동작을 바로 확인할 수 있습니다.

실행 결과

속성 이름과 값을 입력한 뒤 '클릭하세요' 버튼을 누르면 −

JavaScript - 변수를 활용해 객체 키 동적으로 설정하는 방법

입력한 이름이 키로 설정되고 해당 값이 화면에 표시됩니다.

참고: ES6 계산된 속성명(Computed Property Name)

ES6(ECMAScript 2015)부터는 객체 리터럴을 선언하는 시점에도 대괄호 문법으로 변수를 키로 사용할 수 있습니다.

const key = "userName";
const obj = { [key]: "홍길동" };
console.log(obj.userName); // "홍길동"

이처럼 대괄호 표기법을 활용하면 객체의 키를 상황에 맞게 유연하게 구성할 수 있어, 동적인 데이터 처리나 API 응답 가공 등에 매우 유용합니다.