[기초] javascript Scope

자바스크립트 스코프

변수선언 규칙

---

1. const를 기본으로 사용한다.
2. 변경이 될 수 있는 변수는 let을 사용한다.
3. var는 사용하지 않는다.

let

---

block 유효 범위를 갖는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화 할 수도 있다.

let 은 var 키워드와는 다르게 블록 범위를 무시하고 전역 변수나 함수 지역 변수로 선언될수 없다.

//var
function varTest(){
    var x = 1;
    if(true) {
        var x = 2; //상위 블록과 같은 변수!
        console.log(x); //2
    }
    console.log(x); //2
}

//let

function letTest(){
    let x = 1;
    if(true) {
        let x = 2; //상위 블록과 다른 변수
        console.log(x); //2
    }
    console.log(x); //1
}

또한 함수의 최상위에서는 let과 var는 서로 다르게 행동한다

var x = 'global';
let y = 'global';

console.log(this.x); //"global" 전역 객체의 속성 x를 생성
console.log(this.y); //undefined 전역 객체의 속성 y를 생성하지 않음

프로그램이나 함수의 최상위에서는 let과 var은 서로 다르게 행동한다. let은 전역 객체의 속성 값을 생성하지 않는다.

if (x) {
  let foo;
  let foo; // SyntaxError thrown.
}

같은 변수를 같은 함수나 블록 범위 내에서 재선언하면 syntaxError 가 발생

var의 실행 메커니즘과 let,const의 실행 메커니즘의 차이점

console.log(a); //undefined; var 키워드의 호이스팅 현상, use strict로 막을수는 있음
console.log(b); //Uncaught ReferenceError: b is not defined
console.log(c); //Uncaught ReferenceError: b is not defined
var a = 10;
let b = 11;
const c = 12;

정적 유효 범위와 결합된 일시적인 사각 지역

function test(){
   var foo = 33;
   if (true) {
            //현재 if블록안의 foo는 선언의 초기화가 완료되지않아 임시적 사각지대에 놓이게됨.
      let foo = (foo + 55); // ReferenceError
   }
}
test();

출처:https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let

Const

상수는 값에 읽기 전용 참조를 생성합니다. 담긴 값이 불변임을 뜻하는 게 아닙니다, 단지 그 변수 식별자는 재할당될 수 없습니다.

console.log(test); //"ReferenceError: test is not defined"
const test = "상수";

let에 적용한 "일시적 사각 지대"에 관한 모든 고려는, const에도 적용합니다.

const arr = [1,2,3,4];
arr.push(5);
console.log(arr); //[1,2,3,4,5]

Object가 변수에 할당될 때는 Object 자체가 할당되는 게 아니라 Object의 주소가 할당된다.

{} === {} //false

const 변수에 Object를 할당하면 당연히 Object를 가리키는 주소 값이 할당된다. 그리고 이 주소 값은 불변이고, 상수다. 그러나 그 Object에 Key-Value 쌍을 추가하거나 변경하는 행위는 가능하다.

const test = {age:31, name:"kim"};

test.gender = "man";

console.log(test); //{age:31, name:"kim",gender:"man"};

Object 내의 값을 뭘로 바꾸든 간에 그건 변수에 할당된 값을 바꾸는 것이 아니다.

MDN 공식문서에도 같은방식으로 설명을 하고있다.

const number = 42;

try {
  number = 99; //재할당을 해보았다.catch에서 에러를 캐치한다.
} catch(err) {
  console.log(err);
  // expected output: TypeError: invalid assignment to const `number'
  // Note - error messages will vary depending on browser
}

console.log(number);
// const의 값은 변하지않았다. expected output: 42