ECMAScript

ECMA스크립트(ECMAScript, ES)란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다.

ECMAScript는 웹 클라이언트 스크립트로 많이 사용되고 있으며, Node.js 를 사용한 서버 응용 프로그램 및 서비스에도 점차 많이 쓰이고 있습니다.

히스토리

넷스케이프에서 개발한 자바스크립트가 성공하자 경쟁사인 마이크로 소프트에서 J Script 를 개발하게 됩니다.
당시의 브라우저 점유율이 압도적이던 IE에서 J Script 를 지원하자, 비슷한 두 스크립트가 사람들에게 혼란을 주게 되었습니다.
이 혼란으로 인해 스크립트 언어에 대한 표준이 필요하게 되었고, 다른 스크립트 언어들에도 적용되는 ECMA 표준이 생겨나게 되었습니다.
이렇게 생긴 ECMAScript는 스크립트 언어들에 대한 표준 / 규격이 되어 지금까지 최신화가 진행중 입니다.

ES6는 ECMAScript의 6번째 에디션

현재 2020년에 최신화 된 ECMAScript 는 11번째, 혹은 그 이상의 에디션까지 출판이 되어 있습니다.

하지만 왜 최신화된 표준을 사용하지 않고 아직 ES6 에 대해서 많은 얘기를 하고 있을까?

---

ES6가 중요한 이유

• 먼저, ES6 에 추가 된 문법과 개념이 현재까지도 매우 중요하기 때문입니다.
  ES6 에서는 ES5 이하 버전에서 문제가 되었던 부분들이 해결되고, 많은 기능들이 추가되어 가독성과 유지보수 측면에서 큰 향상을 가져왔기 때문에 아직까지 ES6 는 중요하게 다뤄지고 있습니다.

• 구버전 웹 브라우저(주로 IE) 및 레거시 코드와의 호환성 문제가 심각하기 때문에, 대부분의 기업들이 ES6 까지를 호환성의 최대치로 보고 있으며, 이 이후의 표준으로 생긴 기능들의 도입을 신중하게 생각하고 있기 때문에 ES6 가 중요하게 다뤄지고 있습니다.

• 브라우저마다 각각 사용하는 자바스크립트 엔진이 다릅니다. 그렇기에 만약 ES6 문법으로 개발을 하였는데, ES6 를 지원하지 않는 브라우저에서는 제대로 작동하지 않는 문제점이 발생하게 됩니다.
  그렇기에 대부분의 경우, 호환성 최대치가 ES6 이므로 ES6 가 중요하게 다뤄지고 있습니다.

---

ES6 주요기능

1. Class 문법 제공
2. let / const
3. Arrow function
4. 템플릿 문자열 (`)
5. 객체 리터럴
6. Modules
7. 구조 분해 할당
8. promise
9. async / await

---

Class

다른 언어에서 지원하는 Class 를 JS 에서도 똑같이 사용할 수 있게 되었습니다.
기존의 Prototype 과 Class 의 개념이 조금 다르기 때문에 ES6 부터 지원하게 되었습니다.

class Person {
    constructor(name) {
    	this.name = name
    }
    
    hello() {
    	console.log(`Hello ${this.name} !`)
    }
}

const student = new Person('krungy')
student.hello() // Hello krungy !

---

let / const

ES6 이전 까지는 변수 선으로 var 을 사용했으나, var 는 const 와 let 으로 대체되었습니다.

• var 변수 중복 선언이 허용되므로, 상수의 개념이 없는 문제점이 있습니다.
  let / const 변수 중복 선언이 금지됩니다.

호이스팅이란?
함수 안에 있는 선언들이 해당 함수의 유효 범위 최상단으로 끌어 올려지는 것을 말합니다.

• var 변수 선언 전에 참조할 수 있습니다. (호이스팅) ... 이는 사이드 이펙트를 야기합니다.
  let / const 변수 선언 전에 참조할 수 없습니다. 이는 호이스팅을 방지합니다.

---

Array function

기존 function() 과 함께 ES6 이후 화살표 함수가 생기게 되었습니다.
이는 현재까지 많이 사용이 되고 있습니다.
화살표 함수는 코드를 더 간결하게 구현 할 수 있게 되었습니다.

// 일반 함수
let sum = function(a, b) {
  return a + b
}

// 화살표 함수
let sum = (a, b) => a + b

this

Array function 의 등장으로 일반 함수에서의 this 가 정의되는 위치가 가져오는 문제점을 해결 할 수 있게 되었습니다.

• 일반 함수에서는 this 가 호출 위치에 따라 정의
• 화살표 함수에서는 this 가 자신이 선언된 함수 범위에서 정의

화살표 함수

function person() {
  this.age = 25
  return {
    age: 50,
    getAge: () => {
      console.log(this.age)
    }
  }
}

const person = person()
person.getAge() // 25

일반 함수

function person() {
  this.age = 25
  return {
    age: 50,
    getAge: function() {
      return console.log(this.age)
    }
  }
}

const person = person()
person.getAge() // 50

---

템플릿 문자열

백틱(`)을 이용하여 새로운 문자열을 만들 수 있으며, String 안에서 변수를 넣을 수 있게 되었습니다.
또한, 내부에서 개행을 자동으로 입력 받습니다.

const n1 = 1
const n2 = 2
const n3 = 3

console.log(n1 + ' + ' + n2 + ' = ' + n3) 
// 1 + 2 = 3

// 템플린 문자열을 사용하면,

console.log(`${n1} + ${n2}
	= ${n3}`)
// 1 + 2
	= 3

---

객체 리터럴

객체를 생성할 때 더 간결하게 생성할 수 있으며, 중복을 다루기 쉽고 동적으로 관리하기 쉬워 질 수 있는 문법을 사용 할 수 있습니다.

const obj = {
  name: 'krungy',
  age: 50,
  hello: () => {
    console.log(this.name)
  },
  // printAll: funtcion() {} 과 같음
  printAll() {
  	console.log(this.name, this.age)
  }
}

---

Modules

모듈을 사용 할 수 있게 되면서, 재사용 가능한 코드를 캡슐화 할 수 있게 되었습니다.
export 로 선언하고 다른 모듈에서 import 하여, 파일 단위의 모듈 스코프를 외부에서 사용할 수 있습니다.

import module from './module.js'

---

구조 분해 할당

구조가 없는 객체를 다루는 방식을 사용 할 수 있습니다. 이는 예시를 보는 것이 가장 이해하기 쉬울 것 같습니다.

const arr = ['A', 'B', 'C'];
const obj = {
  n1: 1,
  n2: 2,
  n3: 3
}

// 배열
const [one, , two, three = 'D'] = arr
console.log(one) // A
console.log(two) // C
console.log(three) // D

// Object
const { n1, ...rest } = obj
console.log(n1) // 1
console.log(rest) // { n2: 2, n3: 3 }

---

promise, async/await

비동기 프로세스를 처리하기 위해 도입되었습니다.
promise, async/await 이 사용 가능하게 되어 콜백 지옥에서 탈출할 수 있게 되었습니다.
가독성 향상으로 기존 콜백의 단점을 보완할 수 있습니다.

기존 콜백 함수

function func1(callback) {
  setTimeout(function () {
    console.log('func1 init');
    callback()
  }, 500)
}
function func2(callback) {
  setTimeout(function () {
    console.log('func2 init');
    callback()
  }, 500)
}
function func3(callback) {
  setTimeout(function () {
    console.log('func3 init');
    callback()
  }, 500)
}

func1(function () {
  func2(function () {
    func3(function () {
          // ...
    })
  })
})

promise
.then(): return 은 .then() 의 매개변수로 사용된다.
resolve(): 비동기 작업에서의 처리 성공의 의미로 사용된다.
reject(): 비동기 작업에서의 처리 실패의 의미로 사용된다.

function func1() {
  return new Promise(function (resolve) {
    setTimeout(function () {
      console.log('func1 init')
      resolve()
    }, 500)
  })
}
function func2() {
  return new Promise(function (resolve) {
    setTimeout(function () {
      console.log('func2 init')
      resolve()
    }, 500)
  })
}
a().then(b)
...

콜백 지옥을 아래처럼 대체할 수 있습니다.

f1()
  .then(() => f2())
  .then(() => f3())
...

async/await

promise 문법으로, .then() 과 다른 방법의 비동기 프로세스 처리 방법이다.
function 앞에 async 를 붙여주고, .then() 의 의미와 비슷하게 await을 사용한다.
await: 프로미스가 resolve될 때까지 대기한 후, 다음 로직으로 넘어간다.

async function func() {
  await f1()
  await f2()
  await f3()
  await f4()
  ...
}