자바스크립트(JavaScript) - 변수, 변수 선언, 호이스팅

자바스크립트 변수

변수는 프로그램에서 중요한 역할을 맡고 있습니다. 변수가 없다면 일일이 값을 직접 하나하나 넣어주고 다시 하나하나 바꾸고 해야 합니다. 

 

변수가 있다면 일일이 직접 넣어주지 않아도 되고 공유를 할 수도 있습니다.

 

변수는 메모리 공간에 이름을 지정한 것입니다.

지정한 이름을 통해 정해진 공간에 값을 저장하고 사용합니다.

 

자바스크립트에서 변수 선언

자바스크립트에서는 var 키워드를 사용해 변수를 선언할 수 있습니다. 

var abc;
var abc = 1;

이렇게 var를 사용해서 변수를 선언하거나 또는 변수 선언과 동시에 값을 저장할 수 있습니다.

값을 지정하지 않으면 변수에는 "undefined" 값이 들어가 있습니다.

 

변수 선언은 한 번에 여러 개도 가능합니다.

var a=1, b=2, c=3;

 

ECMAScript 6(ES6)부터 var 말고도 let과 const로 변수를 선언할 수 있습니다.

let abc = 1;
const abc = "1"

let 선언된 구역에서만 사용할 수 있는 변수 선언입니다. 선언된 블록 범위에서 같은 변수 이름으로 선언하면 에러가 발생합니다. 

const는 한번 값이 저장되면 값을 변경할 수 없는 변수 선언입니다. const는 선언할 때 초기값을 지정해야 합니다. 

var 선언자는 블록 범위에서 사용이 가능한 변수 선언입니다. 함수에서 선언되었다면 함수 전체에서 사용이 가능한 범위를 말합니다.

 

자바스크립트에서는 따로 데이터 타입을 지정하지 않아도 선언된 변수에 모든 값을 넣을 수 있습니다.

문자열이든 숫자이든 객체이든 모든 타입이 저장이 됩니다.

var a = 1;
let b = "1";
const c = 0.1;

만약 변수를 선언하지 않고 사용한다면 에러가 나타나지만 선언하지 않은 변수에 값을 지정하면 자동으로 var선언으로 간주하여 전역 변수로 생성됩니다. 

console.log(a) // -> 에러

a = 1;
console.log(a) // -> 1

 

함수 안쪽이 아닌 코드 최상단 공간에 있는 변수중 var로 선언된 변수는 모두 전역 변수로 생성이 됩니다. 따라서 어디서든 사용이 가능하고 변경이 가능합니다.

var global = "global"; // 전역 변수

function test()
{
    console.log(global); // -> global
    global = "test";
    console.log(global); // -> test
}

test();

var abc = 123; // 전역 변수

변수 끌어올림(호이스팅)

자바스크립트는 변수 선언이 어느 위치에 있든 맨 처음 선언을 미리 해둡니다. 이것을 호이스팅이라고 부릅니다.

그래서 변수를 아직 선언하지 않고 사용하면 에러가 나지 않고 undefined가 출력됩니다. 

 

console.log(abc); // -> "undefined"
var abc = 1;
console.log(abc); // -> 1

 

에러가 나지 않는 건 좋지만 예상치 못한 상황이 벌어질 수 있기 때문에 염려를 해두며 선언을 해야 합니다.

 

var 선언자만 되는 것이 아닌 let, const 선언자도 호이스팅이 됩니다.

 

다만 let, const 선언자는 호이스팅이 되지만 값이 undefined로 초기화되지 않아 미리 변수를 사용하면 에러가 발생합니다.

console.log(letTest); // -> Reference Error
let letTest = 1;

console.log(constTest); // -> Refernece Error
const constTest = 1;

변수 중복 선언과 유효 범위

var 선언자는 같은 이름으로 변수를 선언하면 마지막으로 지정된 값이 저장됩니다.

var test1 = 1;
var test1 = 3;
console.log(test1); // -> 3

let test2 = 1;
let test2 = 1; // -> 에러

const test3 = 1;
const test3 = 1; // -> 에러

let, const 선언자는 같은 범위에서 선언된다면 중복 선언이 불가능합니다.

 

다음은 블록 유효 범위에 대해서 알아보겠습니다. 블록은 { }을 지칭합니다.

 

var로 선언된 변수는 블록 범위를 가지지 않습니다. 따라서 var 변수는 함수 내부가 아닌 이상 어디서든 사용이 가능합니다.

var blockVar1 = 1;
{
    var blockVar1 = 2;
    var blockVar2 = 2;
    console.log(blockVar1); // -> 2
    console.log(blockVar2); // -> 2
}
console.log(blockVar1); // -> 2
console.log(blockVar2); // -> 2

처음 선언된 var 변수는 블록 범위가 없기 때문에 중복 선언이 되어도 같은 공간에 값이 저장됩니다. 따라서 어디서 바뀌든 값은 마지막에 변경된 값입니다. 그러니 var 변수를 선언할 때 주의하며 사용해야 합니다.

 

함수에서 선언된 var 변수는 함수에서만 사용이 가능합니다.

var varTest = 1;
function ab()
{
    var varTest = 2;
    console.log(varTest); // ->2
}
ab();
console.log(varTest); // -> 1

함수밖에 있는 varTest와 함수 안쪽에 있는 varTest는 같은 공간을 가진 변수가 아닌 각각 다른 공간이 있는 변수들입니다. 따라서 함수 안쪽에 있는 변수를 밖에서 호출하면 에러가 발생합니다. 

 

함수에서 전역에 있는 변수와 함수 내부에 있는 지역변수가 이름이 같은 변수가 사용되면 함수에서는 내부에서 선언된 지역변수가 사용됩니다.

 

다음은 let 선언입니다. let 선언은 블록 범위를 가지고 있습니다. 같은 공간에 있어야 같이 사용이 가능합니다.

let blockLet1 = 1;
{
    let blockLet1 = 2;
    let blockLet2 = 2;
    console.log(blockLet1); // -> 2
    console.log(blockLet2); // -> 2
}
console.log(blockLet1); // -> 1
console.log(blockLet2); // -> ReferenceError

첫 번째 let 변수와 블록 안쪽에 있는 let 변수는 다른 공간에 있는 변수들입니다. 따라서 블록 안쪽에 있는 let변수들은 밖에서 사용이 불가능합니다.

const blockConst1 = 1;
{
    const blockConst1 = 2;
    const blockConst2 = 2;
    console.log(blockConst1); // -> 2
    console.log(blockConst2); // -> 2
}
console.log(blockConst1); // -> 1
console.log(blockConst2); // -> ReferenceError

const으로 선언된 변수들도 let 변수와 똑같습니다.

 

해당 글에 잘못된 점이 있다면 알려주시면 감사하겠습니다.

 

 

참고

모던 자바스크립트 입문(이소 히로시 지음, 서재원 옮김)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/var

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let