자바스크립트 - 함수 표현식

함수표현식

• 지금까지 우리는 함수를 선언할 때 다음과 같이 function 키워드 옆에 함수의 이름을 적는 방식으로 함수를 선언했습니다. 이러한 함수의 선언방식을 함수 선언식 이라고 부릅니다.

function print() {
    console.log("hello world");
}

자바스크립트에서는 함수를 선언할 때 이러한 함수의 선언식 외에 함수 표현식을 이용해 함수를 만들 수 있습니다.

let print = function () {
    console.log("hello world");
};

코드를 보면 print라는 변수에 "hello world"를 출력하는 함수를 마치 값처럼 할당했습니다. 

print는 변수이지만 함수를 값으로 가지고 있어, 함수를 호출하는 것과 동일하게 print();로 호출할 수 있습니다.

 

그렇다면 함수를 선언하는 두가지 방법, 함수선언식과 함수 표현식의 차이점에 대해 자세히 알아보겠습니다.

 

함수선언식 vs 함수표현식

• 가장 큰 차이점은 함수선언식은 호이스팅에 영향을 받지만 함수표현식은 호이스팅에 영향을 받지 않습니다.(호이스팅 관련 : https://myeongsu0257.tistory.com/102)

자바스크립트 - 호이스팅

아래의 코드는 호이스팅이 발생하여 에러없이 hello world가 출력되는 것을 볼 수있습니다. 

print(); // hello world

function print() {
    console.log("hello world");
}

 

이번에는 함수 표현식을 이용해보겠습니다.

print(); //print is not a function

let print = function () {
    console.log("hello world");
};

함수 표현식은 호이스팅의 대상에 해당되지 않기 때문에, 함수 표현식으로 생성된 함수들을 호출할 경우에는 이렇게 print 함수의 호출문을 항상 선언문 아래쪽에 작성해줘야합니다. 

 

let print = function () {
    console.log("hello world");
};
print();

 

화살표형 함수

• 함수 표현식을 화살표형 함수를 통해 더 간결하게 작성할 수 있습니다. 

const print = () => {
    console.log("hello world");
};

print(); // hello world

 

화살표 함수는 function이라는 키워드를 작성하지 않고, =>화살표 모양을 통해 변수에 함수를 값처럼 저장합니다. 

이러한 화살표 함수는 함수표현식처럼 변수의 이름을 통해 호출할 수 있고, 또한 호이스팅에 대상이 아니기 때문에, 순서를 잘 지켜서 작성해주어야합니다. 

 

콜백함수

• 콜백함수란, 다른 함수에 매개변수로 넘겨준 함수를 의미합니다. 

function add(num1, num2){
    console.log(num1+num2);
}

add(10,15);//25

여기서 매개변수인 num1과 num2의 값이 함수라면, 우리는 num1과 num2를 콜백함수라고 부를 수 있습니다. 

function start(name, callback) {
    console.log(`안녕하세요 ${name} 입니다.`);
    callback(); // finish();
}

function finish() {
    console.log("감사합니다.");
}

start("myeongsu", finish);

 

먼저 코드를 살펴보면, start함수는 2개의 매개변수를 갖고 있고, 호출 시 한 줄의 문장을 출력하고, 매개변수를 통해 전달받은 callback 함수를 실행시킵니다.

finish 함수는 매개변수를 받지 않고, 호출시 감사합니다 라는 문장을 출력합니다. 

이렇게 finish 함수처럼 다른 함수의 인자로 전달된 함수 를 콜백함수라고 부릅니다.

 

콜백함수는 이렇게 특정 함수를 값처럼 함수의 매개변수로 전달해 유연하고 다양한 동작을 할 수 있게 해줍니다. 

 

 

---

참고자료

https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B2%AB%EA%B1%B8%EC%9D%8C

웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의