Skip to content

GwiyeomGo Tech Blog

About GwiyeomGo

JavaScript closure 뭐지??

12.06.2022 — JAVASCRIPT, 2022 — 4 min read

스코프

javascript 에서 스코프는 범위 입니다. 즉 변수에 접근할 수 있는 범위
전역 스코프와 로컬 스코프 로 2개 타입이 있습니다.
전역 스코프는 말 그대로 어느 곳에서든 해당 변수에 접근 가능
지역 스코프는 함수 스코프, 블록 스코프 등 있다.

변수

변수는 변하는 수 입니다.
let 키워드를 써서 정의합니다.
let 은 block 단위의 스코프를 갖습니다.

let str='hello';
{
  let str='world';
  console.log(str); //(A)
}
console.log(str); //(B)

상수

const 키워드를 써서 정의
상수는 한번 선언하면 바꿀 수 없다
함수를 변수에 할당해 선언 할 때는 const 를 써서 쓴다

const print = (a) => {console.log(a)}
print(a);

함수

함수는 한번 정의되면 여러 번 호출 할 수 있다
함수는 매개변수를 통해 인자를 받는다
함수는 return 사용해서 반환한다
function 키워드를 써서 함수를 정의하지만 ES6 부터는 화살표함수가 도입되어 키워드 없이 정의 가능하다
함수에 이름은 필수가 아니다
함수를 선언하면 함수를 선언할 때마다 새로운 스코프를 생성하게 됩니다.

var a = 1; // 전역 스코프
function test() { // 지역(함수) 스코프
 var a = 2;
 console.log(a);
}
test();  //---(A)
console.log(a); //---(B)

//

let number =1;
function print(){
	let number = 10;
	test(number);
}
function test(number){
	console.log(number)
}

print(); //---> (A)
test(number); //---> (B)

클로저

어휘적(lexcial) 환경(스코프) => 변하지 않는 특정한 어휘적 환경

let name = "a"

function outerFn() {
  let name = "b"
  function innerFn () {
    return name;
  }
}

outerFn 함수 밖에서 name 변수가 새로 선언되어도 변하지 않는다. 어휘적(lexcial) 환경은 바로 이것이다.

클로저 사용법

// 1.중첩함수
function outerFn() {
  let x = 10;
  return function innerFn(y) { // innerFn 함수는 클로저다.
    return x = x + y;
  }
}
let a = outerFn(); // 외부함수 호출은 한번만. 이제 a 변수는 innerFn 함수를 참조한다.
//a(5);  -(A) 15
//a(5);  -(B) 20
//a(5);  -(C) 25

특징1. 외부함수 실행이 끝나도 외부 함수 내 변수를 사용할 수 있다. (내부함수가 외부함수의 변수에 접근 할 수 있다)

// 2. 전역에 선언한 변수를 박스 안에서 함수로 정의하고 전역에서 호출
let globalFunc;
{
  let x = 10;
  globalFunc = function(y) { // globalFunc 함수는 클로저다.
    return x = x + y;
  }
}
globalFunc(5);  - A
globalFunc(5);  - B
globalFunc(5);  - C

특징2. 함수 내부 변수에 접근을 제한한다. 객체 내부에 직접 접근 못함 = 캡슐화

클로저 출처 클로저2 출처