var, let, const

선언, 할당, 범위

• 변수 선언시 크게 위 규칙을 가지고 선언된다.

선언

변수를 사용하겠다고 선언함

var name;
let age;
const sex;

유일하게 재선언이 가능한 var

• 재선언?
  말그대로 변수를 선언하고 또 재선언하는거

<script>
  var name; // 선언하고
  
  name = "NOHSANGWOO"; // 할당
  console.log(name); // 사용하고

  var name; // 재선언
  
  // 나머지 let, const는 재선언이 불가능
</script>

할당

변수에 값을 할당

var name = "NOHSANGWOO";
let age = 31;
const sex = "male";

재할당이 가능한 var, let

• 재할당?
  선언된 변수에 값을 다시 넣어줌

<script>
  var name = "NOHSANGWOO";
  let age = 31;
  const sex = "male";
  
  name = "KIMJONGRAN";
  age = 59;
  
  // const sex = "female"; // const는 값의 재할당이 불가능하다.
</script>

정리
var 재선언 가능, 재할당 가능
let 재선언 불가능, 재할당 가능
const 재선언 불가능, 재할당 불가능

범위(scope, 유효범위)

• 함수레벨 스코프(function-level-scope)

<script>
  function checkFunction(){
      if(1){
          var name = "NOHSANGWOO";
          console.log(name);  // NOHSANGWOO
      }
      console.log(name);  // NOHSANGWOO (이게 되네?)
      return 0;
  }

  checkFunction();
</script>

• 블록레벨 스코프(block-level-scope)

<script>
  function checkFunction(){
      if(1){
          let name = "NOHSANGWOO";
          console.log(name);  // NOHSANGWOO
      }
      console.log(name);  // Uncaught ReferenceError: age is not defined
      return 0;
  }

  checkFunction();
</script>

var는 함수레벨 스코프, let과 const는 블록레벨 스코프
즉 함수레벨 스코프는 함수안에서 선언된거라면 같은 함수 내부에선 어디서든 살아있고
블록레벨 스코프는 해당 블록({})에서만 살아있다.

• 전역 스코프(global scope)

<script>
  var global = 'global';

  function foo() {
    var local = 'local';
    console.log(global);  // global
    console.log(local);   // local
  }
  foo();

  console.log(global);  // global
  console.log(local); // Uncaught ReferenceError: local is not defined
</script>

말그대로 최상단, 즉 window에 바로 선언된 변수는
window하위 함수 또는 블록 어디서든 사용 가능하다.

• 비 블록 레벨 스코프(Non block-level-scope)

<script>
  if (true) {
    var name = "NOHSANGWOO";
  }
  console.log(name);  // NOHSANGWOO
</script>

var는 function level scope다
즉 블록레벨에서 선언하면 블록을 제거한뒤 선언한것과 같은 의미
여기선 블록을 제거하면 전역(global-scope) 변수가 된다

hoisting?

• 변수나 함수의 선언부분을 코드의 최상단으로 끌고와 먼저 선언한다.
  (별거아님)

<script>
 function someFunc(){
  console.log('hello');
  var name = 'NOHSANGWOOO';
  
}
</script>

이 코드를 자바스크립트가 해석하면

<script>
 function someFunc(){
  var name;
  console.log('hello');
  name = 'NOHSANGWOOO';
}
</script>

일케됨

!! but선언만 먼저하는거지 할당도 같이 하는건 아님

<script>
 function someFunc(){
  console.log(name); // undefined
  var name = 'NOHSANGWOOO';
}
</script>