JS의 화살표 함수!

안녕하세요 크리에이터 여러분

화살표 함수는 2015년부터 존재하며 기존 함수와 상당히 다릅니다. 방법을 봅시다!

비디오 버전을 보고 싶다면 바로 여기:

1. 화살표 기능을 사용하는 방법.

다음은 기본 구문입니다. "function"키워드가 필요하지 않으며 기본적으로 상수로 지정하므로 호이스팅 문제가 발생하지 않습니다.

const add = (a,b) => {
    return a + b;
}

console.log(add(2,2));

반환만 있으면 짧은 버전을 사용할 수 있습니다.

const add = (a,b) => a + b;

매개변수가 하나뿐인 경우 괄호를 제거하여 더 간결하게 만들 수 있습니다.

const add = a => a;

map.() 메서드와 같은 고차 함수와 함께 사용할 때 매우 유용합니다.

const multiplied = array.map(num => num * 2)

2. 클래식 함수와 화살표 함수의 차이점.

클래식 함수와 화살표 함수의 주요 차이점은 "this"의 값입니다.

객체의 속성 값으로 클래식 함수를 사용하는 경우 "this"는 호출 컨텍스트, 즉 함수가 정의된 obj를 참조합니다.

const obj = {
    a: 5,
    foo: function() {
        console.log(this)
    }
}

obj.foo() // {a: 5, foo: ƒ}

그렇지 않고 화살표 함수를 사용하는 경우 "this"는 전역 개체를 반환합니다.

const obj = {
    a: 5,
    foo: () => {
        console.log(this)
    }
}

obj.foo() // Window Object

이 경우 호출 컨텍스트의 부모를 참조하므로 전역 개체를 참조합니다.

직접적인 컨텍스트를 참조하는 대신 해당 컨텍스트의 상위를 참조합니다.

함수와 "this"키워드를 다룰 때 그 차이를 염두에 두어야 합니다.

와서 제 유튜브 채널을 보세요:

엔조.