VueJS 개발을 위한 Javascript ES6 문법 4개

1. 화살표 함수(=>)

• 화살표 함수안의 this는 해당 함수가 수행되는 컨텍스트를 가리킴
  (기존 함수에서는 this를 사용, 화살표 함수에서는 this없이 사용)
• 인자 값이 1개인 경우 () 생략가능
• 함수 정의 로직이 1줄이면 {} 제거가능

//일반 함수(ES5)
function (인자) {
}
 
//화살표 함수(ES6)
(인자) => {
}

 

2. 템플릿 리터럴 (Template literals)

• 문자열을 표시할 때 사용하는 작은 따옴표(‘)나 큰 따옴표(“) 대신 백틱(`)을 사용하는 것을 의미
• 문자열을 여러 줄에 걸쳐 표시할 수 있습니다. (뷰 컴포넌트의 템플릿 선언 시에 유용함)
• 문자열과 자바스크립트 표현식을 함께 사용하기 좋습니다. (computed 속성 사용이 편함)

Vue.component({
  template: `<div>
              <h1></h1>
              <p></p>
            </div>`
});
 
hayou() {
  return `Hello, ${this.name}, how are you?`
}

 

3. 모듈 (Modules)

• 자바스크립트 파일의 객체를 다른 파일에서 로딩 하는것
• ES6이 나오기 전에는 특정 객체 & 파일 로딩 기능이 제공되지 않았음.
• import, export 문법으로 사용

//---기존 ES5 형태------
Vue.component('component1', { ... });
Vue.component('component2', { ... });
Vue.component('component3', { ... });
 
new Vue({ ... });
 
 
//---ES6 모듈 형태------
//component1.js
export default {
  helloVal: 'Hello VueJS'
}
 
//app.js
import comp1 from './component1.js';
console.log(comp1.helloVal);

 

4. 구조 분해와 확장 문법

• 객체 속성을 더 쉽게 정의하는 문법
• 할당 구조 분해 : { , }
• 확장 문법 : ...

//---할당 구조 분해 (Destructuring assignment)------
let obj = {
  prop1: 'Hello',
  prop2: 'VueJS'
};
 
//기존
const prop1 = obj.prop1;
const prop2 = obj.prop2;
 
//신규
const { prop1, prop2 } = obj;
 
 
//---확장 문법------
//기존
let newObj = {
  name: 'Joy',
  prop1: obj.prop1,
  prop2: obj.prop2
};
console.log(newObj.prop1); //Hello
 
//신규
let newObj = {
  name: 'Joy',
  ...obj
};
console.log(newObj.prop1); //Hello