ES5 와 ES6 비교
꼭 알아야하는 이유는 구버전의 브라우저에서는 ES6를 지원하지 않기때문 ..?
왼쪽 패널에서 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 |
