ES5 와 ES6 비교 



꼭 알아야하는 이유는 구버전의 브라우저에서는 ES6를 지원하지 않기때문 ..?


https://es6console.com/


왼쪽 패널에서 ECMAScript 6 문법으로 코드를 작성하고 변환을 누르면 자동으로 오른쪽 패널에 ECMAScript 5 문법으로 변환된 코드를 표시해줍니다.


우선 간단하게 몇개만 확인해보자 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
 
//es5 문법
 
function greetings (name) {
 
 return 'hello ' + name
 
}
 
 
//es6 문법
 
const greetings = (name) => {
 
 return `hello ${name}`;
 
}
 
 
 
//es5 문법
 
var obj1 = {a : 1, b : 2} 
var obj2 = {a : 2, c : 3, d : 4} 
var obj3 = Object.assign (obj1, obj2)
 
 
//es6 문법
 
const obj1 = {a : 1, b : 2} 
const obj2 = {a : 2, c : 3, d : 4} 
const obj3 = {... obj1, ... obj2}
 
 
 
//es5 문법
 
var obj1 = { a: 1, b: 2, c: 3, d: 4 }
var a = obj1.a
var b = obj1.b
var c = obj1.c
var d = obj1.d
 
//es6 문법
 
const obj1 = { a: 1, b: 2, c: 3, d: 4 }
const {
  a,
  b,
  c,
  d
} = obj1
 
 
 
 
//es5 문법
var a = 1
var b = 2
var c = 3
var d = 4
var obj1 = { a: a, b: b, c: c, d: d }
 
//es6 문법
var a = 1
var b = 2
var c = 3
var d = 4
var obj1 = { a, b, c, d }
 
 
 
//es5 문법
function isGreater (a, b, cb) {
  
  var greater = false
  if(a > b) {
    greater = true
  }
  cb(greater)
}
isGreater(1, 2, function (result) {
  if(result) {
    console.log('greater');
  } else {
    console.log('smaller')
  }
})
 
//es6 문법
 
const isGreater = (a, b) => {
 return new Promise ((resolve, reject) => {
  if(a > b) {
   resolve(true)
  } else {
   reject(false)
  }
 })
}
isGreater(1, 2)
 .then(result => {
    console.log('greater')
 })
 .catch(result => {
    console.log('smaller')
 })
 
//es5 문법
var myModule = { x: 1, y: function(){ console.log('This is ES5') }}
module.exports = myModule;
//es6 문법
const myModule = { x: 1, y: () => { console.log('This is ES5') }}
export default myModule;
 
//es5 문법
var myModule = require('./myModule');
//es6 문법
import myModule from './myModule';
import {x, y, z} from './myModule';
 
cs


코드가 매우 간결해지고 가독성도 좋아지고 좋음 

저작자표시 비영리

'웹 프론트엔드 > React' 카테고리의 다른 글

7. React / 리액트 (JSX 에 스크립트식 표현하기)  (0) 2018.10.22
6. React / 리액트 시작하기 (나의 페이지 만들기)  (0) 2018.10.21
4. React / 리액트 (webpack , 웹팩)  (0) 2018.10.21
3. React / 리액트 프로젝트 만들기  (0) 2018.10.21
2. React 시작하기 ( Vscode package 설치)  (0) 2018.10.21

+ Recent posts

티스토리툴바