[목차]
- 함수 선언식 & 함수 표현식 & 즉시함수
- 화살표 함수
- 콜백 함수
1. 함수 선언식 & 함수 표현식
a. 함수 선언식
showMessage()
function showMessage () {
console.log("hello")
}function에 내재된 hoisting 기능으로 인해
함수 선언식을 쓰면 해당 선언 스코프가 최상단으로 끌어올려진다.
(변수 선원 var와 동일)
b. 함수 표현식
const showMessage2 = function () {
console.log("hello world")
}
showMessage2()const로 변수를 선언하고 대입연산자=를 활용한다.
또한 대입연산자를 사용했다는 것은 함수도 무언가의 값임을 의미한다.
함수 표현식이 등장한 이유는 hoisting 현상을 막기 위해서.
그러나 함수표현식은 가독성이 떨어진다는 단점이 있다.
(함수명과 인자값이 너무 멀리 떨어질 수 있다.)
...둘 중 어느 것을 써야할 지 정답은 없다.
배우는 입장에선 둘 다 방법론을 이해하고 써먹을 수 있어야 할 것.
c. 즉시함수
즉시함수는 함수명이 없는 함수를 말한다. 즉시 함수는 함수를 선언함과 동시에 호출하는데, 즉시함수는 앞에는 꼭 세미콜론;을 붙여야 제대로 작동한다.
;(function () {
console.log("hello World!!")
})() // ←여기서 호출2. 화살표 함수
화살표 함수는 함수 표현식을 더 축약해서 쓰기 위해 등장한 문법이다.
(ES6부터)
// 함수표현식
const sum = function (a+b) {
return a+b
}
위 함수 표현식을 화살표 함수 문법으로 고치면 아래와 같다.
const sum = (a+b) => {
return a+b
}여기서 한 번 더 축약하는 것도 가능.
const sum = (a+b) => a+b
함수 표현식을 화살표 함수로 바꿔쓰는 규칙은 단순하다.
function대신 매개변수 뒤에=>입력.- 중괄호
{}를 벗기면return도 생략 가능하다.- 매개변수가 1개일 경우 그것을 묶는
()또한 생략 가능.
(구분이 모호해진다는 이유로 보통은 생략하지 않는다.)
3. 콜백(call back) 함수
앞에서 함수 또한 값이 될 수 있음을 알게 되었다.
그렇다면 매개변수에도 함수를 넣을 수 있을까?
(정답부터 적자면 가능하다.)
function hello (fn) {
console.log(fn)
}
function print() {
return 10
}
hello (print) // 함수의 식 전체가 출력된다.
//hello (print()) // 이 경우에는 값만 찍힘.
// 출력 결과
> ƒ print() {
return 10
}
// 1) 함수는 힙에 저장되고 hello(print)가 콜스택으로 이동.
// 2) hello (print)를 출력하기 전에 먼저 print라는 함수가 실행된다.
// 3) print의 return 값인 10을 찍고 반환.
// 4) 이제 hello가 실행되면서 console.log(fn)를 찍고 빠져나온다.function hello2 (fn) {
console.log(fn()) // 함수 hello2 다시 안에서 함수(fn())를 호출하면?
}
function print() {
return 10
}
hello2 (print) // 함수의 식 전체가 출력된다.
//hello (print()) // 이때는 값인 10만 출력된다.위와 같은 형태를 '콜백(callback) 함수'라고 부른다.
- 매개변수의 값 = 함수 자체의 값
- 'hello2' 함수 호출시 인자값으로 함수 값을 전달.
- 'hello2' 함수 내부에서 'print' 함수를 호출.
콜백함수를 이해하려면 함수도 값이 될 수 있음을 먼저 알아야 한다.
(자바스크립트에서 워낙 자주 쓰이니 확실히 이해하고 넘어가자...ㅠㅠ)
그리고 콜백 함수 안에서 인자값도 넣을 수 있다.
'print' 함수에 매개변수를 설정하면
'hello' 함수 내부에 선언된 변수를 활용하여 인자값을 넣을 수 있다
↓ 그 예시
function hello3 (fn) {
let ingoo = "javascript"
console.log(fn(ingoo))
}
function prin2() {
return 10
}
hello3 (print2)↓ 다음은 콜백함수의 이해여부를 확인하기 위한 응용문제다.
function ingoo(callback) {
return callback
}
function goak(callback) {
const fn = function () {
return 30
}
const result = 1 + callback(fn)
return result
}
function getNumber (callback) {
return 2 * callback()
}
console.log(goak(getNumber))- 호출시의
()안은 인자. 선언시의()안은 매개변수 - 제일 먼저 먼저 goak이라는 함수를 호출한다.
- goak(callback)이라는 함수 속에는 함수(fn)이 있다.
이 함수는 goak()안에서만 접근 가능하다. - fn의 값은 30인데 result는 1+ 콜백 (fn)
- return에 도달하기 전에 callback(fn)으로 인해
getNumber(callback)이 실행된다. (인자값 fn) - fn은 30 * 2 = 60
- 여기에 1을 더해서 return값인 61을 출력한다.
- (function ingoo(callback)은 fake.)
확실히 이해하고 넘어가자...ㅠㅠㅠ
위 문제를 애로후 함수로 고쳐쓰면 다음과 같다.
const ingoo = callback => callback
const goak = callback => 1 + callback(() => 30)
const getNumber = callback => 2 * callback()
console.log(goack(getNumber))
응용문제2
function ingoo(callback) {
return callback
}
function goak(callback) {
const fn = function () {
console.log("1")
return 30
}
const result = 1 + callback(fn)
console.log("2")
return result
}
function getNumber (callback) {
console.log("3")
return 2 * callback()
}
console.log(goak(getNumber))
console.log(getNumber(()=> 60))