var, let, const의 차이점

ES6의 도입으로 우리는 몇 가지 다른 방법으로 변수를 선언할 수 있는 능력을 갖게 되었습니다. Vanilla JavaScript는 모든 선언에 var를 사용하지만 이제는 let과 const도 있습니다. 그것들의 차이점과 범위를 알고 있습니까?

범위
다양한 선언 변수 유형에 대해 더 깊이 파고들기 전에 범위의 의미를 간단히 살펴보겠습니다. 범위는 변수를 사용할 수 있는 위치를 의미합니다.

var global = "I am in the global scope";

함수 내부에 있지 않은 변수를 전역 범위라고 합니다.

function funkyFunction(){
    var local = "I am in a local scope"
}

함수 내부의 변수에는 지역 범위가 있습니다.

if(true){
    let block ="I am in a block scope"
}

블록 범위도 있으며 이는 const 및 let으로 선언된 변수에만 해당됩니다. 이러한 변수는 중괄호 안에 있어야 합니다.

이제 우리가 어느 범위에 있는지 알았으니 이것이 의미하는 바는 무엇입니까?

var global = "I can be accessed anywhere";

전역 범위의 변수는 모든 함수에서 액세스할 수 있습니다. 전역 범위에 있으면 모든 사람이 변수에 액세스할 수 있음을 의미합니다.

var global = "I can be accessed anywhere";


function funkyFunction(){
    var local = "I can only be access within this function"
    console.log(global) // I can be access anywhere
}

funkyFunction();


console.log(local) // ReferenceError: local is not defined

전역 범위는 함수와 같은 지역 범위 내의 변수에 액세스할 수 없습니다.

function outter(){
    var outterVar = "I can be access by the Inner Function"
    console.log(innerVar); // ReferenceError: innerVar is not defined

    function Inner(){
        var innerVar = "I can NOT be access by the outter Function"
        console.log(outterVar); //I can be access by the Inner Function 

    }

    Inner(); 
}

outter();

내부 함수는 외부 함수 로컬 범위에 액세스할 수 있지만 외부 함수는 내부 함수 내부의 변수에 액세스할 수 없습니다. 이를 어휘 범위라고 합니다.

 if(true){
    let block = "I can only be access within the curly brackets"
    const block2 = "I am also stuck inside the curly brackets"
    var noBlockScope = " I can be access out outside of the curly brackets"
}

console.log(block); // ReferenceError: block is not defined
console.log(block2); // ReferenceError: block2 is not defined
console.log(noBlockScope) //" I can be access outside of the curly brackets"

블록({}) 내에서 선언된 변수는 블록 내에서만 사용할 수 있습니다. 이는 let 및 const에만 적용됩니다. Var에는 블록 범위가 없으며 액세스할 수 있습니다.

범위 지정에 대해 논의했으므로 이제 let, var 및 const의 다른 차이점을 살펴보겠습니다.

var myName = "Juan Restrepo"

var willChangeName = true; 

if(willChangeName === true){
   var myName = "Paco"
}

console.log(myName) // Paco

var의 주요 문제는 다시 선언될 수 있고 값이 변경된다는 것입니다. 알고 있으면 문제가 되지 않을 수 있지만 myName 변수가 이미 정의되어 있다는 사실을 깨닫지 못하면 문제가 될 수 있습니다. 코드의 다른 부분에 myName가 있는 경우 잘못된 출력을 얻을 수 있습니다. 이것이 let와 const가 도입된 주된 이유입니다.

let myName = "Juan Restrepo";
let myName = "Paco" // error: Identifier 'myName' has already been declared

let 변수는 다시 선언할 수 없습니다.

let myName = "Juan Restrepo";
myName = 10
myName = { myRealName: "Juan Martin Restrepo"}
myName = [ "Juan Restrepo"]
console.log(myName) //["Juan Restrepo"]

let 변수에 포함된 값을 변경할 수 있습니다. 이것은 const와 다른 이야기입니다.

const myName = "Juan Restrepo";
myName = "Paco"//Uncaught TypeError: Assignment to constant variable.
myName = 10; //Uncaught TypeError: Assignment to constant variable.

const let과 같은 아이디어를 따릅니다. 다시 선언할 수 없으며 변수 값을 변경할 수 없습니다. myName 값 유지를 변경하면 오류가 발생합니다. const로 선언된 객체(배열도 포함)인 변수는 수정할 수 있습니다.

const listOfNames = ["juan", "paco"]
listOfNames.push("pepe")
console.log(listOfNames) //["juan", "paco", "pepe"]
listOfNames = [];  // Uncaught TypeError: Assignment to constant variable.

배열을 보면 const를 사용하여 Pepe를 기존 배열 선언에 푸시할 수 있지만 배열에 새로운 것을 할당할 수는 없습니다.

const juan = {
    name: "Juan Martin Restrepo", 
    age: 'old enought'
}

juan.age = 30; // updates the object without any errors

juan = {} // Uncaught TypeError: Assignment to constant variable.

동일한 아이디어를 개체에 사용할 수 있습니다. const 로 선언된 기존 객체에 속성, 메서드를 변경하고 추가할 수도 있습니다. 새 값을 할당할 수 없습니다(이 경우 새 개체).

const, let, var의 차이점을 이해하는 데 도움이 되기를 바랍니다. 도전하고 싶은 분들을 위해 작은 도전을 남겨봅니다. 읽은 내용을 확고히 하는 데 도움이 됩니다.

var global = " I am a global variable "; 


function outter(){

    var outterVar = " I live in the local scope of outter function "

    function inner(){

        var innerVar = " I live in the local scope of inner function "

        //console.log(outterVar, innerVar, innerInnerVar); // 1:  will this cause an error 

        innerInner();

        function innerInner(){

            var innerInnerVar  = " I live in the local scope of innerInner function "

            //console.log(outterVar, innerVar, innerInnerVar); // 2:  will this cause an error

                // 3. will the global variable be avaliable here?
                if(global === " I am a global variable "){ 

                    let block1 = " Hi, I am block Scope "
                    const  block2 = " Hi, Im also block Scope "
                    var freedom = " I am not block scope "
                }

                //console.log(block1, block2) //4.  will this error out ?
                // console.log(freedom)//5.  will this error out?  



        }
    }

    inner(); 


}

outter();

챌린지에는 5개의 질문이 있습니다. 코드를 실행하지 않고 답변을 시도하십시오. 일단 확실하거나 알아낼 수 있으면 코드를 실행하십시오. 콘솔에 오류가 발생하거나 문자열이 표시됩니다. 누군가 추가 도움이 필요한 경우 답변을 설명할 수 있습니다. 질문과 함께 댓글을 남겨주시면 답변해 드리겠습니다.