함수 표현식

안녕하세요🌞

이번 시간에는 자바스크립트의 함수 선언식, 표현식과 함께 화살표형 함수와 콜백함수에 대해 배워보겠습니다.

함수 표현식

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

이러한 함수의 선언 방식을 함수 선언식 이라고 부릅니다.

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

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

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

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

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

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

함수 선언식 vs 함수 표현식

함수 선언식과 함수 표현식의 가장 큰 차이점은, 함수 선언식은 호이스팅에 영향을 받지만 함수 표현식은 호이스팅에 영향을 받지 않는다는 것입니다.

호이스팅이란, 지난 시간에 배운 자바스크립트의 특징으로 아직 선언되지 않은 함수나 변수들을 해당 스코프의 맨 위로 끌어올려서 사용하는 것 처럼 보이는 자바스크립트의 작동 방식입니다.

호이스팅이 발생하도록, 아래와 같이 print 함수를 함수 선언식을 통해 작성하고, print 함수 선언 전에, 함수를 호출하는 코드를 작성해보았습니다.

코드샌드박스에 해당 코드를 실행시켜보면, 에러없이 hello world가 출력되는 것을 볼 수 있습니다.

print(); // hello world

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

이번에는 함수 표현식을 이용해 print 함수를 만들고, 함수 선언 전에 함수를 호출하는 코드를 작성해보겠습니다.

print(); //print is not a function

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

코드샌드박스에서 해당 코드를 실행시켜보면, 함수 선언식으로 작성된 코드와는 달리 "print 는 함수가 아닙니다" 라는 ERROR 가 발생하게 됩니다.

실제로 코드 샌드박스에서 실행시켜보겠습니다.

코드샌드박스에서 함수 표현식으로 선언된 print 함수 위에 이렇게 print 함수의 호출문을 작성해보았습니다.

코드 실행결과, 실제로 print 는 함수가 아니다 라는 오류가 발생하는 것을 확인할 수 있습니다.

함수 표현식은 호이스팅의 대상에 해당되지 않기 때문에, 함수 표현식으로 생성된 함수들을 호출할 경우에는 이렇게 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("hyobin", finish);

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

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

start 함수를 호출할 때 "hyobin" 이라는 문자열과, start 함수 호출문 위에 선언된 finish 함수를 매개변수로 전달했습니다.

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

start 함수를 호출하고, start 함수가 실행되면, 맨 위에 작성된 콘솔이 실행되어 "안녕하세요 hyobin 입니다." 가 출력되고,

그 다음 매개변수로 전달된 finish 함수가 callback이라는 이름의 함수로 호출되어 "감사합니다." 가 출력되게 됩니다.

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

이번 강의를 끝으로, 자바스크립트의 함수에 대한 내용은 끝이 났습니다.

다음시간에는 자바스크립트의 객체에 대해 배워보겠습니다.

감사합니다.