[JavaScript] 09. 자바스크립트 객체 생성 방법

# 객체

객체란, 순서가 없는 집합, key(키)와 value(값)로 이루어진 속성들의 집합입니다.

아래와 같이 {} 중괄호를 사용하여 객체를 생성할 수 있는데요! 이런 방법으로 객체를 생성하는 것을 객체 리터럴이라고 합니다.

const person = {};

이렇게 내용이 없이 객체를 생성했을 때는 [object Object]와 같이 빈 객체를 생성할 수 있습니다.

 

 {...}  중괄호 안에 사용할 데이터와 함수를 담을 수 있는데, 이를 property(속성)라고 합니다.

const person = {

    name : "송우든",
    age : 24,
    "favorite food" : "떡볶이"

};

console.log(person); // 출력 :  {name : '송우든', age : 24, 'favorite food' : '떡볶이'}

property를 구성하는 key는 문자형만 value는 모든 자료형을 사용할 수 있습니다. 이때, key 값에 공백을 포함시키고 싶다면 따옴표를 이용해 표현할 수 있습니다.

 

또한, 자바스크립트에서 함수는 1급 객체로 취급되기 때문에 함수도 property(속성)의 value가 될 수 있습니다.

이러한 함수를 메서드(method)라고 합니다. 

const person = {

    name : "송우든",
    age : 24,
    introduce : function (){
        console.log("안녕하세요!");
    }

};

person.introduce(); // 출력 : 안녕하세요!

 

이외에도 객체를 생성하는 여러 가지가 방법이 존재하는데요!

 

> 함수를 사용하여 객체를 생성하는 방법

const person = (name, age, favoriteFood) => ({name, age, favoriteFood});
console.log(person("송우든",24,"떡볶이"));

 

> new 연산자를 사용하여 객체를 생성하는 방법

 

new 연산자는 선언된 함수를 인스턴스화해서 객체를 생성해줍니다. 생성자 함수 내부에 사용된 this는 생성된 객체를 가리켜요!

아래에 코드에서 this는 person 객체를 말합니다.

function person(name, age, favoriteFood){
    this.name = name;
    this.age = age;
    this.favoriteFood = favoriteFood;
}

const member = new person("송우든",24,"떡볶이");
console.log(member); // 출력 : person { name: '송우든', age: 24, favoriteFood: '떡볶이' }

 

> Object()를 사용하여 객체를 생성하는 방법

 

자바스크립트에서는 객체를 생성할 때, 내장 함수인 Object()를 제공합니다.

Object()로 객체를 생성할 때, 주어진 값이 null 또는 undefined일 경우 아래와 같이 빈 객체를 생성해줍니다.

const person = new Obeject();

 

생성된 객체의 property(속성)는  .  또는 ['속성이름']와 같은 방법을 이용해서 추가해줄 수 있어요!

const person = new Object();

// 객체의 property(속성) 추가
person.name = "송우든";
person['age'] = 24;
person.favoriteFood = "떡볶이";

console.log(person);

 

이 외에 값이 주어진 경우 해당 값에 맞는 자료형의 객체를 반환합니다.

let check = new Object(true);
console.log(check); // 출력 : [Boolean : true]


const person = new Object({
    name : "송우든",
    age : 24
});

console.log(person); // 출력 : { name: '송우든', age: 24 }