- 함수의 일급 객체 개념, 특성
- 실행 컨텍스트(Execution Context)
- 클로저(Closure)
- 함수 팩토리(Function Factory)
1. 함수의 일급 객체
함수의 일급 객체는 JavaScript 자체의 특성중 하나로 함수를 변수처럼 다룰 수 있게 해주는 일반적인 특성이다.
이 개념은 주요 특성을 가지고 있는데,
📌 변수에 할당 가능 ( Assignable )
-> 함수를 변수에 할당할 수 있다. ( 함수를 변수에 저장하고 다른 변수에 할당 가능 )
const myFunction = function() {
console.log("grapefruit");
}📌 다른 함수에 인자로 전달 가능 ( Parameter )
-> 함수를 다른 함수에 전달할 수 있다. ( 함수를 다른 함수의 매개변수로 사용 가능 )
function excuteFunction(func){
func();
}
executeFunction(myFunction);📌 함수에서 반환 가능 ( Returnable )
-> 함수를 다른 함수에 전달할 수 있다. ( 함수의 반환값으로 다른 함수를 반환하는 것이 가능 )
function returnFunction(){
return function(){
console.log("coding elice coding");
};
}
const newFunction = returnFucntion();
newFunction();📌 자료 구조의 요소로 사용 가능 ( Data Structure )
-> 함수를 배열이나 객체 등 자료 구조에 저장할 수 있다.
const functionArray = [myFunction, returnFunction()];
functionArray[0]();
functionArray[1]();이런 특성들은 함수를 데이터로 취급하는 언어의 특성을 나타내는 것이며 함수형 프로그래밍 스타일을 지원한다.
2. 실행 컨텍스트(Execution Context)
실행 컨텍스트는 코드가 실행될 때 생성되는 환경의 추상적인 개념으로 실행되는 코드에 필요한 정보를 담고 있다.
이 정보는 변수, 함수 선언 / 객체, 스코프 체인 등이 포함되는데 함수가 호출 될 때 마다 새로운 실행 컨텍스트가 생성된다.
그리고 아무런 코드가 없는 상태에서 자바스크립트가 실행될 때 전역 실행 컨텍스트가 기본적으로 생성되며 코드가 있고, 함수가 실행될 때는 함수 실행 컨텍스트가 생성된다.
3. 클로저(Closure)
클로저는 함수와 그 함수가 선언될 당시의 환경을 의미하며 함수의 일급 객체 성질을 이용한다.
함수가 생성될 때, 함수 내부에서 사용되는 변수들이 외부에 존재하는 경우 그 변수들은 함수 스코프에 저장되며 그 공간을 클로저라고 한다.
클로저의 형태는 일반함수와 화살표 함수를 사용했을 때 this를 호출하는 것으로 확인해볼 수 있다.
function outerFunction() {
const outerThis = this;
return function innerFunction() {
console.log('Inner this:', this); // innerFunction의 this
console.log('Outer this:', outerThis); // outerFunction의 this
};
}
const fn = outerFunction();
fn(); // Inner this: Window or global object (브라우저에서), Outer this: Window or global object (브라우저에서)^ 위 코드에서 innerFunction은 outerFunction 내부에서 정의 되었으므로 클로저가 형성된다.
그리고 innerFunction은 호출될 때마다 자신의 this를 가질 수 있는데 외부에 적힌 outerFunction 의 this가 호출되기도 한다.
function outerFunction() {
const outerThis = this;
return () => {
console.log('Outer this:', this); // outerFunction의 this
console.log('Outer this:', outerThis); // outerFunction의 this
};
}
const fn = outerFunction();
fn(); // Outer this: Window or global object (브라우저에서)^ 반면 화살표 함수의 경우는 자신의 this를 갖지 않고 외부 스코프의 this를 따르므로 일반함수에서와 동일하게 출력하더라도 외부 함수의 this를 참조한다.
4. 함수 팩토리(Function Factory)
함수 팩토리는 함수를 생성하여 반환하는 함수로 팩토리 함수를 사용하면 각 호출마다 새로운 클로저가 형성된다.
주로 객체 지향 프로그래밍에서 클래스와 같이 함수를 사용하는데 새로운 객체를 생성하고 초기화할 수 있다.
// 1. 함수 팩토리 생성
function outerFunction(outerVariable) {
function innerFunction(innerVariable) { // 2. innerFunction은 클로저를 형성
return outerVariable + innerVariable;
}
// 3. 내부 함수 반환
return innerFunction;
}
// 4. 함수 팩토리를 사용하여 새로운 함수 생성
var add5 = outerFunction(5);
var add10 = outerFunction(10);
console.log(add5(3)); // 출력: 8 (5 + 3)
console.log(add10(3)); // 출력: 13 (10 + 3)^ 위 코드처럼 하나의 함수 팩토리를 이용해서 유사한 기능을 가진 여러 함수를 생성할 수 있다.
좋아좋아 하모니카 솔로~~
