[면접 질문 #1] What are the possible ways to create objects in JavaScript?

아래 글은 https://github.com/sudheerj/javascript-interview-questions#what-are-the-possible-ways-to-create-objects-in-javascript 에서 번역한 내용이며, Sudheer Jonna 로 부터 번역 허락을 받았음을 알립니다.

 

이 글을 읽고, 면접 뿐만 아니라 자바스크립트의 기본 및 심화 개념을 잡는데 도움이 되었으면 좋겠습니다. 영어 전공자가 아니므로, 오역 또는 제 나름대로의 직역이 있습니다.

 

#1 자바스크립트에서 객체를 생성할 수 있는 방법은 어떤 것들이 있을까?

 

자바스크립트에는 아래와 같이 객체를 생성하는 여러가지 방법이 있다.

 

1. 객체 생성자

객체 생성자를 이용하는 방법이 가장 심플한 방법이다. 하지만, 객체 생성자를 이용해 객체를 생성하는 방법을 추천하지 않는다. 참고만 하면 될 것 같습니다.

const Person = new Object()

 

2. Object의 create 메소드

Object의 create 메소드는 객체를 생성한다. create 메소드의 파라미터로 prototype 객체를 전달 할 수 있다.

const Person = Object.create(null)

 

 

3. literal syntax

Object의 create 메소드를 이용해 객체를 생성할 때, 파라미터로 null을 보내는 것과 동일한 결과를 가져온다. 

const Person = {}

 

 

4. 함수 생성자

function Person(name, age) {
  const object = {}
    
  object.name = name
  object.age = age
    
  return object
}

const parkoon = new Person('parkoon', 30) // case 1.
const kimyang = Person('kimyang', 27) // case 2.

함수를 생성하고 객체 인스턴스를 생성하기 위해 new 연산자를 이용한다.

(깃헙에는 따로 없었지만, case 1. 과 case 2. 의 차이점을 잘 모르겠다. 아래 5번과 같이 프로토타입을 이용한 경우에 new를 사용하여 객체를 생성하면 __proto__라는 객체에 접근 할 수는 있다. 아시는 분 공유 부탁드립니다.)

 

 

5. 함수 생성자 (with 프로토타입)

function Person() {}
Person.prototype.name = 'parkoon'
const parkoon = new Person()

 

 

6. ES6 문법인 Class

class Person {

  constructor(name) {
    this.name = name
  }

  sayMyName() {
    console.log('my name is' + this.name)    
  }
}

const parkoon = new Person('parkoon')
parkoon.sayMyName()

 

 

7. 싱글톤 패턴

싱글톤 패턴은 메모리에 딱! 한 번만 생성되는 객체이다. 아무리 여러번 호출을 해도 동일한 인스턴스를 반환한다. 3번의 literal syntax를 이용해 객체를 생성한는 방법도 싱글톤 패턴이라고 할 수 있다.

const singleton = (function () {

  let instance
  
  function init(name) {
    return {
      name: name,
      sayMyName: function() {
        console.log('my name is ' + this.name)
      }
    }
  }
  
  return {
    new: function(name) {
      
       if (!instance) {
         instance = init(name)
       }
      
      return instance
      
    }
  }

})()

const parkoon = singleton.new('parkoon') 
const kimyang = singleton.new('kimyang')

parkoon.sayMyName() // my name is parkoon
kimyang.sayMyName() // my name is parkoon

console.log(parkoon === kimyang) // true