ES6의 중요한 핵심 개념들

ES6 에서의 변수 선언

이전 자바스크립트 버전에서는 변수를 선언하는 유일한 방법은 var 이었지만 ES6에서는 다양한 변수선언 방법을 선언하며 다음은 몇가지 새로운 변수 선언 방법이다.

const

다른 언어와 마찬가지로 ES6에도 const를 정의할 수 있다.
const 를 사용하여 한번 선언된 변수가 덮어씌워질 수 없도록 강제할 수 있다.

let

ES6 에서는 let 을 사용하여 전역 변수를 보호할 수 있다.

가령 var 를 사용하면 다음과 같이 전역 변수가 덮어씌우 지지만

example

var test = 'global'

if(test){
    var test = 'overwritten'

    console.log(test) // overwritten
}

console.log(test) // overwritten

다음과 같이 if 문 안에서 let을 사용하면 전역변수를 보호할 수 있다.

var test = 'global'

if(test){
    let test = 'overwritten'

    console.log(test) // overwritten
}

console.log(test) // global

Template String

기존 javascript 에서는 문자열과 변수를 함치기 위해 string의 덧셈 연산을 통해 수행하였지만.
ES6 문법에서는 ${} 와 같은 스트링 템플릿을 통해 변수를 스트링에 전달할 수 있다.

example

var name = 'jhon'
var text = `my name is ${name}`
console.log(text) // my name is jhon

Arrow function

arrow function 을 통해 한 줄에 함수를 선언할 수 있다.
arrow function 은 여러 방면에서 매우 편리한데, 가령 리턴을 생략해도 자동으로 해당 내용이 리턴으로 들어가며, 만약 input 변수가 하나인 경우 괄호 마저 생략이 가능하다. 뿐만 아니라 arrow function 은 this의 사용을 방해하지 않기 때문에 this를 사용하면 함수 밖의 context에 바로 접근이 가능하다.

// Old
var old = function(var1, var2){
    return var1 + var2
}

//new
var arrowFunc = (var1, var2) =>{
    var1 + var2
}

Transpiling of ES6

아직 많은 브라우저에서 ES6 문법을 지원하지 않고 js는 계속해서 빠른 속도로 변화하고 있기 때문에, 이를 사용하기 위해서는 ES6 문법을 ES5 문법으로 transpile 해주어야 한다. 이러한 작업은 주로 babel 을 통해 이루어 진다.

이러한 transpile은 브라우저 레벨에서 이루어 질 수 도 있고, 서버단에서 transpile 후에 클라이언트로 전달해 주기도 하는데 전자의 경우 간편하게 처리 가능하다 성능면에서 productiondp 레벨에서 사용하기에는 많은 문제가 있다.

전자의 경우 다음코드를 html 에 추가함으로써 간편하게 transpile이 가능하다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js">
</script>

<script src="script.js" type="text/babel"> </script>

Objects and Arrays

ES6 에서는 object와 array를 보다 편리하게 사용하기 위한 다양한 문법을 제공한다.

Destructuring assignment

객체 혹은 배열 내의 자료에 접근하기 위한 매우 편리한 방법인 destructuring assignment를 제공한다.
과거의 경우 일일히 해당 프로퍼티에 접근하여 하나씩 엔티티를 가져와야 했다면, 이 방법을 통해 간편하게 entity를 추출할 수 있다.

// destructuring assignment in object
var personalInfo = {
    name: 'namhoon',
    age: 27
}

var { name, age } = personalInfo; // extracts key value

// destructuring assignment in array
var list = ['namhoon', 'jake', 'james'];
var [firstItem] = list;

console.log(firstName); // 'namhoon'

Object Literal Enhancement

ES6 에서는 오브젝트 내에서 함수 및 엔티티를 지정함에 있어 훨씬 편리하다

다음과 같이 외부의 변수를 간편하게 객체 내에 추가할 수 있고, 함수의 선언도 간편해 졌다.

var name = 'namhoon';
var age = 25;

var personalInfo = {name, age}//{name:'namhoon', age:25}

var print = function(){
    console.log('my name is ${this.name} and im ${this.age} years old');
}

// new version
var personalInfo = {
    name,
    age,
    print(){ // eaily define function!
        console.log('my name is ${this.name} and im ${this.age} years old');
    }
}

The Spread Operator

spread operator(...variable) 을 통해 간편하게 배열을 다룰 수 있다.
과거 js에서는 배열 혹은 객체 내의 다양한 인자들을 명시하거나 변경하기 위해 필요없는 다를 항목들까지 일일히 명시해야 했다면, spread operator는 우리를 이러한 귀찮음에서 해방시켜 준다.

이런한 spread operator는 다양한 경우에 사용될 수 있으며, 다음은 그 사용 사례이다.

array를 이어 붙이는 경우

var peaks = ["Tallac", "Ralston", "Rose"] var canyons = ["Ward", "Blackwood"]
var tahoe = [...peaks, ...canyons]

array를 간편하게 복제하는 경우

var peaks = ["Tallac", "Ralston", "Rose"];
var [last] = [...peaks].reverse()
console.log(last) // Rose
console.log(peaks.join(', ')) // Tallac, Ralston, Rose

함수의 인자들을 묶어서 표현하는 경우

function directions(...args) {
    var [start, ...remaining] = args
    var [finish, ...stops] = remaining.reverse()

    console.log(`drive through ${args.length} towns`)
    console.log(`start in ${start}`)
    console.log(`the destination is ${finish}`)
    console.log(`stopping ${stops.length} times in between`)
}

directions(
    "Truckee",
    "Tahoe City",
    "Sunnyside",
    "Homewood",
    "Tahoma"
)

객체 내 인자들을 묶어서 표현하는 경우

var morning = {
    breakfast: "oatmeal",
    lunch: "peanut butter and jelly"
}
var dinner = "mac and cheese"
var backpackingMeals = {
    ...morning,
    dinner
}
console.log(backpackingMeals)

Classes

이전 버전의 js에서는 class 가 존재하지 않았기 대문에 클래스가 필요한 경우 함수를 만들고 해당 함수에 대한 프로토 타입을 정의하는 방식으로 클래스를 만들어 사용했다.
하지만 ES6 부터는 정식을로 Class 를 지원하며 다른 클래스를 extends 할 수 있어 인터페이스의 개념도 추가되었다.

여기서 extends 를 사용하는 경우 construct를 다른 함수에서 super() 를 사용해야 하며, 그 사용사례는 다음과 같다.

class Expedition extends Vacation {
    constructor(destination, length, gear) {
        super(destination, length)
        this.gear = gear
    }

    print() {
        super.print()
        console.log(`Bring your ${this.gear.join(" and your ")}`)
    }
}

ES6 Modules

이전 버전의 js 에서는 외부 라이브러리를 가져오는 방법으로만 import 가 가능했지만, ES6 부터는 정식으로 module 을 제공하고 있다.
특히 같은 파일 내에서 여러 개의 모듈을 export 하는 것도 가능하며, object destructuring 을 통해 간편하게 import 할 수 있으며, 특정 모듈을 원하는 이름 으로 import 하는 것도 가능하다.
다음은 그 사용사례를 보여준다.

import { print, log } from './text-helpers'
import { print as p, log as l } from './text-helpers'

과거버전의 js와 ES6 에서 통용되는 Common.js는 module.exports 를 사용하여 module을 export 하는데 주의할 점은 이렇게 export된 module은 import 를 통해 import 될 수 없다는 것이다. 그 대신 아래와 같이 require를 사용하여 import를 해야 한다.

const { log, print } = require('./txt-helpers')

많은 라이브러리들이 common.js 를 기반으로 export 되었으므로, 외부 라이브러리를 사용할 때 무분별하게 import 문을 사용하면 import 되지 않는 문제가 있으니 특히 주의해야 한다.