자바스크립트 class, 메서드 축약형, ES6 화살표 함수, this bind 🔎

안녕하세요!! 오늘은 자바스크립트에서 class(클래스)와 , this bind, ES6 부터 사용되는 화살표 함수와 , 메서드 축약형을 간단하게 알아보는 시간을 가져보겠습니다.

📁목차

🗒1. 클래스(class)

1-1. 클래스란 

1-2. 클래스의 목적

1-3. 클래스의 상속

1-4 클래스의 상속 예시 코드

 

🗒2. 메서드 축약형

2-1. 메서드 축약형이란?

2-2. 메서드 축약형 예시코드

 

🗒3-1. 화살표 함수

3-2. 화살표 함수란?

3-2. 화살표 함수 예시 코드

 

🗒4.this bind

4-1. this bind란?

4-2. this bind 예시코드

서론

이번에는 자바스크립트에 클래스가 무엇인지, 그리고 클래스의 상속, ES6 이후 사용된  화살표 함수( =>) 사용 코드와 this bind에 대해 간단하게 예시 코드를 보면서 알아보겠습니다.

본론

🗒1. 클래스(class)

1-1. class(클래스란)?

자바스크립트에서 class(클래스)는  객체를 생성하기 위한 템플릿을 제공한다고 보면 됩니다.

 

1-2. class(클래스)의 목적?

자바스크립트에서 클래스는 인스턴스 생성을 위한 목적으로 생성되었다.

 

1-3. class(클래스)의 상속?

마치 부모와 자식 관계처럼, 기존에 만들어진 클래스(부모 클래스)의 특징과 기능을 그대로 물려받아 새로운 클래스(자식 클래스)를 만드는 것을 의미합니다.

1-4. class 상속 예시 코드

class Child extends Mother {
    constructor(name, age, city) {
        super(city); // 부모의 생성자 호출
        this.name = name;
        this.age = age;

        // 자식 클래스에서 부모와 같은키는 사용하지말자
    }
}

const child = new Child("이수호", 25); // 콘솔에 출력하면 city 값이 없다

🗒2. 메서드 축약형

2-1. 메서드 축약형이란?

function 키워드 없이 { } 중괄호 안에 메서드를 작성하는 표현식

 

 

2-2 메서드 축약형 예시 코드

  getInfo(){
        console.log("부모 클래스의 메서드");
    }

 

🗒3. 화살표 함수

 

3-1. 화살표 함수란?

자바스크립트 ES6에서 도입된 새로운 함수 표현 방식으로, 기존의 function 키워드를 사용하는 함수보다 더욱 간결하게 함수를 정의할 수 있도록 해줍니다.

3-2. 화살표 함수 예시코드 

const bar = (arg) => {
    console.log(arg);
}

🗒4. this binding

4-1. this binding이란?

this가 참조하는 것은 함수가 호출되는 방식에 따라 결정하는 것, 쉽게 말해 상위 객체를 참조한다.

 

 

4-2. this binding 예시 코드 

 

this 바인딩 예시 코드 첫번째

//  클래스 Foo를 생성하고
// constructor 생성자 함수를 만들고 매개변수에 name을 받는다.
// this.name = name : name 속성을 초기화
// getState() 라는 축약형 메서드를 만들고 그안에 콘솔에 this를 출력한다
// const obj 라는 변수에 new 키워드를 사용하여 새로운 인스턴스인 Foo를 생성하는데 name 속성을 "soon"으로 초기화한다.
// obj.getState() 메서드의 접근하는데 여기서 다른 객체를 참조하기 위해 this binding이 일어난다. 
// 이렇게 this binding이 일어나면 this는 더 이상 obj 의 주소를 가리키지 않고 ({name : "soon"})을 가리킨다.

class Foo {  
    constructor(name) {
        this.name = name; 
    }
    getState () {
        console.log(this); //  name: "soon2"를 출력한다. 
    }
}

const obj = new Foo("soon"); 

obj.getState =  obj.getState.bind({name : "soon2"});

 

this 바인딩 예시 코드 첫번째

/ inner 함수를 생성
// inner 함수 내부에 outer() 함수를 선언하고
// 콘솔에 this를 출력하는데 밑에 outer.call({name: "soon3"})에서 this 바인딩이 일어나서 this는 ({name: "soon3"}) 를 가리킨다.
// 다시 콘솔에 this를 출력할 때 this 바인딩이 일어난 객체의 주소를 참조한다. 
// obj.getState 메서드의 this를 호출하는데 obj의 메서드의 this는 obj 객체에 대한 정의한 것이 없어서 this가 출력되지 않는다.
// console.log(this);  // 전역 스코프에서 호출이 되어서 this는 window 객체를 가리킨다.


function inner() {
    function outer() {
        console.log(this);
        obj.getState(this); 
 
    }

    console.log(this); // window 객체 출력
    outer.call({name : "soon3"}) 

}

inner();

 

결론

결론적으로  class를 사용하면 자바스크립트 코드를 더욱 구조적이고 객체 지향적으로 작성할 수 있습니다. 메서드 축약형을 통해 메서드를 축약하여 만들수 있고, 또한 화살표 함수를 사용하여 기존의 function 키워드를 사용하는 함수보다 더욱 간결하게 함수를 정의할 수 있도록 해줍니다.  마지막으로  this 바인딩을 통해 this가 참조하는 것은 함수가 호출되는 방식에 따라 결정할 수 있습니다.