자바스크립트의 "함수"는 단순히 코드를 묶는 도구가 아니다.
변수처럼 다룰 수 있고, 스코프를 기억하고, 컨텍스트에 반응하며 동작하는 강력한 구조체다.
이 글에서는 자바스크립트 함수의 정체성과 구조를 차근히 풀어보고,
이 개념들이 어떻게 클로저, 고차 함수, this 바인딩 같은 기능을 만들어내는지를 깊게 살펴보자.
1. 함수는 일급 객체다
자바스크립트에서 함수는 값처럼 다룰 수 있는 존재, 즉 일급 객체다.
일급 객체(First-Class Citizen)라는 건
- 변수에 할당 가능하고,
- 함수의 인자로 넘길 수 있고,
- 함수의 반환값으로 사용할 수 있다는 뜻이다.
const sayHello = function () {
return "Hello";
};
const callFn = function (fn) {
return fn(); // 함수를 인자로 넘김
};
console.log(callFn(sayHello)); // 'Hello'함수가 이렇게 자유롭게 이동하고 조합될 수 있기 때문에,
자바스크립트에서는 콜백 패턴, 고차 함수, 함수형 프로그래밍이 가능해진다.
2. 함수 표현식과 익명 함수
이러한 "함수는 값이다"라는 개념은 함수 표현식으로 이어진다.
함수 선언식과 달리 함수 표현식은 값으로 함수(=익명 함수)를 정의하고 변수에 할당한다.
const add = function(a,b) {
return a + b;
}익명 함수는 자체적으로 이름을 갖지 않기 때문에 디버깅 시 어려울 수 있지만,
콜백 함수나 즉시 실행 함수(IIFE)처럼 한 번 쓰고 버릴 함수에서 자주 사용된다.
setTimeout(function () {
console.log("1초 뒤 실행");
}, 1000);3. 호이스팅과 실행 타이밍
자바스크립트는 코드 실행 전에 변수와 함수 선언을 메모리에 올리는(호이스팅) 특성이 있다.
하지만 함수 선언식과 함수 표현식은 다르게 동작한다.
console.log(foo()); // 가능
function foo() {
return "Declared";
}
console.log(bar()); // 에러
const bar = function() {
return "Expressed";
}- 함수 선언식은 전체 함수가 메모리에 올라가므로, 선언 전에 호출 가능
- 함수 표현식은 변수만 undefined로 호이스팅, 함수 자체는 런타임에 할당되므로 선언 전 호출 불가
이 차이는 var, let, const 의 스코프와 함께 이해하면 더 명확하다.
4. 클로저
함수가 일급 객체이기 때문에, 함수는 언제 어디서든 호출될 수 있다.
그런데 함수가 자신이 선언될 당시의 스코프를 기억한다면 어떤 일이 가능할까?
이게 바로 클로저(Closure)다.
function outer() {
const outerVar = "I am from outer";
return function inner() {
return outerVar;
};
}
const innerFunc = outer();
console.log(innerFunc()); // "I am from outer"inner 함수는 이미 outer()가 끝났음에도, outerVar에 접근이 가능하다.
왜냐하면 함수는 자신이 선언될 때의 렉시컬 환경을 함께 기억하기 때문이다.
클로저는
- 정보 은닉(private 변수)
- 함수형 캐싱
- 부분 적용 함수 등 다양한 패턴을 구현할 수 있다.
5.고차 함수
클로저와 일급 객체가 결합되면, 우리는 함수를 조립하는 패턴을 만들 수 있다.
그게 바로 고차 함수다.
고차 함수란 함수를 인자로 받거나 반환하는 함수를 말한다.
function multiplyBy(factor) {
return function (num) {
return num * factor;
};
}
const double = multiplyBy(2);
console.log(double(5)); // 10여기서 multiplyBy(2)는 함수를 반환하는 함수다.
이런 식으로 코드를 동작의 흐름이 아닌 조합의 단위로 재사용할 수 있게 된다.
6. 화살표 함수와 this 바인딩
자바스크립트의 함수는 일반 함수와 화살표 함수 두 가지 문법을 제공한다.
여기서 중요한 차이는 this의 바인딩 방식이다.
const obj = {
value: 42,
method: function() {
setTimeout(() => {
console.log(this.value) // 42
}, 1000);
},
};- 일반 함수는 호출 위치 기준으로 this를 바인딩
- 화살표 함수는 정의된 위치의 this를 기억(렉시컬 this)
이는 특히 비동기 콜백이나 클래스 내부 메서드에서 유용하다.
마무리
함수는 단순히 코드를 실행을 위한 구조가 아니다.
자바스크립트에서는 스코프를 품은 실행 컨텍스트이자,
동작을 값으로 전달하는 데이터 구조이기도 하다.
이 개념들을 이해하고 나면,
왜 자바스크립트가 콜백, 고차 함수, 클로저, 커링, 컴포지션 같은 함수형 개념을 쉽게 받아들일 수 있는지 알게된다!
