[Javascript] ① 자바스크립트 변수 선언

 

▶자바스크립트 소개

자바스크립트는 1995년 넷스케이프 커뮤니케이션즈의 개발자인 브렌던 아이크(Brendan Eich)가 개발한 프로그래밍 언어입니다.

최초에는 모카(Mocha)라는 이름이었다가, 잠시 라이브 스크립트라는 이름도 가졌습니다.

이후 자바의인기에 편승하려는 의도로 자바스크립트라는 이름으로 변경해 현재까지 사용하고 있습니다.

1996년 넷스케이프는 자바스크립트의 구격을 ECMA International에 제출했습니다.

ECMA International은 ECMA-262라는 명세를 만들었고, 이것이 표준화된 자바스크립의 출발점입니다.

현재 ECMA-262의 명세 관리는 ECMASript international의 TC39에서 담당하고 있습니다.

 

자바스크립트는 ECMAScript의 명세 구현을 목표로 개발되며, ECMAScript의 명세는 ES1을 시작으로 현재는 ES2021까지 나온 상태입니다.

 

▶변수 선언

여느 프로그래밍 언어와 마찬가지로 자바스크립트도 값을 저장하고 접근하기 위해 변수를 선언해 사용합니다.

다만, 정적 타입 언어와는 다르게 자바스크립트는 느슨한 타입(loose typing)을 가진 언어이기 때문에 데이터 타입을 따로 명시하지 않고 변수를 선언할 수 있습니다.

 

[NOTE]

느슨한 타입이라고 타입이 존재하지 않는 것은 아닙니다.

변수를 선언할 때 타입을 명시하지 않는 것일 뿐, 내부적으로는 데이터의 종류에 따른 변수의 타입을 가집니다.

 

자바스크립트에서는 var, let, const 세 가지 키워드를 사용해 변수를 선언하며, 이 변수에 값을 할당합니다.

이어서 살펴보겠지만, 모든 키워드에 대해 값을 할당할 수 있는 것은 아닙니다.

var a;
let b;
const c;
// 선언된 변수에 값을 할당할 수 있습니다.
a = 1;

위 코드처럼 변수를 선언하고 초기화하지 않으면 undefined 값이 자동으로 할당됩니다.

또한 하나의 선언문에서 여러 개의 변수를 선언하거나, 선언과 초기화를 동시에 하기도 합니다.

var a, b, c;
let num1 = 1, num2 = 2, num3= 3;

 

그럼 var, let, cost 간에 어떠한 차이가 있는지 알아보겠습니다.

 

[NOTE]

앞으로 스코프란 단어가 종종 나옵니다.

이해를 돕도록 미리 간단하게 설명하자면 스코프는 어떤 변수들에 접근할 수 있는지 정의한 범위입니다.

 

▷var

var 키워드(이하 키워드 생략)를 사용해 변수를 선언하는 것은 ES2015(ES6)에서 let과 const가 등장하기 전까지 유일한 방법이었습니다.

var로 선언된 변수는 기존에 선언된 변수의 값을 덮어쓰며, 함수 스코프를 기준으로 동작합니다.

var a = 1;

if (isSomthing()) {
	var a = 2;
}

console.log(a); // 2

a라는 변수를 선언해 1이라는 값을 할당했습니다.

그리고 다음 조건문 내에서 변수 a를 다시 선언했습니다.

이 코드는 어떻게 동작할까요?

중복된 변수명으로 선언했으니 에러가 발생하지 않을까요?

하지만 예상과는 다르게 기존 a 변수의 값을 덮어쓰며, 어떠한 에러도 발생하지 않습니다.

var로 변수를 선언할 경우 스코프 내에 이미 동일한 식별자를 가진 변수가 존재한다면 해당 변수에 값을 재할당합니다.

특히 위 코드처럼 특정한 조건에 따라 기존에 선언된 변수의 값을 덮어쓴다면 다른 코드에 영향을 주거나 버그가 발샐할 때 원인을 찾기 어렵습니다.

 

블록 또는 함수에서 선언하지 않은 자바스크립트의 변수는 모두 전역 스코프를 기준으로 선언되며 이를 전역 ㅂㄴ수라고 부릅니다.

전역 스코프가 아닌 특정 함수 내에서 var로 선언한 변수는 함수 스코프를 가집니다.

변수가 함수 스코프를 가진다는 것은 변수를 선언한 함수 몸체 안에서만 해당 변수에 접근할 수 있다는 의미입니다.

function foo() {
	var a = 1;
   	console.log(a); // 1
}
console.log(a) // Uncaught ReferenceError: a is not defined

foo() 함수 안에서 변수 a를 선언했습니다.

이때 변수 a는 foo() 함수에 대한 스코프를 가진다고 하며, 이는 foo() 함수 내에서만 변수 a에 접근할 수 있다는 의미입니다.

foo() 함수의 외부 스코프인 전역 스코프에서는 변수 a에 접근할 수 없어 ReferenceError가 발생합니다.

하지만 함수 스코프는 블록을 무시해 종종 문제가 되기도 합니다.

function foo() {
	for (var i = 0; i < 10; i += 1) {
    	// ...
    }
    console.log(i); // 10
}
foo();

for 반복문의 초깃값으로 변수 i를 선언했습니다.

반복문이 종료되면 변수 i에 접근할 수 없는 것 같지만 그렇지 않습니다.

변수 i는 블록이 아닌 함수 스코프를 가지기 때문에 foo() 함수의 실행이 종료되기 전까지 접근할 수 있습니다.

대부분 이러한 접근은 불필요하며 혼란만 초래합니다.

만약 전역 스코프 또는 foo() 함수 내에 이미 i라는 변수가 선언되었다면 값이 덮어 씌워져 예상치 못한 문제가 발생하였을 것입니다.

 

위에서 언급한 문제점에서 알 수 있듯이 var를 사용하면 개발자의 실수로 예측하기 어려운 문제가 발생할 수 있습니다.

이런 문제점을 해결하기 위해 ES2015에서 let과 const가 등장합니다.

 

▷let과 const

let과 const는 ES2015에서 등장한 변수 선언 키워드입니다.

let과 const는 var와 달리 재선언을 허용하지 않으며, 함수 스코프가 아닌 블록 스코프를 가집니다.

let a = 1;
let a = 2; // Uncaught SyntaxError: Indentifier 'a' bas already been decleared

const b = 2;
const b = 2; // Uncaught SyntaxError: Indentifier 'b' bas already been decleared

let이나 const로 선언한 변수는 재선언을 시도한다면 SyntaxError가 발생합니다.

그렇기 때문에 var와 달리 let과 const는 예상치 못하게 기존 변수의 값이 바뀌는 위험 없이 안정적으로 변수를 사용할 수 있습니다.

 

앞서 let과 const가 블록 스코프를 가진다고 언급했습니다.

블록 스코프를 가진다는 것은 변수를 둘러싼 블록({}) 안에서만 해당 변수에 접근할 수 있다는 의미입니다.

{
	let a = 1;
}
console.log(a); // Uncaught ReferenceError: a is not defined

let는 블록 스코프를 가지기 때문에 블록을 벗어난 외부 스코프에서 접근하려고 하면 위 코드처럼 ReferenceError가 발생합니다.

이러한 특징은 for 반복문에서 유용하게 사용할 수 있습니다.

function foo() {
	for (i = 0; i < 10; i += 1) {
    	// ...
        	console.log(i);
    }
    console.log(i); // Uncaught ReferenceError: i is not defind
}
foo();

앞서 var를 설명하며 봤던 코드에서 var 키워드만 let으로 변경한 것입니다.

하지만 결과는 완전히 다릅니다.

let은 재선언을 허용하지 않으며,  for 반복문의 블록 스코프에 묶여 외부의 변수 값을 덮어쓰거나 불필요한 참조가 되는 문제를 막습니다.

또한 반복문이 수행될 때마다 지역 변수로서 새로 선언되어 반복문 내에서 안전하게 값을 사용할 수 있습니다.

 

지금까지 let, const를 설명하면서 var와의 차이에 대해 알아봤습니다.

그렇다면 let과 const의 차이는 무엇일까요?

let a = 1;
a = 2;

console.log(a) // 2

const b = 1;
b = 2; // Uncaught TypeError: Assignment to constant variable

const는 let과 달리 값의 변경을 허용하지 않습니다.

값을 변경하려고 하면 TypeError가 발생합니다.

이러한 특징 때문에 const는 상수처럼 변하지 않는 값을 선언할 때 사용합니다.

 

var, let, const를 사용해 변수를 선언하는 방법과 각각의 특징 그리고 차이점에 대해 알아봤습니다.

현재 자바스크립트 진영에서도 앞서 언급한 var의 문제점 때문에 var보다는 let과 const를 권장합니다.

부주의로 의도치 않은 버그를 발생시키는 var보다는 let과 const를 사용하는 것이 애플리케이션의 안정성 측면에서도 도움이 됩니다.

 

---

여기까지 자바스크립트 변수 선언에 대해서 알아보았습니다 :)

var, let, const를 잘 사용할 줄 알아야겠습니다.