var, let, const 클로저, 호이스팅, scope

김듑듑·2022년 7월 24일

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures
https://developer.mozilla.org/ko/docs/Glossary/Hoisting
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let#%EC%8B%9C%EA%B0%84%EC%83%81_%EC%82%AC%EA%B0%81%EC%A7%80%EB%8C%80

클로저는 스코핑이랑 관련있음

당연한걸 어렵게 풀어서 이야기하는거....예시를 보자...

function makeAdder(x) {
	return function(y) {
        return x + y;
    };
}

const add3 = makeAdder(3); 👈add5도 클로저_클로저에 x와 y의 환경이 저장됨
const add10 = makeAdder(10); 👈add10도 클로저

add3(2); //add3 따라가보자 makeAdder(3)임 x=3, add3(2)에서 2는 makeAdder 내부 익명함수 칭구긔 그래서 y=2
add10(2); // x=10, y=2

정의를 해보자

add3(2)은
const add3가 생성된 이후에도
상위함수 makeAdder()의 x=3에 접근가능했음

이걸 클로저라고 함

  • 함수와 lexical 환경 조합
  • 함수가 생성될때 그당시 외부변수 기억하고 생성 이후에도 접근가능

한문장으로 정의하자면
외부함수의 변수에 접근할수 있는 내부함수


그럼 클로저를 언제 쓰냐

  1. 모듈패턴 : 출처세탁해서 함수를 프라이빗하게 쓰는척하려고
  2. 또는 이렇게 유용하게 씀
function makeSizer(size) {
	return function() {
    	document.body.style.fontSize = size + 'px';
    };
}

var size12 = makeSizer(12);

document.getElementById('size-12').onclick = size12;


(+)

클로저를 남발하기 싫으면 let을 쓰시오

var는 함수 레벨 스코프 👉 함수 내부는 다 지역변수, 외부는 다 전역변수 오지랖넓은 칭긔
let, const는 블록 레벨 스코프

범위_지역 범위, 외부함수범위, 전역범위

0개의 댓글