들어가며

"모던 자바 스크립트를 하세요!😎", "모던 자바 스크립트는 필수 입니다!🤭"

자바 스크립트를 공부하고 사용하다보면 반드시 보게 되는 단어 '모던 자바스크립트' 이다.
그럼 아마 애써 무시하던 사람들은 속으로 이런 생각들을 하게 된다.

아니 대체 모던 자바스크립트가 뭔데요..😂

이번에는 항상 귀에 맴돌던 모던 자바 스크립트를 알아보려 한다.
이제 당당히 "저 그거 뭔지 알아요!" 할 수 있는 사람이 되어보자.

모던 자바 스크립트란

(이런거 아님)

ECMAScript? JavaScript?

본격적으로 모던 자바 스크립트에 대해 알아보기 전 ECMA에 대해 알아보고자 한다.
혹시 구글링 하다가 ECMAScript6, ES6, ECMA2015 와 같은 단어를 본 적 있지 않은가?
이는 모던 자바 스크립트 인지 아닌지를 구분 할 수 있는 척도가 된다. 좀 더 자세히 알아보자.

ECMAScript

ECMA는 European Computer Manufacturer's Association 의 약자로 정보 통신 시스템을 위한 표준화 기구라고 생각하면 좋다.
(현재는 Ecma International로 이름이 변경되었다.)

처음 Javascript는 Netscape 웹 브라우저에서 사용하기 위해 개발되었는데, 이후에 다른 브라우저에서도 이를 탑재하고자 했다.

하지만 다양한 브라우저에서 Javascript가 동일하게 동작하려면 표준이 필요했고, 이 표준을 정해준 곳이 ECMA이며 그 표준 명이 ECMAScript이다.

해당 스크립트는 매년 업데이트 되며 판 버전 또는 년도별로 구분한다.
ex.) ECMA2015(=ES6), ECMA2016(=ES7)

정리 : Javascript를 사용하기 위한 설명서 = ECMAScript

그래서 모던 자바 스크립트는 뭔데

모던 자바 스크립트는 모든 모던 브라우저에서 지원하는 자바 스크립트 코드 라고 정의할 수 있다.
여기서 '모던 브라우저'란 Chrome, Firefox, Safari, Edge 등이 있다.

ECMA인지 뭔지는 알겠는데.. 그게 모던 자바 스크립트랑 대체 무슨 상관이죠? 😓

앞서 말한 정의를 토대로 '모던 자바 스크립트' 의 정의는 시대마다 달라진다.
작성일 기준으로 모던 자바 스크립트의 기준은 이렇게 정의할 수 있을 것이다.

모던 자바 스크립트는 ES6(ECMA2015) 이상을 사용하는 자바 스크립트 이다.

그 이유는 ECMA의 버전이 ES5(ECMA2014)에서 ES6(ECMA2015)로 변하며 많은 변화가 있었기 때문이다.
let, const, arrow function 등의 현재 자바스크립트의 주요 문법들이 ES6에서부터 시작되었으므로, 현재의 모던 자바 스크립트가 위와 같은 정의가 된다고 할 수 있다.

정리 : 모던 자바 스크립트란 ES6+ 이상을 사용하는 자바 스크립트 이다.

let, const

드디어 모던 자바 스크립트가 무엇인지 알았어요! 🥳

이제 '모던 자바 스크립트'에 첫 발을 내딛었다.
본격적으로 '모던 자바 스크립트'에서의 개발은 어떻게 해야할 지 알아보자.

let, const을 사용해 변수를 선언하자

ES5로 개발하던 개발자들은 var를 이용해 변수를 선언 할 것이다.

기존의 이 var라는 방식은 많은 문제점이 존재했고, 이를 해소하기 위해 let과 const가 등장했다.

뭐가 문제였고, 어떻게 활용하면 될지 알아보도록 하자.

const 사용하기

const 를 사용해서 변하지 않는 값들은 표현하자!

모두가 알다시피 var로 변수를 선언하면 나중에 같은 이름으로 다시 변수 선언이 가능하다.
또한 var로 선언한 값은 언제든 변경이 가능하다.

이 같은 var의 특징은 코드가 길어질 수록 모든 코드를 전부 읽어보게끔 했고, 동작의 결과를 유추하는데 어려움을 주게 된다. 왜 그럴까? 한번 코드를 봐보자.

해당 코드는 특정 상품의 값에서 0.2%만큼을 추가해 최종 금액을 보여주는 코드이다.

var plusPrice = 0.2;
var productPrice = 1000;
var totalPrice = productPrice + (productPrice*plusPrice);

return `최종 금액은 ${totalPrice} 입니다.`;

엥? 뭐가 문제인지.. 누가봐도 (1000+1000*0.2) 아닌가요?🤔

그 말이 맞다. 현재 코드만 봐서는 명확하다고 생각이 들 수도 있다.
하지만 실제 개발에서 이 같이 짧은 코드는 매우 드물다.
만약 저 가운데 코드 100줄이 더 있다면 어떻게 될까?

var plusPrice = 0.2;
var productPrice = 1000;
var totalPrice = productPrice + (productPrice*plusPrice);

// 또 다른 코드들 1
// 또 다른 코드들 2
// 또 다른 코드들 3
// .
// .
// .
// .
// .
// .
// .
// .
// 또 다른 코드들 100


return `최종 금액은 ${totalPrice} 입니다.`;

이번에도 맨 아래 totalPrice가 1000+1000*0.2라고 바로 확신할 수 있을까?

전혀 아니다.

var로 선언된 변수들은 언제든지 수정이 가능하기에 이 코드의 동작 결과를 알려면 사이의 100줄 코드를 모두 읽어보고 이해해야 할 것이다.

이 같은 var의 특성을 보완하고자 const라는 것이 탄생했다.

const 자세히

const는 동일 블록 내에서 재 할당이 되지 않는 변수 선언 방식이다.
ES6에서는 변수의 선언을 const로 하는 것을 기본으로 한다.

엥? const를 기본으로 한다구요? C언어에서는 그렇게 못하는데..?

C언어 등의 타 언어에서 상수 변수 선언을 먼저 경험해본 사람이라면 의아할 수도 있다.

보통 상수로 선언한다는 것은 '값 자체가 절대 바뀌지 않음(=바꿀 수 없음)' 이라는 의미를 가지기 때문이다.

하지만 ES6에서의 const는 조금 다른게 Array나 Object의 값 변경은 가능하다.

따라서 ES6에서 변수 선언을 const로 하는 것은 '이 값은 변경하지 않을 거에요~' 라고 사전에 이야기 하는 것과 같은 의미를 가진다고 생각하면 된다.

즉, 많은 코드들을 둘러 볼 때 const로 선언 된 변수가 재할당 될까봐 조마조마 하지 않고 분석해도 된다는 이야기이다.

이는 간단한 듯 하지만, 실제 개발에서 큰 도움을 주게 된다.
아까 그 코드를 const로 작성해보면 더 와닿는다.

const plusPrice = 0.2;
const productPrice = 1000;
const totalPrice = productPrice + (productPrice*plusPrice);

// 또 다른 코드들 1
// 또 다른 코드들 2
// 또 다른 코드들 3
// .
// .
// .
// .
// .
// .
// .
// .
// 또 다른 코드들 100


return `최종 금액은 ${totalPrice} 입니다.`;

차이가 느껴지지 않는가?

이제 중간에 어떠한 코드 내용이 있다고 하더라도 totalPrice는 productPrice + (productPrice*plusPrice)일 수 밖에 없다는 걸 알 수 있다.

따라서 코드의 동작이 어떻게 될 지 훨신 빠르고 정확하게 유추가 가능하다.

let 사용하기

const가 변경 불가한 값이면.... let은 변경 가능한 값?? 😏

맞다. let는 var와 매우 유사하다.
다만 같은 이름으로 재 할당이 불가능하고, 변수의 scope(유효 범위)가 다르다.

var는 Lexical Scope(렉시컬 스코프-어휘적 유효 범위)를 따르고,
let는 Block Scope(블록 스코프-블록 유효 범위)를 따른다.
(const도 Block Scope를 따른다)

간단하게 설명하자면 var는 거의 모든 범위에서 사용이 가능하지만
let는 중괄호 내부 { } 범위에서만 사용이 가능하다고 할 수 있다.

let 자세히

예제를 통해 자세히 알아보자.

1. 동일 변수명 재 할당 불가

function testFunction(){
  var testValue = 10;
  
  console.log(testValue);
  
  var testValue = 20;
  console.log(testValue);
}

// output
// 10
// 20

var로 선언한 변수는 같은 이름으로 재 할당해서 사용이 가능하다.
이 같은 특징은 개발을 진행하며 혼란을 야기 시킨다.

이 때 let을 사용하게 되면 같은 변수 명으로 재 할당이 불가능하다.

function testFunction(){
  let testValue = 10;
  
  console.log(testValue);
  
  let testValue = 20;
  console.log(testValue);
}

// output
// Uncaught SyntaxError: Identifier 'testValue' has already been declared

보다시피 에러가 발생해 동일명 재할당이 불가능하다는 것을 알 수 있다.

2. Block Scope

function testFunction(){
  if(true) {
  	var testValue = 10;
  }
  console.log(testValue);
}

// output
// 10

if문 내부에서 var로 선언한 testValue가 if문 외부에서 불러오고 있다.
output은 이 코드를 정상적으로 실행하고 10을 출력해준다.

반면에 block-scope는 if문 { } 내부의 범위에서만 testValue가 유효하므로 console.log가 실행되지 않는다.

function testFunction(){
  if(true) {
  	let testValue = 10;
  }
  console.log(testValue);
}

// output
// Uncaught ReferenceError: testValue is not defined

이처럼 let은 block-scope를 가지므로 관리가 용이하게 된다.

let, const 사용 이유 정리

아마도 이제 왜 var대신 let과 const를 사용하라고 했는지.
그리고 왜 const를 주로 사용하고 let를 가끔 사용하라고 했는지 이해가 됐을 것이다.

변수 선언의 과정은 단지 선언의 의미가 아닌 쉽고 빠르게 예측 가능한 변수를 만드는 데에 중요한 과정이다.

앞으로는 let과 const를 적절히 사용해서 모던 자바 스크립트에 한발짝 더 가까이 가보도록 하자.

정리

이번 게시글에서 ECMA, ES6가 무엇인지, 모던 자바 스크립트가 무엇인지 알아보았다.

이제 Javascript에서 ES6+ 적용 개발은 필수다시피 하기 때문에, 아직 모른다면 하루 빨리 알아가는 것을 추천한다.

• ECMAScript란 JavaScript를 사용하기 위한 설명서다.
• ECMAScript는 매년 업데이트되며 버전이 나누어진다.
• 모던 자바 스크립트는 ES6(=ECMA2015) 이상의 버전을 사용하는 것이다.
• ES6부터는 변수 선언에 var을 사용하지 않고 let과 const를 적절히 사용한다.
• const를 기본, let을 변경 될 값에 사용해 예측 가능하도록 만드는 것이 중요하다.

+ 읽어주셔서 감사합니다.
+ 오타, 내용 지적, 피드백을 환영합니다. 많이 해주실 수록 제 성장의 밑거름이 됩니다.