ES6 기초: var에서 let/const로 - 자바스크립트 가이드 1

ES6 기초

ES6는 EcmaScript2015 혹은 ES2015의 줄임말로 자바스크립트의 여섯번째 표준입니다. 자바스크립트를 학습하다 보면 ES6에 대한 별도의 강의와 문서들을 볼 수 있는데 왜 2015년에 나온 표준인 ES6를 별도로 취급하는지 한번쯤 의문을 가질 수도 있습니다.

이에 대한 간단한 대답은 ES6를 기준으로 주요한 변경사항들이 있기 때문입니다. 브라우저의 자바스크립트 엔진도 ES6의 지원여부에 따라 분류되고 최신 웹프레임워크는 ES6문법을 기준으로 개발되고 있습니다.

클라이언트에서 자바스크립트를 가동시키는 것은 웹브라우저 안에 있는 자바스크립트 엔진입니다. 크로미움의 v8 엔진은 대표적인 자바스크립트 엔진으로써 ES6 표준을 지원합니다. 반면 몇년전까지 한국에서 많이 사용되던 인터넷 익스플로러(Internet Explorer)는 ES6를 지원하지 않습니다. 이것은 ES5와 ES6를 가르는 경계로도 볼 수 있습니다.

한가지 더 중요한 것, 그럼 최신 브라우저에서는 ES5를 지원하는가? ES6는 ES5의 상위집합(superset)으로 ES6 코드가 돌아가는 환경이면 ES5도 돌아갑니다. ES6 코드를 ES5 환경에서 실행시키려면? 바벨(Babel) 컴파일러 도구를 사용한 변환이 가능합니다. ES6가 처음 나온 2015년도에는 익스플로러 점유율이 20%였고 대부분의 웹앱은 ES5 표준이었기 때문에 ES6를 적용하기에는 시간이 필요했습니다.

시간이 흘러 대부분의 브라우저에서 ES6를 지원하고 ES6를 업데이트 하지 않은 인터넷 익스플로러는 지원종료로 시장 점유율을 거의 잃게 되고 이제는 ES6를 기준으로 프로그램을 개발할 충분한 여건이 되었습니다. 물론 일부 비즈니스 플랫폼에서는 아직도 인터넷 익스플로러를 사용하여 ES6를 사용할 수 없는 환경도 있습니다만 통계에 의하면 95% 이상의 브라우저 환경에서 ES6가 지원되고 있으므로 과거 보다 ES6의 중요성이 커졌다고 말할 수 있습니다.

ES6 핵심기능(core features)

var -> let 과 const

위에서 복잡한 표준의 역사에 대해 설명했지만 ES6의 핵심기능에 적응하는 것은 그렇게 어렵지 않습니다. C계열이나 자바 등 객체지향 언어의 경험이 있다면 이해에 도움이 됩니다. 또 ES6의 이해에 어려움이 있다면 먼저 자바스크립트 기초에 대해 학습할 것을 권합니다. ES6가 언젠가 전체 표준이 되서 기초부터 배우는 알이 오겠지만, 여기의 설명 중에는 자바스크립트 기초에 대한 이해가 필요할 수 있습니다.

그럼 첫번째로 var 와 let, const에 대해서 알아보겠습니다.

ES5에서는 var를 통해서 변수를 선언합니다. 변수는 영역(scope – 스코프)이 있습니다. var는 함수영역(function-scoped)에서 선언되는데 이 방식에는 모호한 영역 문제가 있습니다. 변수의 지역과 전역 개념이 철저한 C언어의 사용자라면 상당히 피곤하게 느낄 수 있습니다. 지역 개념이 별로 없는 프로그래밍 언어의 사용자들에게도 (다뤄본 언어가 제한적인 경우) 지역의 혼동에 대한 불편함이 있습니다.

간단한 예제를 보겠습니다.

func라는 함수를 선언하고 for 루프를 위해 i를 선언했습니다. i의 영역은 func 이기 때문에 0,1,2를 출력하고 3을 출력합니다. 그리고 나서 func 바깥에 있는 i를 출력하면 22가 출력됩니다. 바깥의 var는 이 스크립트 전체 영역이라고 할 수 있습니다. 즉 이 안에는 i라는 이름의 변수를 2개 선언하여 사용합니다.

// es6 tutorial

var i = 22; // line A

function func() {
    for (var i = 0; i < 3; i++) {
        console.log(i); // line B
    }
    console.log(i); // line B
}
func();
console.log(i); // i from line A

*결과:
0
1
2
3
22

다음은 비교 예제입니다. func 함수 안에 있는 i가 조건문에 의해 실행되지 않으면 바깥에 i가 있어도 undefined(정의안됨)가 됩니다. var i 선언을 if 문 바깥 func 안으로 빼도 같은 결과가 나옵니다. 또한 var 키워드는 같은 변수 이름으로 여러번 사용할 수 있는데요. 이런 방식은 의도치 않은 코드의 원인이 될 수 있습니다.

var i = 22; // line A

function func(toRun) {
    if(toRun){
        var i = 10; // line B
    }
    console.log(i); // i from line B
}
func(true);
func(false);
console.log(i);

*결과:
10
undefined
22

ES6는 함수 스코프의 모호성을 제거하기 위해 블록 스코프(block-scoped) 기능을 가진 let 과 const 키워드를 제공합니다. 블록이란 { } 로 묶을 수 있는 지역이며 const는 한번 정의되면 값을 변경할 수 없는 상수로 let과 같은 블록 스코프입니다. var의 경우 느슨한 규칙이 적용되었는데 let은 중복을 허용하지 않는 등 엄격한 검사를 하여 규칙에 맞지 않으면 바로 예외(exception)을 날려버립니다. let을 사용한 코드는 더 신중하게 작성해야 합니다.

"use strict";

let i = 22; // line A

function func(toRun) {
    let i = 7;
    if(toRun){
        let i = 10; // i from line B
        console.log('if i: ' + i);
    }
    // let의 중복을 허용하지 않는다(es6)
    // let i = 5;
    console.log('func i:' + i); // i from line B
}
func(true);
func(false);
console.log('outer i:' + i);

*결과:
if i: 10
func i:7
func i:7
oute i:22

영역(Scope)

변수를 사용할 수 있는 위치에 대해서 영역(scope)이라고도 하고 지역(local)이라고도 합니다. 흥미롭게도 모든 변수는 그가 머무는 지역과 삶의 주기 – 라이프 사이클(life cycle)이 있습니다. 블록은 함수보다 세밀화한 영역입니다. 함수 스코프와 블록 스코프는 언어의 문법으로 채택하기 나름인데 왜 블록이 도입되었는지를 보면 이유가 있습니다. 소프트웨어 기술이 발달한 수십년 동안 컴퓨터 과학자들이 경험적으로 알아낸 것은 변수는 최대한 그 사용범위를 좁히는 것이 오류의 확률을 크게 줄인다는 사실입니다.

현재 프로그램의 주류는 블록 스코프이며 변수의 변동 가능성을 줄이는 방향으로 가는 것 입니다.

let은 블록 스코프로 함수의 내부라도 블록을 경계로 이동에 제한이 있습니다. 또 let은 var과 달리 중복 선언이 불가능합니다.

또 const를 권장하는 이유는 프로그램 실행동안 한번도 변경되지 않거나 그럴 가능성이 없다면 아예 변하지 못하도록 하면 더욱 안정성이 높아집니다. 그것이 const 상수입니다. (const의 원리는 변수를 상수화 하는 것이다. 다른 종류로는 리터럴 상수가 있다)

use strict 모드

한층 더 엄격한 문법을 적용하려면 자바스크립트의 첫번째 줄에 “use strict”; 모드를 걸어줍니다. 이는 기존의 자바스크립트가 대충 작성해도 돌아간다는 생각을 버리게 합니다. 엄격한 표준에 맞게 작성한 자바스크립트는 프로의 전문성이 필요한 언어입니다.

ES6의 적용 방향

변경할 필요가 없는 모든 변수에 const를 적용한다
다른 변수들은 let을 사용한다
var의 사용은 최대한 제한한다

요약

자바스크립트의 표준인 ES6의 개요를 간략히 보고 ES6의 핵심 기능의 하나인 var와 let, const 에 대해서 알아봤습니다. 왜 let과 const 가 도입되었는지 이해하고 새로운 코드에는 let과 const를 사용하도록 합니다.

홈으로

참고링크

JavaScript ES6 (w3schools.com)

ES6 기초: var에서 let/const로 – 자바스크립트 가이드 1