Ep12. JS 함수 표현식

hyobin·2022년 6월 21일
4

자바스크립트 기초

목록 보기
12/16
post-thumbnail

안녕하세요🌞

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

함수 표현식

지금까지 우리는 함수를 선언할 때는 다음과 같이 함수를 만들었습니다.

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

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

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

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

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

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

함수 선언식 vs 함수 표현식

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

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

이전 시간에 배웠던 것처럼, 아래와 같이 print 함수를 함수 선언식을 통해 작성하고, 함수 선언 전에 함수를 호출하게 되면 함수가 잘 작동하는 것을 확인할 수 있습니다.

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 가 발생하게 됩니다.

함수 표현식은 호이스팅의 대상에 해당되지 않기 때문에, 함수 표현식을 실행하는 순서가 되었을 때 함수를 생성하게 됩니다.

따라서 함수 표현식으로 생성된 함수들을 호출할 경우에는 아래와 같이 항상 함수가 선언된 후에 호출해야합니다.

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

화살표형 함수

우리는 이러한 함수 표현식을 화살표형 함수 를 통해 더 간결하게 작성할 수 있습니다.

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

print(); // hello world

화살표 함수는 위의 코드처럼 => 화살표 모양을 통해 변수에 함수를 값처럼 저장합니다.

이러한 화살표 함수는, 함수표현식 처럼 변수의 이름을 통해 함수를 호출할 수 있습니다.

화살표 함수 또한 호이스팅의 대상이 아니기 때문에, 순서를 잘 지켜서 작성해주어야합니다.

화살표 함수는 우리가 지금까지 선언해왔던 함수와 약간의 차이점이 존재하지만, 지금 당장 알아두실 필요는 없기 때문에 이번 강의에서는 다루지 않겠습니다.

콜백함수

이번에는 마찬가지로 함수를 값처럼 전달하는 콜백함수에 대해 배워보도록 하겠습니다.

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

예시를 통해 콜백함수에 대해 배워보겠습니다.

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

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

start("hyobin", finish);

위의 코드를 살펴보겠습니다.

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

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

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

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

위의 코드를 출력하면 아래와 같은 결과가 나오게됩니다.

안녕하세요 hyobin 입니다.
감사합니다.

next

이번 시간에는 자바스크립트의 함수 표현식과 함께 함수 표현식을 더 간결하게 작성할 수 있는 화살표형 함수와, 함수 표현식과 마찬가지로 함수를 값처럼 전달하는 콜백함수에 대해 배워보았습니다.

앞으로 다루게 될 강의에서는 이번시간에 배운 화살표형 함수를 이용해 코드를 작성하도록 하겠습니다.

다음 시간에는 자바스크립트의 비 원시 타입 자료형 객체 에 대해 배워보도록하겠습니다.

감사합니다😀


🙏참고 & 출처

https://ko.javascript.info/function-expressions#ref-494
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/function

0개의 댓글