[JavaScript] Learn ECMAscript 6 syntax with tower-of-babel

tower-of-babel

ES6 문법을 공부하기 위한 일종의 도구다. 주요 문법에 대해 배우고 예제도 풀 수 있다.

This is a sort of tool for studying. We can check the ES6 syntax and solve the series of exercises with tower-of-babel.

How to use?

$ npm install tower-of-babel -g
$ tower-of-babel

커맨드라인에 위와 같이 치면 된다. 간단하다. 물론 NodeJs를 설치한 환경이어야 한다. 깔려있지 않다면 https://nodejs.org/ 에서 설치하고 오자. 

Just type upper. (-g option is for global installing, So you can generate it any directory) And you had to installed NodeJs. if you not, go here and install it. https://nodejs.org/

이후부터는 babel 환경세팅을 하고 차근차근 배우면 끝.

After setting up the babel environment and just learn step by step.

Answers of each exercise

어쨌든 예제를 푸는 거니까 각자의 답이 존재한다. 그래서 나는 이렇게 했을 뿐이지 꼭 이래야 하는 건 아님.

Everyone has their own answers of each exercise. So this is not the perfectly correct answer. those are just my answers.

1. Computed property

var evenOrOdd = 15, obj = {};
obj[(evenOrOdd => evenOrOdd % 2 === 0 ? "even" : "odd")()] = evenOrOdd;

//출력 (result)
{ odd: 15 }

프로퍼티에 식을 대입할 수 있다는 특징이다. 예제는 임의의 숫자가 홀수인지 짝수인지 구분하여 배열에 담아 출력하는 간단한 구문이다. 따라서 프로퍼티명에 즉시실행함수로 삼항연산자를 이용해 바로 홀짝인지 return하면 된다.

The question is checking the random number is even or odd and put it into the array. So return it with immediately invoked function and the ternary operator.

2. Iterator for of

var fizzBuzz = {
  [Symbol.iterator]() {
    let currentVal = 0, tempVal = 0;
    return {
      next() {
        if(currentVal >= 30) return {done:true};
          [currentVal] = [currentVal + 1];
          return {done:false, value:(() => {
            if(currentVal % 3 == 0 && currentVal % 5 == 0) {
              return "FizzBuzz";
            } else if(currentVal % 5 == 0) {
              return "Buzz";
            } else if(currentVal % 3 == 0) {
              return "Fizz";
            } else {
              return currentVal;
            }
          })()};
      }
    }
  }
}

for(let n of fizzBuzz) {
  console.log(n);
}

//출력 (result)
1        
2        
Fizz     
4        
Buzz     
Fizz     
7        
8        
Fizz     
Buzz     
11       
Fizz     
13       
14       
FizzBuzz 
16       
17       
Fizz     
19       
Buzz     
Fizz     
22       
23       
Fizz     
Buzz     
26       
Fizz     
28       
29       
FizzBuzz 
31       

for ~ of에서는 iterable한 것이면 뭐든지 넘겨서 반복시킬 수 있다. 그리고 Symbol.iterator 구문을 이용하면 해당 스코프를 iterator로 만들 수 있고, next()는 자동으로 다음 순서로 넘어가게 해준다. next()는 done 프로퍼티가 true가 되면 멈춘다. 이를 이용해 FizzBuzz 프로그램을 만들었다.

Can make the iterator of whatever is iterable in for ~ of, with Symboe.iterator statement. next() jump to next automatically. this will be break when the 'done' property is true.

3. Generator

let fizzBuzz2 = function*() {
  let currentVal = 0;

  while(currentVal < 30) {
    [currentVal] = [currentVal + 1];
    if((currentVal % 3 == 0) && (currentVal % 5 == 0)) {
      yield "FizzBuzz";
    } else if(currentVal % 5 == 0) {
      yield "Buzz";
    } else if(currentVal % 3 == 0) {
      yield "Fizz";
    } else {
      yield currentVal;
    }
  }
}();

for(let n of fizzBuzz2) {
  console.log(n);
}

//출력 (result)
1        
2        
Fizz     
4        
Buzz     
Fizz     
7        
8        
Fizz     
Buzz     
11       
Fizz     
13       
14       
FizzBuzz 
16       
17       
Fizz     
19       
Buzz     
Fizz     
22       
23       
Fizz     
Buzz     
26       
Fizz     
28       
29       
FizzBuzz 
31       

Symbol.Iterator를 사용한 FizzBuzz 프로그램에 Generator 구문을 씌운 것이다. function옆에 *를 붙여 선언한다. 

Refactoring the FizzBuzz program using Symbol.Iterator to Generator. Initializing with * next to function like 'function*'.

4. Arrow function

var inputs = ["Forever", "Ur", "Continuous", "Korea"];
var result = inputs.map(inputs => inputs.charAt(0)).reduce((pre, cur) => `${pre}.${cur}`);

//출력 (result)
F.U.C.K

익명함수들은 화살표를 이용해 만들 수 있게 되었다. 일종의 문법조미료임. 임의의 스트링 배열의 각 요소에서 0번째를 거른 후에 이를 모두 합치는 프로그램이다.

This is a sort of sugar syntax. we can change the anonymous function to arrow function. Map the 0 index of each attribute of the array and combine it with reduce().

5. Rest and spread

var arr = `10,50,15,11,42,56,39,21`.split(",");
arr = arr.map(arr => +arr);

var avg = function(...arr) {
  return arr.reduce((pre, cur) => Math.ceil((pre + cur) / 2));
}

avg(...arr);

//출력 (result)
31

배열의 길이가 가변적일 때는 Spread operator(...)를 사용한다. 이렇게 넘긴 배열을 rest parameter라고 한다. 그냥 argument로  넘겨주면, 이는 배열이 아니라 배열처럼 보이게 넘어온 것일 뿐이다. 따라서 가변적인 배열은 rest parameter로 명시해서 배열로 다루자.

Using spread operator when the length of array is variadic. It called rest parameter. It is just the object looks like an array when send the parameter to argument. Therefore the variadic array is sure to be specified to rest parameter with '...'