JavaScript 화살표 기능이란 무엇입니까?

이 기사에서는 JavaScript 화살표 함수에 대한 모든 것을 배우게 됩니다. 우리가 사용하는 화살표 함수는 코드를 더 간결하게 만들고 작성할 수 있는 변형이 많습니다.

Javascript 는 매우 기능이 많은 언어 입니다. 자바스크립트의 함수는 가장 가치 있는 개념 중 하나입니다. 우리는 함수를 작성하고 함수, 콜백을 전달하고 함수가 있는 동기화 코드를 전달합니다. 자바스크립트의 기본적인 부분일 뿐입니다.

오랫동안 우리는 자바스크립트에서 함수를 작성하기 위해 함수 키워드를 작성했습니다. 다음은 JavaScript에서 함수의 몇 가지 예입니다. 여기에서 function 키워드를 사용하고 있음을 알 수 있습니다.

(function () {
   //...
});

익명 함수는 초기 생성 후에는 액세스할 수 없습니다. 따라서 변수에 할당해야 하는 경우가 많습니다.

예를 들어 다음은 메시지를 표시하는 익명 함수를 보여줍니다.

let show = function() {
    console.log('Anonymous function');
};

show();

나중에 익명 함수를 호출해야 하므로 익명 함수를 show 변수에 할당합니다.

익명 함수를 show 변수에 할당하면 유효한 표현식이 되므로 익명 함수를 괄호로 묶을 필요가 없습니다 ().

실제로 익명 함수를 다른 함수에 대한 인수로 전달하는 경우가 많습니다. 예를 들어:

setTimeout(function() {
    console.log('Execute later after 1 second')
}, 1000);

함수는 JavaScript 에서 일급 시민 입니다. 따라서 함수를 다른 함수에 인수로 전달할 수 있습니다.

여기에서 함수 키워드를 작성하고 함수를 정의해야 할 때마다 볼 수 있습니다. 그러나 이것은 Arrow Function이 그림에 들어오는 곳입니다. ES6에서는 익명 함수를 선언하기 위한 속기를 제공하는 화살표 함수 표현식을 도입했습니다. 화살표 함수 표현식은 전통적인 함수 표현식 에 대한 간결한 대안 으로 일부 의미론적 차이와 의도적인 사용 제한이 있습니다.

일반적으로 화살표 함수는 더 짧고 때로는 전통적인 자바스크립트 함수와 비교할 때 다르게 동작합니다.

화살표 기능은 Internet Explorer 에서 지원되지 않습니다 .

화살표 함수를 정의할 때 '= 및 >' 기호를 사용하고 있습니다. 화살표처럼 생겼기 때문에 이러한 함수를 화살표 함수라고 합니다.

let show = () => console.log('Anonymous function');

이렇게 일반 함수를 화살표 함수로 작성할 수 있습니다.

let add = function (a, b) { // Normal Fucntion
    return a + b;
};
let add = (a, b) => a + b;  // Arrow Fucntion

• 인수가 2개인 경우 괄호를 일반 함수로 사용할 수 있습니다.

let add = function (a, b) { // Normal Fucntion
    return a + b;
};



let add = (a, b) => a + b;  // Arrow Fucntion

let square = function(x){ // Normal Fucntion
    return x * x;
}


let square = (x) => { // Arrow fucntion with parenthesis
    return x * x;
}

let square = x => { // You can modify it as like this
    return x * x;
}

let square = x => (  // Furthermore you can modify by removing return keyword
     x * x   // Replace {} with  ()
);

let square = x => x * x; // Furthermore you can modify

let test  = () => console.log('No Arguments');

이 문제를 제거하려면 괄호 로 묶어야 합니다.

이제 javascript는 반환 값으로 알고 있으며 함수 본문에 대한 중괄호가 아닙니다.

this화살표 함수는 , arguments또는 에 대한 자체 바인딩이 super없으며 메서드로 사용해서는 안 됩니다.

• 화살표 함수 표현식은 고유한 가 없기 때문에 메소드가 아닌 함수에만 사용해야 합니다 this.

const person ={
    name: "Kasun",
    action: function(){
        console.log(this.name, "says Hi");
    }
}

person.action();

나는 person 개체에 대한 작업을 호출하고 있으며 이름 값은 연결된 문자열과 함께 반환됩니다. 이제 일반 함수 대신 화살표 함수를 사용해 봅시다.

const person ={
    name: "Kasun",
    action: () => console.log(this.name, "says Hi")
}

person.action();

이제 출력으로 " says Hi " 만 얻 습니다. 여기 뭔 일 있었 니? 화살표 기능을 사용할 때 이름의 값은 일반 기능이 작동하도록 설정되지 않았습니다. 화살표 함수에서 this를 사용할 때 그냥 window 객체로 설정됩니다. action 함수가 독립 실행형 함수인 것처럼 동작합니다.

비슷한 이유로, call(), apply()및 bind()메서드는 화살표 함수에서 호출될 때 유용하지 않습니다 this. 화살표 함수는 화살표 함수가 정의된 범위를 this기반으로 설정되고 함수가 호출되는 방식에 따라 값이 변경되지 않기 때문입니다.

• 화살표 함수는 생성자로 사용할 수 없으며 로 호출하면 오류가 발생합니다 new. 그들은 또한 prototype재산이 없습니다.

const Foo = () => {};
const foo = new Foo(); // TypeError: Foo is not a constructor
console.log("prototype" in Foo); // false

이것은 화살표 함수에 관한 모든 것이며 화살표 함수를 완벽하게 이해하기를 바랍니다. 다른 튜토리얼에서 뵙겠습니다.

감사!