Javascript - Closure(클로저)

모든 코드에 의미를 담겠습니다.

Javascript에서 중요하다는, 또, 알게모르게 나도 프로젝트에서 쓰고 있었던 Closure(클로저) 함수에 대해서 알아보는 시간이다!!

아직은 이론적으로만 배우는 단계라서 실무에서 클로저를 적극적으로 활용해서 어떤 느낌일지... 궁금하다.

항상 배운것을 바로 써먹어서 화면에 기능들이 바로 구현이 되는게 프론트엔드의 가장 큰 장점인 것 같다!!

내가 배웠던 부분들을 바로 실무에 적용해서 내 눈으로 보고싶다? 그렇다면 당신은 프론트엔드에 맞다!

잡설은 집어치우고, Closure는 MDN 공식문서에 따르면 독립적인 변수를 가지는 함수라고 한다. 즉, 내부에 있는 변수를 특정 함수에서만 사용하고 싶을 때 Closure함수가 와따봉!

Closure 함수의 예제를 보면서 이해를 해보자

function ClosureExample(){
  var text = "문태웅입니다";
  return function(){
    console.log("Hello" + text);
  };
}
  
var closure1 = ClosureExample() 
console.log(closure1()) //Hello 문태웅입니다)라고 출력이 된다.

이렇게 보면 ClosureExample 함수안에 있는 var text의 선언값을 Closure함수안에서만 사용할 수 있고, 해당 함수를 closure1에 할당해서 사용해서 console을 찍어보니 값이 그대로 저장되어있는 부분을 확인할 수 있다.

이것을 통해서 Closure함수는 환경을 기억해서 저장하는구나 라는것을 유추할 수 있었다!!

나보다 더 자세하게 Closure함수에대해서 정리하신 분의 개발일지를 공유하도록 하겠다
Closure 정리

Closure함수를 살펴보면 보통 함수안에 함수를 써서 함수자체를 return 시켜서 환경을 기억하도록 만들어 놓았다.

장점

Javascript에서 Prototype에서는 은닉하고 싶은 변수도 쉽게 가져올 수 있는 단점이 있다.

1. 함수 안에 내부 변수를 숨기고 싶다면 Closure함수처럼 외부로 끌고와서 사용하기 용이하다!

2. function이 실행될때마다 고차원함수처럼 함수를 return하기 때문에 closure함수는 환경을 기억해서 동적으로 할당이 가능하다.

단점

환경을 매번마다 기억하기 때문에 메모리 차지가 심하다. 그러므로 사용한 이후에는 해당 함수를 nullify시켜주는게 좋다!