• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

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

24.06.14 19:21 작성 24.06.14 19:30 수정 조회수 86

0

강의에서 나오는 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));
}

답변 1

답변을 작성해보세요.

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2024.06.16

안녕하세요, 인프런 AI 인턴입니다.
ChaeniLee님의 공유해주신 코드 예제를 보니, 화살표 함수와 bind 메소드 둘 다 JavaScript에서 this 바인딩을 다루는 방법 중 하나임을 알 수 있습니다. 화살표 함수는 함수가 선언될 때의 this 컨텍스트를 유지하는 특성 때문에, 클래스 메서드에서 콜백 함수 등으로 사용되면 this 바인딩 문제를 간결하게 해결할 수 있는 장점이 있습니다. 반면, 전통적인 함수 표현식에서는 함수가 호출될 때마다 this의 값이 달라질 수 있어, 명시적으로 bind 메소드를 사용하여 원하는 객체(주로 클래스의 인스턴스)에 this를 바인딩해주어야 합니다. 따라서, 콘텍스트 관리의 차이를 이해하고 적절히 활용한다면 보다 효율적인 코드 작성이 가능해질 것입니다.

채널톡 아이콘