단순 함수 실행 VS 함수 반환

1. 단순 함수 실행 (첫 번째 예시)

function greet(name) {
  console.log("Hello, " + name);
}

이 코드는 greet 함수가 호출되면 바로 "Hello, [name]"이 콘솔에 출력됩니다. 함수는 즉시 실행되며, 결과를 반환하지 않습니다.

2. 함수 반환 (두 번째 예시)

function greet(name) {
  return function() {
    console.log("Hello, " + name);
  };
}

이 코드는 함수를 반환합니다. greet 함수는 name을 받아서 새로운 함수를 생성하여 반환합니다. 반환된 함수는 나중에 실행될 수 있습니다.

주요 차이점:

1. 즉시 실행 vs 지연 실행

• 첫 번째 예시에서는 greet("John")을 호출하면 즉시 실행되고, "Hello, John"이 바로 출력됩니다.

• 두 번째 예시에서는 greet("John")을 호출하면 즉시 실행되지 않고, 새로운 함수가 반환됩니다. 반환된 함수는 나중에 호출하여 실행할 수 있습니다.

  const greetJohn = greet("John");
  greetJohn(); // 나중에 호출할 때 "Hello, John"

2. 클로저(Closure)

두 번째 예시에서 반환된 함수는 클로저(closure)입니다. 클로저는 반환된 함수가 greet 함수의 name 값을 "기억"하고, 나중에 실행될 때 그 값을 사용할 수 있게 해줍니다.

const greetJohn = greet("John"); // greet 함수 호출, "John"을 기억
greetJohn();  // "Hello, John"이 출력됩니다.

여기서 중요한 점은 greetJohn이 name 값을 기억한다는 점입니다. greet 함수가 실행된 후에도 name 값이 여전히 유효하다는 것인데, 이는 클로저 덕분입니다.

왜 함수 반환을 할까요?

함수를 반환하는 이유는 주로 "지연 실행"과 "상태 캡처" 때문입니다. 반환된 함수가 나중에 실행되게 하여, 그 때의 상태를 유지할 수 있습니다.

예시:

function createMultiplier(factor) {
  return function (number) {
    return number * factor;
  };
}

const multiplyBy2 = createMultiplier(2);  // factor는 2로 설정
console.log(multiplyBy2(5));  // 출력: 10

const multiplyBy3 = createMultiplier(3);  // factor는 3으로 설정
console.log(multiplyBy3(5));  // 출력: 15

여기서 createMultiplier는 factor 값을 기억하는 새로운 함수를 반환합니다. 반환된 함수는 factor를 나중에 사용할 수 있게 해줍니다. 이렇게 함수를 반환함으로써 동적으로 여러 개의 다른 multiplyByX 함수를 만들 수 있습니다.

결론:

• 단순 함수 실행은 호출과 동시에 바로 실행되며, 반환값이 필요 없거나 즉시 실행이 필요한 경우에 사용합니다.
• 함수 반환은 지연 실행을 가능하게 하며, 클로저를 통해 상태를 캡처하고 나중에 실행할 수 있는 함수들을 만들 수 있게 합니다. 여러 번 사용되는 동작이나, 상태를 기억해야 하는 경우에 유용합니다.

즉, 함수 반환을 사용하는 이유는 나중에 실행할 코드를 동적으로 생성하고 상태를 기억하기 위해서입니다.

Click! 즉시 실행과 지연 실행에 대하여