JavaScript | 클로저 함수

 

 

📌 클로저 함수

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 JS가 어떻게 변수의 유효범위를 지정하는지를 이해해야한다.

 

📌 어휘적 범위 지정(Lexical scoping)

function init() {
  var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다.
  function displayName() { // displayName() 은 내부 함수이며, 클로저다.
    alert(name); // 부모 함수에서 선언된 변수를 사용한다.
  }
  displayName();
}
init();

 

📌 let과 const를 사용한 범위 지정

if (Math.random() > 0.5) {
  var x = 1;
} else {
  var x = 2;
}
console.log(x);

 

📌 클로저(Closure)

예제1

function makeFunc() {
  var name = "Mozilla";
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
//myFunc변수에 displayName을 리턴함
//유효범위의 어휘적 환경을 유지
myFunc();
//리턴된 displayName 함수를 실행(name 변수에 접근)

 

예제2

function makeAdder(x) {
  var y = 1; // 반영된 상태
  return function(z) {
    y = 100; // 1 > 100 으로 변경
    return x + y + z;
  };
}

var add5 = makeAdder(5); // x 인자 값 5 정의
var add10 = makeAdder(10);
//클로저에 x와 y의 환경이 저장됨

// retern add5변수의 새로운 함수 정의로 add5(z); z의 인자 값 2 정의 add5의 retern x+y+z; 실행
// add5 는 이미 makeAdder 함수의 x값 5를 담고 있음.
// add5(z) 의 z 인자 값에 새롭게 정의하여 y 값의 새로운 구성과 z 인자의 값 정의
// 최종적 add5() 의 retern 으로 실행 계산.
console.log(add5(2));  // 107 (x:5 + y:100 + z:2)
console.log(add10(2)); // 112 (x:10 + y:100 + z:2)
// 함수 실행 시 클로저에 저장된 x, y값에 접근하여 값을 계산

 

📌 실용적인 클로저

클로저는 어떤 데이터(어휘적 환경)와 그 데이터를 조작하는 함수를 연관시켜주기 때문에 유용하다. 이것은 객체가 어떤 데이터와(그 객체의 속성) 하나 혹은 그 이상의 메소드들을 연관시킨다는 점에서 객체지향 프로그래밍과 분명히 같은 맥락에 있다.

 

실용 예제 (CSS)

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.2em;
}

우리의 대화식 글자 크기 버튼들은 body 요소의 font-size 속성을 변경할 수 있고 이런 조정은 상대적 단위들 덕분에 페이지의 다른 요소에 의해 선택된다.

 

실용 예제 (JS)

function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

size2, size4, size6은 body 요소의 글자 크기를 각각 12, 14, 16 픽셀로 바꾸는 함수이다. 이 함수들은 아래처럼 버튼들에 연결할 수 있다.

 

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>

 

12, 14, 16 버튼으로 폰트 사이즈를 변경할 수 있다.

 

출처 | MDN JavaScript