[객체] 자바스크립트에서 객체를 생성하는 다양한 방법

객체

객체는 데이터를 key:value 쌍으로 저장하는 자료구조다.

그래서 하나의 변수(식별자)에 여러 데이터들을 저장하여 관리할 수 있다.

 

사실, 자바스크립트의 거의 모든 것들은 객체다.
배열, 함수, 객체, 날짜, 정규표현식 등등!

원시값을 제외한 값들은 모두 객체다.

 

물론 모든 객체들에 대해 다루기보단, 모듈의 기반이 되며 key:value의 쌍을 가지는 객체를 중심으로 살펴보자.

 

먼저 객체를 생성하는 다양한 방법들에 대해서 알아본다!

 

---

1. 객체 리터럴

가장 친근한 {}를 이용해서 객체를 만드는 방법이다.

    const coder = {
      name: 'jiho',
      hobby: 'coding',
      selfIntroduction(){
        console.log('안녕하세요? 제 이름은 ' + this.name + '이며 취미는 ' + this.hobby +'입니다.');
      }
    };

    coder.selfIntroduction()

 

2. 생성자 패턴

함수를 정의하고, new 키워드로 함수를 호출하면 그 함수는 생성자 함수가 된다.

생성자 함수로서 호출된 함수는, return이 없다면 암묵적인 return this로 인스턴스 객체를 리턴한다.

생성자 함수나 클래스 등을 선언할 때는 이름을 PascalCase로 정의하는 것이 관례다!

    function Coder(name, hobby){
        this.name = name;
          this.hobby = hobby;
          this.selfIntroduction = function(){
             console.log('안녕하세요? 제 이름은 ' + this.name + '이며 취미는 ' + this.hobby +'입니다.');
        }
    }

    const jiho = new Coder('jiho', 'coding');
    jiho.selfIntroduction();

 

3. 프로토타입을 이용한 객체

프로토타입을 이용해서 공통 메서드들을 프로토타입에 정의할 수 있다.

    function Coder(name, hobby){
        this.name = name;
          this.hobby = hobby;
    }

    Coder.prototype.selfIntroduction = function(){
             console.log('안녕하세요? 제 이름은 ' + this.name + '이며 취미는 ' + this.hobby +'입니다.');
    }

    const jiho = new Coder('jiho', 'coding');
    jiho.selfIntroduction();

생성자 패턴과 무척 유사해보이지만, 프로토타입을 이용한 객체 생성은 메모리 효율적이다.

 

생성자 패턴에서는?

• 생성자를 통해 생선된 객체들이 여러개 있다면, 객체마다 selfIntroduction 메서드를 가진다.

프로토타입에서는?

• 객체들을 여러 개 생성해도, 같은 프로토타입을 공유한다. selfIntroduction 메서드는 프로토타입에 하나 존재한다.

 

여러 객체들을 생성해도 객체들의 프로토타입은 Coder.prototype으로 같으며,

프로토타입의 selfIntroduction 메서드를 재사용하게 된다.

 

 

크롬 개발자 도구를 통해 직접 비교해보면,

생성자 패턴을 통해 생성한 객체는 객체 내부에 메서드를 가지고 있다.

 

프로토타입을 이용한 객체는, 생성한 객체와 연결된 프로토타입에 메서드를 가지고 있다.

 

4. Object.create

prototype 키워드를 직접적으로 이용하진 않지만, 프로토타입을 이용한 객체를 만들 때 사용할 수 있다.

    const coderMethod = {
        selfIntroduction : function(){
             console.log('안녕하세요? 제 이름은 ' + this.name + '이며 취미는 ' + this.hobby +'입니다.');
        }
    }

    const jiho = Object.create(coderMethod, {
          name: { value:'jiho'},
          hobby: { value: 'coding'}
    });

    jiho.selfIntroduction();

create 메서드는 프로토타입 기반 상속을 매끄럽게 하기 위해 탄생했다고 한다.
class가 ES6에서 추가된 이후, extends를 통해 상속을 구현할 수 있어서 현재는 잘 쓰이진 않는다.

 

5. 클래스 패턴

ES6(2015)에서 자바스크립트에 클래스가 추가되었다.

Class 키워드를 이용해 클래스를 정의하고, new 키워드로 클래스를 호출하면 생성자(constructor)가 호출된다.

생성자는 인스턴스를 만들어 반환하며, 이 인스턴스가 객체다.

 

자바스크립트 class 키워드는 내부적으로 프로토타입을 통해 구현되어있다.

    class Coder{
        constructor(name, hobby){
            this.name = name;
            this.hobby = hobby;
        }
        selfIntroduction(){
            console.log('안녕하세요? 제 이름은 ' + this.name + '이며 취미는 ' + this.hobby +'입니다.');
        }
    }

    const jiho = new Coder('jiho', 'coding');
    jiho.selfIntroduction();

프로토타입을 이용한다면 selfIntroduction 메서드가 프로토타입에 담겨있지 않을까?

 

 

직접 살펴보자.

클래스를 통해 생성한 객체는 프로토타입을 이용한다.

 

---

마치며

이처럼 다양한 방법으로 객체를 생성할 수 있다.

각 특성을 이해하고 적재적소에 활용할 줄 알면 좋다.

 

예를 들면, 

일반화 없이 하나의 객체만을 생성해야 할 때.

생성자를 사용하기 보다는, 1번의 리터럴만을 사용하는 것이 가장 효율적이다.

 

Person 등의 일반화된 개념으로부터 인스턴스를 생성해야 한다면
class 키워드나 생성자 함수 + 프로토타입을 적극 이용하여 반복과 메모리 누수를 줄일 수 있겠다.