[JavaScript] 객체

---

객체(Object)

하나의 주제를 가지고 관련있는 프로퍼티(property)를 가지고 있는 집합

---

프로퍼티(property)

이름과 값으로 구성된 정렬되지 않은 집합

프로퍼티는 함수도 지정할 수 있음 -> 프로퍼티 메서디

---

객체를 생성하는 방법

리터럴 표기법

const 객체명 = {
    프로퍼티명1:값1, 
    프로퍼티명2:값2 
    ...
    프로퍼티명n:function(){
        프로퍼티가 호출되면 실행할 문장;
        ...
    }
}

 

✓ obj.property

const obj = {
    name:'kim',
    age:20,
    address:'동대문구',
    dis:function(){
        console.log(`name: ${this.name}, age: ${this.age}, address: ${this.address}`);
    }

}
console.log(obj.name);
console.log(obj.age);
console.log(obj.address);
obj.dis()

 

✓ obj['property']

const obj = {
    name:'kim',
    age:20,
    address:'동대문구',
    dis:function(){
        console.log(`name: ${this.name}, age: ${this.age}, address: ${this.address}`);
        return null;
    }

}

console.log(obj['name']);
console.log(obj['age']);
console.log(obj['address']);
console.log(obj['dis']);
console.log(obj['dis']());

객체에 함수 프로퍼티를 호출하면 함수를 실행하고 반환값을 반환한다. 반환값 지정을 하지 않으면 undefined가 반환된다.

 

✓ for 문으로 출력하기

const obj = {
    name:'kim',
    age:20,
    address:'동대문구',
    dis:function(){
        console.log(`name: ${this.name}, age: ${this.age}, address: ${this.address}`);
        return null;
    }
}

for(let i in obj){
    console.log(`i: ${i}, obj[${i}]: ${obj[i]}`);
}

---

생성자를 이용

재사용하거나 여러 객체를 만들어야 할 때 사용

• new 연산자를 사용하여 객체를 생성하고 초기화할 수 있음
• 객체를 생성할 때 사용하는 함수를 생성자라고 함
• 새롭게 생성되는 객체를 초기화하는 역할
• 같은 형태의 객체를 여러개 생성할 때 유리

 

객체를 만드는 함수

function 생성자명(매개변수1, 매개변수2, ...){
    this.프로퍼티명1 = 값1;
    this.프로퍼티명2 = 값2;
    ...
    this.프로퍼티명n = function(){

    }
}

const 객체명1 = new 생성자명(값1, 값2, ..);
const 객체명2 = new 생성자명(값1, 값2, ..);

 

function Dog(name, color){
    this.name = name;
    this.color = color;
    this.eat = function(){
        return `${this.name} 사료를 먹습니다.`
    }
}

const Kuma = new Dog('쿠마', 'brown');
console.log(Kuma.name);
console.log(Kuma.color);
console.log(Kuma.eat);
console.log(Kuma.eat());

함수 호출 형식으로 해야 함수가 실행되고 값을 반환함.

---

클래스를 이용

ECMA Script6에 추가된 객체 생성 방법

내부적으로 생성자를 이용한 객체 생성 방법과 동일하게 작동

 

const 클래스명 = class {
    constructor(매개변수1, 매개변수2, ...){
        this.프로퍼티명1 = 값1;
        this.프로퍼티명2 = 값2;
        ...
    }
    메소드명(매개변수1, 매개변수2, ..){
        메소드가 호출되면 실행할 문장;
        ..
    }
}

const 객체명1 = new 클래스명(값1, 값2, ..);
const 객체명2 = new 클래스명(값1, 값2, ..);

 

const Student = class {
    constructor(name, hp, age){
        this.name = name;
        this.hp = hp;
        this.age = age;
    }
    getName() {
        return `이름은 ${this.name}입니다.`;
    }
}

const apple = new Student('김사과', '010-1234-1234', 20);
console.log(apple.name);
console.log(apple.hp);
console.log(apple.age);
console.log(apple.getName);
console.log(apple.getName());

---