[JS]클로저(Closures)

Yoon Ki Hyuk·2022년 7월 28일
0

JavaScript

목록 보기
5/6

처음 자바스크립트를 배우면서 클로저를 배울때는 '아 이런게 있구나, 음...그렇군... 대충 알겠다' 정도로 넘어갔었다 하지만 이번에는 좀더 공부하고 알아본 내용을 토대로 블로그를 작성하면서 정리 해 보려 한다 먼저 클로저의 정의에 대해서 알아보자.

클로저의 정의

사실 클로저 라는게 자바스크립트에만 있는게 아닌 다른 언어에도 있는 현상이다 그렇기에 '클로저는 딱 이겁니다!' 라고 정의를 내리기에는 모호할수 있다 그렇기에 내가 학습하고 있는 환경이나 다양한 사례들을 토대로 나만의 정의를 내리는게 맞지않나 싶다.

누군가 나에게 클로저가 무엇인가요 라고 물어보면

자신이 선언될 때의 어휘적 환경(Lexical inviornment)을 기억하는 함수 이고 그 함수에 외부함수의 맥락(Context)에 접근할 수 있는 현상이다

라고 얘기 할 것 같다.

말로는 이해하기 어려우니 예시를 살펴보자

클로저 예시

만약 1씩 증가하는 함수가 있다고 해보자

let number = 1;

function increse() {
  return number++;
}

console.log(increse()); // 1
console.log(increse()); // 2
//number = 20; 누군가의 실수
console.log(increse()); // 3

이 함수의 문제점이 뭘까?
만약 누군가 실수로 중간에 전역변수 number 에 다른 값을 재할당 했다고 가정해보자 그렇다면 저 함수는 개발자의 의도대로 결과값을 출력하지 않을 것 이다. 즉, increse함수는 변수 number 를 보호하고 있지 못하고 있다(변수 number가 어디에서나 접근이 가능하기에)

그렇다면 number 변수를 increse함수 스코프 안에 넣으면 되지않냐 라고 할수도 있다. 한번 보자

function increse() {
  let number = 1;
  return number++;
}

console.log(increse()); // 1
console.log(increse()); // 1
console.log(increse()); // 1

함수를 호출할때마다 변수 number가 계속 1로 할당되어 원하는 결과값을 얻을수가 없다.

이럴때 사용하는 자바스크립트 특유의 방법이 있다 바로 위에서 알아본 클로저 라는 개념이다

function increse() {
  let number = 1;
  return function() {
    return number++;
  }
}

const inc = increse();

console.log(inc()); // 1
console.log(inc()); // 2
console.log(inc()); // 3

함수로 감싸서 리턴을 시켰더니 원하는 결과값이 나왔다 어떻게 된 걸까? 분명히 increse함수가 호출되면서 안에 있는 지역변수 number는 사라졌을텐데 어떻게 사라진 지역변수 number가 되살아나서 1,2,3 이 콘솔에 찍혔을까? 이것이 클로저의 핵심 이라고 할 수 있다

클로저 라고 하는 것은 함수안쪽에서 함수가 만들어질때(increse 함수가 호출될때) 함수안쪽(익명함수)에있는 코드중에 바깥함수(increse)에 있는 변수(number)에 접근을 하게되면 그 변수를 특별한 공간에 저장하게 되는데 그 공간이 클로저다 즉, increse 함수가 호출되면서 리턴이되면 increse 함수에 있던 지역변수 number는 사라지지만 내부함수가 만들어지면서 옮겨진 클로저 라는 공간에는 변수number가 유지되고 있는 것 이다.

이렇게 보니 위에 내가 내린 정의가 이해가 되는 것 같다.

그렇다면 클로저의 장점을 한번 정리해보자

클로저의 장점

1. 모듈화(재사용성)

  • 외부함수의 실행이 끝나더라도 변수가 보존 되기에 계속 사용 할 수 있다, 그리고 클로저 함수를 변수에 할당하여 완전히 독립적인 부품형태로 분리해 모듈화 시켜 사용할 수 있고 데이터와 메서드를 같이 묶어서 사용할 수 있다.

2. 캡슐화

  • 스코프 규칙에 의해 외부에서는 내부함수의 변수에 접근 할 수 없다 대신 리턴하는 메서드를 통해 간접적으로 접근할 수 있다, 이렇게 정보의 접근을 제한시켜 Side effect를 막을 수 있다.

    클로저의 단점

    1. 메모리 누수

  • 클로저로 참조하는 변수는 프로그램 종료 시 까지 항상 메모리에 남아있기 때문에(계속 참조하고 있기 때문에 가비지 컬렉터의 대상이 되지 않음) 브라우저에 따라 메모리를 초과할 수 도 있고 퍼포먼스 저하가 일어날 수 있다.

클로저는 단점보다는 장점이 많다 다른 문서나 정보들을 보면 클로저 사용을 권장하는 글 들이 많이 보인다 따라서 상황에 맞게 잘 사용하는 것이 중요할 것 같다.

profile
개발은 낭만이다

0개의 댓글