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

초코는 함수의 기본과 고급 개념을 배우며 이제는 실전에서 더욱 유용하게 사용할 수 있는 함수의 고급 기능을 배울 준비가 되었다. 멘토는 이번 시간에 초코에게 함수의 더 강력한 활용법을 소개하며, 다양한 상황에서 함수를 어떻게 활용할 수 있는지 보여주기로 했다.

1. 함수의 기본 매개변수 (Default Parameters)

"초코, 함수에서 매개변수를 받을 때 값을 꼭 넘겨야만 할까?"
멘토는 초코에게 질문을 던졌다.

 

"음... 값을 넘기지 않으면 함수가 작동하지 않겠죠?" 초코는 고개를 갸우뚱하며 대답했다.

 

"그렇지 않지! 자바스크립트에서는 매개변수를 넘기지 않아도 기본값을 사용할 수 있어. 이를 기본 매개변수라고 해."

예시:

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

greet();  // 안녕하세요, 초코!
greet("길동");  // 안녕하세요, 길동!

 

"여기서 name에 값을 전달하지 않으면 기본값인 '초코'가 사용되지. 물론 매개변수를 넘기면 그 값이 출력되고!"

결과:

안녕하세요, 초코!
안녕하세요, 길동!

 

초코는 미소를 지었다. "기본값을 지정하면 함수를 더 유연하게 사용할 수 있겠네요!"

2. Rest 파라미터 (Rest Parameters)

"그런데 초코, 함수가 받을 매개변수의 개수가 정해져 있지 않다면 어떻게 해야 할까?"
멘토는 다시 질문을 던졌다.

 

"음... 그럼 매개변수를 여러 개 만들어야 할까요?" 초코는 고민했다.

 

"물론 그렇게 할 수도 있지만, 자바스크립트에서는 Rest 파라미터라는 기능을 사용하면 훨씬 간단하게 처리할 수 있어."

예시:

function sum(...numbers) {
  return numbers.reduce((total, number) => total + number, 0);
}

console.log(sum(1, 2, 3));  // 6
console.log(sum(4, 5, 6, 7));  // 22

 

"여기서 ...numbers는 매개변수로 넘어온 값을 모두 배열로 만들어줘. 그래서 sum 함수는 몇 개의 숫자를 받든지 그 합계를 계산할 수 있지."

결과:

6
22

 

초코는 눈을 반짝였다. "오! 이렇게 하면 다양한 인자를 배열로 받아서 처리할 수 있네요!"

3. 스코프(Scope)와 호이스팅(Hoisting)

멘토는 스코프와 호이스팅이라는 개념을 설명하기로 했다. "자바스크립트에서 함수와 변수의 스코프는 매우 중요한 개념이야. 또한 자바스크립트만의 독특한 특징인 호이스팅도 알고 있어야 해."

스코프 예시:

function outerFunction() {
  let outerVar = "외부 변수";

  function innerFunction() {
    let innerVar = "내부 변수";
    console.log(outerVar);  // 외부 변수
    console.log(innerVar);  // 내부 변수
  }

  innerFunction();
}

outerFunction();

 

"이 코드를 보면, innerFunction은 외부 함수인 outerFunction의 변수를 참조할 수 있지. 하지만 외부 함수는 내부 함수의 변수에 접근할 수 없어. 이런 개념을 스코프라고 해."

호이스팅 예시:

console.log(hello());  // "안녕하세요!"

function hello() {
  return "안녕하세요!";
}

 

"자바스크립트에서는 함수 선언이 코드 실행 전에 미리 메모리에 등록되기 때문에, 함수가 선언되기 전에 호출할 수 있어. 이걸 호이스팅이라고 해."

결과:

안녕하세요!

 

초코는 감탄했다. "스코프가 함수의 범위를 정해주고, 호이스팅 덕분에 함수를 미리 호출할 수 있군요!"

4. 함수 커링 (Currying)

"이번에는 조금 더 고급 기술을 배워보자, 초코. 커링이라는 개념을 들어본 적 있니?"
멘토는 다음 개념을 설명했다.

 

"커링이요? 처음 들어보는데요!" 초코는 궁금한 표정으로 대답했다.

 

"커링은 여러 개의 인자를 받는 함수를, 인자를 하나씩 받는 함수들의 연속으로 변환하는 기법이야. 예를 들어보자."

예시:

function multiply(a) {
  return function(b) {
    return a * b;
  };
}

const double = multiply(2);
console.log(double(5));  // 10

 

"여기서 multiply(2)는 2를 고정한 함수를 반환해. 그 함수에 5를 넘기면 2 * 5가 계산되는 거지."

결과:

10

 

초코는 고개를 끄덕이며 "한 번에 모든 값을 넘기지 않고, 차례대로 넘겨줄 수 있군요!"라고 말했다.

5. 생성자 함수 (Constructor Functions)

"생성자 함수는 객체를 만들 때 자주 사용되지. new 키워드를 사용해서 객체를 생성할 수 있어."

예시:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person1 = new Person('초코', 25);
console.log(person1.name);  // 초코

 

"이 코드에서 Person 함수는 새로운 객체를 생성하고, 그 객체의 속성을 초기화하지. 객체지향 프로그래밍에서 자주 쓰이는 패턴이야."

결과:

초코

6. 재귀 함수 (Recursion)

"마지막으로, 함수를 재귀적으로 호출하는 개념을 배워보자. 이걸 재귀 함수라고 해. 반복적인 작업을 처리할 때 아주 유용하지."

예시:

function factorial(n) {
  if (n === 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

console.log(factorial(5));  // 120

 

"이 함수는 자기 자신을 계속 호출하면서 값을 계산해. 5의 팩토리얼을 계산하면서 5 * 4 * 3 * 2 * 1의 값을 반환하지."

결과:

120

마무리하며

오늘 초코는 함수의 다양한 고급 사용법을 배웠다. 기본 매개변수, Rest 파라미터, 스코프와 호이스팅, 커링, 생성자 함수, 그리고 재귀 함수까지. 이 모든 개념은 자바스크립트에서 복잡한 문제를 해결할 때 매우 유용하게 쓰일 수 있다.

 

"멘토님, 이제 함수가 얼마나 강력한 도구인지 확실히 알겠어요! 실전에서 정말 많이 쓰일 것 같아요!" 초코는 자신감 있게 말했다.

 

"맞아, 초코! 오늘 배운 내용은 자바스크립트의 핵심이 되는 부분들이야. 이걸 잘 익혀두면 앞으로 훨씬 복잡한 문제도 쉽게 풀 수 있을 거야." 멘토는 초코를 격려하며 수업을 마무리했다.