[JS]객체(Object) 정의, 호출

객체를 정의하는 방법

1. 객체 리터럴을 이용한 객체 정의
자바스크립트에서 가장 간단하고 직관적인 객체 생성 방법이다. 이 방식은 객체를 빠르게 생성하고, 필요한 속성과 메소드를 한 번에 정의할 때 유용하다.

const bread = {
    flour: '밀가루',
    water: '물',
    bake() {
        console.log(`${this.flour}와 ${this.water}를 사용하여 빵을 굽습니다.`);
    }
};

2. Object() 생성자를 이용한 객체 정의
빈 객체를 만든 뒤, 속성과 메소드를 동적으로 추가하는 방식이다. 객체 리터럴 방식과 비슷하지만, 먼저 빈 객체를 생성한 후 필요한 내용을 채워 넣는다.

const bread = new Object();
bread.flour = '밀가루'; //대괄호 표기법: bread['flour'] = '밀가루'
bread.water = '물'; 
bread.bake = function() {
    console.log(`${this.flour}와 ${this.water}를 사용하여 빵을 굽습니다.`);
};

3. 생성자 함수 사용
여러 개의 객체를 생성해야 할 때 유용하다. 생성자 함수를 사용하면 코드의 재사용성이 높아지며, new 키워드와 함께 호출된다. 함수 내부에서 this를 이용해 객체의 속성과 메소드를 정의한다. 여기서 this는 생성 중인 현재 객체를 의미한다.

function Bread(){
    this.flour = '밀가루'; //대괄호 표기법: this['flour'] = '밀가루'
    this.water = '물';
    this.bake = function() {
        console.log(`${this.flour}와 ${this.water}를 사용하여 빵을 굽습니다.`);
    };
}
//빵 객체 생성
const muffin = new Bread();

function Bread(flour, water){
    this.flour = flour;
    this.water = water;
    this.bake = function() {
        console.log(`${this.flour}와 ${this.water}를 사용하여 빵을 굽습니다.`);
    };
}
//빵 객체 생성
const muffin = new Bread('밀가루', '물');

4. 클래스 사용
클래스는 ES6에서 추가된 문법으로, 객체를 생성하는 더 간결하고 명확한 방법이다. new 키워드로 객체를 생성하고, 클래스의 constructor를 통해 속성과 초기 값을 설정할 수 있다.

class Bread {
    constructor(flour, water) {
        this.flour = flour;
        this.water = water;
    }
    bake() {
        console.log(`${this.flour}와 ${this.water}를 사용하여 빵을 굽습니다.`);
    }
}
//빵 객체 생성
const muffin = new Bread('밀가루', '물');

객체 내부의 요소 호출 방법

1. 점 표기법
점 표기법은 객체의 속성이나 메소드를 호출할 때 가장 일반적이고 직관적인 방법이다. 속성명이나 메소드명이 유효한 식별자일 때 사용한다.

const bread = {
    flour: '밀가루',
    water: '물',
    bake() {
        console.log(`${this.flour}와 ${this.water}를 사용하여 빵을 굽습니다.`);
    }
};

//속성 호출
console.log(bread.flour); //밀가루
//메소드 호출
bread.bake(); //밀가루와 물을 사용하여 빵을 굽습니다.

2. 대괄호 표기법
대괄호 표기법은 객체의 속성명을 문자열로 감싸서 사용하는 방식이다. 속성명이 동적으로 결정되거나, 띄어쓰기 또는 특수 문자가 포함된 경우 유용하다.

const bread = {
    'flour type': '밀가루',
    water: '물',
    bake() {
        console.log(`${this['flour type']}와 ${this.yeast}을 사용하여 빵을 굽습니다.`);
    }
};

//대괄호 표기법으로 속성 호출
console.log(bread['flour type']); //띄어쓰기 포함
console.log(bread['wa'+'ter']); //동적으로 결정

// 메소드 호출
bread.bake(); //밀가루와 물을 사용하여 빵을 굽습니다.