ECMAScript 6 (es6)

오랜만에 자바스크립트 공부를 해보자! 참고로 필자는 자바스크립트를 선호하지 않는편이다. 음.. 더 정확히는 동적언어를 선호하지 않는다. 선호하지는 않지만 개발에 필요하다면 사용은 해야겠지? 아무튼.. 요즘 회사에서 vue.js를 시험삼아 사용하고 있어서 vue.js를 살짝 맛보기로 보는 중 이다. vue를 보면서 es6를 사용해보자 라고 생각해서 잠시 공부를 해보도록 하자. 작년에 개인적으로 한번 살펴보긴 했는데 기억이 나지 않는다. (어제 일도 까먹는데 작년일은..) es6는 제작년인가? 2015년도에 나온걸로 알고 있다. 그 닥 많은 관심은 없었기에.. es6에는 꽤 많은 변화가 있었다. 그리고 es5보다 훨씬 좋아졌으니 es6을 사용하도록 권장한다. 물론 막 쓰면 안된다. 특히 IE는 거의 지원 안하니 바벨로 컴파일을 하면 모를까 쌩으로 IE에서는 사용하지 말자. IE말고는 대부분의 브라우저는 지원을 많이 한다. 크롬, 사파리, 파폭, 엣지 등 엣지 경우에도 다른 브라우저만큼은 지원하지 않는 걸로 알고 있다. 아무튼 그 중에서 자주 사용할만한 문법들을 살펴도록 하자.

const 와 let

const 와 let 이라는 키워드가 등장했다. 두 키워드 다 변수와 관련있다. 먼저 const에 대해서 살펴보자. const는 간단하다. 말그대로 상수를 의미한다. 이전 자바스크립트는 상수라는게 없었다. 물론 상수라 정의하면 되지만 실질적으로 변경가능했다. 하지만 이제 const라는 키워드를 사용하면 상수로 표현할 수 있다. 파일을 만들고 하기에 귀찮으니 크롬이나 파폭 등 브라우저를 열어서 콘솔창에서 테스트를 해보자.

const NAME = "wonwoo"
NAME = "seungwoo"

위와 같이 해보면 에러가 발생한다. NAME은 상수인데 변경을 하려고 해서 에러가 발생한다. 나쁘지 않다. 다음은 let이라는 키워드이다. let도 var와 마찬가지로 변수를 선언할 때 사용한다.

let name = "wonwoo"
console.log(name)

보나마나 wonwoo가 콘솔창에 출력될 것이다. 윙? 그럼 var랑 let랑 뭐가 다른거지? var에 비해 let이라는 키워드는 어마어마하게 좋은 키워드이다. let라는 키워드가 등장하게 된 원인은 바로 호이스팅 때문이다. 호이스팅이라는 아주 별로인 놈이 있다. 잠시만 살펴보자. 아주 좋은 예제가 인터넷이 있어서 가져왔다.

var snack = 콘칩;

function getFood(food) {
    if (food) {
        var snack = 감자칩;
        return snack;
    }
    return snack;
}
getFood(false);

위의 코드를 상식적으로 살펴보자. 만약 food가 true이면 감자칩을 리턴하고 그렇지 않으면 콘칩을 리턴한다고 생각한다. 하지만 우리의 전지전능한 자바스크립트는 그렇지 않다. 코드를 실행해보면 undefined이 나온다. 어마어마하다. 일반 언어에서는 볼 수 없는 신기한 광경이다. 실제로 위의 코드는 아래와 같다.

var snack = 콘칩;

function getFood(food) {
    var snack
    if (food) {
        snack = 감자칩;
        return snack;
    }
    return snack;
}
getFood(false);

위 처럼 호이스팅이란 자기 마음대로 변수를 끌어올린다. 참 알면 알수록 신기한 스크립트이다. 아무튼 위와 같은 호이스팅을 방지하려고 나온 키워드가 바로 let이라는 키워드이다. 위의 코드를 let으로 바꾸어서 실행해보자.

let snack = 콘칩;

function getFood(food) {
    if (food) {
        let snack = 감자칩;
        return snack;
    }
    return snack;
}
getFood(false);

let이라는 키워드로 바꾸니 우리가 원하는 콘칩이 출력된다. 이제 호이스팅을 막을 수 있다. 그 전에도 호이스팅을 막기위해 function을 블럭으로 감싸서 실행하곤 했다. 아무튼 이제 var보다 let이라는 키워드를 사용하자!

String Interpolator

자바스크립트에도 String Interpolator이 추가 되었다. let만큼 마음에 든다. 우리 자바는 언제쯤 나올라나..

let name = "wonwoo"
let age = 32

위와 같은 변수를 출력한다고 해보자. 아름답게(?) 출력 하기 위해 아래와 같이 출력했다.

console.log("name: " + name + " age : " + age)

음.. 잘나온다. 위 처럼 두개의 변수밖에 없지만 많은 양의 변수가 있을 때는 조금 짜증난다. 쌍따옴표도 잘 넣어야 되고 + 도 알맞게 넣어야 되고.. 이 것도 일이다. 하지만 이제는 그렇게 할 필요가 없다. 아래와 같이 String Interpolator을 사용하자.

console.log(`name : ${name}, age : ${age}`)

위와 같이 뺵틱(`)? (이름이 기억이 나지 않아..) 을 사용해서 쉽게 String을 컨트롤 할 수 있다.

Destructuring

이것 또 한 요즘 나오는 함수형 언어들에서는 거의 대부분 존재한다.

let json = {"name" : "wonwoo", "age" : 32}
let {name : n, age: a} = json
console.log(n)
console.log(a)

저렇게 하면 알아서 바인딩 된다. json 말고도 Array도 가능하다.

let arr = [1, 2, 3]
let [a, b, c] = arr
console.log(a)
console.log(b)
console.log(c)

예전에 코틀린을 공부했을 때 와 겹치는게 종종있다. 함수형 언어들은 거의 대부분 비슷하다. 함수형 언어 한개만 알아도 다른 함수형 언어들의 특징들을 잘 잡을 수 있다.

Arrow Functions

다른 언어들은 람다 표현식이라고도 하는데 자바스크립트는 애로우 평션이라 한다. java8, 코트린, 스칼라 기타 다른 함수형 언어들을 해봤다면 쉽게 다가갈 수 있다.

let arr = [1, 2, 3]
arr.map(function(i) {
  return i * 2
}).filter(function(i){ 
  return i > 3
})

위와 같은 코드가 있을 경우 애로우 평션을 사용할 수 있다. 위는 코드중에 map과 filter는 함수를 받는 그런 코드이다. 이 코드를 아래와 애로우 평션으로 바꿀 수 있다.

arr.map(i => i * 2).filter(i => i > 3)

위 처럼 map과 filter에 애로우 평션을 넣을 수 있다. 자바와 많이 비슷하므로 설명할 것은 없는 듯하다.

function parse(f, str) {
  f(parseInt(str))
}

딱히 의미 있는 함수는 아니지만 예를 들어보자. parse에 첫 번째 파라미터는 함수이고 두 번째는 String 이라고 가정해보자. 이 함수는 넘어온 str을 단순히 int로 바꿔주는 그런 함수이다.

parse(i => console.log(i), "111")

위와 같이 함수를 받는 거라면 애로우 평션을 이용할 수 있다.

Default Parameters

파라마터의 기본값을 넣어 줄 수 있다. 함수형언어들은 비슷비슷하단 말이야..

function sum(x, y) {
    return x + y;
}

위와 같은 코드가 있는데 파라미터에 기본값을 넣고 싶다면 아래와 같이 변경하면 된다.

function sum(x=10, y=20) {
    return x + y;
}

그럼 기본적으로 아무 파라미터 없이 호출 할 경우에는 x는 10이 되고 y는 20이 된다.

sum() // 30
sum(80) // 100
sum(100, 200) //300

Named Parameters

파라미터 개수가 많은 경우 효과적이다. 자바에서는 지원을 하지 않지만 인텔리j에서 살짝 힌트를 준다.

function sum(x = 10, y = 20) {
    return x + y;
}

아까 위의 함수와 동일하다. 함수를 호출할 때 이름을 지정해서 호출 할 수 있다.

sum(x = 200, y = 100)

하지만 힌트일 뿐 실제 자리를 바꾸면 안된다.

sum(y = 200, x = 100)

위와 같이 호출할 경우에도 x에 200이 들어가고 y에 100이 들어간다. 순서대로 작성해야 된다.

class

es6 부터 class라는 키워드를 사용해서 클래스를 만들 수 있다.

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    incrementAge() {
      this.age += 1;
    }
}

다른 언어와 마찬가지로 class 뒤에 클래스명을 써주면 된다. 생성자도 만들어 줄 수 있는데 constructor 를 사용해서 생성자를 만들 수 있다.

let person = new Person("wonwoo", 32)
person.incrementAge()
console.log(person)

그럼 age가 +1 된것을 확인 할 수 있다. 또한 extends 키워드로 상속도 가능하다.

class Personal extends Person {
    constructor(name, age, hobby) {
        super(name, age)
        this.hobby = hobby;
    }
}

타 언어와 동일하게 상위 생성자를 호출해 줘야 한다. 그리고 오버라이딩도 가능하다. 오버라이딭 키워드가 존재하는건 아니고 상위 클래스의 함수랑 동일하게 작성만 해주면 된다.

Map과 Set

Map과 Set이 등장했다. 실제 이전 자바스크립트에는 Map과 Set이 없었다. 그래서 Object를 사용해서 Map과 비슷하게 만들었지만 이제는 그럴필요 없다.

let map = new Map()
map.set("name", "wonowo")
map.get("name") //wonwoo

위와 같이 Map을 사용해서 데이터를 넣고 가져올 수 있다. Set도 마찬가지다.

let set = new Set()
set.add(1)

다른 언어들의 Set과 동일하게 중복을 허용하지 않는다. 다시 set에 1을 넣으면 변경되지 않고 길이가 1인 set만 남아 있다.

set.add(1)  //Set(1) {1}

Promise

소위 콜백헬이라고 불리는 것을 막을 수 있다.

func1(function (value1) {
    func2(value1, function (value2) {
        func3(value2, function (value3) {
            func4(value3, function (value4) {
                func5(value4, function (value5) {

                });
            });
        });
    });
});

위와 같이 콜백에 콜백에 콜백이 있는 경우에 코드의 가독성이 좋지 않다. 하지만 이제 Promise를 사용해서 조금 나은 코드를 작성 할 수 있다.

func1(value1)
    .then(func2)
    .then(func3)
    .then(func4)
    .then(func5, value5 => {

    });

Promise의 좀 더 자세한 내용은 인터넷에 좀 더 찾아보길 권장한다.

Rest Parameters

소위 말하는 가변인자를 말한다. 이전 자바스크립트에서는 arguments 를 사용해서 인자들을 추출 하였다.

function arguments() {
    for (var i=0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}

하지만 이제 그럴 필요 없다. ...을 사용하면 된다.

function arguments(...args) {
    for (let arg of args) {
        console.log(arg);
    }
}

간단하게 가변인자를 가져올 수 있다. 참고로 of라는 키워드로 다른 언어들의 forEach와 같이 값들을 바로 가져올 수 있다. 이 것도 아마 es6에 추가된 걸로 알고 있다. 이상으로 es6 문법에 대해서 알아봤다. 필자가 자주 쓸 만한 것 위주로 살펴봤으니 나머지는 다른 블로그 혹은 인터넷을 참고하면 되겠다. 이외에도 getter, setter, Generators, Async Await 좀 더 나은 기능들이 많이 추가 되었으니 참고 하면 되겠다. 오랜만에 자바스크립트를 보니 머리가 아프군..