Scope와 Closure
scope는 function Scope와 block Scope가 있다. 여기서 var, function(){...}는 function Scope이고, let과 const는 block Scope이다
block은 {와 }가 포함되어 있으면 무조건 block scope이다. 그렇기때문에 function Scope는 block Scope에 포함된다.

function Scope

  • function Scope로는 var 가 있다.
  • function을 기준으로 영역을 나눈다는 뜻
var a = 'a';
{
    var b = 'b'
}
console.log(a, b);

에러 없음


var a = 'a';
{
    var b = 'b'
    console.log(a, b);
}

에러 없음

var a = 'a';

function bFunction(){
    var c = 'c';
    console.log(a, b, c);
}

function aFunction(){
    var b = 'b';
    bFunction();
    
}
aFunction();
  • b is not defined -> function Scope 적용됨
  • 변수는 선언된 함수 위치에 따라 인식 범위가 다르다
  • 현재 bFunction()은 글로벌에서 선언이 되었기때문에 bFunction()내에서 b변수가 없는 것을 확인하고 상위 영역(aFunctionX)인 Global(ex.var)과 Script(ex.let, const)영역만 인지한다
  • var a = 'a' //Global
let b = 'b' //Script 
function aFunction(){ //Local
  var c = 'c' 
}

var a = 'a';

function aFunction(){
    var b = 'b';
    function bFunction(){
      var c = 'c';
      console.log(a, b, c);
    }

    bFunction();
    
}
aFunction();
  • 오류 X
  • bFunction() 내에 b변수가 없음 -> bFunction()가 선언된 위치, 즉 자기 함수가 선언된 영역(aFunction())에서 b변수를 찾음
  • 만약 aFunction()에도 없으면 Global(ex.var)과 Script(ex.let, const)을 찾아본다

block Scope

let과 const는 block Scope영역을 취급한다. block Scope = {}를 기준으로 나눈다는 뜻

let a = 'a';
{
    let b = 'b'
}
console.log(a, b);
  • b is not defined
let a = 'a';
{
    let b = 'b'
    console.log(a, b);
}
  • 오류 X
let a = 'a';

function bFunction(){
    let c = 'c';
    console.log(a, b, c);
}

function aFunction(){
    let b = 'b';
    bFunction();
    
}
aFunction();
  • b is not defined
var a = 'a';

function aFunction(){
    var b = 'b';
    function bFunction(){
      var c = 'c';
      console.log(a, b, c);
    }

    bFunction();
    
}
aFunction();
  • 오류 없음

참고 - 중복호출

var a = 'a';
var a = 'b';
  • 가능
let a = 'a';
let a = 'b';
  • 불가능

중복 호출 방지

변수가 선언되었는지 확인하기

if(name === 'undefined'){
  var name = 'chan';
}

Javascript

Frontend

block scope

closure

댓글 쓰기

You may also enjoy

github pages에서 vue router 404 에러

April 03 2023

배경1. vue 프로젝트를 github pages를 통해 myurl.com에 배포를 했다 배경2. vue router를 사용하여 myurl.com/posts 페이지가 있다 배경3. vue router의 history모드는 createWebHistory를 사용한다 myurl.co...