14. 객체(Object)

객체(Object)

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

프로퍼티(property)

• 이름과 값으로 구성된 정렬되지 않은 집합
• 프로퍼티는 함수도 저장할 수 있음 -> 프로퍼티 메소드

객체를 생성하는 방법

리터럴 표기법

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

리터럴 표기법 예제

const dog = {
    name: '루시',
    age: 13,
    color: 'white',
    birthday: '20091210',
    getBirthday:function(){
        return this.birthday;
    }
}

console.log(dog.name); // 루시
console.log(dog.age); // 13
console.log(dog.color); // white
console.log(dog.birthday); // 20091210
console.log(dog.getBirthday()); // 20091210

console.log(dog['name']); // 루시
console.log(dog['age']); // 13
console.log(dog['color']); // white
console.log(dog['birthday']); // 20091210
console.log(dog['getBirthday']()); // 20091210

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

for문 출력

생성자를 이용

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

// 객체를 만드는 함수
function 생성자명(매개변수1, 매개변수2, ...){
    this.프로퍼티명1 = 값1;
    this.프로퍼티명2 = 값2;
    ...
    this.프로퍼티명n = function(){
        ...
    };

}

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

생성자를 이용한 객체 예제

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

const Rucy = new Dog('루시', 'white'); // Rucy 객체 생성
console.log(Rucy.name); // 루시
console.log(Rucy.color); // white
console.log(Rucy.eat()); // 루시는 먹습니다

const PPomi = new Dog('뽀미', 'white'); // PPomi 객체 생성
console.log(PPomi.name); // 뽀미
console.log(PPomi.color); // white
console.log(PPomi.eat()); // 뽀미는 먹습니다

 

클래스를 이용

• ECMA Script에 추가된 객체 생성 방법
• 내부적으로 생성자를 이용한 객체 생성 방법과 동일하게 작동

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

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

클래스를 이용한 예제

const User = class{
    constructor(userid, name, age){
        this.userid = userid;
        this.name = name;
        this.age = age;
    }
    getUserid(){
        return `아이디는 ${this.userid}입니다`
    }
}
const apple = new User('apple', '김사과', 20); // apple 객체 생성
console.log(apple.userid); // apple
console.log(apple.name); // 김사과
console.log(apple.age); // 20
console.log(apple.getUserid()); // 아이디는 apple입니다