javascript var와 let의 차이,const란?

var,let의 차이

window객체에서 var만 사용 가능하다.

ex) this의 사용 ,this는 window오브젝트를 참조한다.

let은 scope개념이다.

특히 블록스코프에서 돋보인다.

<script type="text/javascript">
    var s = 1;
    var s = 2;
    //중복 출력해도 에러가 나지 않는다.
    let z = 1;
    //중복 출력시 에러가 난다.
    //let z = 2;
    if(s == 2){
        s = 3;
    }
    console.log(s);
    function get(){
        var s = 4;
        console.log("test : "+s);
        console.log("test : "+this.s);
        //let변수는 this사용시에 에러가 난다.
        //console.log("test : "+this.z);
    }
    get();
    //4가 출력된다.
    console.log(s);

    if(z == 1){
        //{} scope 안에서 따로 생성되는 개념
        let z = 3;
    }
    //1이 출력된다.
    console.log(z);

</script>

var와 let의 호이스팅 차이

<script type="text/javascript">
//변수 호이스팅
console.log(a);
var a = "test";

//console.log(b);
//let b = "test";
</script>

출력결과는 undefined로 나온다.

let는 에러로 나온다.

아래의 코드가 위에있는 코드의 호이스팅 개념이다.

<script type="text/javascript">
//변수 호이스팅
var a ;
console.log(a);
a = "test";

</script>

var와 let의 for문 비교

var를 사용하면 k의 출력결과는 3으로만 나온다.

let을 사용하면 클릭한 k의 숫자가 나온다.

{} 스코프개념

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var nodes = document.querySelector("ul");

    //var를 사용할 경우 k는 3이 출력된다.
    //var k 변수에 마지막에 3이 할당되기 때문이다.
    for(var k = 0; k < nodes.children.length; k++){
        var el  = nodes.children[k];
        el.onclick = function(event){
            alert("test");
            event.target.style.backgroundColor = "yellow";
            console.log(k);
        }
    }

    //let을 사용할 경우 k는 각 숫자가 출력된다.
    //scope 별로 값을 가지기 때문이다.
    for(let k = 0; k < nodes.children.length; k++){
        var el  = nodes.children[k];
        el.onclick = function(event){
            alert("test");
            event.target.style.backgroundColor = "yellow";
            console.log(k);
        }
    }


</script>

const란?

const변수에 할당된 값은 상수가 된다.

즉, 변경 불가능하다.

단 Object 형태로 선언 했을때는

{} Object는 할당할 수 없지만 obj의 프로퍼티에는 값을 할당할 수 있다.

<script type="text/javascript">
    const SPORTS = "축구";
    console.log(SPORTS);
    try{
        SPORTS = "농구";
    }catch (e){
        console.log("변경불가");
    }

    const obj = { test : "value" };
    try{
        obj = {};
    }catch (e){
        console.log("변경불가");
    }

    obj.test = "변경됨";
    console.log(obj.test);
</script>

출력결과:

축구

변경불가

변경불가

변경됨