JavaScript 객체 속성값을 동적으로 설정하는 방법

JavaScript에서는 점 표기법(dot notation) 또는 대괄호 표기법(bracket notation)을 사용하여 객체의 속성값을 동적으로 설정할 수 있습니다. 객체가 생성된 이후에도 언제든지 속성에 새로운 값을 할당하면 기존 값이 자동으로 덮어쓰여집니다.

예제 코드

다음은 JavaScript 객체의 값을 동적으로 설정하는 전체 예제입니다.

<!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;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>Set Javascript object values dynamically</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to set student object values dynamically</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let student = {
        name: "Rohan",
        age: 22,
        displayInfo() {
            return "Name = " + this.name + " : Age = " + this.age + "<br>";
        },
    };
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = student.displayInfo();
        resEle.innerHTML += "<br>After changing properties <br>";
        student.name = "Shawn";
        student.age = 19;
        resEle.innerHTML += student.displayInfo();
    });
</script>
</body>
</html>

코드 설명

위 코드의 동작 과정은 다음과 같습니다.

student 객체에는 name, age 두 개의 속성과 정보를 문자열로 반환하는 displayInfo() 메서드가 정의되어 있습니다.
버튼을 클릭하면 가장 먼저 객체의 초기 속성값(Name = Rohan : Age = 22)이 화면에 출력됩니다.
그다음 student.name = "Shawn";과 student.age = 19;처럼 점 표기법을 사용해 각 속성에 새로운 값을 할당합니다.
마지막으로 변경된 속성값(Name = Shawn : Age = 19)이 다시 화면에 출력됩니다.

이처럼 이미 존재하는 속성에 새 값을 할당하면 기존 값이 즉시 교체됩니다. 참고로 대괄호 표기법(student["name"] = "Shawn";)을 사용해도 동일한 결과를 얻을 수 있으며, 속성 이름을 변수로 동적으로 지정해야 하는 경우에는 대괄호 표기법이 특히 유용합니다.

출력 결과

페이지가 처음 로드된 화면입니다.

JavaScript 객체 속성값을 동적으로 설정하는 방법

'CLICK HERE' 버튼을 클릭한 후, 속성값이 변경되어 출력된 화면입니다.

JavaScript 객체 속성값을 동적으로 설정하는 방법