TIL) 자바스크립트 클로저 개념과 특징

[목표]

클로저 함수의 정의와 특징에 대해서 이해할 수 있다.
클로저가 갖는 스코프 범위를 이해할 수 있다.
클로저를 이용해 유용하게 쓰이는 몇 가지 패턴을 이해할 수 있다.

 

 

[참고]

클로저 공부하기 전 화살표 함수를 알아보자!

 

화살표 함수는 익명 함수로만 사용할 수 있다. 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용한다.

const pow = x => x * x;
console.log(pow(10)); // 100

 

 

클로저란?

함수와 함수가 선언된 어휘적 환경의 조합

반환된 내부함수가 자신이 선언됐을 때의 환경인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수

 

클로저 특징과 예시

 

🐜 특징 1. 함수의 호출이 두 번 발생

 

✔️ 함수의 호출이 두 번 발생하는 화살표 함수 // 화살표 함수를 두 번 사용한 덧셈 함수

const adder = x => y => x + y;
adder(5)(7); // 12

 

 

✔️ 일반적인 화살표 함수를 이용한 간단한 덧셈 함수

const add = (x, y) => x + y;
add(5,7); // 12

 

 

 

🐜 특징2. 함수를 리턴하는 함수 // 리턴값이 함수다. 

 

✔️ 함수를 리턴하는 함수1 // 리턴값이 함수

const adder = x => y => x + y;
adder(5)(7); // 12

typeof adder(5) // 'function' (리턴값이 함수 형태)

adder(5) // y => x + y (리턴값이 함수 형태)

 

✔️ 함수를 리턴하는 함수2 // 리턴값이 함수

const adder = function (x) {
	return function (y) {
    	return x + y;
    }
}

 

 

 

🐜 특징3. 리턴하는 함수에 의해 스코프(변수의 접근 범위)가 구분된다.

🐜 특징4. 내부 함수는 외부 함수에 선언된 변수에 접근 가능하다. 

 

✔️ 외부 함수와 내부 함수

const adder = function (x) {
	return function (y) {
    	return x + y;
    }
}

x가 선언된 함수는 바깥쪽에 있어서 '외부 함수'

y가 선언된 함수는 안쪽에 있어서 '내부 함수'

 

그래서 이 클로저 함수는 스코프가 분리되어 있다. 

 

이때, 외부 함수는 y에 접근 불가능!

내부 함수는 x에 접근 가능!

 

 

 

🐜 특징5. 데이터를 보존한다. 

클로저는 외부 함수의 실행이 끝나더라도, 외부 함수 내 변수가 메모리 상에 저장된다. (어휘적 환경을 메모리에 저장해서)

// 일반적인 함수는 함수 실행이 끝나고 나면 함수 내부의 변수를 사용할 수 없다. 

 

const adder = function (x) {
	return function (y) {
    	return x + y;
    }
}

const add5 = adder(5);

➥ 변수 add5에는 클로저를 통해 리턴한 함수가 있다. 

add5는 adder함수에서 인자로 넘긴 5라는 값을 x변수에 계속 담은 채로 남아있다.

그래서 외부 함수 실행이 끝나도 5라는 값은 사용가능하다!

 

 

const adder = function (x) {
	return function (y) {
    	return x + y;
    }
}

const add5 = adder(5);
add5(7) // 12
add5(10) // 15

➥ 변수 add5에 각각 7과 10을 인자로 보내면, x에 5값이 남아있어서 각각 12, 15가 나온다. 

 

 

 

🐜 특징6. 정보 접근을 제한한다. (캡슐화) // ⭐️클로저를 쓰는 이유⭐️

const makeCounter = () => {
	let value = 0;
    
    return {
    	increase: () => {
        	value = value + 1
        },
        decrease: () => {
        	value = value - 1
        },
        getValue: () => value
    }
}

const counter1 = makeCounter();

⬆️ '클로저 모듈 패턴'

 

makeCounter를 실행해서 변수를 담아보면 increase, decrease, getValue 메서드를 포한한 객체를 리턴한다. 

따라서 변수 counter1은 객체!

 

 

⭐️여기서 value라는 변수에 새롭게 값을 할당할 수는 없다. 왜냐면 스코프 규칙 때문에!

 

만약 value가 전역변수였다면, 다른 함수나 로직에 의해 의도되지 않은 변경이 될 수 있다. 

그래서 클로저를  통해서 불필요한 전역 변수 사용을 줄이고, 스코프를 이용해서 값을 보다 안전하게 다룰 수 있다. 

 

 

클로저를 쉽게 이해해보자!

계좌이체라고 하면 변수가 전역일 경우 누군가가 저의 프로그램을 건드려서 송금되는 계좌번호를 누군가가 새로운 function을 몰래 만들어서 입력되는 계좌를 본인의 계좌로 만들어 버릴 수 있다. 근데 전역 변수가 아니라 저렇게 감싸 놓으면 처음에 입력하는 함수에서 계좌번호를 입력받아서 넣어 버리고 함수를 종료해 버렸으니 더이상 누군가는 해당 계좌번호를 바꾸어 버릴 수 없다.

 

그리고 클로저로 만들어진 돈을 보내는 함수가 송금할 때 해당 계좌변수에 접근하는데 클로저가 아니라 전역변수라면 송금하는 함수를 실행하기 전에 몰래 계좌를 본인 계좌로 바꾸어버리는 일이 발생할 수도..!

 

 

 

 

🐜 특징7. 함수 재사용이 가능하다. (모듈화)

const makeCounter = () => {
	let value = 0;
    
    return {
    	increase: () => {
        	value = value + 1
        },
        decrease: () => {
        	value = value - 1
        },
        getValue: () => value
    }
}

const counter1 = makeCounter();
counter1.increase();
counter1.increase();
counter1.decrease();
counter1.getValue(); // 1

const counter2 = makeCounter();
counter1.decrease();
counter1.decrease();
counter1.decrease();
counter1.getValue(); // -3

 

<참고>

getValue 메서드는 외부 함수에 선언된 value 값을 리턴하는 함수다. 

 

중요한특징 ⭐️

makeCounter를 실행할 때에 선언되는 value 값을 각자 독립적으로 사용하기 때문에,

counter1과 counter2의 value는 서로에게 영향을 끼치지는 않는다!!!

 

 

클로저를 통해 데이터와 메서드를 같이 묶어서 다룰 수 있다. (모듈화 가능)

 

 

 

 

---

var a = 0;
function foo() {
    var b = 0;
    return function() {
        console.log(++a, ++b);
    };
}

var f1 = foo();
var f2 = foo();

f1(); // --> 1 1
f1(); // --> 2 2
f2(); // --> 3 1 
f2(); // --> 4 2

// f1과 f2는 각자 독립적으로 사용되기 때문에 전역변수인 a의 값만 올라가고 b 값은 각각 계산되는거다.