자바스크립트 함수 정리
자바스크립트 함수에 대해서 아는대로 설명해주세요 !
1. 함수는 일급 객체 (First-class Object)
자바스크립트에서 함수는 값처럼 취급됩니다.
즉, 변수에 담을 수 있고, 함수의 인자로 넘길 수도 있으며, 다른 함수의 반환값으로도 사용할 수 있습니다.
1
2
3
4
5
6
7
8
const sayHello = function() { return 'Hello'; };
console.log(sayHello()); // 'Hello'
const executeFunction = function(fn) {
return fn();
};
console.log(executeFunction(sayHello)); // 'Hello'
➡️ 이런 특성 덕분에 고차 함수(Higher-order Function) 같은 함수형 프로그래밍 패턴을 구현할 수 있습니다.
2. 익명 함수와 함수 표현식
함수는 꼭 이름이 없어도 됩니다. 이름이 없는 함수를 익명 함수라고 하며, 보통 변수에 담아 사용합니다.
1
2
3
4
const add = function(a, b) {
return a + b;
};
console.log(add(2, 3)); // 5
➡️ 이런 방식을 함수 표현식(Function Expression) 이라고 합니다.
3. 함수 호이스팅(Hoisting)
자바스크립트는 실행 전에 함수 선언을 끌어올려(hoist) 놓습니다.
그래서 함수 선언식은 선언 위치보다 위에서 호출해도 동작합니다.
1
2
3
4
console.log(declaredFunction()); // 'Declared Function'
function declaredFunction() {
return 'Declared Function';
}
반면, 함수 표현식은 변수에 할당된 이후에만 호출할 수 있습니다.
1
2
3
4
5
// 함수 표현식은 할당 후에만 사용할 수 있음
const expressedFunction = function() {
return 'Expressed Function';
};
console.log(expressedFunction()); // 'Expressed Function'
4. 클로저(Closure)
클로저는 함수가 선언될 당시의 환경(스코프)을 기억하는 것을 의미합니다. 이 덕분에 함수는 외부 함수의 변수에도 접근할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
function outer() {
const outerVar = 'I am outer!';
return function inner() {
return outerVar; // 외부 변수에 접근 가능
};
}
const innerFunction = outer();
console.log(innerFunction()); // 'I am outer!'
➡️ 클로저는 상태를 저장하거나, private 변수처럼 숨기고 싶을 때 유용합니다.
5. 고차 함수(Higher-order Function)
함수가 일급 객체이기 때문에, 다른 함수를 인자로 받거나 반환하는 함수를 만들 수 있습니다.
이를 고차 함수라고 합니다.
1
2
3
4
5
6
7
function multiplyBy(factor) {
return function(num) {
return num * factor;
};
}
const double = multiplyBy(2);
console.log(double(5)); // 10
➡️ 자주 쓰이는 예시로 map, filter, reduce 같은 배열 메서드들이 있습니다.
6. 화살표 함수(Arrow Function)
화살표 함수는 function 키워드보다 짧은 문법을 제공합니다.
또한 this 바인딩 방식이 다르다는 점이 중요한 특징입니다.
화살표 함수는 선언된 위치의 this를 유지합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const obj = {
value: 42,
method: function() {
setTimeout(function() {
console.log(this.value); // undefined
}, 1000);
}
};
obj.method();
const obj = {
value: 42,
method: function() {
setTimeout(() => {
console.log(this.value); // 42 (Arrow 함수는 obj의 this를 유지)
}, 1000);
}
};
obj.method();
➡️ 일반 함수였다면 this가 달라져 undefined가 될 수도 있지만, 화살표 함수는 안전하게 obj의 this를 참조합니다.
화살표 함수는 “자신을 둘러싼 스코프의 this”를 그대로 사용한다 라고 이해하는 게 정확합니다.
Summary
정리해보면, 자바스크립트 함수는
- 일급 객체
- 함수 표현식 & 호이스팅
- 클로저
- 고차 함수
- 화살표 함수
–