[웹앱 제작으로 배워보는 Vue.js, ES6, Vuex] ES6 of Vue.js (1)

ES6?

최신 Front-end Framework인 React, Angular, Vue에서 권고하는 언어 형식

ES5에 비해 문법이 간결해져서 익숙해지면 코딩을 훨씬 편하게 할 수 있음

 

---

const & let - 새로운 변수 선언 방식

• 블록 단위 {}로 변수의 범위가 제한되었음
• const : 한번 선언한 값에 대해 변경할 수 없음(상수 개념)
• let : 한번 선언한 값에 대해서 다시 선언할 수 없음(재할당은 가능함)

! const

하지만, 객체나 배열의 내부는 변경할 수 있다.

const a = 10;
a = 20; //Uncaught TypeError : Assignment to constant variable

const a = {};
a.num = 10;
console.log(a); //{num:10}

const a = [];
a.push(20);
console.log(a); //[20]

---

변수 스코프

기존 ES5 : 기존 자바스크립트(ES5)는 {}에 상관없이 스코프가 설정됨

var sum = 0;
for (var i=1; i<=5; i++) {
	sum = sum + i;
}
console.log(sum) //15
console.log(i) //6

ES6 : {} 단위로 변수의 범위가 제한되어짐

let sum = 0;
for (var i=1; i<=5; i++) {
	sum = sum + i;
}
console.log(sum) //10
console.log(i) //Uncaught ReferenceError : i is not defined

---

호이스팅

기존 ES5 : 선언한 함수와 변수를 해석기가 가장 상단에 있는 것 처럼 인식한다

function willBeOveridden() {
	return 10;
}
willBeOveridden(); //5
function willBeOveridden() {
	return 5;
}

---

Arrow Function - 화살표 함수

//ES5
var sum = function(a, b) {
  return a + b;
};

//ES6
var sum = (a, b) => {
  return a + b;
};

sum(10, 20);

//ES5
var arr = ["a", "b", "c"];
arr.forEach(function(value) {
  console.log(value); // a, b, c
});

//ES6
var arr = ["a", "b", "c"];
arr.forEach(value => console.log(value)); // a, b, c

---

향상된 객체 리터럴 - Enhanced Object Literals

- 객체의 속성을 메서드로 사용할 때 function 예약어를 생략하고 생성 가능

var directionary = {
  words : 100,
  //ES5
  lookup : function() {
    console.log("find words");
  },
  //ES6
  lookup() {
    console.log("find words");
  }
};

directionary.lookup();

 

---

속성명의 축약

- 객체의 속성명과 값 명이 동일할 때 아래와 같이 축약 가능

var figures = 10;
var dictionary = {
	//figures : figures;
    figures
};