상세 컨텐츠

본문 제목

Object (객체) 만드는 7가지 방법

JavaScript

by 폴리프레임 2024. 8. 16. 09:36

본문

반응형

1. Object Literal (객체 리터럴)

const person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

console.log(person.name); // "John"
person.greet(); // "Hello, John"

** 가장 간단하고 직관적인 방법으로 중괄호 {} 로 감싸서 생성합니다.

 

2. Object constructor ( 객체 생성자 )

const person = new Object();
person.name = "Jane";
person.age = 25;
person.greet = function() {
  console.log("Hi, " + this.name);
};

console.log(person.name); // "Jane"
person.greet(); // "Hi, Jane"

** 최상위 Object 생성자를 이용하여, new Object() 로 빈 객체를 만들고, 동적으로 추가하는 방법입니다.

 

3. Constructor fuction (생성자 함수 )

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log("Hello, " + this.name);
  };
}

const person1 = new Person("Alice", 28);
const person2 = new Person("Syng", 35);

console.log(person1.name); // "Alice"
person1.greet(); // "Hello, Alice"

console.log(person2.name); // "Syng"
person2.greet(); // "Hello, Syng"

** Person 생성자 함수는 name과 age를 받아 객체를 초기화합니다. new 키워드를 사용하여 새로운 객체를 생성합니다.

** 함수이름은 대문자로 시작하는 것이 Convention 입니다.

 

4. Object.create() 메소드 사용

const personProto = {
  greet: function() {
    console.log("Hi, " + this.name);
  }
};

const person = Object.create(personProto);
person.name = "Charlie";
person.age = 22;

console.log(person.name); // "Charlie"
person.greet(); // "Hi, Charlie"

** Object.create()는 지정된 프로토타입을 가지는 새로운 객체를 생성합니다. 여기서는 personProto를 프로토타입으로 설정했습니다.

 

5. Class ( 클래스 ) - ES6

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log("Hello, " + this.name);
  }
}

const person1 = new Person("David", 40);
const person2 = new Person("Syng", 65);

console.log(person1.name); // "David"
person1.greet(); // "Hello, David"

console.log(person2.name); // "Syng"
person2.greet(); // "Hello, Syng"

**  class 문법은 constructor 함수와 메서드를 정의하여 객체를 생성합니다. new 키워드를 사용하며 객체 지향 프로그래밍을 더 쉽게 구현할 수 있습니다. 

 

6.  Factory function (팩토리 함수)

function createPerson(name, age) {
  return {
    name,
    age,
    greet() {
      console.log("Hi, " + this.name);
    }
  };
}

const person1 = createPerson("Frank", 45);
const person2 = createPerson("Grace", 29);

console.log(person1.name); // "Frank"
person1.greet(); // "Hi, Frank"

console.log(person2.name); // "Grace"
person2.greet(); // "Hi, Grace"

** 일반함수로서 객체를 반환하게 만들었습니다. new 키워드를 사용하지 않고, 상속 개념도 없습니다.

 

7. Object.assign() 메소드 - ES6

const personProto = {
  greet() {
    console.log("Hello, " + this.name);
  }
};

const person = Object.assign({}, personProto, { name: "Hannah", age: 37 });

console.log(person.name); // "Hannah"
person.greet(); // "Hello, Hannah"

** Object.assign()은 빈 대상 객체에 소스 객체의 속성을 복사하여 새로운 객체를 만듭니다.

관련글 더보기