소개

어쨌든 JavaScript를 쓰고 처음 버렸기 때문에, 지금은 입니다만 var, let , const의 차이에 대해 조사했습니다. 변수이고 var(iable) 라고 생각하고 있었습니다만, 구분이 있다는 것을 알았습니다.

var, let, const 및 범위

아래 코드로 테스트했습니다.

testVariable

console.log("global start"); // Break1
console.log(global_var);
var global_var = "1";
console.log(global_var);
console.log(global_let);
let global_let = "1";
console.log(global_let);
console.log(global_const);
const global_const = "1";
console.log(global_const);
console.log("global end"); // Break 2

browser.contextMenus.create({
    id: "testVariable",
    title: "test variable",
    contexts: ["all"]
})

browser.contextMenus.onClicked.addListener((info, tab) => {
    if (info.menuItemId === "testVariable") {
        console.log("onClicked start"); // Break 3
        console.log(global_var);
        console.log(global_let);
        console.log(global_const);
        console.log(in_func_var);
        console.log(in_func_let);
        console.log(in_func_const);
        testVariable();
        console.log(global_var);
        console.log(global_let);
        console.log(global_const);
        console.log(in_func_var);
        console.log(in_func_let);
        console.log(in_func_const);
        console.log("onClicked end"); // Break 6
       }
});

function testVariable() {
    console.log("testVariable start"); // Break 4
    console.log(in_func_var);
    var in_func_var = "1";
    console.log(in_func_var);
    console.log(in_func_let);
    let in_func_let = "1";
    console.log(in_func_let);
    console.log(in_func_const);
    const in_func_const = "1";
    console.log(in_func_const);
    console.log("testVariable end"); // Break 5
};

Break 1


global_const : uninitialized
global_let : uninitialized
global_var : undefined <<< 감기

콘솔

global start background.js:31:1
undefined background.js:33:1
1 background.js:35:1
ReferenceError: can't access lexical declaration `global_let' before initialization

uninitilized 상태의 것은 Break 2에 이르기까지 에러가 됩니다. 따라서 오류가 발생하는 console.log는 주석으로 실행됩니다.

Break 2


global_var : 1
global_let : 1
global_const : 1

Break 3

global_var : 1
global_let : 1
global_const : 1
in_func_* 는 var, let , const 함께 볼 수 없다.

in_func

onClicked start background.js:66:3
1 background.js:67:3
1 background.js:68:3
1 background.js:69:3
in_func_var is not defined

Break 4

global_var : 1
global_let : 1
global_const : 1
in_func_var : undefined
in_func_let : uninitialized
in_func_const : uninitialized

testVariable

testVariable start background.js:113:2
undefined background.js:114:2
1 background.js:116:2
can't access lexical declaration `in_func_let' before initialization

Break 5

global_var : 1
global_let : 1
global_const : 1
in_func_var : 1
in_func_let : 1
in_func_const : 1

나중에 여기서 in_func에 대한 액세스 오류가 발생하여 주석 처리했습니다.
Break6


스코프 - 사용하고 있는 함수내의 스코프, 글로벌, let, const이면 for 루프도 스코프
감기 - 선언하기 전에 동일한 범위에서 undefined로 액세스 할 수 있습니까? uninitialized에서 액세스하지 못하고 오류가 발생합니까?

for 루프

함수 내 for 루프의 범위도 확인했습니다.

testVariable

function testVariable() {
    console.log("testVariable start");
    var in_func_var = "1";
    let in_func_let = "1";
    const in_func_const = "1";
    for (let i=1;i<3; i++) {
        console.log("for start");
        var in_for_var = "1";
        let in_for_let = "1";
        const in_for_const = "1";
        console.log("for ===");
        in_for_var = "2";
        in_for_let = "2";
        in_for_const = "2";
        console.log("for end");
    }
    console.log("testVariable end");
};

var 는 for 루프 안에서도 함수와 같은 범위로 보입니다.


let , const 는 for 루프 안에 있으면 다른 범위였습니다.

let과 const의 대입

const 는 위의 코드라면 in_for_const = "2"의 타이밍으로 다음의 에러가 나옵니다.

const

invalid assignment to const `in_for_const'

참고

문법 및 데이터 형식 - JavaScript | MDN
let - JavaScript | MDN
const - JavaScript | MDN