ES2015(이하 ES6)란?

ECMAScript의 표준 ECMA-262의 6번째 에디션을 의미 출처 : 웹Frameworks

  • ECMAScript 2015의 줄임말 => ES2015
  • 6번째 표준이라 ES6라고도 함.

왜 필요한가?

  • 라이브러리들이 최신 언어 명세를 이용해서 작성됨.(예: React.js)
    • 특히 React는 JSX문법을 사용하기 때문에 Babel도 필요함.
  • 표준을 따라가는 것.
  • 편안함.

사용방법

  1. 브라우저에서 그냥 사용
    • 최신 브라우저의 경우 대부분 지원하지만 100%지원이 아님.
  2. Transpiler(Babel) 사용

문법소개

let

var를 대신하는 let키워드는 Block Scope.

예제 - 출처 MDN

function varTest() {
    var x = 31;
    if (true) {
        var x = 71;  // same variable!
        console.log(x);  // 71
    }
    console.log(x);  // 71
}

function letTest() {
    let x = 31;
    if (true) {
        let x = 71;  // different variable
        console.log(x);  // 71
    }
    console.log(x);  // 31
}

const

const는 다른 언어의 constant(상수)와 같음. => 수정 불가.

Example

const MY_NUMBER = 1;
MY_NUMBER = 2; // Assignment Error
const MY_NUMBER = 2; // Declare Error

Class

  • ES6부터 class가 도입되었습니다.
  • class함수입니다.

    Class는 사실 함수입니다. 함수를 함수 표현식과 함수 선언으로 정의할 수 있듯이 class 문법도 class 표현식과 class 선언 두 가지 방법을 제공합니다.

class MyClass {} // Class 선언
let MyClass = class {} // Class 표현식
  • 주의 : 클래스는 호이스팅이 일어나지 않습니다.

    함수 선언과 클래스 선언의 중요한 차이점은 함수 선언의 경우 호이스팅이 일어나지만, 클래스 선언은 그렇지 않다는 것입니다. 클래스를 사용하기 위해서는 클래스를 먼저 선언 해야 하며, 그렇지 않으면, 다음 아래의 코드는 ReferenceError 에러를 던질 것입니다.

var p = new Polygon(); // ReferenceError

class Polygon {}

자세한 내용보기 : 출처 - MDN

Template String

  • Multi-line String
    console.log('string text line 1
    string text line 2'); // Error
    console.log(`string text line 1
    string text line 2`); // OK
    

    이 블로그 테마에서 Template String 문법이 적용이 안돼서 Syntax Highlighting이 정상적으로 적용되지 않는 것입니다.(JSX도 지원되지 않습니다.) 실제 코드에서 문제 없습니다.

  • Expression Interpolation

    `에 주의하세요 ‘이 아닙니다.

let name = "Taesu Hyeon";
console.log("My name is " + name); // My name is Taesu Hyeon
let name = "Taesu Hyeon";
console.log(`My name is ${name}`); // My name is Taesu Hyeon

Arrow Function

  • 짧은 함수
  • 바인딩 되지 않은 this
    • this에 관한 엄격 모드 규칙 무시.
  • 바인딩 되지 않은 arguments
    • 자신의 arguments 객체가 없어서 나머지 매개변수로 대체.
  • 생성자로 사용 안됨. new와 함께 사용 안됨.
  • 파라미터와 화살표 사이에 개행문자 포함 가능.
  • 평범한 함수와 비교해서 operator precedence와 다르게 반응함. ()로 묶어줘야함.
    let callback;
    callback = callback || function() {}; // ok
    callback = callback || () => {}; // SyntaxError: invalid arrow-function arguments
    callback = callback || (() => {});    // ok
    

    출처 : MDN

Syntax

Basic
(param1, param2, , paramN) => { statements }
(param1, param2, , paramN) => expression
          // 다음과 동일함:  => { return expression; }

// 매개변수가 하나뿐인 경우 괄호는 선택사항:
(singleParam) => { statements }
singleParam => { statements }

// 매개변수가 없는 함수는 괄호가 필요:
() => { statements }
Advanced
// 객체 리터럴 식을 반환하는 본문(body)을 괄호 속에 넣음:
params => ({foo: bar})

// 나머지 매개변수 및 기본 매개변수가 지원됨
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, , paramN = defaultValueN) => { statements }

// 매개변수 목록 내 비구조화도 지원됨
var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

Example

// ES5
var myFunction = {
    funcLog: function(msg) {
        return msg;
    }
};
// ES6
let myFunction = {
    funcLog: msg => msg
};

myFunction.funcLog('hi'); // hi

Import

Syntax

import name from "module-name"; // export default로 export한 멤버를 name에 받음.
import * as name from "module-name"; // export되는 모든 멤버를 name에 받음.
import { member } from "module-name"; // export된 멤버 member를 member로 받음.
import { member as alias } from "module-name"; // export된 멤버 member를 alias로 받음.
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as alias from "module-name";
import defaultMember from "module-name";
import "module-name"; // import만 하면 되는 경우 ex) import "main.css";

Export

Syntax

export { name1, name2, , nameN };
export { variable1 as name1, variable2 as name2, , nameN };
export let name1, name2, , nameN; // 또는 var
export let name1 = , name2 = , , nameN; // 또는 var, const

export default expression;
export default function () {  } // 또는 class, function*
export default function name1() {  } // 또는 class, function*
export { name1 as default,  };

export * from ;
export { name1, name2, , nameN } from ;
export { import1 as name1, import2 as name2, , nameN } from ;
  • Default export스크립트 당 단 하나만 존재 가능.
  • export defaultver, let, const 사용 불가.

    default export의 경우, 모듈 당 딱 하나의 default export가 있습니다. default export는 함수 또는 클래스, 오브젝트, 혹은 다른 것들이 될 수 있습니다. 이값은 가장 간단하게 import 할 수 있도록 하기 때문에 내보낼 값 중 “메인”에 해당하는 값으로 고려해야합니다. 출처 : MDN - export

Spread Operator

Example

var arrayOne = [2];
var arrayTwo = [1].concat(arrayOne, [3]); // ES5
var arrayTwo = [1, ...arrayOne, 3]; // ES6
console.log(arrayTwo); // [1, 2, 3]
let objOne = { one: 1 };
let objTwo = Object.assign({}, objOne); // ES5
let objTwo = { ...objOne, two: 2 }; // ES6
console.log(objTwo); // Object {one: 1, two: 2}

Promises

Async Await

참고

immer는 객체 비구조화 문법(Object Destructuring)을 사용하면 동작하지 않는다.

## [immer](https://github.com/immerjs/immer)는 객체 비구조화 문법(Object Destructuring)을 사용하면 동작하지 않는다.아래는 redux에서 reducer쪽 immutable state를 immer...… Continue reading

2019 카카오 FE(Front-end) Meetup

Published on September 16, 2019

2019 카카오 개발자 컨퍼런스

Published on September 11, 2019