[자바스크립트]ES6 문법정리(1) - var의 문제점

개요

필자는 SI업체 백엔드 팀에서 근무하는 초급 개발자다.

 

대학에 재학중일때도 백엔드 쪽으로 진로를 희망하고 있어서 자바스크립트를 본격적으로 만질 일은 흔하지 않을 줄 알았다. 

 

해봐야 이미 짜여져 있는 코딩을 해석하거나, 사소한 것을 수정하는 정도.

 

그래서 학교 과제나 프로젝트를 진행하면서 자바스크립트를 만질 때도 '아, 이것만 버티고 졸업하면 자바스크립트 안만져도 되겠지 히힣' 하면서 버텼는데 취업을 하고보니 이게 웬 걸, 더 본격적으로 JS를 만지고 있다.

 

물론 규모가 작은 회사라 그런 점도 있겠지만 백엔드는 프론트엔드 쪽의 로직을 어느정도 파악하고 있어야 코딩을 할  수 있기 때문에 자바스크립트도 매우 중요하다는 것을 알았다.

 

더 나아가 React를 공부할 때도 자바스크립트의 문법이 쓰이기 때문에 미래를 위해서 준비하는 과정이라고도 생각할 수 있겠다.

 

그래서 이번엔 JS의 ES6에 대해 알아보려고 한다.

 

ES6란?
 ES + 6가 합쳐진 것으로 ES는 자바스크립트의 표준, 규격을 나타내는 용어인 ECMAScript의 약자이며 6는 버전을 뜻하는 것으로 2015년에 출시된 것이다. ES6이후 매년 출시되고 있다고 한다.

ES6 이후에도 버전은 매년 업데이트 되고 있지만 이 ES6에서 알아야 할 중요한 기능들도 많고 브라우저 호환성 등 가장 안정적인 버전인, '브라우저 표준' 이기 때문에 본 포스팅을 작성한다.

 

 

var의 문제점

기존 자바스크립트는 변수를 선언하거나 초기화할 때 var를 사용했다.

 

자바와 달리 자바스크립트는 변수의 형태를 자동으로 파악해서 int나 String으로 구분지을 필요가 없다.

 

하지만 var는 선언 시 몇가지 문제점이 존재했다.

 

예제 1-1

var sum = 0;
for (var i = 0; i < 10; i++) {
  sum += i;
}
console.log("sum = ", sum); //sum = 45
console.log("i = ", i); //i = 10​

예제 1-1을 보면 var로 선언한 sum과 i가 있다. sum은 함수레벨 범위에서 선언되어 있고 i는 for루프 안에서 선언한 변수이다. 하지만 for루프 이후에 값을 보면 sum과 i모두 값이 들어가 있다. 블럭 레벨에서 선언한 변수가 그 범위를 벗어난 뒤에도 계속 남아있는 것이다.

 

예제 1-2

var sum = 0;
for (var i = 0; i < 10; i++) {
  sum += i;
}
console.log("sum = ", sum); //sum = 45
console.log("i = ", i); //i = 10
.
.
.
var sum = 100;
console.log("sum = ", sum); //sum = 100

예제 1-2는 예제1-1에서 코드문을 추가한 것이다. sum으로 먼저 선언한 변수 뒤에 같은 변수를 선언해도 코드의 에러가 없다. 간단한 코드일 경우 문제가 되지 않지만 몇백줄 이상의 복잡한 코드문일 경우 변수명을 혼동하여 잘못 썼을 때 기능적인 에러가 발생할 수 있다.

 

예제 1-3

var sum = 0;
sum = 1;

console.log("sum = ", sum); //sum = 1

예제 1-3에서 sum은 재할당이 가능한 변수이다. var는 재할당이 가능한 변수로 밖에 만들 수 없어서 상수로 쓰일 수 없다.

 

 

예제 1-4

console.log("sum = ", sum); //sum = undefined
var sum;

예제 1-4는 sum 변수를 나중에 선언했음에도 값이 undefined라고 찍혔다. 이것은 var가 함수 단위의 스코프를 가지고 있기 때문이다. 코드를 실행시킬 때 var로 선언된 변수는 호이스팅되어 최상단으로 올라가게 된다. 그래서 최우선적으로 var변수들이 선언되었기 때문에 값이 찍힌 것이다.

 

다음 포스팅은 예제 1-4와 관련된 호이스팅, 그리고 var의 문제점을 보완하기 위해 ES6에서 추가된 const, let에 대해 조사해볼 예정이다.