함수를 생성하기 위한 또 다른 매우 간단하고 간결한 구문이 있는데, 이는 함수 표현식보다 더 나은 경우가 많습니다.
다음과 같기 때문에 "화살표 함수"라고 합니다.
let func = (arg1, arg2, ..., argN) => 표현식;
이는 인수 arg1..argN 을 허용하는 func 함수를 생성한 다음 이를 사용하여 오른쪽 expression 평가하고 그 결과를 반환합니다.
즉, 다음의 단축 버전입니다.
func = 함수(arg1, arg2, ..., argN) {
반환 표현식;
};구체적인 예를 살펴보겠습니다.
합계 = (a, b) => a + b라고 가정합니다.
/* 이 화살표 함수는 다음의 축약형입니다:
합계 = 함수(a, b) {
a + b를 반환합니다.
};
*/
경고(합계(1, 2) ); // 3 보시다시피 (a, b) => a + b 는 a 와 b 두 개의 인수를 받는 함수를 의미합니다. 실행 시 a + b 표현식을 평가하고 결과를 반환합니다.
인수가 하나만 있는 경우 매개변수 주위의 괄호를 생략하여 더 짧게 만들 수 있습니다.
예를 들어:
double = n => n * 2로 두십시오.
// 대략 다음과 같습니다: let double = function(n) { return n * 2 }
경고( double(3) ); // 6인수가 없으면 괄호는 비어 있지만 반드시 있어야 합니다.
let sayHi = () => Alert("안녕하세요!");
안녕하세요();화살표 함수는 함수 표현식과 동일한 방식으로 사용할 수 있습니다.
예를 들어, 함수를 동적으로 생성하려면 다음을 수행하십시오.
let age = 프롬프트("당신의 나이는 몇 살입니까?", 18);
환영합니다 = (나이 < 18) ?
() => Alert('안녕하세요!') :
() => Alert("안녕하세요!");
환영();화살표 기능은 처음에는 낯설고 읽기 쉽지 않을 수 있지만 눈이 구조에 익숙해지면 빠르게 변합니다.
너무 게으른 나머지 많은 단어를 쓸 수 없을 때 간단한 한 줄 작업에 매우 편리합니다.
지금까지 살펴본 화살표 함수는 매우 간단했습니다. => 의 왼쪽에서 인수를 가져와서 평가하고 함께 오른쪽 표현식을 반환했습니다.
때로는 여러 표현식과 명령문을 사용하여 더 복잡한 함수가 필요할 수도 있습니다. 이 경우 중괄호로 묶을 수 있습니다. 주요 차이점은 중괄호 안에 값을 반환하기 위한 return 필요하다는 것입니다(일반 함수와 마찬가지로).
이와 같이:
let sum = (a, b) => { // 중괄호는 여러 줄 함수를 엽니다.
결과 = a + b로 둡니다.
결과 반환; // 중괄호를 사용하는 경우 명시적인 "반환"이 필요합니다.
};
경고(합계(1, 2) ); // 3앞으로 더 많이
여기서는 간결성을 위해 화살표 기능을 칭찬했습니다. 하지만 그게 전부는 아닙니다!
화살표 함수에는 다른 흥미로운 기능이 있습니다.
심층적으로 연구하려면 먼저 JavaScript의 다른 측면을 알아야 하므로 나중에 화살표 함수 다시 살펴보기 장에서 화살표 함수에 대해 다시 설명하겠습니다.
지금은 이미 한 줄 작업과 콜백에 화살표 함수를 사용할 수 있습니다.
화살표 기능은 간단한 작업, 특히 한 줄짜리 작업에 유용합니다. 두 가지 맛이 있습니다.
중괄호 없음: (...args) => expression – 오른쪽은 표현식입니다. 함수는 표현식을 평가하고 결과를 반환합니다. 인수가 하나만 있는 경우 괄호를 생략할 수 있습니다(예: n => n*2 .
중괄호 사용: (...args) => { body } – 대괄호를 사용하면 함수 내부에 여러 문을 작성할 수 있지만 무언가를 반환하려면 명시적인 return 필요합니다.
아래 코드에서 함수 표현식을 화살표 함수로 바꿉니다.
함수 질문(질문, 예, 아니오) {
if (확인(질문)) yes();
그렇지 않으면 아니오();
}
묻다(
"동의하시나요?",
function() { Alert("동의하셨습니다."); },
function() { Alert("실행을 취소했습니다."); }
);
함수 질문(질문, 예, 아니오) {
if (확인(질문)) yes();
그렇지 않으면 아니오();
}
묻다(
"동의하시나요?",
() => Alert("동의하셨습니다."),
() => Alert("실행을 취소했습니다.")
);짧고 깔끔해 보이죠?