JavaScript_기본 지식으로 화살표 기능에 대한 심층적인 이해

화살표는 처음부터 JavaScript의 일부였습니다. 첫 번째 JavaScript에서는 HTML 주석에 인라인 스크립트 코드를 래핑하는 것이 권장되었습니다. 이렇게 하면 JavaScript를 지원하지 않는 브라우저에서 일반 텍스트의 경우 코드가 표시되는 것을 방지할 수 있습니다. 다음과 같은 코드를 작성했을 수도 있습니다.

<script language="javascript">
<!--
  document.bgColor = "brown"; // red
// -->
</script>
 
<script language="javascript">
<!--
  document.bgColor = "brown"; // red
// -->
</script>

이전 브라우저에는 지원되지 않는 두 개의 태그와 주석이 표시되며, JavaScript를 지원하는 최신 브라우저만 JavaScript 코드로 구문 분석합니다.

이 이상한 기능을 지원하기 위해 브라우저의 JavaScript 엔진은 도 한 줄 주석을 나타냅니다. HTML에서는 --> 앞 부분이 주석 내용이고, JavaScript에서는 --> .

줄 시작 부분에 -->가 나타나는 경우에만 화살표가 주석임을 나타냅니다. 다른 경우에는 -->가 연산자(gos to)이기 때문입니다.

function countdown(n) {
 while (n-->0) // "n goes to zero"
  alert(n);
 blastoff();
}
 
function countdown(n) {
 while (n-->0) // "n goes to zero"
  alert(n);
 blastoff();
}

위 코드는 실제로 실행될 수 있습니다. n이 0이 될 때까지 반복하는 것은 ES6의 새로운 기능은 아니지만 익숙한 기능과 결합하면 매우 오해의 소지가 있습니다. 위의 코드가 어떻게 작동하는지 알 수 있나요? 스택 오버플로에서 답을 찾을 수 있습니다.

물론 화살표가 있습니다. 즉 작거나 같음 연산자 <=입니다. 화살표를 사용할 수 있는 곳을 찾을 수도 있지만 잠시 멈춰서 이전에 본 적이 없는 화살표를 살펴보겠습니다.

• 교환원에게 전달
• <= 작거나 같음 연산자
• => ???

그럼 =>는 무슨 뜻인가요? 이 기사에서는 이에 대해 논의할 것입니다.

먼저 기능에 대해 이야기해 보겠습니다.
유비쿼터스 함수 표현

JavaScript의 흥미로운 특징은 함수가 필요할 때마다 쉽게 만들 수 있다는 것입니다.

예를 들어 클릭 이벤트를 버튼에 바인딩하려면 다음을 수행하세요.

$("#confetti-btn").click(
 
$("#confetti-btn").click(

jQuery의 .click() 메서드에는 매개변수로 함수가 필요합니다. 다음과 같이 함수를 쉽게 생성할 수 있습니다.

$("#confetti-btn").click(function (event) {
 playTrumpet();
 fireConfettiCannon();
});

 
$("#confetti-btn").click(function (event) {
 playTrumpet();
 fireConfettiCannon();
});

이런 코드를 작성하는 것은 이제 우리에게 가장 자연스러운 일입니다. 하지만 JavaScript가 대중화되기 전에는 다른 언어에는 그러한 기능이 없었기 때문에 이러한 스타일의 코드는 여전히 약간 이상해 보였습니다. 1958년 Lisp에는 수년 동안 C, Python, C# 및 Java에 존재하지 않았던 기능인 람다 함수라고도 하는 함수 표현식이 있었습니다.

이제 이 네 가지 언어에는 모두 람다 표현식이 있고 최신 언어에는 일반적으로 람다 표현식이 내장되어 있습니다. 이제 JavaScript는 람다 표현식에 크게 의존하는 라이브러리 개발자 덕분에 이 기능을 지원하게 되어 널리 채택되었습니다.

JavaScript는 다른 여러 언어에 비해 약간 장황한 구문을 가지고 있습니다.

// A very simple function in six languages.
function (a) { return a > 0; } // JS
[](int a) { return a > 0; } // C++
(lambda (a) (> a 0)) ;; Lisp
lambda a: a > 0 # Python
a => a > 0 // C#
a -> a > 0 // Java
 
// A very simple function in six languages.
function (a) { return a > 0; } // JS
[](int a) { return a > 0; } // C++
(lambda (a) (> a 0)) ;; Lisp
lambda a: a > 0 # Python
a => a > 0 // C#
a -> a > 0 // Java

화살표 기능

ES6에는 함수 작성을 위한 새로운 구문이 도입되었습니다.

// ES5
var selected = allJobs.filter(function (job) {
 return job.isSelected();
});

// ES6
var selected = allJobs.filter(job => job.isSelected());

 
// ES5
var selected = allJobs.filter(function (job) {
 return job.isSelected();
});
 
// ES6
var selected = allJobs.filter(job => job.isSelected());

매개변수가 하나만 있는 함수가 필요한 경우 화살표 함수의 구문을 식별자 => 식으로 단순화하여 함수 및 반환 키워드는 물론 괄호와 후행 세미콜론도 직접 생략할 수 있습니다.

다중(매개변수 없음, 나머지 매개변수 및 매개변수 기본값, 구조화되지 않은 매개변수) 매개변수가 있는 함수를 작성하려면 매개변수를 괄호로 묶어야 합니다.

// ES5
var total = values.reduce(function (a, b) {
 return a + b;
}, 0);

// ES6
var total = values.reduce((a, b) => a + b, 0);
 
// ES5
var total = values.reduce(function (a, b) {
 return a + b;
}, 0);
 
// ES6
var total = values.reduce((a, b) => a + b, 0);

화살표 함수는 Underscore.js 및 Immutable과 같은 일부 도구 함수 라이브러리에서도 완벽하게 작동할 수 있습니다. 실제로 Immutable 문서의 모든 예제는 ES6으로 작성되었으며 그 중 상당수는 이미 화살표 함수를 사용하고 있습니다.

화살표 함수에는 함수 본문에 표현식을 사용하는 것 외에도 이전에 언급한 예를 떠올려 보세요.

// ES5
$("#confetti-btn").click(function (event) {
 playTrumpet();
 fireConfettiCannon();
});
 
// ES5
$("#confetti-btn").click(function (event) {
 playTrumpet();
 fireConfettiCannon();
});

화살표 함수를 작성하는 방법은 다음과 같습니다.

// ES6
$("#confetti-btn").click(event => {
 playTrumpet();
 fireConfettiCannon();
});
 
// ES6
$("#confetti-btn").click(event => {
 playTrumpet();
 fireConfettiCannon();
});

문 블록을 사용하는 화살표 함수는 자동으로 값을 반환하지 않으며 값을 반환하려면 return을 명시적으로 사용해야 한다는 점에 유의해야 합니다.

한 가지 더 조언하자면, 화살표 함수를 사용하여 객체를 반환할 때는 항상 괄호를 사용하여 반환된 객체를 둘러싸세요.

// create a new empty object for each puppy to play with
var chewToys = puppies.map(puppy => {});  // BUG!
var chewToys = puppies.map(puppy => ({})); // ok

 
// create a new empty object for each puppy to play with
var chewToys = puppies.map(puppy => {});  // BUG!
var chewToys = puppies.map(puppy => ({})); // ok

빈 객체 {}와 빈 명령문 블록 {}은 완전히 동일해 보이기 때문에 ES6은 항상 => 바로 뒤에 있는 {를 객체의 시작 대신 명령문 블록의 시작으로 처리합니다. {}는 함수 본문 없이 화살표 함수로 구문 분석되며 반환 값은 정의되지 않습니다.