[JS] 모던 자바 스크립트 ES6+ (변수 선언)

모던 자바 스크립트란?

ES6(ECMAScript 2015) 이후에 나온 자바 스크립트 기술을 활용하여 개발하는 방식을 말합니다. 2015년을 기점으로 여러 변화가 있어 개발자들 사이에서 ES6+로 자주 표현됩니다. 그러나 정식 명칭은 연호를 사용해서 ECMA2015,2016,...으로 사용해요. 실무에서는 대부분 이를 사용하기 때문에 숙지하고 있는 게 좋겠죠?

 

변수 선언(Variable Declaration)

var - ES6 이전에 사용하던 변수 선언 방식으로, 함수 스코프, 호이스팅 등의 특징을 가집니다. var는 중복 선언이 가능하고 함수 스코프의 성질을 가지고 있어 여러 문제를 발생시켜요. 대표적으로 if와 for 문에서 에러가 발생하기 쉬워 최근에는 사용되지 않고 있는 추세예요.

함수 스코프 (function-scope)- 함수가 선언되면 하나의 스코프(접근 범위)가 발생하는데 이걸 함수스코프라고 합니다. (함수스코프 코드)

호이스팅(hoisting) - 코드가 실행되기 전 함수/변수 선언이 스코프의 최상단으로 이동하는 것

console.log(a,b); // undefined, undefined

var a = 'Hello World';

console.log(a); // Hello World

var a = '중복선언';

console.log(a); // 중복선언

var b = '호이스팅';

console.log(b); // 호이스팅

위의 예시에서 보았듯이 첫 줄에서 a, b 변수를 호출했지만 호이스팅으로 인해 스코프 내부의 최상단으로 이동해 Error가 아닌 undefined가 출력됨을 알 수 있습니다. 또한 a 변수를 두 번 선언했음에도 출력이 문제없이 일어납니다.

 

let과 const - ES6 이후에 사용하는 변수 선언 방식으로 현재까지도 사용되고 있습니다! 블록 스코프 특징을 가지고 중복 선언이 불가능합니다.

블록 스코프 - 함수 스코프가 함수를 기준으로 스코프를 만드는 방식이었다면 블록 스코프는 블록({}) 내부를 기준으로 스코프를 만듭니다.

//중복선언 불가능
let a = 0;
let a = 10;
console.log(a); // Uncaught SyntaxError

 

마무리

틀린 점 지적은 언제나 환영합니다!

 

Reference

Codeit 모던 자바 스크립트 - https://www.codeit.kr/topics/modern-javascript