JavaScript 기초(27)_클래스(2) property

1. 멤버 변수 (객체의 프로퍼티)

우선, 생성자(constructor)를 통해서 프로퍼티를 다음과 같이 할당할 수 있다.

class A {
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
}

console.log(new A('Kim', 31));

[Running] 
A { name: 'Kim', age: 31 }

 

조금 더 간단한 방법은 없을까? 다음 코드를 살펴보자.

class B {
    name = 'Kim';
    age = 31;
}

[Running]
B { name: 'Kim', age: 31 }

위와 같이 바로 'name' 과 'age'를 할당하는 방법이다. 

 

그렇다면 아래와 같은 코드는 어떻게 작동할까? 

class C {
    name = 'no name';
    age = 0;

    constructor(name, age){
        this.name = name;
        this.age = age;
    }
}

console.log(new C('Kim', 31));
console.log(new C());

no name과 0이 나올까? 아니면 Kim과 31이 나올까? 정답은 아래와 같다.

[Running] 
C { name: 'Kim', age: 31 }
C { name: undefined, age: undefined }

constructor에 할당된 Kim과 31이 나온다.

반면 변수를 할당하지 않았을 때는 'no name'과 0이 나오는 것이 아니라, 여전히 'undefined'처리가 된다.

 

함수를 만들고 클래스 속의 프로퍼티를 활용하여 다음과 같은 형태의 클래스 생성하고 활용할 수 있다.

class D {
    name = 'Kim';

    hello(){
        console.log('hello', this.name);
    }
}

new D().hello();

[Running] 
hello Kim

name에 Kim을 할당하였고 함수 hello() 속의 출력문에 name을 활용하여 위와 같은 출력 값을 도출했다.