▒ 클로저란.
자바스크립트의 함수가 자신이 선언된 환경에서의 변수들을 기억하고, 그 환겨에 접근할 수 있는 기능을 말한다.
쉽게 말해, 내부 함수가 외부 함수의 변수에 접근할 수 있는 것.
▒ 클로저를 사용 하는 이유.
▷ 데이터 캡슐한 → 외부에서 의도치 않게 변경할 수 없도록 보호
▷ 상태 유지 → 함수 호출간에 상태를 유지 할 수 있다.
let l0 = 'l0';
function fn2(){
let l2 = 'l2';
console.log(l0, l1, l2);
}
function fn1(){
let l1 = 'l1';
console.log(l0, l1);
fn2(); // 어디에서 호출했냐에 따라 접근할 수 있는 유효 범위가 달라진다면 동적 스코프
// 자바스크립트는 정적 스코프 채택
}
fn1();
위 코드에서 fn1()을 호출하면 fn2()에서 l1의 값이 있을 법한데 에러가 난다. 동적 스코프라면 될 수 있겠지만,
자바스크립트는 함수가 어디서 정의되었는지에 따라 달라지는 정적 스코프를 채택하고 있기 때문이다.
let l0 = 'l0';
function fn1(){
let l1 = 'l1';
console.log(l0, l1);
function fn2(){
let l2 = 'l2';
console.log(l0, l1, l2);
}
fn2();
}
fn1();
위 코드로 수정하면 l1이 정상적으로 보인다. 이처럼, 내부함수에서 외부함수의 변수를 참조하고 있는데 이 때 외부함수는 클로저이다.
클로저는 함수가 선언된 스코프 밖에서 실행될 때도 그 환경에 접근할 수 있는 것을 말한다.
아래와 같이도 사용 되어질 수 있다.
function 계산(초기값){
return {
더하기: function(숫자){
return 초기값 + 숫자;
},
빼기: function(숫자){
return 초기값 - 숫자;
}
};
}
let 계산기 = 계산(1);
console.log(계산기.더하기(1)); // 2
console.log(계산기.빼기(2)); // -1
▒ 렉시컬 스코프란.
자바스크립트가 변수를 어디서 찾을지를 결정하는 방식을 의미,
변수가 어디에서 선언되었는지에 따라 그 변수의 유효 범위가 결정
▒ 렉시컬 스코프의 특징
▷ 정의된 위치 : 함수가 어디서 호출되는지가 아니라, 어디서 정의되었는지가 중요
▷ 스코프 체인 : 함수가 호출되면, 자바스크립트 엔진은 변수를 찾기 위해 해당 함수의 스코프에서 시작해 상위 스코프를 차례로 탐색
const globalVar = 'global';
function outer() {
const outerVar = 'outer';
function inner() {
const innerVar = 'inner';
console.log(globalVar); // global
console.log(outerVar); // outer
console.log(innerVar); // inner
}
inner();
}
outer();
728x90
'개발 > STUDY' 카테고리의 다른 글
프로토타입 (0) | 2024.05.23 |
---|---|
Callback과 Promise 그리고 async/awail (0) | 2024.05.23 |
useState를 사용할 때는 왜 const를 쓰는가? (0) | 2024.05.22 |
var와 let 그리고 호이스팅 (0) | 2024.05.22 |
면접 예상 질문을 통한 React 기본 개념 정리 (0) | 2024.05.17 |