초보자를 위한 vue 개발 ES6 문법 4개

 

1. 화살표 함수

// 일반 함수
function(v1, v2) {
	return v1 + v2
}

// 화살표 함수
const test = (v1, v2)=>{
	return v1 + v2
}
console.log(test(1,2)); // 3

// 화살표 함수 (인자없을때)
const test =_=>{
   
}

2. 템플릿 리터럴

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다.

 

여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다.

 

이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문자열) 라고 불려 왔습니다.

 

` 백틱을 사용합니다.

`string text`

const test =_=>{
    return `Hello ${this.name} `
}

 

3. 모듈

자바스크립트 파일 내용을 다른 파일에서 로딩 하는것

 

include 생각하면 됨

//test.js
export default [
    {
    hello: 'Hello World'
    }
]

//app.js
import h from 'test.js';
console.log(h.hello);

4.분해 / 확장

let obj = {
    p1 : 'Hello',
    p2 : 'VueJs'
};

//ES5
const p1 = obj.p1;
const p2 = obj.p2;

//ES6 
const {p1, p1} = obj;


//ES5
let nObj = {
    name: 'naya',
    p1: obj.p1,
    p2: obj.p2
};
console.log(nObj.p1);  //Hello

//ES6
let nObj = {
    name: 'naya',
    ...obj
}
console.log(nObj.p1)l //Hello