[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 12회차 미션

 

Class

ES6에 새로 추가된 문법

객체를 만들 수 있는 새로운 방법

자바스크립트는 객체지향을 지원하기 위해서 프로토타입기반의 방식을 지원하는데 새로 추가된 class라는 키워드를 통해 좀 더 강력한 객체지향 프로그래밍을 지원한다.

class라는 키워드가 새로운 객체지향 상속모델을 제공하는 것은 아니다. 기존의 prototype기반의 방식을 보다 명료하게 사용할 수 있게 돕는 역할이라고 보면 좋다.

클래스를 만드는 방식으로는 두 가지가 있다.

선언적방식

class A{}
console.log(new A());

class 표현식을 변수에 할당

const B = class{};
console.log(new B());

함수에서처럼 호이스팅이 일어나지않을까?

new C();
class C{}

를 실행해 보면 에러가 발생하는것을 확인할 수 있다.

호이스팅이 일어나지 않는것.

생성자 constructor

함수를 통해 객체를 만들 때도 함수에 인자를 넣어 외부에서 객체를 생성할 때 내부로 불러올 수 있는데. 클래스에서도 가능하다.

최초의 초기값을 객체 내부로 넣어줄 수 있다.

class A{}
console.log(new A());
class B{
    constructor(){
        console.log('constructor');    
    }
}

console.log(new B());

이렇게 class B는 실행될 때 constructor라는 함수가 실행되게 되는 것이다.

실행하여 확인해보면 A는 그냥 실행되고 B는 constructor가 한번 실행되고 불려진다

이제 인자를 넣어보면

class C{
    consturctor(name, age){
        console.log('constructor', name,age);
    }
}

console.log(new C('jiwon', 25));
console.log(new C());

constructor 에 인자로 name과 age를 넣어주면 constructor함수가 호출되면서

name과 age를 객체 내부에서 사용할 수 있게 해주는것.

console.log(new C());

처럼 의도치ㅡ않게 인자값이 빠지는 경우 undefined로 표시되게 된다.

멤버 변수

객체의 property

가장 대표적인 방법으로

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

console.log(new A('jiwon', 25));

name과 age를 객체 생성하며 받아오고

this로 name과 age를 할당해주면 객체의 property로 바인딩되게 된다.

실행해보면 class A를 통해 만들어진 객체는

name이라는 property와 age라는 property에 할당해준 값들이 들어가 있는것을 확인 할 수 있다.

class B{
    name;
    age;
}
console.log(new B());

class에 name과 age를 설정하면 name과 age가 this.name과 this.age가 되게 된다.

물론 지금은 다른 값을 할당하지 않기 때문에 undefined가 되게 된다

에러가 뜨면 node 12버전이상 혹은 크롬 런타임 환경으로 옮겨서 테스트 해야한다.

class C{
    name = 'no name';
    age = 0;
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
}
console.log(new C('jiwon', 25));

초기값으로 no name과 0이 할당되지만 constructor를 통해서 인자로 전달한 값들이 출력된다.

 

멤버함수

class A{
    hello1(){
        console.log('hello1', this);
    }
    hello2 = () => {
        console.log('hello2', this);
    }
}

new A().hello1();
new A().hello2();

class B{
    name ='jiwon';
    hello(){
        console.log('hello', this.name);
    }
}

new B().hello();

출력해보면 hello1 hello2 가 찍히고 this가 A라는 클래스로 이런 객체가 있다는것을 보여준다.

이렇게 만든 멤버함수는 안에서 멤버변수를 얻어 사용이 가능하다.

새로운 class B를 생성하고

멤버 변수로 name 값을 할당하고 내부에 hello() 라는 함수를 만들어 this.name으로 내부에 있는 멤버변수를 같이 출력해 줄 수 있다.

이런식으로 함수를 만들고 함수에서 그 객체가 가지고 있는 자원들을 활용하여 로직을 만들어 낼 수 있다.

 

 

해당 내용은 아래 링크에서 수강할 수 있다.

프론트엔드 개발 올인원 패키지 with React Online. 👉https://bit.ly/2ETLEzm

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스