클로저(closure)

hyo·2021년 11월 24일
0

[Javascript] 기초 학습

목록 보기
31/62

클로저(closure)

클로저란?
1.함수와 함수가 선언된 어휘적 환경의 조합
2.함수를 리턴하는 함수
3.외부의 함수의 변수에 접근할 수 있는 내부함수
->
함수를 리턴하는 함수이면서 외부의 함수의 변수에 접근할 수 있는 내부함수를 바로 클로저라고한다.

클로저(closure)의 특징에 대해 알아보자

  • 특징 1.
    함수를 리턴하는 함수

여기 덧셈을 하는 함수가 있다.

이 함수를 조금 다르게 구현해본다.

첫번째 코드와는 다르게 위의 코드는
함수의 호출(invacation)이 두 번 발생한다.

설명

const add = (a) => (b) => a + b;
add(5)(10) // --> 15
add(5) // --> (b) => a + b; 형태의 함수// 그럼 add(5)를 호출함으로써 매개변수 a에 들어간 5는 어디로 갔나? -> 메모리상에 저장되어있다. 즉 add(5)는 메모리상에 매개변수 a에 5를 저장해둔 (b) => a + b; 라는 함수! 이다.
typeof add(5) // --> 'function'
typeof add(5)(10) // --> 'number'

위의 설명에서와 같이
add(5)는 함수이다.
a라는 매개변수에 5를 할당시켜둔 (b) => a + b; 인 함수이다.
메모리상에 저장되어있는거라 전역에서 a라는 변수를 출력하려해도 에러가 나온다.
->


위에선 화살표함수로 작성된 함수 표현식(익명함수)function 키워드를 사용해서 표현해보자.

클로저 함수는 위와 같이 함수를 리턴하는 함수라서 저러한 형태를 가지고있다.

아래 코드는 위의 형태처럼 함수를 리턴하는 함수이지만 클로저가 아닌 함수이다.


  • 특징 2.
    외부함수의 변수에 접근할 수 있는 내부함수

클로저는 리턴하는 함수에 의해 스코프(변수의 접근 범위)가 구분된다.
클로저의 핵심은 스코프를 이용해서, 변수의 접근 범위를 닫는(closure;폐쇄)데에 있다.
따라서, 함수를 리턴하는 것만큼 변수가 선언된 위치가 중요하다.

위의 코드를 보면 변수 a와 b가 선언된 곳이 각기 다르다.
a가 선언된 함수는 바깥쪽에 있으니 외부 함수 라고 부르고 a는 외부함수의 변수 라고부른다.
b가 선언된 함수는 외부함수의 안에 있으니 내부 함수라 하고, b는 내부함수의 변수 라고 한다.
이처럼 클로저 함수는 스코프가 분리되어 있다.

위의 클로저 함수를 토대로 스코프 규칙 추가 설명

->

외부 함수는 변수 b에 접근 불가능
내부 함수는 변수 a에 접근 가능


클로저의 활용에 대해 알아보자

클로저를 왜 쓰는지 클로저의 활용을 알아본다.

일반적인 함수는, 함수 실행이 끝나고 나면 함수 내부의 변수를 사용할 수 없다.
하지만 클로저는 외부 함수의 실행이 끝나도, 외부 함수 내 변수가 메모리상에 저장된다.
(어휘적 환경을 메모리에 저장하기 때문에 가능한 일)

코드로 이해해보자.

위의 코드를 보다시피
변수 addTen에는 클로저를 통해 리턴한 함수가 담겨있다.
addTen은 add함수에서 변수 a에 인자로 넘긴 10이라는 값을 a = 10 과 같이 계속 담은 채로 있다.
외부 함수의 실행이 끝났음에도!
(데이터를 보존하는 함수)

const add = function (a) {
    return function (b) {
      return a + b;
    };
  };

  const addTen = add(10);

  console.log(addTen); 
// --> f (b) {return a + b;} 
// addTen은 f (b) {return a + b;} 함수이면서 동시에 메모리상에 a변수에 10을 가지고 있는 녀석이다! 라고 생각하면 된다.

그러므로 addTen(10)을 해준다면 --> 15 가 나올것이다.

메모리상에 저장되는것이므로 외부에서 a에 접근하려하면 에러가 나온다.


함수 재사용(모듈화), 예제 활용

  • HTML 태그 생성 코드

클로저는 이처럼 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게 해준다.

  • 클로저 모듈 패턴

클로저를 이용해 내부 함수를 객체에 담아 여러 개의 내부 함수를 리턴하도록 만들어준다.

위의 코드를 재사용해보자.
makeCount() 함수를 갖는 두개의 변수를 선언해본다.

const count1 = makeCount();
const count2 = makeCount();

이 둘은 같은 함수를 가지고 있지만, makeCount()를 실행할때 선언되는 let a = 0;의 값을 각자 독립적으로 가지게 된다.
따라서 count1과 count2의 a 는 서로 영향을 미치지않고 각각의 값을 보존할 수 있다.

이와같이 함수 재사용성을 극대화하여, 함수 하나를 완전히 독립적 형태로 분리하는 것을 모듈화 라고 한다.


profile
개발 재밌다

0개의 댓글