자바스크립트 - 일급객체 빠르게 알아보기

park.js·2024년 12월 14일

JavaScript js 객체지향 일급객체

FrontEnd Develop log

목록 보기

35/37

JavaScript에서 "함수는 일급 객체이다"라는 개념을 설명하기 위해 작성.

javascript에서 다음과 같은 조건을 만족하는 객체를 일급 객체라 한다.

무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.

변수나 자료구조(객체, 배열 등)에 저장할 수 있다.

함수의 매개변수에 전달할 수 있다.

함수의 반환값으로 사용할 수 있다.

뭔말인지 모르겠다면 여기를 먼저 보고 가기

무명의 리터럴이란?

이름이 없는 값을 직접 코드에 작성하는 것을 말한다.
예를 들어 let num = 5;에서 5가 무명의 리터럴이다.
리터럴을 딱 이렇게 생각해보자
const x = "이곳에 위치할 수 있다.";
const z = function() {};    // 함수 이름이 없기 때문에 무명의 리터럴이라고 하는것이다. 

여기서 또 잠깐.

런타임에 생성이란?

프로그램이 실제로 실행되는 시점에 만들어진다는 의미이다.
코드가 작성된 시점이 아니라, 실제로 그 코드가 실행되는 순간에 메모리에 생성된다.
아래 예시 코드에서 makeCounter 함수가 호출될 때마다 새로운 함수가 그 순간(런타임)에 생성되는 것을 말한다.

즉, 이름 없이 값을 직접 쓰고(무명의 리터럴), 그 값이 프로그램이 실행되는 순간에 만들어진다(런타임에 생성)는 의미이다.

이참에 다른 개념도 알아보기

컴파일 타임(Compile time)

컴파일 타임은 프로그램이 실행되기 전, 소스 코드가 기계어로 변환되는 시점을 말한다. 이때 생성되거나 결정되는 것들을 '컴파일 타임에 생성된다' 또는 '정적(static)으로 생성된다'고 표현한다.

컴파일 타임: 소스코드에 직접 작성된 상수, 클래스 정의 등
런타임: 사용자 입력에 따른 값, 함수 실행 결과 등

다시 '일급객체'로 돌아와서.

모던 자바스크립트 Deep Dive 18-01 예제 코드

// 1. 무명의 리터럴로 생성: 함수를 이름 없이 변수에 직접 할당
const increase = function (num) {
  return ++num;
}

const decrease = function (num) {
  return --num;
}

// 2. 자료구조(객체)에 저장: 함수를 객체의 프로퍼티로 저장
const auxs = { increase, decrease };

// 3. 함수의 매개변수로 전달: aux 매개변수로 함수를 전달받음
function makeCounter(aux) {
  let num = 0;
  
  // 4. 함수의 반환값으로 함수를 사용: 새로운 함수를 생성하여 반환
  return function () {
    num = aux(num); // 전달받은 함수(aux)를 실행
    return num;
  };
}

// makeCounter 함수에 increase 함수를 전달하여 새로운 함수 생성
const increaser = makeCounter(auxs.increase);
console.log(increaser()); // 1
console.log(increaser()); // 2

// makeCounter 함수에 decrease 함수를 전달하여 새로운 함수 생성
const decreaser = makeCounter(auxs.decrease);
console.log(decreaser()); // -1
console.log(decreaser()); // -2