[js 기본] 자바스크립 변수, 함수 레벨 스코프, 블록 레벨 스코프

js의 변수는 3가지이다 var, let, const가 있습니다.

세 변수의 특징들을 열거해보져.

var

• 변수 재선언이 가능하다.
• 함수 레벨 스코프이다.
• 할당한 값을 변경할 수 있다.

let

• 변수 재선언이 불가능하다.
• 블록 레벨 스코프이다.
• 할당한 값을 변경할 수 있다.

const

• 변수 재선언이 불가능하다.
• 블록 레벨 스코프이다.
• 할당한 값을 변경할 수 없다.

변수 재선언과 할당한 값은 타 언어에서도 쉽게 볼 수 있는 요소입니다.

 

1. 함수 레벨 스코프

function 변수실험(){
  if(true){
    var var_ = "I am var"
  }

  function var실험(){
    console.log(var_)
  }

  var실험()
}

변수실험()

//output : I am var

함수 레벨 스코프는 생명주기가 함수 내로 한정이 됩니다. 블록과 상관없이 함수 내에서 선언하였다면 해당 함수 내 어디서든 참조할 수 있지요. 그럼 만약 위의 예시가 let이라면?

 

2. 블록 레벨 스코프

function 변수실험(){
  if(true){
    let let_ = "I am let"
  }

  function let실험(){
    console.log(let_)
  }

  let실험()
}

변수실험()

// output : let_ is not defined

블록 레벨 스코프에서는 생명주기가 변수 내로 한정 되기 때문에 정의되지 않은 변수로 취급됩니다. 블록은 중괄호인 {} 입니다.

 

추가적으로, if문이 아닌 순수 블록으로만 테스트 해보도록 하죠. 이번에는 같은 블록 레벨 스코프인 const입니다.

3. 함수 레벨 스코프 & 블록 레벨 스코프

function 변수실험2(){
  {
    var var_ = "I am var"
    const const_ = "I am const"
  }
  {
    console.log(var_)
    console.log(const_)
  }
}

변수실험2()

// output : 
// I am var
// const_ is not define

추가적으로 ES5까지는 var만을 지원했습니다. ES6 부터 let과 const가 생겼습니다.

만약 현재 개발을 한다면 이 전의 브라우저 및 환경을 고려하여 Babel을 사용하여 호환성을 맞추는 것도 좋은 방법입니다. 😆

 

4. Lexical Scope, Static Scope

var x = 0;

function foo(){
  var x = 20;
  function bar(){
    console.log(x)
  }
  bar();
}

function baz(){
  var x = 100;
  noz();
}

function noz(){
  console.log(x)
}

foo();
baz();

/*
output :
20
0
*/

자바스크립트는 기본적으로 정적 스코프예요. 정적스코프란, 함수를 어디에서 호출하는 것은 중요하지 않고, '함수'가 어디에서 선언되었는지를 봐요.