[JavaScript] 객체 생성하기

⭐ 객체 초기자나 생성자 함수 정의(+new 연산자)와 함께 호출하여 객체 인스터스를 생성할 수 있다. 

1. 객체 초기자

"리터럴 표기에 의한 객체 생성" 이라고도 한다.

//새로운 객체 obj
const obj = {
  property_1: value_1, // 속성의 값은 식별자일 수도 있고
  2: value_2, // 숫자일 수도 있고
  // ...,
  "property n": value_n, // 문자열일 수도 있음
};

//cond가 참일 때만 객체를 생성해서 변수 x에 할당
let x;
if (cond) {
  x = { greeting: "안녕하세요" };
}

// myHonda를 세 개의 속성과 함께 생성. engine 속성 역시 자신만의 속성을 가진 객체임
const myHonda = {
  color: "red",
  wheels: 4,
  engine: { cylinders: 4, size: 2.2 },
};

• 콜론 앞에 위치한 속성 이름 = 식별자(이름, 숫자, 스트링 리터럴)
• 각각의 value_i = 속성 이름에 할당할 표현식

❗obj와 할당 구문은 선택 사항으로, 이 객체를 다른 곳에서 참조하지 않아도 되면 변수에 할당할 필요 없다.

(+명령문을 기대하는 곳에 객체 리터럴을 배치하려면 블록 선언문으로 잘못 읽는 경우가 없도록 괄호로 감싸줄 것.)

객체 초기자는 표현식이며 자신이 속한 선언문이 실행될 때마다 새로운 객체를 생성한다. 같은 초기자가 생성한 객체끼리라도 구별 가능하며 서로 비교했을 때 거짓을 반환한다. 초기자가 생성하는 객체는 마치 new Object() 호출을 한 것과 같이 생성됩니다. 즉 객체 초기자 표현식의 결과 객체들은 Object의 인스턴스이다.

2. 생성자 함수

① 생성자 함수를 작성해서 객체 타입을 정의(객체 타입 이름의 첫 글자는, 대문자로 시작하는 관례가 있다.)

② new 연산자를 사용해 객체 인스턴스를 생성

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
//전달한 값을 객체 속성으로 할당하기 위해 this를 사용

//mycar 객체 생성
var mycar = new Car("Eagle", "Talon TSi", 1993);
// mycar.make는 문자열 "Eagle", mycar.year는 정수 1993 등

//new를 사용한 호출로 원하는만큼 Car 객체 생성 가능
const kenscar = new Car("Nissan", "300ZX", 1992);
const vpgscar = new Car("Mazda", "Miata", 1990);

 

✔️ 다른 객체를 속성으로 가지는것도 가능하다.

//Person이라는 객체를 다음과 같이 정의
function Person(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}

//두 개의 새로운 Person 객체도 인스턴스화
const rand = new Person("Rand McKinnon", 33, "M");
const ken = new Person("Ken Jones", 39, "M");

//Person 객체를 갖는 owner 속성을 추가하도록 수정
function Car(make, model, year, owner) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.owner = owner;
}

//새로운 객체 인스턴스를 생성+ 객체 rand와 ken을 소유자 매개변수로 지정
const car1 = new Car("Eagle", "Talon TSi", 1993, rand);
const car2 = new Car("Nissan", "300ZX", 1992, ken);

//car2의 소유자 이름
car2.owner.name;

 

✔️ 이미 정의된 객체에도 속성을 추가할 수 있다.

같은 타입의 모든 객체에 값을 추가하려면 Car 객체 타입의 정의를 수정해야 한다.

//car1에 color 속성을 추가한 후 값으로 'black'을 할당
car1.color = "black";

3. Object.create 메서드 사용

Object.create() 메서드로 객체를 생성할 수도 있으며 이 메서드는 생성자 함수 정의 없이도 생성할 객체의 프로토타입을 지정할 수 있다.

// 동물 속성과 메서드 캡슐화
const Animal = {
  type: "무척추동물", // 속성 기본 값
  displayType: function () {
    // 동물 종류를 출력할 메서드
    console.log(this.type);
  },
};

// animal1이라는 이름의 동물 타입 객체 생성
const animal1 = Object.create(Animal);
animal1.displayType(); // 출력: 무척추동물

// fish라는 이름의 동물 타입 객체 생성
const fish = Object.create(Animal);
fish.type = "물고기";
fish.displayType(); // 출력: 물고기

 

 

 

 

 

출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Working_with_objects