[자바스크립트] var, let, const 변수

먼저 자바스크립트에서는 변수를 전역변수와 지역변수로 구분할 수 있다

📍전역 변수

자바스크립트에서 전역 변수(Global Variable)는 프로그램 전체에서 접근 가능한 변수이다.

let favorite = "수학";

function show(){
    favorite = "음악";
    console.log(favorite);
}

show();

위 코드를 보면 함수 밖에서 변수 favorite에 수학이라는 값을 할당했다.
그리고 다시 show 함수 안에서 "음악"으로 재할당 후 함수를 호출하면
결과 값은 '음악'으로 출력된다

이와 같이 전역 변수는 어디에서나 사용 가능한 변수를 뜻한다

 

📍 지역변수

지역 변수는 블록 문 내에 선언된 변수로 선언된 블록 문 내에서만 사용 가능하다.
여기서 블록 문이란 중괄호{}로 감싼 코드를 뜻한다.

function test(){ // 블록문 (block statement) 
    let x = 100; // 지역 변수(Local Variable) 
    console.log(x);
} 

test(); // 100
console.log(x); // Uncaught ReferenceError: x is not defined

test 함수 내에서 선언된 변수 x는 함수 밖에서 호출 시 Reference Error가 발생한다

 

📍var, let, const

자바스크립트에서 변수를 선언하는 키워드로 var와 let 그리고 const가 있다
먼저 비슷한 듯 다른 var와 let 키워드의 큰 차이점은 imutable 즉, 불변성이다.

[ var 키워드 ]

var name = "예리";
console.log(name); // 예리
var name = "Yelee";
console.log(name); // Yelee

위 코드를 실행하면 각각 예리, Yelee 모두 출력되는 것을 확인할 수 있다.
같은 이름의 변수를 한번 더 선언했음에도 불구하고 에러가 나지 않는다. 
간단한 코드에서는 큰 문제 없이 편리하게 사용될 수 있으나 코드량이 많아진다면 혼돈이 발생할 수 있다
이를 보완하기 위해 나타난 것이 let 키워드이다

[ let 키워드 ]

let name = "예리";
console.log(name);
let name = "Yelee";
console.log(name);

실행 결과 Uncaught SyntaxError: Identifier 'name' has already been declared이라 뜬다.
즉, let 키워드를 사용 시 변수가 재 선언되지 않음을 확인할 수 있다.
위와 같이 let 키워드는 변수가 재 선언되지 않지만 재 할당은 가능하다

let name = "예리";
console.log(name); // 예리
name = "Yelee";
console.log(name); // Yelee

먼저 변수 name에 예리라는 값을 할당한 후 호출하면 결괏값이 잘 출력된다
그리고 다시  변수 name에 Yelee라는 값을 할당하면 이 또한 결괏값이 출력되는 것을 확인할 수 있다

[ const 키워드 ]
const는 위의 두 키워드와 달리 변수가 재 선언되지도 않고 값이 재 할당 되지도 않는 키워드이다.

const lastName = "박";
lastName = "이";
console.log(lastName);

 

위 코드를 실행하면 Uncaught TypeError: Assignment to constant variable.이라 뜨는 것을 확인할 수 있다.
한번 값을 할당한 후 재 할당시 타입에러가 발생한다.