함수 표현식 파트 링크 : https://ko.javascript.info/function-expressions
함수 표현식
자바스크립트에서 함수는 '특별한 동작을 하는 구조'로 취급되지 않고 동작을 나타내는 값으로 취급된다.
따라서 값을 변수에 할당하는 것처럼 함수도 할당 가능합니다.
<script>
//1. 함수 생성
function sayHi() {
alert("Hello");
}
//2. 함수 복사
let func = sayHi;
//3. 복사한 함수, 원본 함수 모두 정상실행된다.
func();
sayHi();
</script>만약 위의 예시 중 함수를 복사하는 단계에서 let func = sayHi(); 이렇게 괄호를 추가하여 복사했다면 함수 자체가 아닌 복사하는 함수의 결괏값이 저장됐을 것이다.
함수 선언문 뒤에는 세미콜론(;)이 없고 함수 표현식 뒤에는 세미콜론(;)이 있다. 왜??
function 함수() {} 이렇게 중괄호로 만든 코드블록 끝에는 세미콜론이 없어도 된다.
함수표현식은 let 변수=function(){...}; 이렇게 코드블럭이 아니라 값이 할당된 구문의 일부다.
함수표현식이라서 마지막에 세미콜론을 붙이는 것이 아니라 구문의 끝이기 때문에 세미콜론을 붙인다.
콜백 함수
콜백 함수는 함수를 함수의 인수로 전달하고 필요에 따라 인수로 전달한 함수를 "나중에 호출(called back)" 하는 것을 의미한다.
<script>
function ask(question, yes, no) {
if (confirm(question)) yes()
else no();
}
function showOk() {
alert( "동의하셨습니다." );
}
function showCancel() {
alert( "취소 버튼을 누르셨습니다." );
}
// 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨
ask("동의하십니까?", showOk, showCancel);
</script>위의 예시에서는 사용자가 ok버튼을 누르면 showOk가, 취소 버튼을 누르면 showCancel이 콜백 함수가 된다.
함수 표현식 VS 함수 선언문
이 둘 사이에는 총 세가지 차이점이 있다.
1. 문법 차이
함수선언문 : 함수가 독자적인 구문 형태
함수표현식 : 구문의 구성요소로 할당된다.
2. 함수 생성 시기
함수선언문 : 자바스크립트는 스크립트 실행 전 초기화 과정에서 전역에 선언된 함수 선언문을 찾고 해당 함수를 생성한다. 그래서!! 함수 선언문 정의 전에도 해당 함수를 호출할 수 있다!
함수표현식 : 코드 실행 흐름이 함수에 도달했을 때 함수가 생성된다. (따라서 함수 호출이 선언보다 먼저 있으면 작동하지 않는다...)
3. 스코프
엄격 모드에서 함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근할 수 있다. 하지만 블록 밖에서는 함수에 접근하지 못한다.
전역으로 선언한 let 변수; 에 특정 블록 내에서 함수선언문을 할당하면 블록 밖에서 그 변수를 호출하여 쓸수도 있습니다.함수선언 방식이 함수를 사용하기 유연하여 좋고 함수선언문이 부적합 할 떄 함수 표현식을 쓰는 것이 좋다.
<script>
//블록 안에서만 쓸 수 있는 경우
let age = 16;
if (age < 18) {
welcome(); // \ (실행)
// |
function welcome() { // |
alert("안녕!"); // | 함수 선언문은 함수가 선언된 블록 내
} // | 어디에서든 유효
// |
welcome(); // / (실행)
} else {
function welcome() {
alert("안녕하세요!");
}
}
// 여기는 중괄호 밖이기 때문에
// 중괄호 안에서 선언한 함수 선언문은 호출할 수 없습니다.
welcome(); // Error: welcome is not defined
</script><script>
//블록 밖에서도 쓸 수 있는 전역변수에 할당한 경우
let age = prompt("나이를 알려주세요.", 18);
let welcome;
if (age < 18) {
welcome = function() {
alert("안녕!");
};
} else {
welcome = function() {
alert("안녕하세요!");
};
}
welcome(); // 제대로 동작합니다.
</script>화살표 함수 기본
화살표 함수 기본 파트 링크 : https://ko.javascript.info/arrow-functions-basics
화살표 함수의 인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있다.
let double = n => n*2;화살표 함수는 콜백 함수로도 사용할 수 있다.
function 함수 (n, ()=>n2) { 본문; }본문이 여러줄인 화살표 함수
중괄호 안에 여러줄을 쓰되 반드시 return 지시자로 결괏값을 반환해줘야 한다.
<script>
let sum = (a, b) => { // 중괄호는 본문 여러 줄로 구성되어 있음을 알려준다.
let result = a + b;
return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해야 한다.
};
alert( sum(1, 2) ); // 3
</script>