Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- 자바스크립트
- Promise
- 코드리뷰
- 웹 성능 최적화
- html
- 웹 성능
- flutter android sdk
- 웹 개발
- dom
- jsx
- flutter 오류
- React
- Node.js
- css
- macos flutter
- JavaScript
- 컴포넌트
- 국제화(i18n)
- 패키지 스크립트
- 비동기프로그래밍
- 퍼포먼스 최적화
- 프라미스체이닝
- 자바스크립트공부
- #프론트엔드개발
- aondroid toolchain 오류
- 프론트엔드
- fe
- 웹개발
- 풀스택 개발
- cmdline-tools missing
Archives
- Today
- Total
sodol-dotcom
함수 참조와 함수 실행: console.log(getData)와 console.log(getData())의 차이 본문
Fundamentals/JavaScript
함수 참조와 함수 실행: console.log(getData)와 console.log(getData())의 차이
sod0l 2024. 10. 1. 11:531. `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를 출력한다.
'Fundamentals > JavaScript' 카테고리의 다른 글
객체 구조 분해 할당 (Destructuring Assignment) (0) | 2024.10.01 |
---|---|
Node.js와 패키지 스크립트 (1) | 2024.10.01 |
Promise Chaining 이해하기: 기존의 프라미스와 반환된 프라미스 (0) | 2024.10.01 |
CommonJS와 ES 모듈 시스템 이해하기 (0) | 2024.09.24 |
map 함수 (1) | 2024.09.20 |