Javascript 변수선언 키워드 "var"를 사용하지 않는 이유

 

 

var?

variable(변수)의 준말.
JavaScript(자바스크립트 이하 JS)에서 변수를 선언할 때 사용하는 keyword이다.

 

 

 

왜 사용하지 않는가?

var은 다음과 같은 3가지 이유 때문에 현재 사용되지 않고있다.

• 1. function-scope(함수범위)라는 다소 난해한 범위를 가지고 있다.
• 2. var로 변수를 선언하면, 변수가 선언된 block 내부에서 제일 위쪽으로 이동한다.
• 3. block-scope(블록범위)라는 표준적인 범위를 가진 변수선언 키워드가 도입되었다.

 

 

 

1. var의 난해한 범위

 

 

  프로그램의 모든 곳에서 사용할 수 있는 변수를 global-variable(전역변수),

특정 함수나 {} 블록 내부에서 사용할 수 있는 변수를 local-variable(지역변수)라고 부른다.

var는 function-scope(함수 범위)라는 특이한 범위를 가지고 있다.
        
var를 사용할 경우, 함수의 실행블록 안에서 선언된 변수는 지역변수가 되고,
그 이외의 부분에서 선언될 경우 전역변수가 된다. 

 

function setP () {
            var p = 7;
            }
// p는 함수의 실행부분을 표현하는 {}block에 들어있다

setP()

console.log(p)

 위의 코드에서 var p 는 함수블럭{} 내부에 선언되어있으므로 지역변수가 된다.
 즉 함수{} 밖에있는 console.log는 p를 호출 할 수 없다.

 

실행결과

 

하지만 if block등과 같이 다른 {} block 내부에서 정의된 var 변수는 전역변수가 된다.

즉, {} block 외부에서도 호출이 가능하다.

 

 if (true) {
            var p = 7;
        }
        
//if block내부에서 선언된 p

 console.log(p)

 

console에 출력된 p

 

 

 

이렇게 var는 함수를 정의하는block 내부에서 사용할때에만 지역변수가되는

다소 난해한 규칙을 가지고있다.

 

 

 

 

2. var 변수는 실행 전에 자신이 속한 코드블록내부 최상단으로 이동한다.

 

일반적으로 컴퓨터는 코드를 위에서 아래로 읽어가며 실행한다.
let 변수선언 키워드를 사용하여 변수를 선언하기 전에 호출해보자.

console.log(x);

let x;

 

 

오류메시지 initialization 이전에 호출할 수 없다.

이제 let을 var로 바꾸어 보자

 

console.log(x);

var x;

let과는 다른 출력결과

 

 

이번엔 그저 undefined라는 문구가 나온다.

 

위의 결과와 같은 결과를 let을 사용하여 얻으려면, 다음과 같이 선언 후 호출을 해야 한다.

 

 

let x;

console.log(x);

var와 같은 출력결과

 

 

 

즉 JS는 var 변수를 자신이 선언된 block의 가장 윗부분으로 보내기 때문에,

우리의 의도와  코드의 실행결과가 다를 확률이 커진다.

 

//실제코드
console.log(x);

var x;




//컴퓨터가 읽는 코드순서
var x;

console.log(x);

 

 

 

      

       

3. block-scope(블록범위)라는 표준적인 범위를 가진 변수선언 키워드가 도입되었다.

 

       

ES6에선 변수가 선언된 block이 곧 그 변수의 범위가 되는 block-scope를 갖는 변수선언 키워드
let과 const가 추가되었다.
        
그래서 더 이상 var을 사용하지 않는다.

 

//전역변수 p와 q

let p = '7';
let q = '5';

function test () {
    let p = "f";
    let q = "t";
    
    //지역변수 p와 q
    console.log(p);
    console.log(q);
    
}

test();

//전역변수 p와 q 출력

console.log(p);
console.log(q);

//전역변수 p와 q 값 번경
p = '0';
q = '1';

console.log(p);
console.log(q);

 

 

 

 

부족한 글 읽어주셔서 감사합니다.

 

오류가 있으면 정정해 주세요.

 

썸네일 출처:

Stop sign icons created by Freepik - Flaticon