js 클로저

1. 클로저의 개념

클로저를 MDN에서 찾아보면 '함수와 함수가 선언된 어휘적 환경의 조합' 이라고 나와있다. 무슨말인지 모르겠다.

다행히 코드스테이츠에서 이해하기 쉽게 설명을 해주었다.

그걸 내가 한문장으로 요약해봤는데, 여러분들에게도 알려주자면

 

 함수를 리턴하는 함수일때 리턴당하는 내부함수가 외부함수의 변수에 접근할 수 있다면, 리턴되는 내부함수를 클로저라고 함.

 

한편, 클로저는 리턴하는 함수에 의해 스코프(변수의 접근 범위)가 구분된다. 클로저의 핵심은 스코프를 이용해서 변수의 접근 범위를 조정하는 것에 있다. 함수를 리턴하는 것 만큼 중요한 것이 변수가 선언된 곳이다.

 

코드스테이츠 학습자료

보라색 block이 외부함수, 노란색 block을 내부함수라고 하면 adder는 함수를 리턴하는 함수이고 내부함수는 외부함수의 변수 x에 접근할 수 있으므로 내부 함수는 클로저 함수이다.

 

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


const add5 = adder(5)   //외부함수(adder)의 실행이 끝나도 외부 함수 내 변수(x)를 사용할 수 있다.
//그래서 5라는 값이 사용 가능하다.

일반적인 함수는 함수실행이 끝나면 함수 내부의 변수를 사용할 수 없지만 클로저는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수가 저장된다. 즉 add5는 adder함수에서 인자로 넘긴 5라는 값을 x에 담은 채로 남아있다. 함수의 실행이 끝났는데도 말이다!

 

이를 나는 '당시의 환경을 기억한다' 라고 정리하였다.

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


const add5 = adder(5)   //외부함수(adder)의 실행이 끝나도 외부 함수 내 변수(x)를 사용할 수 있다.
//그래서 5라는 값이 사용 가능하다.

add5(7) // 12
add5(10) // 15

 

2. 클로저를 이용한 변수 값 보호

아래 함수를 직접 타이핑하고 변수 'value'의 값을 건드려보자. 

(내부함수의 리턴값인 객체가 이해되지 않으면 화살표 함수 개념을 참고하면 된다.)

 

코드스테이츠 학습자료

위 함수 makeCounter 는 'value' 를 직접 건드리는 것이 불가능하게 만들어진 함수이다.

외부 스코프에서는 내부 스코프의 변수에 접근할 수 없기 때문에 어떤 경우에도 'value'는 직접 수정이 불가능하다.

대신, 리턴하는 객체의 메소드를 활용하여 'value'를 간접적으로 조작할 수 있다.

 

이를 정보의 접근 제한이라고 한다.

만일 스코프로 value 값을 감싸지 않았다면, value 값은 전역 변수여야 한다. 하지만 makeCounter 함수가 value값을 보존하고 있기에 전역변수를 따로 만들 필요가 없다. 

전역변수는 개발자가 의도치 않게 값을 변경할 가능성이 있지만, 클로저로 변수를 감싸면 의도치 않게 변수값이 변경될 일이 없다.

 

클로저를 사용하면 이러한 방식으로 전역변수 사용을 줄이고 변수를 보다 안전하게 다룰 수 있게 된다.

 

3.  클로저 모듈 패턴

 

클로저 모듈 패턴을 이용하면 비슷한 기능을 가진 함수들을 반복적으로 만드는 '노동' 에서 벗어날 수 있다.

const makeCounter = () => {
let value = 0;

return{
	increase : () => {
    value = value + 1
	},
    decrease : () => {
    	value = value -1
	},
    getValue : () => value
    }
   }
   
 const counter1 = makeCounter();
 counter1.increase();
 counter1.increase();
 counter1.increase();
 counter1.decrease();
 counter1.getValue(); //2
 
 const counter2 = makeCounter();
 counter2.decrease();
 counter2.decrease();
 counter2.decrease();
 counter2.getValue(); //-3

함수 하나를 완전히 독립적인 부품형태로 분리하여 재사용을 편리하게 할 수 있다. 이를 모듈화 라고 한다.

 

---

이처럼 클로저를 사용하면 value를 전역변수로 선언하지 않음으로써, 의도치 않게 value값이 변하는 것을 방지할 수 있고, 함수를 독립적인 부품형태로 분리하여 재사용을 편리하게 할 수 있다.

 

---

클로저에대해 설명해보세요

 클로저는 외부함수의 변수에 접근할 수 있는 내부함수를 뜻합니다. 클로저가 보통함수들과 다른점은 생성될 당시의 환경을 기억한다는 것인데요, 외부함수의 실행이 종료되어도 내부함수에서 외부함수의 변수와의 참조를 유지합니다.(기억)

 또한 클로저를 이용하여 데이터를 안전하게 보호할 수 있고(캡슐화), 비슷한 함수들을 모듈화하여 재사용 할 수 있습니다.

 

 

 

21.12.30

 

면접준비로 클로저를 공부하고, 예전에 쓴 글을 보았는데 초반의 나는 생각보다 열정이 대단했나보다.

 

이렇게 꼼꼼하게 정리를 해놓았다니.

 

초심을 되찾아야겠다