화살표 기능

Javascript는 매우 기능이 많은 언어입니다. 함수는 Javascript 개발자가 되기 위해 이해해야 하는 개념 중 하나입니다. Javascript의 기능에 익숙하지 않은 경우 프로그램이 따라야 할 일련의 지침과 유사합니다. 이 블로그 게시물에서는 "바닐라 방식"으로 함수를 정의하는 방법을 이미 이해했다고 가정합니다.

화살표 기능은 매우 유용합니다. 코드를 간결하게 만들 수 있습니다. 또한 작성 방법에 대한 많은 변형이 있습니다. 화살표 함수는 "map", "filter"및 "reduce"와 같은 고차 함수와 잘 작동합니다.

화살표 함수의 주요 이점은 대부분의 경우 코드 가독성을 높이는 짧은 구문입니다.


"가져오기"에 화살표 기능 사용
개발자로서 프런트 엔드에서 작업할 때 백엔드에서 데이터를 "가져와"앞으로 가져와야 할 수 있습니다. 백엔드와 프런트 엔드 모두에서 데이터를 변경하는 이러한 경우 코드를 간결하게 유지하는 데 화살표 기능이 핵심입니다.

화살표 함수의 예를 제공하기 전에 일반 함수와 화살표 함수의 주요 차이점을 설명하는 것이 중요합니다.

1. 구문 - 개발자는 화살표 함수를 사용하여 몇 줄의 코드를 작성하여 일반 함수와 동일한 결과를 얻을 수 있습니다.
2. 인수 바인딩 - 화살표 함수에는 인수 바인딩이 없습니다.
3. this 키워드 사용 - 일반 함수와 달리 화살표 함수에는 자체 "this"키워드가 없습니다.
4. 새 키워드 사용 - 함수 선언 또는 표현식을 사용하여 만든 정규 함수는 구성 및 호출이 가능합니다. new 키워드를 사용하여 호출할 수 있습니다. 그러나 화살표 함수는 호출만 가능하고 구성할 수 없습니다. 즉, 화살표 함수는 생성자 함수로 사용할 수 없습니다.
5. 중복 명명된 매개변수 없음
화살표 함수는 엄격 모드이든 비엄격 모드이든 중복된 명명된 매개변수를 가질 수 없습니다. 그러나 엄격하지 않은 모드에서 일반 함수에 대해 중복된 이름의 매개변수를 사용할 수 있습니다.

일반 함수와 화살표 함수의 예는 아래를 참조하십시오.

normal Function 
var multiply = function (x,y) {
return x*y;

 arrow function 
var multiply =(x,y) => {return x * y};

 or 
var multiply = (x,y) => x*y;

다음은 화살표 함수를 작성하는 방법에 대한 몇 가지 예입니다.

아래의 첫 번째 예에서는 "return"을 넣든 넣지 않든 관계없이 중괄호가 없는 한 여전히 표현식을 반환합니다.

#  syntax
(param1,param2) => expression
(param1,param2) => {return expression;}

아래 두 번째 예에서 매개변수가 하나만 있는 경우 괄호는 선택 사항입니다.

(singleParam) => {statements}
 singleParam =>  {statements}

그러나 매개변수가 없는 함수에는 괄호가 필요합니다.

() => {statements}
() => expression 
() => {return expression}

개체를 반환하려면 항상 개체를 괄호 안에 넣어야 합니다.

var func =() => ({foo:1});

질문이 떠오를 것입니다. 언제 화살표 기능을 사용하지 않아야 할까요?
화살표 함수에는 자체 "this"값과 인수 개체가 없습니다. 따라서 이벤트 핸들러, 객체 리터럴의 메서드, 프로토타입 메서드로 사용하거나 arguments 객체를 사용하는 함수가 있을 때 사용해서는 안 됩니다.

결론
요약하면 화살표 함수는 여러 줄의 코드를 잘라서 코딩을 더 효율적으로 만들 수 있기 때문에 매우 편리한 도구입니다.