화살표 함수, 기초
함수를 만드는 또 다른 아주 간단하고 간결한 문법이 있으며 , 이는 종종 함수 표현식보다 더 나은 선택이 됨.
이 문법은 화살표 함수(arrow functions)라고 불리며 , 다음과 같이 생겼음 :
let func = (arg1, arg2, ..., argN) => expression;
이 코드는 인수 arg1 , arg2 , ... , argN을 받아 오른쪽에 있는 표현식을 평가하고 그 결과를 반환하는 함수 func를 생성함.
즉 아래와 같이 작성하는 것의 짧은 버전임 :
let func = function(arg1, arg2, ..., argN) {
return expression;
};
예제:
let sum = (a, b) => a + b;
/* 위 화살표 함수는 다음 코드의 간결한 형태입니다:
let sum = function(a, b) {
return a + b;
};
*/
alert( sum(1, 2) ); // 3
위 예제에서 (a,b) => a + b는 두 개의 인수 a와 b를 받아 , 실행 시 a+b를 평가하고 그 결과를 반환하는 함수를 의미함.
인수가 하나뿐이라면 , 매개변수를 둘러싼 괄호를 생략할 수 있어 더욱 짧게 쓸 수 있음.
예 :
let double = n => n * 2;
// 이는 대략 다음과 같습니다: let double = function(n) { return n * 2 };
alert( double(3) ); // 6
인수가 전혀 없을 경우에는 괄호는 빈 상태여야 하지만 반드시 존재해야 함 :
let sayHi = () => alert("Hello!");
sayHi();
화살표 함수는 함수 표현식과 동일한 방식으로 사용할 수 있음
예를 들어 동적으로 함수를 생성할 때 다음과 같이 사용 가능 :
let age = prompt("What is your age?", 18);
let welcome = (age < 18) ?
() => alert('Hello!') :
() => alert("Greetings!");
welcome();
처음에는 화살표 함수가 생소하고 읽기 어렵게 느껴질 수 있지만 , 익숙해지면 구조를 빠르게 파악할 수 있음.
화살표 함수는 특히 한 줄로 작성할 수 있는 간단한 동작이나 콜백에 매우 편리함.
여러 줄의 화살표 함수
지금까지 본 화살표 함수는 매우 간단한 형태로 , 인수를 받아 오른쪽의 표현식을 평가하고 반환했음.
때때로 여러 줄에 걸친 표현식과 문장이 필요한 경우가 있음.
이 경우 중괄호를 사용하여 여러 문장을 작성할 수 있음.
주요 차이점은 , 중괄호를 사용하면 값을 반환하기 위해 명시적으로 return을 작성해야 한다는 것임(일반 함수와 동일하게)
예를 들어 :
let sum = (a, b) => { // 중괄호가 열리면 여러 줄의 함수가 시작됨
let result = a + b;
return result; // 중괄호를 사용하면 명시적인 "return"이 필요함
};
alert( sum(1, 2) ); // 3
중괄호를 넣으면 마지막에 return을 이용하여 값을 꼭 반환해주어야 함.
앞으로 더 배울 내용
여기서는 화살표 함수의 간결함에 대해 설명했고 이것이 전부가 아님
화살표 함수는 다른 흥미로운 기능들을 가지고 있음.
이를 깊이 있게 공부하려면 자바스크립트의 다른 측면들을 먼저 알아야 하므로 , 이후 "Arrow functions revisited" 챕터에서 다시 다루게 될것임.
현재로서는 한 줄 짜리 동작이나 콜백에 화살표 함수를 사용할 수 있음을 알아두면 됨.
과제
1.아래의 코드의 함수 표현식을 화살표 함수로 변경 :
function ask(question, yes, no) {
if (confirm(question)) yes();
else no();
}
ask(
"Do you agree?",
function() { alert("You agreed."); },
function() { alert("You canceled the execution."); }
);
짠 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<script>
function ask(question, yes, no) {
if (confirm(question)) yes();
else no();
}
ask(
"Do you agree?",
() => alert("You agreed.") ,
() => alert("You canceled the execution.")
);
</script>
</body>
</html>
'언어' 카테고리의 다른 글
| Debugging in the browser (JavaScript) (0) | 2025.03.15 |
|---|---|
| JavaScript specials (JavaScript) (0) | 2025.03.15 |
| Function expressions (JavaScript) (0) | 2025.03.14 |
| Functions (JavaScript) (0) | 2025.03.14 |
| The "switch" statement (JavaScript) (0) | 2025.03.14 |
