변수와 스코프

변수와 스코프

변수는 이름을 통해서 어떤 값에 특별한 의미를 부여하는 추상화의 가장 기본적인 수단

자바스크립트에서 변수를 만드는 방식은 ES2015 기준으로 변화가 있었다.

ES2015 이전에는 var라는 키워드를 사용했지만 몇 가지 문제가 있었다.

ES2015 이후에는 이 문제를 해결하기 위해 let과 const 키워드를 만들었다.

최근에는 var 보다는 활용 목적에 따라 값의 재할당이 필요한 경우 let 키워드를 사용하고

재할당이 필요하지 않은 경우에는 const 키워드를 사용하는 것이 권장되고 있다.

var의 문제점

1. 호이스팅 (Hoisting)

변수가 유효한 시점의 차이. var 키워드는 변수를 만들기 전에 사용이 가능하다.

console.log(title); // undefined
var title;

위와 같이 title을 선언하기 전에 title을 출력했지만 에러가 나지 않고 undefined가 출력되는 것을 볼 수 있다.
아래와 같이 코드에서는 변수 선언이 나중에 되었지만 var title 선언문만 위로 끌어진 결과가 나오는 것을 호이스팅이라 한다.

console.log(title);  // undefined
var title = 'codeit';
console.log(title);  // codeit

이에 비해 let은 호이스팅 현상이 없다. 따라서 아래의 경우 에러가 확인되기 때문에 예상치 못한 오류가 발생할 확률이 적고 발생했더라도 원인을 파악하기 더 간편하다.

console.log(title);  // Error
let title;

2. 중복선언

var 키워드는 중복선언이 가능하다.

아래와 같이 title이라는 변수를 두번 선언해도 아무 문제없이 동작한다. 이러한 방식은 두 선언 사이 많은 코드가 있고 복잡해 졌을 때 중복선언을 하면 두번째 선언 이후로는 처음 선언했던 값이 아무런 의미가 없어지기 때문에 문제가 발생할 수 있다.

var title = 'Codeit';
console.log(title);    // Codeit
var title = 'JavaScript';
console.log(title);    // JavaScript

반면 let이나 const는 중복선언을 시도하면 에러가 나기 때문에 문제가 발생할 여지가 없고 에러 메시지를 통해 쉽게 수정 가능하다.

let title = 'Codeit';
console.log(title);    // Error
let title = 'JavaScript';
console.log(title);    // Error

3. 스코프 (변수의 유효 범위)

var 키워드는 변수의 유효 범위가 함수 단위로만 구분되기 때문에 조건문이나 반복문에서 새로운 변수를 만들어도 모두 전역 변수로 사용이 된다. 따라서, 어떤 조건문이나 반복문에서 고유하게 사용되는 지역변수를 만들 수가 없었다.

아래와 같이 함수안에는 지역 변수로 활용이 가능하다.

var x = 3;       // Global Variable 전역 변수

function myFunc() {
    var y = 4;   // Local Variable 지역 변수
    console.log(`x in myFunc: ${x}`);
    console.log(`y in myFunc: ${y}`);
}

myFunc();            // x in myFunc: 3
                     // y in myFunc: 4
console.log(x);      // 3
console.log(y);      // Error

하지만 다음과 같이 var 키워드는 함수가 아닌 코드블록 안에서 지역변수를 활용하기 어려웠다. x, y, z가 모두 전역변수.

let 키워드는 다음과 같이 y가 코드블록 안에서 지역변수로 활용된 것을 확인할 수 있다.

var x; // 함수 스코프 (function scope)
let y; // 블록 스코프 (block scope)
const z; // 블록 스코프 (block scope)