Javascript 객체 생성하는 방법

Javascript에서 객체를 생성하는 몇 가지 방법들은 다음과 같습니다.

• Object() 생성자
• 객체 리터럴
• 생성자 함수
• Object.create()
• 생성 함수
• ES6 클래스

 

1. Obect() 생성자를 이용하는 방법

// Call the Object constructor with new
var user = new Object();
user.name = 'Sunny';
user.interests = ['Traveling', 'Swimming'];
user.greeting = function () {
  console.log('Hi, I\'m ' + this.name + '.');
};
user.greeting(); // Hi, I'm Sunny.

Object 생성자는 객체 Wrapper를 생성합니다. 이 방법은 권장하지 않는 방법입니다.

 

2. 객체 리터럴 이용하는 방법

// Create a user with object literal
var user = {
  name: 'Sunny',
  interests: ['Traveling', 'Swimming'],
  greeting: function () {
    console.log('Hi, I\'m ' + this.name + '.');
  }
}
user.greeting();  // Hi, I'm Sunny.

이 방법은 1번의 new Object()를 이용하는 것보다 권장하는 방법입니다.

 

3. 생성자 함수를 이용하는 방법

// Create a constructor function
function User (name, interests) {
  this.name = name;
  this.interests = interests;
  this.greeting = function () {
    console.log('Hi, I\'m ' + this.name + '.');
  }
}
// Call the constructor with new to create a user object
var user = new User('Sunny', ['Traveling', 'Swimming']);
user.greeting(); // Hi, I'm Sunny.

문법이 자바와 유사합니다.

자바스크립트는 생성자 호출 시 괄호를 생략해도 되지만 인자를 전달할 수 없고 권장하지 않는 방법입니다.

 

4. Object.create()를 이용하는 방법

// Use Object.create() method with the prototype of
// User constructor function created above
var user = Object.create(User.prototype, {
  name: { value: 'Sunny' },
  interests: { value: ['Traveling', 'Swimming']}
});
// user.greeting(); // Uncaught TypeError: user.greeting() is not a function


// Add greeting to prototype object
User.prototype.greeting = function () {
  console.log('Hi, I\'m ' + this.name + '.');
}
user.greeting(); // Hi, I'm Sunny.

위에서 생성한 User 생성자 함수의 프로토타입과 Object.create()를 활용하는 방법입니다.

Object.create() 메소드는 생성자의 프로토타입 객체로 새로운 객체를 생성하기 때문에 중간에 호출한 greeting함수는 에러가 발생합니다.

이를 해결하려면 User.prototype에 greeting함수를 정의하거나 Object.create()의 두 번째 인자에 전달해줘야 합니다.

 

프로토타입 객체에 함수를 추가하면 해당 생성자로 생성될 모든 객체는 greeting함수를 가질 수 있습니다.

하지만 두 번째 인자에 전달하는 방법은 현재 user객체에만 greeting함수를 추가하게 됩니다.

 

프로토타입은 자바스크립트에서 상위 클래스가 하위 클래스에 상속할 메소드를 제공하는 방법으로 사용합니다.

 

5. 생성 함수를 이용하는 방법

// Use a creator function with an object as its return value
function createUser (name, interests) {
  var user = {};
  user.name = name;
  user.interests = interests;
  user.greeting = function () {
    console.log('Hi, I\'m ' + this.name + '.');
  };
  return user;
}
// Call the creator function with parameters
var user = createUser('Sunny', ['Traveling', 'Swimming']);
user.greeting(); // Hi, I'm Sunny.

자바에서 객체를 인스턴스화 할 때 사용하는 정적 팩토리 방법과 유사한 팩토리 메소드입니다.

생성 함수 내부에서 객체 생성의 세부사항을 감싸기 위한 패턴 중 하나입니다.

 

6. ES6 클래스를 이용하는 방법

// Create User class
class User {
  // Equivalent to User constructor function
  constructor (name, interests) {
    this.name = name;
    this.interests = interests;
  }
  // Equivalent to User.prototype.greeting
  greeting () {
    console.log('Hi, I\'m ' + this.name + '.')
  }
}
let user = new User('Sunny', ['Traveling', 'Swimming']);
user.greeting(); // Hi, I'm Sunny.

이 방법은 자바 문법과 유사합니다.

클래스를 선언하는 대신, 다음과 같이 클래스 표현식을 이용할 수도 있습니다.

// Use class expression
let User = class {
  constructor (name, interests) {
    this.name = name;
    this.interests = interests;
  }
  greeting () {
    console.log('Hi, I\'m ' + this.name + '.')
  }
}
let user = new User('Sunny', ['Traveling', 'Swimming']);
user.greeting(); // Hi, I'm Sunny.