객체 리터럴과 생성자 함수로 생성한 객체의 핵심 차이점 완벽 정리

객체 리터럴 vs 생성자 함수, 무엇이 다를까?

자바스크립트에서 객체 리터럴(object literal)로 생성된 객체는 싱글톤(singleton)입니다. 이는 해당 객체에 변경이 일어나면 그 변경 사항이 스크립트 전체에 영향을 미친다는 의미입니다.

반면 생성자 함수(constructor function)로 생성된 객체는 여러 개의 독립적인 인스턴스를 가질 수 있어서, 한 인스턴스에서 발생한 변경이 다른 인스턴스에는 영향을 주지 않습니다.

아래에서 각각의 방식을 예제와 함께 자세히 살펴보겠습니다.

1) 객체 리터럴로 생성한 객체

객체 리터럴로 만든 객체는 싱글톤이기 때문에 한 번 변경하면 그 값이 스크립트 전체에 유지됩니다. 하나의 인스턴스에서 값을 바꾸면 해당 객체의 모든 참조가 동시에 영향을 받습니다.

다음 예제를 보면, 처음에는 student 객체와 newStudent 객체 모두 같은 이름인 Ravi를 출력합니다. 하지만 한쪽 객체의 이름은 그대로 둔 채 newStudent의 이름만 kumar로 변경하는 순간, 두 객체 모두 변경된 이름인 kumar를 출력하게 됩니다.

예제 코드

<html>
<body>
<script>
    var student = {
       name: "Ravi"
    }
    var newStudent = student; // 같은 객체를 참조
    document.write("Before change");
    document.write("</br>");
    document.write("student name = " + student.name);
    document.write("</br>");
    document.write("new student name = " + newStudent.name);
    document.write("</br>");
    newStudent.name = "kumar"; // 하나만 변경했지만 두 객체 모두 영향받음
    document.write("After change");
    document.write("</br>");
    document.write("student name = " + student.name);
    document.write("</br>");
    document.write("new student name = " + newStudent.name);
</script>
</body>
</html>

실행 결과

Before change
student name = Ravi
new student name = Ravi
After change
student name = kumar
new student name = kumar

2) 생성자 함수로 생성한 객체

생성자 함수를 사용해 정의한 객체는 해당 객체의 여러 개의 독립적인 인스턴스를 만들 수 있습니다. 따라서 한 인스턴스에서 값을 변경해도 다른 인스턴스에는 아무런 영향을 주지 않습니다.

다음 예제에서는 newStudent 객체의 이름이 변경되었지만, 다른 객체인 student의 이름은 그대로 유지됩니다. 결과적으로 두 객체는 서로 다른 이름을 출력하게 됩니다.

예제 코드

<html>
<body>
<script>
    var stu = function() {
       this.name= "Ravi"
    }
    var newStudent = new stu(); // 독립적인 인스턴스 1
    var student = new stu();    // 독립적인 인스턴스 2
    document.write("Before change");
    document.write("<br>");
    document.write("student name = " + student.name);
    document.write("<br>");
    document.write("new student name = " + newStudent.name);
    document.write("<br>");
    newStudent.name = "kumar"; // 해당 인스턴스만 변경됨
    document.write("After change");
    document.write("<br>");
    document.write("student name = " + student.name);
    document.write("<br>");
    document.write("new student name = " + newStudent.name);
</script>
</body>
</html>

실행 결과

Before change
student name = Ravi
new student name = Ravi
After change
student name = Ravi
new student name = kumar

정리

객체 리터럴: 싱글톤으로 동작하며, 하나의 변경이 객체를 참조하는 모든 곳에 영향을 줍니다.
생성자 함수: new 키워드로 여러 독립적인 인스턴스를 생성할 수 있으며, 인스턴스 간 변경 사항이 서로 공유되지 않습니다.

따라서 프로그램 전체에서 단 하나의 공유 상태가 필요하다면 객체 리터럴이 적합하고, 독립적인 상태를 가진 여러 객체가 필요하다면 생성자 함수를 사용하는 것이 좋습니다.