JS

[JS] JavaScript의 일급 객체, 쉽게 이해하기

나루나른 2024. 12. 8. 02:06

일급 객체란 뭘까?

일급 객체란 간단히 말해, 다른 값(숫자, 문자열 등)처럼 다룰 수 있는 객체를 말한다. JavaScript에서 함수는 일급 객체로 취급되는데, 이게 무슨 뜻일까? 함수가 다음과 같은 행동을 할 수 있다는 걸 의미한다 :)

  1. 변수에 할당할 수 있다.
  2. 다른 함수의 매개변수로 전달할 수 있다.
  3. 다른 함수의 반환 값으로 사용할 수 있다.

즉, 함수도 숫자나 문자열처럼 값으로 사용할 수 있다는 뜻이다. 이 덕분에 JavaScript는 유연한 코드를 작성할 수 있는 언어가 될 수 있다.

 

 

예제로 보는 일급 객체

 

1. 함수는 변수에 할당될 수 있다

 

JavaScript에서 함수는 값을 담는 변수에 넣을 수 있다. 이렇게 말이다.

const sayHello = function(name) {
  return `Hello, ${name}!`;
};

console.log(sayHello("Alice")); // Hello, Alice!

 

이 예제를 보면 'sayHello'라는 변수에 함수를 담고, 마치 숫자나 문자열처럼 사용하고 있는데 이게 바로 일급 객체의 첫 번째 특징이다.

실제 콘솔창에서 실행 결과

 

2. 함수는 다른 함수의 매개변수로 전달 될 수 있다.

함수를 매개변수로 넘길 수도 있는데, 이걸 콜백 함수(callback function)라고 부른다. 보통 비동기 처리나 반복 작업에서 자주 쓰이는 패턴이다.

function executeCallback(callback) {
  console.log("Callback 실행 결과:", callback());
}

const sayHi = () => "Hi there!";
executeCallback(sayHi); // Callback 실행 결과: Hi there!

 

여기서 executeCallback 함수는 매개변수로 전달된 callback을 실행하는데, 함수가 값처럼 전달되는 모습을 볼 수 있다.

실제 콘솔창에서 실행 결과

 

3. 함수는 다른 함수의 반환 값이 될 수 있다

함수는 다른 함수의 반환 값으로 사용될 수 있는데, 이렇게 반환된 함수를 고차 함수(Higher-Order Function)라고 부른다.

function createMultiplier(multiplier) {
  return function(number) {
    return number * multiplier;
  };
}

const double = createMultiplier(2);
console.log(double(5)); // 10

 

여기서 createMultiplier 함수는 함수를 반환한다. 반환된 함수는 double 변수에 저장되었고, 나중에 호출할 수 있으며, 일급 객체 덕분에 JavaScript에서는 이런 고급 패턴이 가능할 수 있는 것이다.

실제 콘솔창에서 실행 결과

 

일급 객체로 또 무엇을 할 수 있을까?

JavaScript에서 함수가 일급 객체로 다뤄지기 때문에, 우리는 매우 유연한 코드를 작성할 수 있는데, 몇 가지 활용 사례를 살펴보자.

1. 콜백 함수로 비동기 작업 처리

비동기 작업에서 콜백 함수는 필수인데, 자주 사용하는 예로는 setTimeout 같은 내장 함수가 있다.

setTimeout(() => {
  console.log("1초 후 실행됩니다!");
}, 1000);

 

여기서 setTimeout은 첫 번째 매개변수로 콜백 함수를 받아서, 1초 뒤에 실행하는데, 함수가 일급 객체이기 때문에 가능한 일이다.

2. 고차 함수로 유연한 배열 처리

JavaScript의 배열 메서드 map, filter, reduce는 모두 고차 함수이며, 이 메서드들은 매개변수로 함수를 받아, 배열을 유연하게 처리할 수 있도록 해준다.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
 

map 메서드는 배열의 각 요소에 대해 매개변수로 전달된 함수를 호출하고 이 덕분에 배열을 간단히 변환할 수 있다.

 

실제 콘솔창에서 실행 결과

3. 클로저로 데이터 캡슐화

클로저는 함수가 자신이 생성될 때의 환경(스코프)을 기억하는 기능이다. 이 덕분에 데이터를 안전하게 캡슐화할 수도 있다.

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

 

여기서 counter 함수는 createCounter 함수가 생성될 때의 환경을 기억하고, count 변수에 접근할 수 있다.

 

실제 콘솔창에서 실행 결과

 

Createcounter를 통해 해당 함수의 기능을 저장(기억)하고 있다가, count 변수를 통해 접근하면 카운트가 1씩 상승하는 것을 볼 수 있다.

일급 객체의 장점

JavaScript에서 함수가 일급 객체로 다뤄짐으로써 다음과 같은 장점이 있다.

  1. 코드의 유연성 증가
    함수를 값처럼 다룰 수 있어 동적 프로그래밍이 가능하고, 복잡한 작업도 간결하게 표현할 수 있다.
  2. 재사용성 증가
    고차 함수를 통해 로직을 추상화하고, 재사용 가능한 코드를 작성할 수 있다.
  3. 비동기 처리 간소화
    콜백 함수와 클로저를 사용하면 비동기 작업을 손쉽게 처리할 수 있다.
  4. 데이터 캡슐화
    클로저를 활용해 외부에서 접근할 수 없는 데이터를 안전하게 관리할 수 있다.

일급 객체라는 개념이 처음에는 추상적으로 느껴질 수 있지만, 사실 JavaScript를 사용하는 모든 개발자가 이미 자연스럽게 사용하고 있는 개념이므로, 앞으로 코드를 작성할 때, 함수가 상수 또는 변수, 다른 함수의 인자, 다른 함수의 결과 값처럼 사용할 수 있다는 점을 의식하면서 작성해보면 이렇게 작성한 코드는 생각보다 유연하고 강력한 동작을 보장해줄 것이다.