허원철의 개발 블로그

Java Script - ECMAScript 6th(ES6) 본문

javasript

Java Script - ECMAScript 6th(ES6)

허원철 2017. 4. 20. 20:54

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

 


1. 변수 선언의 다양성

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

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

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


1
2
3
4
5
6
7
var globalField = 'global';
let areaField = 'area';
const finalField = 'final';
 
console.log(this.globalField);
console.log(this.areaField);
console.log(this.finalField);
cs


1
2
3
global
undefined
undefined
cs



2. letvar 활용

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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();
cs


1
2
3
4
wonchul
wonchul
wonchul
null
cs



3 . for문의 변화

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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);
}
cs


1
2
3
4
5
6
a
b
c
 
a
b
cs



4 . Arrow function

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

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

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

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


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

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const pow = num => num * num;
const multiply = (x, y) => x * y;
 
console.log(pow(3));
console.log(multiply(23));
 
const programmingLanguages = [
   "java",
   "javascript",
   "go"
];
 
const upperProgrammingLanguages = programmingLanguages.map(programming => programming.toLocaleUpperCase());
 
console.log(programmingLanguages);
console.log(upperProgrammingLanguages);
cs


1
2
3
4
9
6
[ java, javascript, go ]
[ JAVA, JAVASCRIPT, GO ]
cs



5 . Template

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

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


1
2
3
4
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.`);
cs


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



6 . 문자형 function


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


1
2
3
4
true
true
Heo Won ChulHeo Won Chul
Heo Won Chul, Heo Won Chul, Heo Won Chul,
cs



7 . Rest Parameter

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


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


1
10
cs



8 . Spread Operator

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


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


1
['red''green''yellow''orange']
cs



9 . Class & Default Value

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

- extends도 가능합니다.


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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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();
cs


1
2
3
Hello, wonchul
Hello, anonymous
User name is Heo Won Chul.
cs



10 . Promise

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


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


1
2
3
1초 뒤,
 
wake!
cs



참고

 

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

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

- JavaScriptES6

'javasript' 카테고리의 다른 글

Node.js - 로컬 모듈 접근에 대한 다양한 개선 방법  (403) 2017.10.20
Node.js - 시작하기  (422) 2017.10.11
JSON vs JSONP  (415) 2017.06.16
[펌] TypeScript  (412) 2016.12.04
Comments