(JS) 함수 표현식 (콜백함수/익명함수)

자바스크립트에서 함수는 특별한 종류의 값으로 취급된다. (어떠한 구조로 취급하지 않는다.)

따라서 값이 취할 수 있는 행동들 대부분을 할 수 있다.

 

 

함수 표현식(function expression)

• 함수를 변수에 할당할 수 있다.
• 함수가 할당된 변수를 console.log를 통해 확인하면 변수명에 할당된 함수의 이름이 출력된다.
• 다만, 자바스크립트에서는 괄호가 있어야만 함수가 호출된다.
• 따라서 아래의 코드에서는 함수 내용은 호출되지 않고 함수명 add만 확인할 수 있다.

const addNum = function add(a, b) {
    return (a + b)
}

console.log(addNum);

addNum에 할당된 함수명이 나온다.

---

const addNum = function add(a, b) {
    return (a + b)
}

console.log(addNum(1, 2));

변수에 괄호를 처리하고 인수를 넣으면 변수 내 함수에 전달되고 함수 연산이 호출된다.

 

---

 

• 함수는 값이므로, 다른 변수처럼 값을 복사(참조)해 할당할 수 있다.
• 다만 함수를 복사할 때, 괄호를 넣으면 함수 전체가 아닌 함수값이 복사된다.

function add(a, b) {
    return (a + b)
}

const addNum1 = add;  // 함수를 addNum1에 저장함.
const addNum2 = add;  // 함수를 addNum1에 저장함.
const addValue = add();  // 함수의 반환값을 addValue에 저장함.

console.log(addNum1(1, 2));
console.log(addNum2(1, 2));
console.log(addValue); // 함수가 아니므로 인수를 넣으면 오류가 난다.
console.log(add(1, 2));

---

함수 표현식은 함수 선언문과는 달리 맨 끝에 세미콜론(;)을 붙여준다.

• 함수 표현식도 결국엔 변수를 선언하는 것과 같다.
• 따라서 변수를 선언하는 것 처럼 함수 표현식에는 뒤에 세미콜론을 붙인다.

function add(a, b) {
    return (a + b)
} // ; 없음 (함수 선언)

const addNum1 = add;  // ; 있음 (변수 선언)

 

---

 

콜백함수(callback)

• 함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 나중에 호출하는 것이 콜백함수의 개념이다.

• 아래 코드에서는 x값에 따라 관우나 장비가 각각 출전한다.
• 즉 인수로 두 함수를 전달했고, 그 함수를 나중에 호출할 수 있다. 콜백함수의 개념을 적용했다.
• 이 때, command 함수의 인수인 kwanwoo와 jangbi는 콜백함수, 또는 콜백이라고 부른다.

function command(g1, g2) {
    if (x < 5) return g1();
    else return g2();
}

function kwanwoo() {
    return ('관우가 출전한다!')
}

function jangbi() {
    return ('장비가 출전한다!')
}

x = 4 // 5 미만 관우, 5 이상 장비
const order = command(kwanwoo, jangbi);
console.log(order);

x값에 따라 두 함수인자를 다르게 받아올 수 있다.

 

---

 

 

익명함수(anonymous function)

• 아래와 같이 코드하면 코드의 길이가 짧아진다.
• command의 매개변수칸에서 각각 g1과 g2의 콜백함수를 제작하였다.
• 이렇게 이름없이 선언된 함수를 익명함수(anonymous function)라고 부른다.
• 익명함수는 변수에 따로 할당된게 아니므로 해당 함수 외에서는 호출할 수 없다.
• 따라서 아래 함수에서 익명함수는 command 바깥에서는 호출될 수 없다.

function command(g1, g2) {
    if (x < 5) return g1();
    else return g2();
}
x = 6;
const order = command(
    function() {
        return '관우가 출전한다!'
    },
    function() {
        return '장비가 출전한다!'
    }
)

console.log(order);

 

 

https://ko.javascript.info/function-expressions

함수 표현식