[JavaScript] Closure

공진용·2023년 5월 21일
1

JavaScript

목록 보기
2/3

▶ Closure 란?

MDN 에선 Closure 를 이렇게 정의했다.

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다.

렉시컬(lexical)의 의미는 "문맥적 코드" 이다.
스코프(scope)의 의미는 "유효 범위" 이다.

결국 렉시콜 스코프문맥적으로 보는 코드의 유효 범위

렉시콜 스코핑유효 범위를 지정하는 방법 을 뜻하는 것 같다.

function outer() {
  var name = "kong"; 
  
  function inner() {
    alert(name);
  }
  
  inner();
}
outer();

outer()함수를 실행하면 outer안에 있는 inner를 실행한다.
inner는 부모 함수에 있는 name 변수를 가져온다.
여기서 inner라는 함수의 위치. name 에 lexical scope 가 중요하다.

name이라는 변수는 outer의 지역 변수이다. 따라서 outer 외부에서는 사용할 수 없지만, 내부에서는 사용 가능하다. 그러므로 inner안에서도 해당 변수 name은 유효.


const a = 1;

function outer(){
  const b = 2;
  const c = 3;
  
  function inner(){
    const b = 4;
    console.log(a, b, c);
  }
  inner();
}

outer();

=================
  
  출력: 1, 4, 3
function madeAddr(x) {
    return function (y) {
        return x + y;
    }
}

const add3 = madeAddr(3);
console.log(add3(2)) // 5;

const add7 = madeAddr(7);
console.log(add7(2)) // 9;
console.log(add3(10)) // 13;

add3 함수가 생성된 뒤에도 상위함수인 makeAddr 의 x에 접근 가능하다.

함수가 "생성될 때"의 외부 변수를 기억하여 생성 이후에도 계속 접근 가능한 것이 클로저이다.

정보와 은닉


function makeCounter(){
    let count = 0; // 은닉화
    return function(){
        return count++;
    }
}

let counter = makeCounter();

console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

위 코드의 count 라는 변수는 "오직" makeCounter 로만 수를 바꿀 수 있다. 이것을 은닉화라고 부른다.

▶ 마치며

누군가 어떤 말을 했을 당시에 그 의미가 사랑과 존중이었어도 시간, 해석, 그 사람에 대한 편견, 상황에 따라 바뀐다.
입맛대로 가공되어 구석을 굴러다니는 단어들을 보고 있을 때면 '말한다'는 동사가 참 허무하다고 느낄 때가 있다.

JavaScript 에서의 '의미' 는 그에 비해 쉬운 편이다. 어떤 의미이든 생성되었을 때 의 상황과 정의만 기억하면 되니까.

도움받은 곳
https://www.youtube.com/watch?v=tpl2oXQkGZs

profile
좋은 문장이 될 FE 개발자

0개의 댓글