클린업 JavaScript: 점프업! / 6. 클로저(Closur... - 인프런

클린업 JavaScript: 점프업!

6. 클로저(Closure), 클로저 대상

클린업 JavaScript: 점프업! / 6. 클로저(Closure), 클로저 대상 / 2:25

작성

const setPoint=function(){
    let one =100;
    const two = 200;
    var five=500;
    if(one){
        let seven=700;
        var nine = 900;
    };
    return function(){
        console.log(one+two+nine); // one + two + nine;
        debugger // one + two + nine; // one, two, nine variable 없음
        debugger // seven;
    };
};
const getPoint =setPoint();
getPoint();

debugger로 변수를 개발자도구 콘솔에 찍으니깐요
변수를 추적못합니다.

신기해서 질문합니다

웹브라우저에서는 변수를 찾지 못하고

자바스크립트에서는 클로저로 할당된 변수를 찾아서 콘솔에 찍어주는 건가 싶기도하고요

언제 변수를 찾느냐의 차이인가요?

웹브라우저에서 직접 변수를 찾으면 못찾는다고 하네요

이유가 무엇인지 알고 계신가요?

javascript

답변 2

김영보

지식공유자

setPoint 함수의 최상위 레벨에 작성한 변수는 클로저 대상입니다
따라서 아래의 변수는 let, const, var에 관계없이 모두 클로저 대상입니다.
let one =100;
const two = 200;
var five=500;

반면, setPoint 함수의 블록{ }에 작성한 let, const 변수는 클로저 대상이 아닙니다
따라서 let seven=700;는 클로저 대상이 아닙니다.
즉, getPoint() 함수를 호출했을 때 debugger 위치에서 seven: 700이 보이지 않습니다.
한편, var 변수는 블록{ }에 작성하더라도
블록이 스코프가 아니라 setPoint 함수가 스코프이므로 클로저 대상이 됩니다.
var nine = 900;

또한, 클로저 함수에서 변수를 사용하지 않으면, 클로저 대상에서 제외됩니다
var five = 500;이 debugger에서 표시되지 않은 것은
return function{ 여기 }에서 five 변수를 사용하지 않았기 때문입니다.
{ 여기 }에 console.log(five);를 작성하면 five 변수가 클로저 대상이 되어
five: 500이 표시됩니다.
return function(){ }을 실행할 때, 클로저 대상이 결정되며, 대상을 return하는 Function Object 내부에 설정합니다.
따라서 클로저 대상이 이 때 결정됩니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

클로저를 이용한 변수 접근과 관련된 질문을 해주셨네요. 클로저는 함수와 그 함수가 선언될 당시의 렉시컬 환경(Lexical Environment)을 기억하는 기능을 제공합니다. 따라서 선언된 변수를 함수가 종료된 뒤에도 접근할 수 있게 해주는 것이 클로저입니다.

질문하신 코드에서 setPoint 함수는 내부에 one, two, five 등의 변수를 선언하고, 해당 변수를 사용하는 익명 함수를 반환하여 외부에서 getPoint 함수가 이를 호출할 때도 접근할 수 있게 해줍니다.

여기서 중요한 부분은 let이나 const로 선언된 변수는 블록 스코프를 가지기 때문에, if 블록 내부에서 선언된 let seven은 블록 밖에서는 접근할 수 없습니다. 반면, var nine은 함수 스코프를 가지기 때문에 setPoint 내부 어느 곳에서도 접근 가능합니다.

debugger를 통해 개발자 도구에서 코드를 중지시키고 변수값을 확인하려고 할 때, 각각의 변수는 해당 스코프와 관련된 변수를 참조합니다. nine은 함수 스코프에 잡혀 있어서 클로저로 인해 접근이 가능하지만, 블록 스코프에 있는 seven은 블록을 벗어난 시점에서는 접근할 수 없기 때문에 일반적으로 참조되지 않습니다. 이것이 브라우저 개발자 도구에서의 차이입니다.

좀 더 자세한 내용을 원하신다면 클로저와 스코프에 대한 개념들이 설명된 아래 글들을 참조해 보세요:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

클린업 JavaScript: 점프업! / 6. 클로저(Closure), 클로저 대상 / 2:25