[javascript] 자바스크립트의 특징

블로그를 옮겼습니다.
이곳을 클릭하거나 아래 링크를 참고해주세요!
( mingoogle.tistory.com/ ) 

---

 

자바스크립트에 대해서 하나부터 열까지 알려주기위한 포스팅은 아닙니다.

다만, 자바스크립트를 이용하면서 좀 더 알고 쓰면 유용하다는 취지로 작성하게 되었습니다. 

 

자바스크립트 범위

 - 스코프(scope)는 자바스크립트 변수에 대한 접근 권한을 정의한 것으로 변수는 크게 '전역변수' 와 ' 지역변수' 가 있다.\

 - 전역변수는 프로그램 (파일 내) 어디에서나 해당 변수에 접근할 수 있다.

 - 자바스크립트는 연산자(var,let,const .. ) 없이 변수를 선언 할 수 있다. 
 - 변수는 함수 내에 어떤 곳에서 선언하든간에 함수의 맨 앞으로 이동된다. ( variable hoisting)

 

mingoogle = '민구글입니다.'; // var, let, const를 선언하지 않아도 정상적으로 실행이된다.
console.log(mingoogle);

var 변수 : 함수 범위 

 - 변수를 사용하기위한 방법으로는 var가 있다.
 - var 범위는 블록{}이 아닌 함수 function(){}의 범위이다.

 

function varFunc(){
    var changeFlag = true;
    if(changeFlag){
        var fruit = 'banana';
        console.log("[1] 과일의 이름은? : "+fruit); // 과일의 이름은? : banana
    }
    console.log("[3] 과일의 이름은? : "+fruit);  // 과일의 이름은? : banana

    // if문 안에서 fruit를 선언했지만 정상적으로 banana가 출력되는이유는 
    // var가 블록{} 범위가 아닌 함수(varFunc)범위이기 때문이다.
    // 따라서 varFunc함수 안에 var fruit가 선언이 되었다면, 어디서든 호출이 가능하다.
}

varFunc();

let 변수 : 블록 범위

 - 변수를 사용하기위한 방법으로 let이 있다.
 - var와 다르게 let은 블록범위이다. 

 

위의 코드와 동일하게 작성하되 var를 let으로 선언해보겠습니다. 

function varFunc(){
    var changeFlag = true;
    if(changeFlag){
        let fruit = 'banana';
        console.log("[1] 과일의 이름은? : "+fruit); // 정상출력 
    }
    console.log("[3] 과일의 이름은? : "+fruit); // fruit is not defined 발생!
    // let은 함수단위가 아닌 블록단위이다. 
    // 따라서 if문 안에서는 값이 유효하지만 if문 외부에서 선언 할 경우 에러가난다.
}

varFunc();

 

이처럼 자바스크립트에서 선언하는 변수인 var와 let은 함수범위/블록범위에 대한 차이가 있으며

실제로 코드 작성 시 실수하는 경우가 발생합니다. 

다음과 같은 예시를 통하여 var와 let을 정리해보시길 바랍니다. 

 

Q.1) for문을 통하여 각각 let과 var를 선언하여 순차적으로 i값이 출력되도록 만들기 

 

function startVarFunc(){

    // 3초뒤에 실행
    for(let i=0; i<3; i++){
        // 일정 시간이 지난 후 실행되는 함수
        setTimeout(function (){
            console.log(i); // 3만 실행된다.
        },3000);
    }
}


function startLetFunc(){

    // 1초뒤에 실행
    for(var i=0; i<3; i++){
        // 일정 시간이 지난 후 실행되는 함수
        setTimeout(function (){
            console.log(i); // 0,1,2 순차적으로 실행된다. 
        },1000);
    }
}

startLetFunc();
startVarFunc();

 

Q.2) var 선언 시 for문과 forEach를 사용해보기 

 

function startVarFunc2(){ //
    var i = [0,1,2];

    i.forEach(function (i){
        setTimeout(function (){
            console.log('startVarFunc2 forEach : '+i); // 0,1,2 순차적으로 실행된다.
        },1000);
    })

    for(var j=0; j<i.length;j++){
        setTimeout(function (){
            console.log('startVarFunc2 for문 : '+ j); // 3만 출력된다.
        },1000);
    }
}

startVarFunc2();

 

이처럼 let과 var를 아무생각없이 사용하다보면 예기치 못한 문제들이 발생합니다. 
콜백함수(setTimeout)와 변수의 블록범위와 함수범위로 인하여 결과값이 달라지기 때문입니다. 

 

최근 프로젝트에서는 주로 let과 const만 가지고 코딩하는 경우가 많지만, 이번기회에 var와 let에 차이를 알고 가셨으면 좋겠습니다.

감사합니다.