[JS] Javascript (ES6+)

 

자바스크립트 vs. ECMAScript

ECMAScript란 정보 통신 표준화 연구 기관인 Ecma International이 정의하는 표준화된 스크립트 프로그래밍 언어를 뜻한다. Ecma International은 정보 기술의 발전과 보급을 위해 표준화를 지향하는 국제기구로, 그러한 표준화의 대상엔 스크립트 프로그래밍 언어의 데이터 종류에서부터 네이티브 API 함수, 예약어, 에러 핸들링 등 문법적인 요소들이 모두 포함되어 있다. 이렇듯 Ecma International이 제공하는 규격에 맞춰진 언어들을 ECMAScript 언어라고 부르며, 자바스크립트 또한 그러한 언어들 중 하나이다. 즉, EcmaScript는 언어 명세(language specification)인 반면 자바스크립트는 그 명세를 따른 하나의 프로그래밍 언어라고 할 수 있다. (출처)

 

 

자주 언급되는 ES6는 2015년에 나온 버전이다

 

찾아보니, ES6는 2015년도에 나온 버전을 뜻하는 것이었다. 그 이후에도 숫자가 하나씩 차곡차곡 늘어나며 매년 새로운 ES@가 나오는 것을 볼 수 있다. 자바스크립트 사용 개발자를 구하는 공고를 보면 ES6가 굉장히 자주 언급되는데, 이는 ES6 이후에도 새로운 추가 사항들이 있지만, 그럼에도 불구하고 ES6가 정말 다양한 업데이트를 포함하고 있기 때문에 옛날 JS와 모던 JS를 나누는 기점이 되어버렸기 때문이다. 본 포스트에선, 이렇듯 JS의 현대화(?!)를 이끈 ES6에 어떤 사항들이 추가되었는지, JS를 매일 사용하는 나의 입장에서 임팩트가 큰 것들 위주로 간단히 살펴보도록 하겠다.

 

 

 

 

 

let, const, 그리고 block scope

var var = '난 레거시다'

2015년 이전의 JS엔 변수 선언을 하려면 var 키워드를 사용해야했다. var는 굉장히 문제가 많았는데, 2015년 이전의 JS엔 block scope이라는 것이 없었고, function scope만 존재했기 때문이다. 만약 '멍멍이'라는 이름의 변수를 var를 사용해서 만들었다면, 나중에 코드 어딘가에서 내가 또 다른 '멍멍이'를 별도의 block으로 구분해서 만들었다 하더라도 그 이전 멍멍이 변수에 영향을 끼칠 수 밖에 없었다.

 

 

var dog = '멍멍'
{
  var dog = '야옹'
}

console.log(dog) // '야옹' ?!?!

 

ES6에서 추가된 let과 const를 사용함으로써 의도치 않게 변수가 변경되어 발생할 수 있는 에러들을 미리 예방하는 데 큰 역할을 줄 수 있게 되었다. var와는 다르게, let은 block scope에서 변수를 선언할 수 있게 해준다. let으로 선언한 변수의 값은 변경이 가능하다. const는 let과 마찬가지로 block scope도 고려하지만, 변수의 값이 변경될 수 없다는 특징이 있다.

 

 

 

화살표 함수 (Arrow function)

자주 애용하는 화살표 함수 또한 ES6에서 추가된 문법이었다. 화살표 함수에 대해선 이전에 기록을 남긴 것이 있다.

 

2021.03.31 - [Learn to Code] - [JS] 화살표 함수 (Arrow Function)

[JS] 화살표 함수 (Arrow Function)

여담으로, 내가 Three.js를 배우고 있는 브루노 선생님께선 얘를 자꾸 fat arrow라고 부르던데 그게 너무 재미있다.

'=>'가 '->'보다 통통해서 그런가보다...

 

 

 

클래스

클래스 또한 ES6에 도입된 것으로, syntetic sugar라고도 폄하되기도 하지만 없을 때 보다 있을때 확실히 편한 것은 사실이다.

 

2021.04.09 - [Learn to Code] - [JS] 클래스(Class), 인스턴스(Instance), 정적 메소드(Static method), 그리고 서브클래스(Subclassing)

[JS] 클래스(Class), 인스턴스(Instance), 정적 메소드(Static method), 그리고 서브클래스(Subclassing)

 

 

 

Set

Set은 배열과 비슷한, 숫자들의 집합을 표현하기 위해 도입된 객체이다. Set의 가장 큰 특징은 내부의 값들이 중복될 수 없다는 것이다. 예를 들어, 배열은 [1, 1, 3, 3, 5]와 같이 1도 두 개, 3도 두 개로로 중복한 값을 갖는 것이 가능하지만, set의 요소들은 중복되면 안된다. 그래서 주로 배열 내에 중복되는 값이 있을 때 제거하는 용도로 set을 사용했는데, 이러한 set도 ES6에 추가된 것이었다.

 

 

// Q. 주어진 배열에서 중복된 값이 제거된 새로운 배열을 리턴하시오

const deleteDuplicates = (arr) => {
  return [...new Set(arr)]
}

 

중복이 불가능하다는 점 외에도 set은 배열과는 다르게 요소 순서에 의미가 없으며, 인덱스로 값에 접근하는 것이 불가능하다는 특징이 있다. (MDN)

 

 

 

Promise

자바스크립트에선, 콜백 함수를 사용하여 비동기 처리를 한다. 그런데 콜백이 꼬리를 물고 이어지다보면, 콜백 지옥(callback hell)이라는 현상이 발생하게 된다. 바로 아래처럼 말이다.

 

이러한 불편함을 해소하고, 좀더 편리하게 비동기처리를 지원하기 위해 ES6에서 프로미스가 추가되었다. 프로미스는 '생산하는 코드'와 '소비하는 코드'를 연결하는 자바스크립트 객체이다. 이 프로미스 객체를 통해 생산자와 소비자는 일종의 대기 약속을 하게 된다. 생산하는데에 시간이 좀 걸릴 수 있으니까, 연결된 소비자 코드는 물건을 전달받기 위해(?) 믿음과 인내심을 갖고 기다리게 되는 것이다.

 

 

프로미스 생성자 함수는 비동기 처리를 할 콜백 함수를 인자로 전달받는다. 그리고 그 콜백 함수는 두 개의 함수 resolve와 reject를 인자로 전달 받는다. resolve 함수는 비동기 처리가 성공하면 호출되며, reject 함수는 비동기 처리가 실패했을 때 호출된다.

 

const promise = new Promise((resolve, reject) => {
  if (/* 성공 */) {
    resolve()
  } else {
    reject()
  }
})

 

 

 

For...of 반복문

For...of 문은 변수, 스트링, 맵 등과 같은 이터러블을 순회한다. 

 

const colors = ['red', 'yellow', 'blue']
for (let color of colors) {
  console.log(color)
}

 

 

 

 

Template literal

탬플릿 리터럴은 ES6에 새로 도입된 문자열 표기법이다. ES6 이전에 문자열을 표기하려면 ' ' 또는 " "를 사용했는데, 탬플릿 리터럴은 백틱 ` `을 사용한다. 탬플릿 리터럴은 기존의 따옴표 방식보다 훨씬 편한데, 바로 문자열에 변수 등을 ${} 를 사용해서 쉽게 추가할 수 있기 때문이다.

 

const myFriend = 'Jane'

const greeting1 = 'Hello, ' + myFriend + '!'

const greeting2 = `Hello, ${myFriend}!`

 

 

 

Rest Parameter & Spread Syntax

2021.03.23 - [Learn to Code] - [JS] Rest 파라미터 vs. 스프레드 문법(Spread syntax)

[JS] Rest 파라미터 vs. 스프레드 문법(Spread syntax)