본문 바로가기

네트워크/JavaScript

자바스크립트에서 함수 호출과 함수 참조 개념 | ChatGPT

728x90
반응형
ChatGPT 질문한 이유
document.ready 에서 특정 함수를 스크롤 이벤트로 등록도 하고 그 함수를 document.ready 시 실행되게 하고 싶었다. 그 방법을 알아보기 위해, 함수 호출과 함수 참조 개념을 알아보자.

함수 호출 함수 참조

함수 호출함수 참조는 자바스크립트에서 중요한 개념입니다.

두 가지는 외형적으로 비슷해 보이지만, 동작 방식은 크게 다릅니다.

이를 함수 정의와 사용 방식에서 비교해보겠습니다.


함수 호출 (Function Invocation)

함수를 호출하는 것은 함수 이름 뒤에 괄호를 붙여 실행하는 것을 의미합니다.

즉, 호출 시점에 함수가 실행되고 결과를 반환합니다.

특징

  • 괄호(())를 사용하여 함수를 호출.
  • 함수가 즉시 실행되고, 그 결과가 반환됨.
  • 함수의 실행 결과를 변수에 저장하거나 다른 함수에 전달 가능.

예시

여기서 greet()는 함수 호출입니다. 호출 시점에 greet 함수가 실행되고 콘솔에 "Hello, world!"를 출력합니다.

function greet() {
    console.log("Hello, world!");
}

// 함수 호출
greet();  // "Hello, world!" 출력

함수 참조 (Function Reference)

함수 참조는 함수를 호출하지 않고,

정의 자체를 다른 변수나 함수에 전달하거나 나중에 호출하려는 의도로 사용하는 것입니다.

이 경우 함수는 즉시 실행되지 않습니다.

괄호가 없고, 함수의 정의나 주소만을 가리킵니다.

특징

  • 괄호 없이 함수 이름만 사용.
  • 함수가 실행되지 않고, 그 참조 또는 정의만을 전달.
  • 다른 변수에 할당하거나, 나중에 호출할 수 있도록 저장 가능.

예시

여기서 greetReference = greet;는 함수 참조입니다.

greet 함수는 실행되지 않고, greetReference는 greet 함수의 참조를 가지게 됩니다.

나중에 greetReference()로 호출할 수 있습니다.

function greet() {
    console.log("Hello, world!");
}

// 함수 참조
const greetReference = greet;

// 나중에 호출
greetReference();  // "Hello, world!" 출력

주요 차이점

특징함수 호출 (Invocation)함수 참조 (Reference)

특징 함수 호출 Invocation 함수 참조 Reference
사용 방식 함수 이름 뒤에 괄호(()) 붙임 함수 이름만 사용 (괄호 없음)
실행 여부 즉시 실행되고 결과 반환 함수가 실행되지 않음, 참조만 전달됨
결과 함수의 실행 결과를 반환 함수 자체를 변수로 전달하거나 나중에 실행
주 사용처 특정 시점에 함수를 실행할 때 콜백 함수나 이벤트 핸들러에 자주 사용

활용 예시


1. 이벤트 핸들러에서의 함수 참조

이벤트 핸들러에서는 주로 함수 참조를 사용합니다.

함수 호출을 직접 전달하면 페이지가 로드되자마자 실행되기 때문에,

참조를 통해 특정 시점(예: 클릭할 때)에만 실행되도록 합니다.

예시

handleClick 참조가 전달되므로 버튼이 클릭될 때만 함수가 실행됩니다.

반면 handleClick()을 전달하면 페이지가 로드될 때 함수가 즉시 실행되어 의도와 다르게 동작합니다.

function handleClick() {
    console.log("Button clicked!");
}

// 함수 참조 전달 (괄호 없이 전달)
document.getElementById("myButton").addEventListener("click", handleClick);

// 함수 호출을 전달하면 즉시 실행되므로 적절하지 않음
document.getElementById("myButton").addEventListener("click", handleClick());

2. 콜백 함수에서의 함수 참조

함수 참조는 콜백 함수로도 자주 사용됩니다.

함수 호출 결과가 아니라, 나중에 호출될 함수를 전달해야 하는 경우입니다.

예시

여기서 executeCallback(sayHello)는 함수 참조를 전달하여,

executeCallback 내에서 callback()이 실행될 때 sayHello가 실행됩니다.

하지만 executeCallback(sayHello())처럼 함수 호출을 전달하면 함수가 즉시 실행되고, 그 결과가 전달됩니다.

function executeCallback(callback) {
    callback();  // 전달된 콜백 함수를 호출
}

function sayHello() {
    console.log("Hello!");
}

// 함수 참조 전달
executeCallback(sayHello);  // "Hello!" 출력

// 함수 호출 전달 (잘못된 예)
executeCallback(sayHello());  // 즉시 실행되어 "Hello!" 출력 후 undefined 전달

결론

함수 호출은 함수 이름 뒤에 괄호를 붙여 즉시 실행하는 방식이며, 그 결과를 얻을 수 있습니다.

함수 참조는 함수의 정의만을 다른 곳에 전달하는 방식으로, 실행되지 않고 참조만 전달됩니다.

이를 통해 이벤트 핸들러, 콜백 함수, 또는 나중에 함수를 호출할 수 있게 합니다.


이 두 개념을 혼동하지 않는 것이 자바스크립트에서 함수형 프로그래밍을 할 때 매우 중요합니다.

출처 | ChatGPT

728x90
반응형