자바스크립트에서 애로우 함수와 클로저는 모두 함수 관련 개념이지만 서로 다른 기능을 가지고 있습니다. 이번 포스트에서는 애로우 함수와 클로저의 개념을 살펴보고, 두 개념 간의 관계를 살펴보겠습니다.
애로우 함수란?
애로우 함수(arrow function)는 ES6(ECMAScript 2015)에서 도입된 새로운 함수 표현 방식입니다. 애로우 함수는 => 기호로 정의되며, 함수를 간결하게 작성할 수 있게 해줍니다. 전통적인 함수 정의 방식에 비해 더 간단하고 가독성이 좋다는 장점이 있습니다.
예를 들어, 다음은 전통적인 함수와 애로우 함수의 간단한 비교입니다.
// 전통적인 함수
function traditionalFunction() {
// 함수 내용
}
// 애로우 함수
const arrowFunction = () => {
// 함수 내용
}
애로우 함수는 함수 내부에서 this를 새로 바인딩하지 않으므로, 함수 내부에서 this를 사용할 때 발생할 수 있는 문제를 해결할 수 있습니다.
클로저란?
클로저(closure)는 함수와 함수가 선언된 어휘적 환경의 조합으로, 함수가 선언될 당시의 외부 변수에 대한 참조를 유지하는 것을 말합니다. 클로저를 사용하면 함수 내부에서 외부 스코프의 변수를 계속 참조할 수 있습니다.
예를 들어, 다음은 클로저를 사용한 간단한 예시입니다.
function outerFunction() {
const outerVar = 'I am from outer function';
function innerFunction() {
console.log(outerVar);
}
return innerFunction;
}
const closureFunction = outerFunction();
closureFunction(); // 'I am from outer function' 출력
위 예시에서 innerFunction이 outerVar에 대한 참조를 유지하고 있기 때문에, closureFunction을 호출했을 때 외부 변수에 접근할 수 있습니다.
애로우 함수와 클로저의 관계
애로우 함수는 클로저와 밀접한 관계를 가지고 있습니다. 애로우 함수는 자신의 외부 스코프와 this를 상속받기 때문에, 애로우 함수 자체가 클로저를 생성합니다.
아래는 애로우 함수가 클로저를 생성하는 예시입니다.
function outerFunction() {
const outerVar = 'I am from outer function';
return () => {
console.log(outerVar);
}
}
const arrowClosureFunction = outerFunction();
arrowClosureFunction(); // 'I am from outer function' 출력
위의 예시에서 arrowClosureFunction은 외부 스코프의 outerVar에 대한 참조를 유지하므로, 애로우 함수가 클로저를 생성함을 확인할 수 있습니다.
애로우 함수와 클로저는 각각의 개념과 활용 방법을 이해하는 것이 중요하며, 두 개념을 함께 활용하면 더 유용한 프로그래밍을 할 수 있습니다.
이상으로 애로우 함수와 클로저의 개념과 관계에 대해 알아보았습니다.
참고 문헌: