Core Javascript | 클로저

Soojeong Lee·2021년 10월 3일
0

core-javascript

목록 보기
2/4

코어 자바스크립트를 보며 공부한 내용입니다.

1. 클로저란?

: 클로저는 함수와 그 함수가 선언될 당시의 Lexical environment의 상호관계에 따른 형상 (MDN)

: 어떤 함수에서 선언한 변수를 참조하는 내부 함수에서만 발생하는 현상

: 외부 함수의 LexicalEnvironment가 가비지 컬렉팅 되지 않는 현상

  • LexicalEnvironment : 실행 컨텍스트 객체가 활성화 되는 시점에 수집된 정보 중 하나. 함수 실행 도중 변경되는 사항이 즉시 반영됨.

=> 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상

  • 외부로 전달하는 방법
    1) return
    2) 콜백 함수로 전달

2. 클로저와 메모리 관리

  • 메모리 소모는 클로저의 본질적 특성
  • 메모리 누수 : 개발자의 의도와 달리 어떤 값의 참조 카운트가 0이 되지 않아 가비지 컬렉터(Garbage Collector)의 수거가 되지 않는 경우
  • 더 이상 사용하지 않게 된 클로저에 대해서 메모리 소모가 되지 않도록 관리해 줄 필요가 있음.
  • 메모리 관리 방법
    : 식별자에 기본 형 데이터(보통 null, undefined)를 할당

3. 클로저 활용 사례

1) 콜백 함수 내부에서 외부데이터를 이용하고자 할 때

2) 접근 권한 제어(정보 은닉) : 어떤 모듈의 내부 로직에 대해 외부로의 노출을 최소화해서 모듈간의 결합도를 낮추고 유연성을 높이고자 하는 현대 프로그래밍 언어의 중요한 개념 중 하나.

=> 접근 권한에는 public, private, protected이 있다.

3) 부분 적용 함수 : n개의 인자를 받는 함수에 미리 m개의 인자만 넘겨 기억 시켰다가, 나중에 (n-m)개의 인자를 넘기면 비로소 원래 함수의 실행 결과를 얻을 수 있게끔 하는 함수

4) 커링 함수: 여러 개의 인자를 받는 함수를 하나의 인자만 받는 함수로 나눠서 순차적으로 호출될 수 있게 체인 형태로 구성한 것

필요한 인자의 개수만큼 함수를 만들어 계속 리턴해주다가 마지막에 조합해서 리턴한다.
다만 인자가 많아질수록 가독성이 떨어진다는 단점이 있다.

ES6에서는 화살표 함수를 써서 간단하게 표기할 수 있다.
=> ES6에서는 화살표 함수를 써서 같은 내용을 단 한 줄에 표기
=> 이해가 쉽다.
=> 각 단계에서 받은 인자들을 모두 마지막 단계에서 참조. 가비지 컬렉팅 되지 않고 메모리에 쌓였다가, 마지막 호출로 실행 컨텍스트가 종료된 후에야 비로소 한꺼번에 수거
=> 지연 실행에 유용 : 당장 필요한 정보만 받아서 전달하고, 또 필요한 정보가 들어오면 전달하는 식으로 결국 마지막 인자가 넘어갈 때까지 함수 실행을 미루는 것
=> 활용 방법 : config 파일 작성

// 기존 커링 함수
var curry3 = function (func) {
  return function (a) {
    return function (b) {
      return func(a, b);
    };
  };
};

var getMaxWith10 = curry3(Math.max)(10);
console.log(getMaxWith10(8)); // 10
console.log(getMaxWith10(25)); // 25
// ES6 화살표 함수
var curry = func => a => b => c => d => e => func(a, b, c, d, e); 
profile
🍼 newbie frontend developer

0개의 댓글