[정보-23강] ES6 class 문법으로 공부하시는 분들!! 화살표 함수로도 시도해보셔요!

강의에서 나오는 prototype 말고 class 문법으로 바꿔서 공부하시는 분들 참고하셔요! 🫶❤

화살표함수란 ?

함수를 간결하게 정의할 수 있는 문법으로, 함수가 호출될 때의 this 컨텍스트가 정적으로 결정됨. 주로 콜백 함수나 메서드 정의 시 this 바인딩 문제를 해결하기 위해 사용됨.

정리

Arrow Function 내부에서 this를 사용하면, 함수가 정의된 시점의 외부 컨텍스트를 유지하게 됨

화살표 함수 ver.

run = () => {
    if (this.direction === 'left') {
        this.xPos += this.speed;
    } else if (this.direction === 'right') {
        this.xPos -= this.speed;
    }

    this.mainElm.style.left = `${this.xPos}%`;

    requestAnimationFrame(this.run);
};

Bind 메소드 ver.

run() {
    if (this.direction === 'left') {
        this.xPos += this.speed;
    } else if (this.direction === 'right') {
        this.xPos -= this.speed;
    }

    this.mainElm.style.left = `${this.xPos}%`;

    requestAnimationFrame(this.run.bind(this));
}