VUE와 ES6

ES6는 ECMAScript 2015와 같은 의미로, ECMAScript의 6번째 주 버전을 발표한 것.

let과 const

let

• let는 호이스팅(hoisting) 문제 해결
• 지역스코프와 전역스코프를 분리하여 서로의 스코프를 침범하지 않음.

//호이스팅
console.log(a); //결과 : undefined
var a = 10;

console.log(b); //결과 : Uncaught ReferenceError: b is not defined
let b = 10;

========================================================================

//스코프1 : 중복선언 방지
var a = 10;
var a = 20;
console.log(a); //결과 : 20

let a = 10;
let a = 20;
console.log(a); //결과 : Uncaught SyntaxError: Identifier 'a' has already been declared

========================================================================

//스코프2 : 값의 보장
var a = 10;
{
    var a = 20;
    console.log(a); //결과 : 20
}
console.log(a); //결과 : 20

let a = 10;
(function(){
    let a = 20;
    console.log(a);
})(); //결과 : 20

console.log(a); //결과 : 10

*호이스팅(hoisting)이란, 변수나 함수가 선언되기 전에 미리 최상위에 끌어올려져 해당 변수명이 등록만 되어있는 상태로 값을 출력하려고 할때 undefined 를 출력함.
* undefined 는 변수는 존재지만 값이 대입되지 않은 상태를 의미.

const

const는 상수를 정의할 때 사용하는 것으로, 불변하는 값을 선언하기 위한 키워드.

• 반드시 초기화 되어야 함.
• 대입을 다시하려고 할 때 오류발생
• 상수값이 객체 또는 배열일 경우 프로퍼티 수정가능.

const a;
a = 10;
console.log(a); //결과 : Missing initializer in const declaration

object 나 array타입의 변수일 경우, 값 할당 가능.
const a = {};
const c = [];
a.b = 10;
c.push(30);
console.log(a.b); //10
console.log(c); //[30]

scope 와 closure

scope

var로 선언된 변수의 유효범위는 함수단위로 구분되어 짐.

var num = 10;
function result() {
  var num = 20; //같은 변수명을 함수내부에 선언했을 때 result안에서만 유효.
  console.log(num);
}
result(); //결과 : 20
console.log(num); //결과 : 10

let과 const의 유효범위는 {}단위로 구분되어 짐.

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

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

//const
const num = 10;
const result = () => {
  const num = 20;
  console.log(num); //결과 : 20, 같은 이름으로 상수생성이 가능.
};
console.log(num); //결과 : 10

Arrow 함수

함수의 축약법으로 일반함수(function)와 차이가 있음.

• this 값이 함수를 정의할 때 결정
• arguments 변수가 없음.
• 생성자로 사용할 수 없음. (new 키워드 X)
• yield 키워드 사용할 수 없음.

Arrow 함수 표현식

//일반함수
var square = function(x) {
  return x * x;
};
//arrow함수[인자1개]
var square = x => {
  return x * x;
};
//arrow함수[여러개의 인자]
var square = (x, y, z) => {
  return x * y * z;
};

Arrow 함수 작성방법

• 인수가 한 개이면, 괄호 생략가능(인수가 없으면 괄호생략 불가)

var square = x => {
  return x * x;
};

• 몸통 안에 return뿐이면 중괄호와 return 키워드 생략가능.

var square = x => x * x;

• return 뿐이라도 반환값이 객체리터럴이면 ()로 묶어야 함.

var square = x => ({ x: a, y: b });

• 즉시실행함수(IIFE)

(x => x * x)(3);

객체 리터럴

기존 객체 정의 방식에서 간결하게 표현할 수 있도록 개선됨.

//속성 축약법
import swiper from "./swiper";
var interaction = {
  //swiper : swiper
  swiper, //속성의 이름을 동일하게 유지할 경우 한번만 정의하면 됨.
  slider: swiper //와 같이 서로 다르게 명명하고자 할 경우는 모두 선언해야함.
};

//메서드 축약법
var obj = {
  // message : function(){
  //     return 'hello';
  // }
  message() {
    //와 같이 선언가능.
    return "hello";
  }
};

스프레드 오퍼레이터

객체와 배열의 병합.

//객체
var obj = {
  a: 10,
  b: 20
};
var obj2 = {
  a: 20,
  c: 30
};
obj2 = { ...obj, ...obj2 }; //간단하게 객체를 복제&병합함.
console.log(obj2); //결과 : {a: 20, b: 20, c: 30}

//배열
var arr = [1, 2, 3];
var arr2 = [3, 4, 5];
arr2 = [...arr, ...arr2];
console.log(arr2); //결과 : [1, 2, 3, 3, 4, 5]

나머지 매개변수
* 기존 arguments는 유사배열로 배열형태 변환을 한번 거쳐야 함.

function f(a, b, ...args) {
  console.log(a, b, args); //1 2 [3 4 5 6]
  //여기서 args는 배열타입
}
f(1, 2, 3, 4, 5, 6);

템플릿 리터럴

변수에 문자열을 여러줄로 작성 : `(백틱)

var str = `
안녕하세요! 
         백틱으로 문자열을 정의해볼께요.
`;
console.log(str); //결과 :
//안녕하세요!
//         백틱으로 문자열을 정의해볼께요.

문자열안에 변수 및 계산식사용.

var msg = "hello~";
var str = `${msg} world!!`;
console.log(str); //결과 : hello~ world!!

var msg = "hello~";
var str = `${msg.split("")} world!!`;
console.log(str); //결과 : h,e,l,l,o,~ world!!

디스트럭처링

일명 구조분해문법이라 하며 객체와 배열에 사용.

//객체
var obj = {
  a: 10,
  b: 20,
  c: 30
};
var { a, b, c } = obj; //같은 유형의 객체형태로 한번에 값 할당이 가능.
console.log(a, b, c); //결과 : 10 20 30

//배열
var arr = ["apple", "banana"];
var [fruit1, fruit2] = arr;
console.log(fruit1, fruit2); //결과 : apple banana

//인수의 구조분해
var obj = {
  a: 10,
  b: 20,
  c: 30
};
function test({ b }) {
  //특정 속성을 골라 인자로 받으면 함수내부에 정의한 듯이 사용가능.
  console.log(a); //결과 : Uncaught ReferenceError: a is not defined
  console.log(obj.a); //결과 : 10
  console.log(b); //결과 : 20
}
test(obj);

import & export

기존의 자바스크립트에 모든 것을 공유하는 방식은 더 복잡해지고 대규모 애플리케이션에서는 충돌과 보안상의 어려움이 있었음.
이것을 해결하기 위해 모듈을 도입하여 모듈 내에 만들어진 변수들은 모듈의 최상위에만 존재, 외부에서 사용하기 위해서는 모듈에서
export 해야됨.

• 모듈의 최상위에서 this값은 undefined임.
• 모듈 코드내에서 HTML스타일의 주석을 허용하지 않음.

import

• 한개 또는 여러개의 바인딩 임포트 가능.
• 전체를 임포트 할 수 있음.

import {* as example} from 'path';

• import 때 이름 재정의 가능.

import { add as sum } from "path";

• export와 import 선언은 모듈의 최상위 수준에서 선언가능.

export

• export 되는 함수나 클래스는 이름이 필요.
  (export default 로 선언되면 익명함수나 클래스 선언가능.)
• 새로운 이름을 명시할 수 있음.

//import할 때 export add == import add 이름이 같아야 함.
export { sum as add };
import { add } from "path";

모듈 기본값(default)

• 모듈마다 하나의 익스포트 기본값을 설정할 수 있음. (여러개의 익스포트 기본값을 설정할 때 에러발생)
• 기본값을 import할 때는 중괄호({})가 필요없음.

import example from "path";

• 기본값으로 지정된 바인딩과 아닌 바인딩을 동시에 명시할 수 있음. (단, 기본값이 먼저 선언되어야 함.)

import example, {sum, multiply} from 'path'
      --------- ---------------
        기본값      기본값X

기타사용법

• 바인딩된 모듈을 다시 익스포트 하기

//기존 문법
import {sum} from 'path'
export {sum}
        ==
export {sum} from 'path'
        or
export {sum as add} from 'path' //sum으로 import되고 add로 익스포트 됨.
export * from 'path' //다른 모듈에 모두 익스포트하고 싶다면

this

실행환경을 소유한 소유자의 객체에 this를 바인딩함. ###일반함수의 this

function outer() {
  console.log(this); //window
}
outer();

중첩함수의 this

function outer() {
  function inner() {
    console.log(this); //window
  }
  inner();
}
outer();

메서드의 this

function outer() {
  console.log(this); //outer
}
var out = new outer(); //인스턴스의 this는 생성자 outer가 됨.

메서드 내부 중첩 함수의 this

function outer() {
  console.log(this); //outer
  function inner() {
    console.log(this); //window
  }
  inner();
}
var out = new outer(); //인스턴스의 this는 생성자,
//중첩함수는 인스턴스로 인한 호출이 아니므로 이곳의 this는 window

Object 내부 함수의 this

var obj = {
  outer: function() {
    console.log(this); //obj
  }
};
obj.outer(); //무엇의 의해 호출되었을 때의 this는 호출한 객체가 됨.

Object 내부 중첩함수의 this

var obj = {
  outer: function() {
    console.log(this); //outer
    function inner() {
      console.log(this); //window
    }
    inner();
  }
};
obj.outer(); //obj
//inner함수는 객체의 의해 호출된 것이 아니므로 this가 window임.

이벤트 리스너의 this

var btn = document.querySelector("button");
btn.addEventListener(
  "click",
  function() {
    console.log(this); //btn
    //객체의 의한 호출이므로 여기서의 this는 btn임.
  },
  false
);

arrow함수의 this

arrow함수는 부모가 바라보는 this를 따라감.

일반함수의 this

var outer = () => {
  console.log(this); //window
  //최상위 함수의 this는 window임.
};
outer();

중첩함수의 this

var outer = () => {
  console.log(this); //window
  var inner = () => {
    console.log(this); //window
    //부모 outer가 window이기 때문에 inner도 window임.
  };
  inner();
};
outer();

메서드 내부 중첩 함수의 this

function outer() {
  console.log(this); //outer
  var inner = () => {
    console.log(this); //outer
    //생성자 함수로 인한 선언은 생성자가 됨.
    //즉, inner arrow함수의 this도 생성자 outer가 됨.
  };
  inner();
}
var out = new outer();

Object 내부 함수의 this

var obj = {
  outer: () => {
    console.log(this); //window
    //잘 기억해보세요. arrow함수는 부모의 this를 따라가요!
    //arrow함수가 따라갈 부모가 없으므로 this는 window가 됨.
  }
};
obj.outer();

Object 내부 중첩함수의 this

var obj = {
  outer: () => {
    console.log(this); //window
    var inner = () => {
      console.log(this); //window
      //부모가 window이므로 내부함수의 this도 window임.
    };
    inner();
  }
};
obj.outer();

이벤트 리스너의 this1

var btn = document.querySelector("button");
btn.addEventListener(
  "click",
  () => {
    console.log(this); //window
    //일반함수 였다면 호출한 객체가 this값이 었겠지만
    //arrow함수는 무조건 부모를 따라감.
  },
  false
);

이벤트 리스너의 this2

var obj = {
  outer: function() {
    console.log(this); //객체내부 일반함수의 this는 객체.
    var btn = document.querySelector("button");
    btn.addEventListener(
      "click",
      () => {
        console.log(this); //객체 obj
        //객체내부로 이벤트리스너가 들어왔을때
        //부모를 따라 this가 obj가 됨.
      },
      false
    );
  }
};
obj.outer();

• async & await (ECMA2017) 비동기 반복문에 사용

(async()=>{
    const promises = ['1000','2000','3000'].map((timer)=>(
        new Promise((res, rej) = > {
            setTimeout(()=>res(timer), timer);
        })
    ));
    for await (const result of promises){
        console.log(result);
    }
})();

* async와 for of문으로 보여주는 사용 예