소개

JavaScript에서 객체를 생성하는 방법은 꽤 많습니다.

1. 객체 리터럴
2. Object() 생성자
3. Object.create()
4. 생성자 함수
5. ES6 클래스

객체 리터럴

아마도 이것이 JavaScript에서 객체를 생성하는 가장 빠르고 쉬운 방법일 것입니다. 이는 객체 이니셜라이저라고도 하며 중괄호({})로 묶인 0개 이상의 속성 이름 및 객체 관련 값 쌍을 쉼표로 구분한 목록입니다.

const newObject = {} // Simply create a new empty object

const newObject = { 
  someKey: "someValue", 
  anotherKey: "anotherValue" 
}

객체 값은 기본 데이터 유형이거나 다른 객체일 수 있습니다.

객체() 생성자

내장된 객체 생성자를 사용하여 객체를 생성할 수 있습니다.
전달된 값이 null이거나 정의되지 않았거나 전달된 값이 없으면 빈 객체를 생성하고 반환합니다.
값이 이미 객체인 경우 동일한 값을 반환합니다.

// below options create and return an empty object
const ObjWithNoValue = new Object();
const ObjWithUndefined = new Object(undefined);
const ObjWithNull = new Object(null);

const newObject = { 
  someKey: "someValue", 
  anotherKey: "anotherValue" 
}

const sameObject = new Object(someObject);

sameObject['andAnotherKey'] = "one another value";

sameObject === newObject; // both objects are same. 

객체.생성()

이 방법을 사용하면 특정 프로토타입을 사용하여 새 개체를 만들 수 있습니다. 이 접근 방식을 사용하면 새 객체가 프로토타입의 속성과 메서드를 상속할 수 있어 상속과 유사한 동작이 용이해집니다.

const person = {
  greet: function () {
    console.log(`Hello ${this.name || 'Guest'}`);
  }
}

const driver = Object.create(person);
driver.name = 'John';
driver.greet(); // Hello John

생성자 함수

ES6 이전에는 유사한 객체를 여러 개 생성하는 일반적인 방법이었습니다. 생성자는 함수일 뿐이며 새 키워드를 사용하면 객체를 생성할 수 있습니다.

"new" 키워드를 사용하여 객체를 생성할 때 함수 이름의 첫 문자를 대문자로 시작하는 것이 좋습니다.

function Person(name, location) {
  this.name = name;
  this.location = location;
  greet() {
    console.log(`Hello, I am ${this.name || 'Guest'} from ${this.location || 'Earth'}`);
  }
}

const alex = new Person('Alex');
alex.greet(); // Hello, I am Alex from Earth

const sam = new Person('Sam Anderson', 'Switzerland');
sam.greet(); // Hello, I am Sam Anderson from Switzerland

ES6 클래스

보다 현대적인 접근 방식은 생성자 함수가 포함된 클래스를 사용하여 속성과 메서드를 초기화하는 다른 OOP 프로그래밍 언어와 마찬가지로 객체를 생성하는 데 도움이 됩니다.

class Person {
  constructor(name, location) {
    this.name = name || 'Guest';
    this.location = location || 'Earth';
  }

  greet() {
    console.log(`Hello, I am ${this.name} from ${this.location}`);
  }
}

const santa = new Person('Santa');
santa.greet(); // Hello, I am Santa from Earth

참조:

• MDN - 자바스크립트
• javascript.info