JavaScript에서 다른 객체를 통해 객체에 접근하는 방법

JavaScript에서는 하나의 객체를 정의할 때 다른 객체의 속성값이나 메서드 실행 결과를 참조하여 새로운 객체를 만들 수 있습니다. 이렇게 하면 기존 객체에 담긴 데이터를 재활용하면서 코드 중복을 줄일 수 있습니다.

아래 예제에서는 obj라는 객체를 먼저 선언한 뒤, 두 번째 객체 obj2를 생성하면서 obj의 속성과 메서드를 활용하는 방법을 보여줍니다.

예제 코드

<!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 {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>JavaScript에서 다른 객체를 통해 객체에 접근하기</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 obj2의 내용이 표시됩니다.</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let obj = {
        firstName: "Rohan",
        lastName: "Sharma",
        welcome() {
            return "Welcome " + this.firstName + " " + this.lastName;
        },
    };
    let obj2 = {
        firstName: "Mohit",
        lastName: obj.lastName,
        welcomeString: obj.welcome(),
    };
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = "obj2.firstName = " + obj2.firstName + "<br>";
        resEle.innerHTML += "obj2.lastName = " + obj2.lastName + "<br>";
        resEle.innerHTML += "obj2.welcomeString = " + obj2.welcomeString + "<br>";
    });
</script>
</body>
</html>

코드 설명

이 예제의 핵심은 obj2 객체가 생성되는 부분입니다.

lastName: obj.lastName — obj의 lastName 속성값("Sharma")을 그대로 가져와 obj2에 할당합니다.
welcomeString: obj.welcome() — obj의 welcome() 메서드를 호출한 결과 문자열("Welcome Rohan Sharma")을 저장합니다. 이때 메서드 내부의 this는 obj를 가리키므로 obj의 이름 정보가 사용됩니다.

결과적으로 obj2는 자신만의 firstName("Mohit")을 가지지만, 성과 인사말은 obj로부터 물려받은 값을 사용하게 됩니다.

출력 결과

위 코드를 실행하면 버튼이 표시된 화면이 나타납니다.

JavaScript에서 다른 객체를 통해 객체에 접근하는 방법

'CLICK HERE' 버튼을 클릭하면 아래와 같이 obj2의 각 속성값이 출력됩니다.

JavaScript에서 다른 객체를 통해 객체에 접근하는 방법

obj2.firstName = Mohit
obj2.lastName = Sharma
obj2.welcomeString = Welcome Rohan Sharma

정리

이처럼 JavaScript에서는 객체 리터럴을 정의하는 시점에 다른 객체의 속성값(obj.lastName)이나 메서드의 반환값(obj.welcome())을 참조할 수 있습니다. 단, 이 방식은 참조 시점의 값이 복사되는 것이므로, 이후 원본 객체의 값이 변경되어도 이미 복사된 값은 바뀌지 않는다는 점을 유의해야 합니다.