개요
JavaScript에서 함수는 일급 객체로 취급됨 이는 함수가 값처럼 변수에 담기고, 인수로 전달되고, 반환값으로 나오며, 객체의 프로퍼티로 저장될 수 있음을 의미함 이 특성 덕분에 고차 함수, 콜백, 클로저, 함수 합성 같은 패턴이 자연스럽게 구현됨
핵심 개념
- 변수에 할당 가능
- 다른 함수의 인수로 전달 가능
- 다른 함수의 반환값으로 사용 가능
- 객체의 프로퍼티로 저장 가능
간단 예시
변수에 할당
const greet = (name) => `Hello, ${name}`;
인수로 전달
const run = (fn, v) => fn(v);
run(greet, "Bob");
반환값으로 사용 및 클로저
const mul = (m) => (v) => v * m;
mul(2)(5);
객체 프로퍼티로 저장해 메서드 구성
const obj = {
name: "Charlie",
greet() {
return `Hi, I'm ${this.name}`;
},
};
obj.greet();
동작 원리
함수는 객체로 구현되어 프로퍼티와 메서드 보유함(Function.prototype의 call, apply, bind 등) 함수 식과 선언 모두 값으로 평가되어 식 컨텍스트에서 자유롭게 이동 가능함 반환 함수가 외부 스코프 변수를 캡처하면 클로저 형성됨 참조가 값으로 전달되므로 동일 함수 객체를 여러 곳에서 공유 가능함
이점
함수를 값으로 다뤄 조합성과 재사용성 향상
- 고차 함수로 로직을 파라미터화하여 정책 주입 용이
- 콜백으로 비동기 흐름 연결 및 이벤트 처리 단순화
- 클로저로 상태 은닉 및 부분 적용 구현 용이
- 합성으로 작은 함수를 결합해 파이프라인 구성 가능
주의 사항
this 바인딩은 호출 방식에 의존함, 메서드를 분리해 호출 시 this가 바뀔 수 있으므로 bind 등으로 명시적 바인딩 권장 클로저가 불필요한 대상을 오래 참조하면 메모리 유지 발생 가능, 긴 생명주기 객체 참조 최소화 필요 콜백 중첩은 가독성 저하 유발, Promise와 async/await로 흐름 평탄화 권장
마무리
JavaScript 함수의 일급 객체 성질은 함수형 스타일을 실용적으로 적용하게 하는 기반임 값처럼 전달하고 반환하는 패턴을 표준화해두면 모듈 경계가 명확해지고 테스트 용이성이 개선됨 핵심은 함수를 데이터처럼 다루되 컨텍스트(this)와 수명주기 관리에 신경 쓰는 것임
참고자료
- https://developer.mozilla.org/en-US/docs/Glossary/First-class_Function
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind