KimMinJun
Coding Note
KimMinJun
전체 방문자
오늘
어제
  • 분류 전체보기 (486)
    • ALGORITHM (11)
      • 정렬 (6)
      • 최단경로 (1)
      • 자료구조 (1)
      • 슬라이딩 윈도우 (1)
      • etc (2)
    • Git (5)
    • Web (24)
      • Vanilla JS (13)
      • TS (2)
      • React (7)
      • ETC (1)
    • React 공식문서 (번역, 공부) (11)
      • Quick Start (2)
      • Installation (0)
      • Describing the UI (9)
      • Adding Interactivity (0)
      • Managing State (0)
      • Escape Hatches (0)
    • Next.js 공식문서 (번역, 공부) (3)
      • Getting Started (2)
      • Building Your Application (1)
    • PS (431)
      • 백준 (187)
      • Programmers (104)
      • CodeUp (21)
      • STL (3)
      • 제코베 JS 100제 (50)
      • SWEA (0)
      • LeetCode (65)
    • IT (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • 관리

공지사항

인기 글

태그

  • Level 2
  • C
  • C++
  • programmers
  • codeup
  • 문자열
  • js
  • 다이나믹 프로그래밍
  • 그래프
  • 수학
  • string
  • 제코베 JS 100제
  • tree
  • 백준
  • recursion
  • LeetCode
  • 정렬
  • Level 1
  • Level1
  • Level 0

최근 댓글

최근 글

hELLO · Designed By 정상우.
KimMinJun

Coding Note

Web/Vanilla JS

일급객체, 일급함수

2023. 9. 3. 17:44

1. 일급 객체란?

일급 객체란, 다음과 같은 조건을 만족하는 개체를 말한다.

  1. 변수나 데이터 구조 안에 담을 수 있다.
  2. 파라미터로 전달될 수 있다.
  3. 반환값으로 사용할 수 있다.
  4. 동적으로 프로퍼티 할당이 가능하다.

 

2. 일급 함수란?

일급 함수란, 일급 객체의 조건을 만족하는 함수를 의미한다. JS 에서는 함수가 일급 객체이다.

그 말은, JS에서는 다음과 같은 작업들이 가능하는 의미이다.

  1. 함수를 변수나 데이터 구조 안에 담을 수 있다.
  2. 함수는 파라미터로 전달될 수 있다.
  3. 함수는 반환값으로 사용할 수 있다.

 

사실 이렇게 글로 보면 이해가 잘 가지 않을 수도 있다. 하지만 JS를 사용해 코드를 짜본 사람이라면 어쩌면 이미 위의 개념들을 사용하고 있을 수도 있다. 각각의 예시를 보자.

 

1) 함수를 변수나 데이터 구조 안에 담을 수 있다.

const myFunction = function() {
    console.log("Hello, I'm a function!");
};
myFunction(); // Outputs: Hello, I'm a function!

 

2) 함수는 파라미터로 전달될 수 있다.

function greet() {
    console.log('Hello!');
}

function callFunction(func) {
    func();
}
callFunction(greet); // Outputs: Hello!

 

위의 코드는 다음과 같은 순서로 이해하면 될 것 같다.

  1. callFunction의 인자로 'Hello!'를 출력하는 greet() 함수가 전달된다.
  2. callFunction에서 인자로 전달된 greet()를 실행한다.
  3. 'Hello!'가 출력된다.

 

3) 함수는 반환값으로 사용할 수 있다.

function createGreeting(name) {
    return function() {
        console.log('Hello ' + name);
    };
}

const greetJohn = createGreeting('John');
greetJohn(); // Outputs: Hello John

 

위의 코드는 다음과 같은 순서로 이해하면 될 것 같다.

  1. createGreeting 함수는 'Hello' 뒤에 인자를 붙여서 출력하는 함수를 반환한다.
  2. createGreeting에 'John'을 인자로 전달한다.
  3. 내부 함수가 호출되어서 'Hello John'을 출력하는 함수를 반환한다.
  4. 'Hello Johh'이 출력된다.

 

저작자표시 (새창열림)

'Web > Vanilla JS' 카테고리의 다른 글

JS는 어떻게 배열의 사이즈를 지정하지 않고 사용할 수 있을까?  (0) 2024.06.16
호이스팅(Hoisting)  (2) 2023.09.03
Symbol  (0) 2023.04.06
얕은 복사와 깊은 복사(Shallow Copy & Deep Copy)  (0) 2023.04.03
    'Web/Vanilla JS' 카테고리의 다른 글
    • JS는 어떻게 배열의 사이즈를 지정하지 않고 사용할 수 있을까?
    • 호이스팅(Hoisting)
    • Symbol
    • 얕은 복사와 깊은 복사(Shallow Copy & Deep Copy)
    KimMinJun
    KimMinJun

    티스토리툴바