Vue [02] Vue.js를 위한 ES6

let arr = [10, 20, 30, 40];
let [e1, e2, e3] = arr;
console.log(e1, e2, e3); // 10 20 30

[1] ES6소개 

◈ ES6(EcMAScript6)

[2] let과 const

◈ var변수의 호이스팅

- var변수는 함수 단위로 호이스팅 되므로 블록 단위로 동작하지 않음 => 진정한 의미의 지역변수가 아님

- 변수 선언 여러번 가능함

* 호이스팅: JavaScript에서 변수와 함수 선언이 코드 실행 전에 최상단으로 끌어올려지는 현상

=> var은 비권장

// var의 변수 호이스팅
console.log(a); // undefined
var a = 10;
console.log(a); // 10

 

◈ let 변수

- ES6에서 도입된 블록 단위의 변수 선언 방식으로 호이스팅을 지원하지 않음 ( 유효 범위가 블록 단위 )

- 권장되는 변수 선언 방식

 

◈ const 변수

- 값 변경이 불가 => 상수를 선언할 때 주로 사용

- 블록 단위 범위(scope)를 가짐

- 참조 변수의 경우 참조는 변경 불가하지만 필드는 변경 가능함

const user = { name: 'bia', age: 5 };
user.name = 'Bia';
console.log(user.name); // Bia
user = { name: 'darong', age: 6 }; // 에러

 

[3] 기본 파라미터와 가변 파라미터

◈ 기본 파라미터(Default Parameter)

- 함수 호출때 인수 생략시 가지는 기본값을 지정하는 방식으로, 반드시 뒷부분에서만 지정 가능함

function sum(x, y = 0) {
  return x + y;
}
console.log(sum(3));    // 3

 

◈ 가변 파라미터(Rest Parameter)

- 함수 호출때 전달하는 파라미터 개수를 가변적으로 사용 가능

- 매개변수 앞에 ...을 지정하여 사용하며, 마지막 매개변수 1개에만 지정 가능

function userInfo(name, age, ...favoriteColors) {
  console.log(`name: ${name}`);
  console.log(`age: ${age}`);
  console.log(favoriteColors);
}
userInfo('bia', 5, 'pink', 'green', 'skyblue');

name: bia

age: 5

[ 'pink', 'green', 'skyblue' ]

 

[4] 구조분해 할당

◈ 구조분해 할당(Destructing Assignment)

- 배열, 객체 값 추출 => 한번에 여러 변수에 할당

// 구조분해 할당 예제

let arr = [10, 20, 30, 40];

let [el1, el2, el3] = arr;

console.log(el1, el2, el3); // 10 20 30

let user = { name: '홍길동', age: 20, gender: 'M' };

let { name: n, age: a, gender } = user;

console.log(n, a, gender); // 홍길동 20 M

 

[5] 화살표 함수

◈ 화살표 함수의 형식

- 기존 함수 표현식 간결화 

- 함수 본체가 한줄 문장인 경우 => 중괄호( { } ) 생략, return 생략 가능 (자동 리턴)

// 화살표 함수 예제

const sum1 = function (a, b) {

  return a + b;

};

// 화살표 함수

const sum2 = (a, b) => {

  return a + b;

};

const sum3 = (a, b) => a + b;

 

◈ 자바스크립트의 this

- 메서드/함수 호출될때마다 현재 호출중인 메서드 보유한 객체가 this 가 됨

- 현재 호출중인 메서드 가진 객체 없으면 전역 객체가 this가 됨

  * 전역 객체: 브라우저에서는 window 객체를 의미

// this 예제

let obj = {

  result: 0,

};

obj.add = function (x, y) {

  this.result = x + y;

};

let add2 = obj.add;

console.log(add2 === obj.add); // true 동일한 함수임

add2(3, 4); // 전역변수 result에 7 할당됨

console.log(obj); // {result: 0}

console.log(result); // 7

◈ 자바스크립트의 this 지정

- bind(): 지정한 객체 this로 미리 연결(binding)한 새로운 함수 리턴 / this가 아예 바뀜

- apply(), call(): 지정한 객체 this로 연결한 후 함수 직접 호출 / 이번 한번만 this로 바뀜

// JS의 this를 지정하는 예제

let add = function (x, y) {

  this.result = x + y;

};

let obj = {};

add.apply(obj, [3, 4]);

console.log(obj); // {result: 7}

add.call(obj, 1, 2);

console.log(obj); // {result: 3}

add = add.bind(obj);

add(3, 4);

console.log(obj); // {result: 7}

◈ 화살표 함수에서의 this

- 함수 정의하는 영역의 this 그대로 전달

let obj = { result: 0 };

obj.add = function (x, y) {

  function inner() {

    this.result = x + y; // 여기서 this는 window

  }

  inner();

};

obj.add(1, 2);

console.log(obj); // {result: 0}

console.log(result); // 3

obj.add2 = function (x, y) {

  function inner() {

    this.result = x + y;

  }

  inner = inner.bind(this); // this가 obj 가리키도록 지정

  inner();

};

 

obj.add2(2, 3);

console.log(obj); // {result: 5}

obj.add3 = function (x, y) {

  const inner = () => {

    this.result = x + y;

  };

  inner();

};

 

obj.add3(3, 4);

console.log(obj); // {result: 7}

 

[6] 새로운 객체 리터럴 

◈ ES6 객체 리터럴

- 변수명과 객체 속성명이 일치하면 변수명만 제시가능

- 메서드의 경우 function 키워드 없이 바로 선언 가능

let name = '홍길동';

let age = 20;

let address = '서울시';

let objOld = { name: name, age: age, address: address };

let objES6 = { name, age, address: address };

console.log(objES6); // { name: '홍길동', age: 20, address: '서울시' }

 

let product1 = {

  name: '노트북',

  price: 20000,

  quantity: 2,

  order() {

    if (!this.amount) this.amount = this.quantity * this.price;

    console.log('주문금액: ' + this.amount);

  },

};

product1.order(); // 주문금액: 40000

[7] 템플릿 리터럴

◈ 템플릿 리터럴(Template Literal)

- ` `(백틱)으로 묶인 문자열에서 템플릿 대입문 ${표현식}으로 동적으로 문자열 끼워 구성함

- 개행문자 포함가능

- 여러줄 작성 가능

 

[8] 모듈

◈ ES6 모듈

- 모듈: JS 코드 포함하고 있는 파일, import, export 로 모듈 가져오기/내보내기 가능

- 모듈 내부에 선언된 모든 변수/함수/객체/클래스는 로컬(local)

- export : 여러개 값/함수 내보낼 때 사용, import 할 때 반드시 동일한 이름으로 가져와야 함 (as로 이름 바꿀 수 있음)

- export default : 하나의 값/함수만 내보낼 때 사용, import 할 때 이름 자유롭게 설정 가능

예제 01)

let base = 100;

const add = (x) => x + base;

const multiply = (x) => x * base;

const getBase = () => base;

export { add, multiply };

export default getBase;

 

또는

let base = 100;

export const add = (x) => x + base;

export const multiply = (x) => x * base;

export default () => base;

 

로 모듈을 내보내고,

import getBase, { add } from './ex02-19.js';

console.log(add(200)); // 300

로 원하는 모듈만 가져오면 됨

 

[9] Promise

◈ Promise 객체

- 비동기 처리 지원

- 오류 처리는 resolve, reject 이용

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    let num = parseInt(Math.random() * 10);
    if (num >= 5) {
      reject('생성된 숫자가 5 이상 - ' + num);
    }
    resolve(num);
  }, 2000);
});

p.then((result) => {
  console.log('처리결과: ', result);
}).catch((e) => {
  console.log('오류: ', e);
});

console.log('##Promise 객체 생성');

시행결과_오류발생

 

[10] 전개연산자 

◈ 전개연산자(spread operator)

- ...연산자 => 객체/배열 요소를 분해된 값으로 전달, 기존 값 복사 또는 새로운 항목 추가시 사용

let arr1 = [10, 20, 30];
let arr2 = [...arr1, 40];
console.log(arr2); // [ 10, 20, 30, 40 ]

 

[11] Proxy

◈ Proxy

- 객체 속성을 읽거나 설정하는 작업을 가로채기 위해 래핑할 수 있도록 하는 객체

- 반응성(reactivity) 지원을 위함