[Vue.js] 09 ES6

개요

• ECMAScript 2015
• Vue.js 코딩을 간편하게 해주는 문법 학습
  • const & let
  • Arrow Function
  • Enhanced Object Literals
  • modules
  • Spread Operator
• Babel, Can I use

const & let

•  ES6에서 사용하는 변수 선언 방식

let

• 한번 선언하면 다시 선언할 수 없다.

// 똑같은 변수를 재선언할 때 오류
let a = 10;
let a = 20; // Uncaught SyntaxError: Identifier 'a' has already been declared

const

•  한번 할당한 값을 변경할 수 없다.

// 값을 다시 할당했을 때 오류
const a = 10;
a = 20; // Uncaught TypeError: Assignment to constant variable.

• 단, 객체 {}또는 배열 []로 선언했을 때는 객체의 속성(property)과 배열의 요소(element)를 변경할 수 있다.

// 객체로 선언하고 속성 값을 변경
const b = {
    num: 10,
    text: 'hi'
};
console.log(b.num); // 10

b.num = 20;
console.log(b.num); // 20

// 배열로 선언하고 배열 요소를 추가
const c = [];
console.log(c); // []

c.push(10);
console.log(c); // [10]

블록 유효범위

• ES5의 var를 이용한 변수 선언 방식과 let & const를 이용한 변수 선언 방식의 가장 큰 차이점은 블록 유효범위이다.

var의 유효 범위

• var의 유효 범위는 함수의 블록 단위로 제한되며 흔히 함수 스코프(function scope)라고 표현

var a = 100; // window
function print() {
    var a = 10; // print()
    console.log(a);
}
print(); // 10

for 반복문에서의 var 유효 범위

• var의 유효 범위가 {}에 제한되나?

var a = 10;
for (var a = 0; a < 5; a++) {
    console.log(a); // 0 1 2 3 4 5
}
console.log(a); // 6

const와 let의 블록 유효범위

• 반복문의 조건 변수 a를 let으로 선언하니 변수의 유효 범위가 for 반복문의 {} 블록 안으로 제한됨.

var a = 10;
for (let a = 0; a < 5; a++) {
    console.log(a); // 0 1 2 3 4 5
}
console.log(a); // 10

화살표 함수(Arrow Function)

•  ES6의 새로운 함수 정의 방식입니다.

기존의 함수 정의 방식

기존 자바스크립트의 함수 정의 방식

var a = function() {
    // ...
};

화살표 함수 정의 방식

화살표 함수를 이용한 함수 정의 방식

var a = () => {
    // ...
};

화살표 함수의 다양한 문법

화살표 함수를 정의하는 방식은 간단한 자바스크립트 표현식부터 {} 를 이용한 선언 방식까지 여러 방법이 있다.

1. 단순한 자바스크립트 표현식

단순한 자바스크립트 표현식의 경우 아래와 같이 간소화 문법을 사용할 수 있다.

() => 10 + 20; // {} 필요 없음

2. 함수 선언 방식

복잡한 자바스크립트 선언문이 들어갈 경우에는 {}를 사용하여 아래와 같이 구현.

() => {
    print();
    log();
    return 10 + 20;
};

3. 전달 인자(parameter)가 하나인 경우

인자를 1개만 선언하는 경우 인자를 받을 때 사용하는 소괄호() 를 생략할 수 있다.

const a = (num) => { return num * 10 };
const b = num => num * 10;
a(10); // 100
b(10); // 100

화살표 함수 this

• 일반함수가 전역 컨텍스트에서 실행될 때 this가 정의
• 화살표함수는 this를 정의하지 않는다.
• 함수의 내부함수, 콜백함수에 사용되는 this는 window이다.

let cat = {
    sound: "meow",
    soundPlay: function () {
        console.log(this) // 가.
	setTimeout(function () {
	    console.log(this) // 나.
	    console.log(this.sound); // 다.
	}, 1000);
    }
}

cat.soundPlay();
// 가. cat {sound: "meow", soundPlay: ƒ}
// 나. window
// 다. undefined -----> undefined인 이유는 window에 sound가 없어서

일반함수

// 함수안에 that 변수를 선언하기
let cat = {
    sound: "meow",
    let that = this // that 사용
    soundPlay: function () {
        setTimeout(function ()  {
            console.log(that.sound);
        }, 1000);
    }

}

// bind 사용하기
let cat = {
    sound: "meow",
    soundPlay: function () {
        setTimeout(function ()  {
            console.log(this.sound);
        }.bind(this), 1000);
    }
}

화살표 함수

let cat = {
    sound: "meow",
    soundPlay: function () {
        setTimeout(() => {
    	    console.log(this.sound);
	}, 1000);
    }
}

향상된 객체 리터럴(Enhanced Object Literal)

• 자바스크립트에서 사용하던 객체 정의 방식을 개선한 문법

기존 객체 정의 방식

var josh = {
  // 속성: 값
  language: 'javascript',
  coding: function() {
    console.log('Hello World');
  }
};

축약 문법 1 - 속성과 값이 같으면 1개만 기입

• 객체를 정의할 때 속성(property)와 값(value)이 같으면 아래와 같이 축약이 가능

var language = 'javascript';

var josh = {
  // language: language,
  language
};

console.log(josh); // {language: "javascript"}

// #1 - 컴포넌트 등록 방식에서의 축약 문법
const myComponent = {
  template: '<p>My Component</p>'
};

new Vue({
  components: {
    // myComponent: myComponent
    myComponent
  }
});

// #2 - 라우터 등록 방식에서의 축약 문법
const router = new VueRouter({
  // ...
});

new Vue({
  // router: router,
  router
});

축약 문법 2 - 속성에 함수를 정의할 때 function 예약어 생략

const josh = {
  // 속성: 함수
  coding: function() {
    console.log('Hello World');
  }
};
josh.coding(); // Hello World

• ES6에서는 아래와 같이 축약하여 코딩하는 것을 추천함.

const josh = {
  coding() {
    console.log('Hello World');
  }
};
josh.coding(); // Hello World

ex)

new Vue({
  // ...
  methods: {
    fetchData: function() {
      // ...
    },
    showAlert: function() {
      // ...
    }
  }
});

new Vue({
  // ...
  methods: {
    fetchData() {
      // ...
    },
    showAlert() {
      // ...
    }
  }
});

modules

• 임포트(Import)와 익스포트(Export)는 자바스크립트의 코드를 모듈화 할 수 있는 기능
• 모듈화란 쉽게 말해서 다른 파일에 있는 자바스크립트의 기능을 특정 파일에서 사용할 수 있는 것.

모듈화의 필요성

• 기본적으로 자바스크립트의 유효 범위는 전역으로 시작하는데 아래와 같이 HTML 페이지를 로딩하면 원하는 결과가 나오지 않는다.

<!-- index.html -->
<body>
  <script src="a.js"></script>
  <script src="b.js"></script>
  <script>
    getTotal(); // 200
  </script>
</body>

// a.js
var total = 100;
function getTotal() {
  return total;
}

// b.js
var total = 200;

import & export 기본 문법

export 변수, 함수

import { 불러올 변수 또는 함수 이름 } from '파일 경로';

 

 

import & export 기본 예제

• 변수

// math.js
export var pi = 3.14;

import { 불러올 변수 또는 함수 이름 } from '파일 경로';

• 함수

// math.js
export var pi = 3.14;
export function sum(a, b) {
  return a + b;
}

// app.js
import { sum } from './math.js';

sum(10, 20); // 30

스프레드 오퍼레이터(Spread Operator)

•  펼침 연산자 
• 스프레드 오퍼레이터는 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용 
• 연산자의 모양은 ...

기존 자바스크립트의 객체 복제 방식

기존 자바스크립트 문법으로만 구현하면..

// 객체의 값을 복사하는 경우
var obj = {
  a: 10,
  b: 20
};
var newObj = {
  a: obj.a,
  b: obj.b
};
console.log(newObj); // {a: 10, b: 20}

// 배열의 값을 복사하는 경우
var arr = [1,2,3];
var newArr = [arr[0], arr[1], arr[2]];
console.log(newArr); // [1, 2, 3]

스프레드 오퍼레이터 사용법

// obj 객체를 newObj 객체에 복제
var obj = {
  a: 10,
  b: 20
};
var newObj = {...obj};
console.log(newOjb); // {a: 10, b: 20}

// arr 배열을 newArr 배열에 복제
var arr = [1,2,3];
var newArr = [...arr];
console.log(newArr); // [1, 2, 3]

// 다수 파라미터
function addNums(...nums) {
   return nums.reduce((a, b) => a+b, 0);
}

addNums(...arr);