초보자를 위한 JavaScript 화살표 함수

19/09/2020

소개

안녕하세요, 저의 첫 번째 박문에 오신 것을 환영합니다.트위터 개발자 커뮤니티에서 최근 (2020년 8월) 가장 유행하는 건의는 블로그를 개설하는 것이다.설령 네가 완전한 초보자라 하더라도, 인코딩에 관해서는 여전히 추천한다.다른 사람에게 어떤 일을 설명하는 것이 주제에 대한 자신의 이해를 공고히 하는 데 도움이 되기 때문이다.그 밖에 또 하나의 추가 장점은 기회가 있으면 다른 초보자가 공교롭게도 이 블로그를 찾았는데 그것도 그들을 도울 수 있다는 것이다.이것은 내가 화살표 함수를 이해하고 해석하려고 시도한 것이다.

화살표 함수

ES6(ECMAScript 2015)에는 화살표 함수가 도입되어 전문 개발자들에게 즐거움을 주었고 각지의 초보자들을 실망시켰다.전문가에게는 더욱 간결한 코드를 작성할 수 있다는 뜻이고, 초보자에게는 그들이 배워야 할 또 다른 일이다.

정규 함수와 화살표 함수

정규 함수와 화살표 함수 사이의 차이를 보는 가장 좋은 방법은 둘을 비교하는 것이다.화살표 함수로 어떻게 쓰였는지 정규 함수를 봅시다.다음 코드는 콘솔에서 "Hello"를 기록하고 호출하는 함수를 만듭니다.

function regularFunction() {
  console.log("Hello");
}

regularFunction();

이것은 화살표 함수라고 적힌 함수입니다.

const arrowFunction = () => {
  console.log("Hello");
};

arrowFunction();

이 두 함수의 작용은 완전히 같다.

매개변수 사용

위의 예제 함수는 어떤 매개 변수도 사용하지 않았기 때문에 괄호 "()"를 비워 둡니다.그러나 화살표 함수도 매개 변수를 받아들일 수 있다.다음 정규 함수는 두 개의 숫자를 추가합니다.

function regularFunction(a, b) {
  console.log(a + b);
}

regularFunction(2, 3);

이것은 매개 변수'2'와'3'호출 함수를 사용하여 그것들을 추가한 다음에 답을 컨트롤러에 기록합니다.다음은 arrow 함수와 같은 함수로 같은 매개 변수와 매개 변수를 가지고 있습니다.

let arrowFunction = (a, b) => {
  console.log(a + b);
};

arrowFunction(2, 3);

지금 너는 아마도 내 생각과 같을 것이다. "잠깐만, 이것은 이전의 코드보다 더 많아 보인다. 나는 문자 수를 계산할 생각은 없지만, 그 중 하나는 =>가 이미 추가되었을 거야. 이게 왜 더 좋아?"응, 내가 알기로는 이것이 더 좋은 것은 아니지만, 그것은 우리가 아직 반짝이는 새로운 문법을 사용하지 않았기 때문이다.

문법당

초보자로서 나는 코드가 내가 예상한 방식대로 작동하는지 확인하기 위해 모든 내용을 기록할 것이다.재미를 위해 앞으로 돌아가 자신감 있는 프로그래머인 척하고 그들이 무엇을 하는지 알고 return 대신 console.log() 을 사용하자.
다음은 return 대신 console.log() 를 사용하는 화살표 함수입니다.

let arrowFunction = (a, b) => {
  return a + b;
};

현재 개발자들이 매우 갈망하는 문법 설탕(문법적 차이)이 나타났다.arrow 함수가 단일 값만 되돌려준다면 return 키워드나 괄호 {} 를 포함할 필요가 없습니다.일단 그것들이 사라지면, 너는 남은 코드를 첫 줄로 옮길 수 있다.이것은 우리의 화살표 함수를 다음과 같이 변환합니다.

let arrowFunction = (a, b) => a + b;

나는 이것이 더욱 간결해 보인다는 것을 인정한다.

붕괴

다음은 각 부분의 분해로 무슨 일이 일어났는지 이해하는 데 도움이 된다.

let arrowFunction = (a, b) => a + b;

let arrowFunction = 함수를 arrowFunction 이라는 변수에 할당합니다.(a, b)는 함수의 매개 변수이다.매개변수가 하나만 있으면 괄호 안에 포함할 필요가 없습니다.=> 함수체를 가리키는 화살표로 볼 수 있습니다.a + b 함수가 실행되면 되돌아오는 코드입니다.

약간 복잡한 예.

익명 함수 대신 화살표 함수 (이름이 없는 함수) 를 사용하는 것이 더 편리합니다.다음은 일반 함수가 포함된 API에서 데이터를 가져온 일반적인 예입니다.

fetch("https://picsum.photos/v2/list")
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    console.log(data);
})

다음은 화살표 함수를 사용하는 동일한 예입니다.

fetch("https://picsum.photos/v2/list")
  .then(response => response.json())
  .then(data => console.log(data));
}

화살표 기능이 이제 더 좋아졌어요!

범위

주의해야 할 점은 화살표 함수는 자신의 작용역이 없다는 것이다.이것은 화살표 함수 내에서 this 키워드를 사용하면 화살표 함수의 범위를 인용하지 않고 화살표 함수 내의 모든 함수의 범위를 인용한다는 것을 의미한다.

화살표 기능이 유행합니까?

맞다내가 만난 2015년 이후에 만든 자바스크립트 강좌마다 화살표 함수가 내일이 없는 것처럼 들어간다.이 Spread의 모든 기능이 화살표 함수이고 개발자인 경우

설명 목적에서 비롯된 것으로, 이것은 단지 보수적인 추측일 뿐이다.모든 강좌에서 화살표 함수의 실제 수량이 훨씬 높다.

결론

트위터 개발자 커뮤니티가 옳다는 사실이 입증됐다.나는 어떤 주제에 관한 동영상을 볼 수 있고, 나는 그것을 이해한다고 생각한다.나는 자신이 코드를 작성하고 그것을 작업할 때까지 끊임없이 조정할 수 있으며, 내가 그것을 이해한다고 생각한다.하지만 다른 초보자에게 설명하고 있는데 아무것도 없다고 상상해 보세요.이 작은 블로그 게시물은 내가 몇 시간 걸려서야 완성했다.나는 이것이 다른 사람에게 도움이 되기를 바라지만, 만약 그렇지 않다면, 그것은 문제없다.이것은 틀림없이 나에게 도움이 될 것이다. 이것이 바로 내가 왜 이렇게 한 이유다.안녕히 가세요.

대단히 감사합니다

Laura Harvey 너무 고마워요.
트위터에서) 교정과 피드백을 진행합니다!

출처

W3 학교 - https://www.w3schools.com/js/js_arrow_function.asp
DN 웹 문서 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
freeCodeCamp-https://www.freecodecamp.org/
웹 개발 단순화 - JavaScript ES6 화살표 함수 자습서
세이드 하야니 - https://www.freecodecamp.org/news/write-less-do-more-with-javascript-es6-5fd4a8e50ee2/
신시아 리-https://www.freecodecamp.org/news/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26/