[JS] 클로저함수의 특징과 활용

somin·2021년 7월 1일

JavaScript 코드스테이츠

JavaScript

목록 보기

10/16

클로저 함수

1. 정의

클로저 함수 : 외부함수의 변수에 접근할 수 있는 내부함수
*반환하는 익명함수가 외부함수의 스코프에 선언된 변수에 접근할 수 있어야 함
함수 내에서 다른 함수(내부 함수)가 리턴이 되면, 이 내부함수를 클로져 함수라 함
클로저를 통해 불필요한 전역 변수 사용을 줄이고, 스코프를 통해 값을 보다 안전하게 다룰 수 있음
함수와 함수가 선언된 어휘적(lexical)환경의 조합으로 이는 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성
*자바스크립트 : 어휘적 환경을 갖음
함수가 생성될 당시의 외부 변수를 기억하고, 생성 이후에도 계속 접근 가능
외부함수의 실행이 끝나 외부함수가 소멸된 이후에도 내부함수는 외부함수의 변수에 접근 가능

1) 어휘적 환경(Lexical 환경)

코드 실행 시 스크립트 내에 선언한 변수들이 Lexical 환경에 올라감
이는 전역 Lexical 환경이라 함

(1) 예시1

//1. 전역 Lexical 환경 생성

let age; //아직 할당이 안된 상태라 초기값은 undefined
age = 26; //age에 숫자 26이 할당

function addAge(num){
  console.log(age + num) //27
  //addAge 내부 Lexical 환경에서 age와 num의 값을 탐색
  //num은 있지만 age가 없어 외부 환경 -> 전역 환경 순으로 넓히며 찾음
  //전역 환경에서 age 값 발견
}

addAge(1)
//2. addAge의 내부 Lexical 환경 생성

<전역 Lexical 환경>

age : let으로 선언되어 초기화 X로 사용 불가

addAge : function

age 변수는 let으로 선언되어 초기화 X로 사용 불가
함수 선언은 코드 실행 초기에 이미 완료(호이스팅)
함수선언문은 변수와 달리 바로 초기화되기 때문에 바로 사용 가능
*변수에 할당하는 방식인 함수 표현식은 사용 불가

<addAge의 내부 Lexical 환경>

num : 1

addAge 함수 실행시 새로운 내부 Lexical환경이 만들어짐
함수가 넘겨받은 매개변수와 지역변수들이 저장됨
내부 Lexical 환경은 외부 Lexical 환경에 대한 참조를 갖음

*코드에서 변수를 찾을때 내부에서 변수를 찾고 없으면 외부, 없으면 전역 Lexical 환경까지 범위를 넓혀서 찾음 (반대 방향으론 X 즉, 안에서 밖은 참조 가능, 밖에서 안은 불가)

(2) 예시2

//1. 전역 Lexical환경 생성

function makeAdder(x){
  return fuction(y){ //상위 함수인 makeAdder의 x에 접근 가능
    return x + y;
  }
}

const add3 = makeAdder(3)
//2. makeAdder 내부 Lexical 환경 생성

console.log(add3(2)) //5
//3. 익명함수의 내부 Lexical 환경 생성(return 함수)

//익명함수 내부 Lexical 환경 -> makeAdder 내부 Lexical 환경 -> 전역 Lexical 환경 순으로 탐색

//익명함수 내부 Lexical 환경에서 y를 찾음 //2
//makeAdder 내부 Lexical 환경에서 x를 찾음 //3
//return x + y; 완성 

const add10 = makeAdder(10)
//4. makeAdder 내부 Lexical 환경 생성

//makeAdder(10)이 호출되어도 add10과 add3은 서로 다른 환경을 가지고 있기 때문에 add3은 아무런 변화 없음

console.log(add10(5)) //15
//5. 익명함수의 내부 Lexical 환경 생성(return 함수)

//익명함수 내부 Lexical 환경에서 y를 찾음 //5
//makeAdder 내부 Lexical 환경에서 x를 찾음 //10
//return x + y; 완성 

console.log(add3(1)) //4
//6. 익명함수의 내부 Lexical 환경 생성(return 함수)

//익명함수 내부 Lexical 환경에서 y를 찾음 //1
//makeAdder 내부 Lexical 환경에서 x를 찾음 //3
//return x + y; 완성

<전역 Lexical 환경>

makeAdder : fuction, 사용 가능

add3 : 초기화 X, 사용 불가

add10 : 초기화 X, 사용 불가

<makeAdder 내부 Lexical 환경>

x : 3

makeAdder(3)가 실행되며 생성

<익명함수의 내부 Lexical 환경>

y : 2

add3(2)을 실행하며 생성

<makeAdder 내부 Lexical 환경>

x : 10

makeAdder(10)가 실행되며 생성

<익명함수의 내부 Lexical 환경>

y : 5

add3(5)을 실행하며 생성

<익명함수의 내부 Lexical 환경>

y : 1

add3(1)을 실행하며 생성

(3) 예시3

//1. 전역 Lexical 환경 생성

fuction makeCounter() {
  let num = 0;
  
  return function() {
    return num++;
  };
}

let counter = makeCounter()
//2. makeCounter 내부 Lexical 환경 생성

console.log(counter())
//3. 익명의 내부 Lexical 환경 생성
//외부함수의 변수 num에 접근
//num : 0
console.log(counter())
//++되어 1
console.log(counter())
//++되어 2
//생성된 익명의 내부환경을 기억하여 +1
//이 숫자들은 수정 불가, 오직 counter를 증가시키고 리턴함
//은닉화 성공

<전역 Lexical 환경>

fuction : makeCounter

counter : 초기화 X, 사용 불가

<makeCounter 내부 Lexical 환경>

num : 0

2. 특징

1) 함수를 리턴하는 함수

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

클로저 함수 : 리턴 값이 함수의 형태

2) 외부함수의 변수에 접근 가능한 내부함수

const adder = function (x) { //x : 외부함수의 변수
  return function (y) { //y : 내부함수의 변수
    return x + y;
  }
}

리턴하는 함수에 의해 스코프가 분리되어 있으며, 내부 함수는 외부 함수에 선언된 변수에 접근 가능
스코프를 이용해 변수의 접근 범위를 닫아 폐쇄할 수 있음(closure)
*변수가 선언되는 곳 중요
외부함수는 y에 접근 불가, 내부함수는 x에 접근 가능

클로저 활용

1. 데이터를 보존하는 함수

//전역 Lexical 환경 생성
const adder = function (x) {
  return function (y) {
    return x + y;
  }
}

const add5 = adder(5) 
//adder 함수의 내부 Lexical 환경 생성
//함수 실행이 끝나도 5라는 값 사용 가능

add5(7)
//익명 함수의 내부 Lexical 환경 생성
//익명 함수의 내부 Lexical 환경에서 y를 찾음
//adder 함수의 내부 Lexical 환경을 참조하여 x를 찾음
//x : 5, y : 7이 되므로 결과는 12

일반적으로 함수는 실행이 끝나면 내부 변수를 사용할 수 없음
클로저 함수는 외부함수 adder의 실행이 끝나도 외부함수 내 변수 x를 사용할 수 있음
*외부 함수 내 변수가 Lexical 환경에 저장되기 때문

<전역 Lexical 환경>

adder : function

add5

<adder 함수의 내부 Lexical 환경>

x : 5

<익명 함수의 내부 Lexical 환경>

y : 7

1) html에 활용하기

const tagMaker = tag => content => `<${tag}>${content}</${tag}>`

const divMaker = tagMaker('div');
//tagMaker 함수의 내부 Lexical 환경 생성 (tag : 'div')
divMaker('hello') 
//익명의 내부 Lexical 환경 생성 (content : 'hello')

//'<div>hello</div>'

2. 정보의 접근 제한(캡슐화)

const makeCounter = () => {
  let value = 0;
  
  return {
    increase : () => {
      value = value + 1;
    },
    decrease : () => {
      value = value - 1;
    },
    getValue : () => value
    },
}
  
const counter1 = makeCounter();
counter1 //{increase: f, decrease: f, getValue: f}

클로저 활용 시 내부 함수를 객체에 담아 여러개 리턴 가능
counter1 : 함수를 여러개 포함한 객체
캡슐화 : makeCounter 함수를 바뀌지 않고 변수 value에 새로운 값 할당 불가능
*스코프 규칙 : 외부 스코프는 내부 스코프에 접근 불가
리턴하는 객체를 활용해 value 값을 조작해야 함