함수 표현식
자바스크립트에서 함수는 특별한 종류의 값으로 취급한다.
구조로 취급되지 않는다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
//함수 선언문 방식
function showHi1(){
alert("Hi");
}
//함수선언 방식위에 함수 표현식 사용
let showHi = function() {
alert("Hi");
};
alert(showHi);
showHi();
</script>
</body>
</html>
함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성합니다. 따라서 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용할 수 있다.
함수 선언문은 함수 선언문이 정의되기 전에도 호출할 수 있다.
스코프
함수 표현식은 블록 밖에서도 동작한다.
함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근할 수 있다. 하지만 블록 밖에서는 함수에 접근하지 못한다.
콜백 함수
함수를 함수의 인수로 전달하고, 필요하면 인수로 전달한 함수를 나중에 호출하는 것
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function ask(question, yes, no) {
if (confirm(question)) yes()
else no();
}
ask(
"동의?",
function() { alert("동의"); },
function() { alert("취소"); }
);
</script>
</body>
</html>
화살표 함수 기본 (arrow function)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
//함수표현식 사용
let sum = (a, b) => a + b;
/* 위 화살표 함수는 아래 함수의 축약 버전
let sum = function(a, b) {
return a + b;
};
*/
alert( sum(1, 2) ); // 3
</script>
</body>
</html>
동적인 화살표 함수 사용 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
let age = prompt("나이를 알려주세요.", 18);
let welcome = (age < 18) ?
() => alert('안녕') :
() => alert("안녕하세요!");
welcome();
</script>
</body>
</html>
중괄호를 사용할 경우 리턴값을 표시해주어야 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
let sum = (a, b) => { // 중괄호는 본문 여러 줄로 구성되어 있음을 알려준다.
let result = a + b;
return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 한다.
};
alert( sum(1, 2) ); // 3
</script>
</body>
</html>