안녕하세요🌞
이번 시간에는 자바스크립트의 함수 표현식과 함께 화살표형 함수, 콜백함수에 대해 배워보겠습니다.
지금까지 우리는 함수를 선언할 때는 다음과 같이 함수를 만들었습니다.
function print() {
console.log("hello world");
}
자바스크립트에서는 함수를 선언할 때 위의 방식과 같은 함수 선언 방식 외에 함수 표현식
을 이용해 함수를 만들 수 있습니다.
let print = function () {
console.log("hello world");
};
위의 코드를 보면, print 라는 변수에 "hello world"를 출력하는 함수를 마치 값처럼 할당했습니다.
print 는 변수이지만 함수를 값으로 가지고 있어, 함수를 호출하는 것과 동일하게 "print();" 로 호출할 수 있습니다.
그렇다면 함수를 선언하는 두 가지 방법, 함수 선언식과 함수 표현식의 차이점과 함께 함수 표현식에 대해 자세하게 알아보도록 하겠습니다.
함수 선언식과 함수 표현식의 가장 큰 차이점은, 함수 선언식은 호이스팅에 영향을 받지만 함수 표현식은 호이스팅에 영향을 받지 않는다는 것입니다.
호이스팅이란, 지난 시간에 배운 자바스크립트의 특징으로 아직 선언되지 않은 함수나 변수들을 해당 스코프의 맨 위로 끌어올려 사용하는 자바스크립트의 작동 방식입니다.
이전 시간에 배웠던 것처럼, 아래와 같이 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 입니다.
감사합니다.
이번 시간에는 자바스크립트의 함수 표현식과 함께 함수 표현식을 더 간결하게 작성할 수 있는 화살표형 함수와, 함수 표현식과 마찬가지로 함수를 값처럼 전달하는 콜백함수에 대해 배워보았습니다.
앞으로 다루게 될 강의에서는 이번시간에 배운 화살표형 함수를 이용해 코드를 작성하도록 하겠습니다.
다음 시간에는 자바스크립트의 비 원시 타입 자료형 객체
에 대해 배워보도록하겠습니다.
감사합니다😀
🙏참고 & 출처
https://ko.javascript.info/function-expressions#ref-494
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/function