Fundamentals/JavaScript

함수 참조와 함수 실행: console.log(getData)와 console.log(getData())의 차이

sod0l 2024. 10. 1. 11:53

1. `console.log(getData)`

  • 정의: 이 코드는 `getData`라는 함수 자체를 출력한다.
  • 무엇을 출력하는가?
    함수의 이름과 내용(정의)을 보여준다. 즉, 이 코드가 실행되면 "이 함수는 이렇게 생겼어!"라고 설명하는 것과 같다.
  • 출력 예시:
ƒ getData() {
  return {
    name: "이정환",
    id: "winterlood",
  };
}
  • 어떤 의미인가?
    이 코드는 단순히 `getData`라는 함수가 존재함을 보여주는 것이고, 이 시점에서는 아무것도 실행되지 않았다. 함수를 호출하지 않았기 때문에 함수가 반환하는 값은 확인할 수 없다.

 

 

2. `console.log(getData())`

  • 정의: 이 코드는 `getData`라는 함수를 호출하는 것이다.
  • 무엇을 출력하는가?
    함수가 호출되면서 Promise 객체를 반환한다. `getData`는 `async` 함수이기 때문에, 호출하면 항상 Promise를 반환한다.
  • 출력 예시:

  • 어떤 의미인가?
    이 출력은 "Promise가 생성되었고, 그 결과는 준비되었다."라는 의미이다.
    `[[PromiseState]]: 'fulfilled'`는 Promise가 성공적으로 해결되었다는 것을 나타내며,
    `[[PromiseResult]]: Object`는 Promise가 반환한 결과(여기서는 객체)를 보여줍니다.

 

 

3. 두 가지 값이 다른 이유

  • 호출 여부: `console.log(getData)`는 함수를 호출하지 않았기 떄문에 함수 정의만 보여주는 반면, `console.log(getData())`는 실제로 함수를 호출해서 그 결과로 Promise를 생성하기 때문에 두 값이 다르게 출력된다.
  • 결과물의 유형: `getData`는 함수 자체이고, `getData()`는 Promise 객체이다.

 

 

4. 비유로 설명해보기

  • `console.log(getData)`: "이건 요리 레시피야." 라고 말하는 것과 같다. (레시피는 요리를 만들기 위한 것, 그러나 실제 요리는 아님)
  • `console.log(getData())`: "요리를 만들기 시작했어요."라고 말하는 것과 같다. (이제 실제로 요리가 만들어지는 과정이 시작된 것)

 

 

5. 결론

  • 함수 참조: `console.log(getData)`는 함수 자체를 출력하고,
  • 함수 실행: `console.log(getData())`는 함수 실행의 결과로 Promise를 출력한다.