초코의 풀스택 도전기 21: 자바스크립트(JavaScript) 함수의 심화(1)

초코는 함수의 기본적인 개념을 배운 후, 함수의 더 고급 사용법에 대해 궁금해졌다. 멘토는 그런 초코에게 이번에는 함수 표현식, 콜백 함수, 고차 함수, 그리고 자바스크립트에서 자주 쓰이는 즉시 실행 함수에 대해 알려주기로 했다.

1. 함수 표현식 (Function Expression)

초코는 이제 함수 선언 외에도 다른 방식으로 함수를 정의할 수 있다는 사실을 배웠다. 멘토는 함수 표현식에 대해 설명했다.

 

"초코, 지금까지 함수는 function 키워드를 사용해서 선언했지? 그런데 자바스크립트에서는 함수 표현식이라는 방식으로도 함수를 정의할 수 있어."

함수 표현식 예시:

const greet = function(name) {
  console.log(`안녕하세요, ${name}!`);
};

 

"이 코드는 함수 선언과 비슷해 보이지만, 함수가 변수에 할당되었어. 이런 방식을 함수 표현식이라고 불러."

greet('초코');

결과:

안녕하세요, 초코!

 

"함수 표현식은 함수 선언과 달리, 반드시 선언된 이후에만 호출할 수 있어. 변수에 함수가 할당된 후에만 그 함수를 호출할 수 있지."

 

초코는 고개를 끄덕이며, "아하, 변수에 할당해서 함수를 관리할 수 있군요!"라고 말했다.

2. 콜백 함수 (Callback Functions)

"초코, 함수는 다른 함수의 인자로 전달될 수도 있어. 이런 함수를 콜백 함수라고 불러. 콜백 함수는 어떤 작업이 완료된 후 실행되는 함수라고 생각하면 돼."

콜백 함수 예시:

function processUserInput(callback) {
  let name = "초코";
  callback(name);
}

function greet(name) {
  console.log(`안녕하세요, ${name}!`);
}

processUserInput(greet);

 

"여기서 processUserInput 함수는 callback이라는 매개변수를 받아. 그 매개변수로 전달되는 함수가 바로 콜백 함수야. 이 코드에서는 greet 함수가 콜백으로 전달되고, processUserInput 안에서 callback(name)을 호출하면서 실행되는 거지."

결과:

안녕하세요, 초코!

 

"함수가 다른 함수 안에서 호출되니까, 마치 이벤트가 발생한 후 처리되는 함수처럼 동작하는군요!" 초코는 콜백 함수의 작동 방식에 흥미를 느꼈다.

3. 고차 함수 (Higher-order Functions)

멘토는 이제 고차 함수라는 개념을 설명했다. "초코, 고차 함수는 다른 함수를 인자로 받거나, 함수를 반환하는 함수를 말해. 자바스크립트에서 아주 많이 사용되는 개념이야."

고차 함수 예시:

function higherOrderFunction(callback) {
  callback();
}

higherOrderFunction(function() {
  console.log("고차 함수가 호출되었습니다!");
});

 

"여기서 higherOrderFunction은 함수 자체를 인자로 받아서 호출하고 있어. 이렇게 함수를 인자로 넘기면, 나중에 특정 시점에 그 함수를 실행할 수 있어."

결과:

고차 함수가 호출되었습니다!

 

또한 멘토는 배열 메서드인 map, filter, reduce가 고차 함수의 예라고 설명했다. "우리가 이전에 배운 map, filter, reduce 함수도 모두 고차 함수야. 배열의 각 요소에 함수를 적용하는 방식으로 작동하지."

4. 즉시 실행 함수 (Immediately Invoked Function Expressions, IIFE)

"그런데 초코, 가끔 함수가 한 번만 호출되고, 더 이상 필요하지 않은 경우가 있어. 그런 상황에서는 즉시 실행 함수라는 것을 사용할 수 있어."

즉시 실행 함수 예시:

(function() {
  console.log("즉시 실행 함수가 호출되었습니다!");
})();

 

"여기서 함수가 정의되자마자 바로 실행돼. 이걸 IIFE라고 부르지. ()로 감싸고, 마지막에 ()를 붙여서 함수가 바로 실행되도록 만드는 거야."

결과:

즉시 실행 함수가 호출되었습니다!

 

초코는 놀란 표정으로 물었다. "한 번만 실행하고 버리는 함수도 만들 수 있군요!"

 

"그렇지. 즉시 실행 함수는 보통 전역 변수를 오염시키지 않고 코드를 실행하고 싶을 때 사용해. 또는 초기화 작업을 할 때도 자주 사용되지."

5. 클로저 (Closure)

멘토는 초코가 함수의 심화 내용을 다 이해하고 있는 것을 보고, 자바스크립트 함수에서 중요한 개념인 클로저에 대해 간단히 소개하기로 했다.

 

"마지막으로 클로저라는 개념을 알려줄게. 클로저는 함수가 **자신이 생성된 환경(스코프)**을 기억하는 기능이야."

클로저 예시:

function outerFunction() {
  let name = "초코";

  return function innerFunction() {
    console.log(`안녕하세요, ${name}!`);
  };
}

let greetChoco = outerFunction();
greetChoco();

 

"여기서 innerFunction은 outerFunction 안에서 정의되었지. 그런데 함수가 실행된 이후에도 name 변수를 계속 기억하고 있어. 이게 바로 클로저의 힘이야."

결과:

안녕하세요, 초코!

 

"클로저를 사용하면 함수가 생성된 환경을 기억해서, 그 안의 변수를 계속 참조할 수 있게 돼."

초코는 조금 복잡해 보이는 개념이지만, 멘토의 설명을 들으며 "클로저가 스코프를 기억해서 변수에 접근할 수 있게 해주는군요!"라고 말했다.

마무리하며

오늘은 함수의 심화 주제들을 배운 초코. 이제는 함수 표현식, 콜백 함수, 고차 함수, 즉시 실행 함수, 그리고 클로저까지 자바스크립트 함수의 모든 개념을 이해했다.

 

"이제 함수의 다양한 사용법을 완전히 이해한 것 같아요!" 초코는 자부심에 차 있었다.

 

"좋아, 초코! 오늘 배운 내용을 활용하면 더 복잡하고 강력한 코드를 작성할 수 있을 거야. 함수는 자바스크립트의 핵심이니까, 이 개념들을 잘 익혀두면 많은 도움이 될 거야!" 멘토는 초코를 격려하며 이번 수업을 마무리했다.