Java Script - ECMAScript 6th(ES6)

이번 글은 Java Script - ES6에 대한 글입니다.

 

1. 변수 선언의 다양성

- var은 전역으로 사용 가능합니다.

- let은 지역변수로 사용 가능합니다.

- const는 변경이 불가능합니다.

var globalField = 'global';
let areaField = 'area';
const finalField = 'final';
 
console.log(this.globalField);
console.log(this.areaField);
console.log(this.finalField);

global
undefined
undefined

2. let와 var 활용

- 블록 사이에서 변수는 새로운 변수로 인식되며, 블록 밖에 변수와는 무관하게 됩니다.

function globalTest() {
   var name = 'null';
   if (true) {
      var name = 'wonchul';
      console.log(name);
   }
   console.log(name);
}
 
function areaTest() {
   let name = 'null';
   if (true) {
      let name = 'wonchul';
      console.log(name);
   }
   console.log(name);
}
 
globalTest();
areaTest();

wonchul
wonchul
wonchul
null

3 . for문의 변화

- 기존 forEach는 return 이나 break가 불가능하였으나, ES6부터는 가능합니다.

const arr = ['a', 'b', 'c'];
 
arr.forEach(value => {
   // can not use the break statement.
   console.log(value);
});
 
for(let i in arr) {
   console.log(arr[i]);
   if(i == 1) {
   break;
   }
}
 
for(let i of arr) {
   break;
   console.log(i);
}

a
b
c
 
a
b

4 . Arrow function

- 조금 더 간결하게 function을 표현 할 수 있습니다.

1) 매개변수 불필요한 경우, () => { logic } / _ => { logic }

2) 매개변수 하나인 경우, x => { logic } / (x) => { logic } / => { logic }

3) 매개변수 둘이상 (x, y) => { logic }

- 한줄로 표현이 가능하면, {} 를 생략할 수 있습니다.

- 자바에서의 람다표현식과 매우 흡사합니다.

const pow = num => num * num;
const multiply = (x, y) => x * y;
 
console.log(pow(3));
console.log(multiply(2, 3));
 
const programmingLanguages = [
   "java",
   "javascript",
   "go"
];
 
const upperProgrammingLanguages = programmingLanguages.map(programming => programming.toLocaleUpperCase());
 
console.log(programmingLanguages);
console.log(upperProgrammingLanguages);

9
6
[ java, javascript, go ]
[ JAVA, JAVASCRIPT, GO ]

5 . Template

- 문자열을 넣을 때, `` 로 표기할 수 있습니다.

- ${변수명}을 `` 사이에 넣을 수 있습니다.

let name = 'Heo Won Chul';
let birthYear = 1992;
const calcAge = year => new Date().getFullYear().valueOf() - birthYear;
console.log(`My name is ${name}. I am ${calcAge(birthYear)} years old.`);

My name is Heo Won Chul. I am 25 years old.

6 . 문자형 function

console.log(name.startsWith('Heo'));
console.log(name.includes(' '));
console.log(name.repeat(2));
console.log(`${name}, `.repeat(3));

true
true
Heo Won ChulHeo Won Chul
Heo Won Chul, Heo Won Chul, Heo Won Chul,

7 . Rest Parameter

- 가변인자가 가능합니다.

const addNumber = (... numbers) => numbers.reduce((sum, number) => sum + number, 0);
console.log(addNumber(1,2,3,4));

10

8 . Spread Operator

- 두 배열을 합칠 수 있습니다.

const defaultColors = ['red', 'green'];
const userFavoriteColors =['yellow', 'orange'];
console.log([ ...defaultColors, ...userFavoriteColors ]);

['red', 'green', 'yellow', 'orange']

9 . Class & Default Value

- 자바와 같은 class 형태의 표현이 가능합니다.

- extends도 가능합니다.

- 매개변수에 default value를 넣을 수 있습니다.

class User {
   constructor(name = 'anonymous') {
      this._name = name;
   }
 
   open() {
      return 'Hello, ' + this._name;
   }
   
   static service() {
      console.log(`User name is ${name}.`)
   }
}
 
console.log(new User('wonchul').open());
console.log(new User().open());
User.service();

Hello, wonchul
Hello, anonymous
User name is Heo Won Chul.

10 . Promise

- 비동기처리를 할 수 있는 콜백 함수

const sleep = msec => new Promise((resolve, reject) => setTimeout(resolve, msec));
sleep(1000).then( () => console.log('wake!'));

1초 뒤,
 
wake!

참고

 

- http://blog.jeonghwan.net/2016/04/28/es6.html

- https://gist.github.com/marocchino/841e2ff62f59f420f9d9

- JavaScriptES6