ES6 문법 개요

ES6 문법 1. let과 const

ES6부터 나온 새로운 변수 선언 키워드이다. let과 const는 block scope를 가진다.

const는 변경되지 않는 상수를 표현할 때 사용한다.

function foo() {
  if (true) {
    let a = 'bar';
  }

  console.log(a);
}

foo();
// Uncaught ReferenceError: a is not defined

ES6 문법 2. Arrow function

const a = () => {
  console.log("arrow function");
}
a();

const print = text => {
  console.log(text);
}
// 파라미터가 1개일땐 괄호 생략 가능

const sum = (a, b) => (a + b)
// 간단한 표현식만을 반환 할때는 return 생략 가능

this를 바인딩 하지 않는다.

func1의 this = Foo ( 메소드 실행 문맥 )

func3의 this = Window ( 함수 실행 문맥 )

( TODO : 왜 이렇게 되는지 이해가 잘 안된다. context 영역에 대한 공부가 필요 )

function Foo() {
  this.func1 = function() {
  	console.log(this);
    // this === Foo
  }
  
  this.func2 = function() {
  	var func3 = function() {
    	console.log(this);
      // this === Window (global)
    }
    func3();
  }
}

var foo = new Foo();
foo.func1();
foo.func2();

무튼 ES6에서는 다음과 같이 작성하면 된단다.

function Foo() {
  this.func1 = function() {
    console.log(this);
    // this === Foo
  }

  this.func2 = function() {
    var func3 = () => {
      console.log(this);
      // this === Foo
    }
    func3();
  }
}

var foo = new Foo();
foo.func1();
foo.func2();

ES6 문법 3. Template literal

ES5

var name = "Hudi";
var job = "developer";

console.log("제 이름은 " + name + " 이고, 직업은 " + job + " 입니다.");
//제 이름은 Hudi 이고, 직업은 developer 입니다.

쓰기도 불편하고 가독성도 떨어짐

ES6

const name = "Hudi";
const job = "developer";

console.log(`제 이름은 ${name} 이고, 직업은 ${job} 입니다.`);
//제 이름은 Hudi 이고, 직업은 developer 입니다.

또 다른 특징은 공백과 개행을 그대로 표현해준다.

const name = "Hudi";
const job = "developer";

const msg = `제 이름은 ${name} 이고
직업은 ${job} 입니다.`;

console.log(msg);
/*
제 이름은 Hudi 이고
직업은 developer 입니다.
*/

ES6 문법 4. 비구조화 할당 ( destructuring assignment )

객체 안의 필드를 손쉽게 꺼내어 변수로 대입할 수 있는 문법이다.

ES5

var hudi = {
  name: "조동현",
  job: "developer",
  skills: ["ES6", "React", "node.js"]
}

var name = hudi.name;
var job = hudi.job;

console.log(name, job); // 조동현 developer

ES6

const hudi = {
  name: "조동현",
  job: "developer",
  skills: ["ES6", "React", "node.js"]
}

let { name, job } = hudi;
//비구조화 할당

console.log(name, job); // 조동현 developer

객체를 비구조화한 후 함수의 인자로 넘길 수 있다. ( 에러는 어떻게 잡지... ㅠㅠ)

const hudi = {
  name: "조동현",
  job: "developer",
  skills: ["ES6", "React", "node.js"]
}

function printSkills({skills}) {
  skills.map((skill) => {
    console.log(skill);
  });
}

printSkills(hudi);
/*
  ES6
  React
  node.js
*/

배열에서도 다음과 같이 사용할 수 있다. ( 참 자바스크립의 세계란... )

const languages = ["Javascript", "Python", "Java", "C#"];
const [first, second, third] = languages;

console.log(first, second, third);
//Javascript Python Java

ES6 문법 5. Enhanced object literals

ES5

var name = "조동현";
var job = "developer";

var hudi = {
  name: name,
  job: job
}

console.log(hudi);
//{name: "조동현", job: "developer"}

ES6

const name = "조동현";
const job = "developer";

const hudi = {
  name,
  job
}

console.log(hudi);
//{name: "조동현", job: "developer"}

key: value 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입된다.

ES6 문법 6. 간결한 메소드

ES5

var person = {
  name: "조동현",
  getName: function() {
    return this.name;
  }
}

console.log(person.getName());
//조동현

ES6

const person = {
  name: "조동현",
  getName() {
    return this.name;
  }
}

console.log(person.getName());
//조동현

ES6 문법 7. spread operator

배열의 내용을 조합할 때 쓰이는 ... 연산자이다.

ES5

var a = [1,2,3];
var b = [3,4];
var c = "끝";

var d = a.concat(b, c);

console.log(d);
//[1, 2, 3, 3, 4, "끝"]

ES6

const a = [1,2,3];
const b = [3,4];
const c = "끝";

const d = [...a, ...b, c];

console.log(d);
//[1, 2, 3, 3, 4, "끝"]

기존 배열은 그대로 두고, 수정된 배열을 만들고 싶을 때 전개 연산자를 사용할 수 있다. 아래의 예시를 살펴보자.

const a = [1,2,3,4,5];
const b = [...a].reverse();

console.log(`a: ${a}\nb: ${b}`);
/*
  a: 1,2,3,4,5
  b: 5,4,3,2,1
*/

배열의 나머지를 할당 받을 수 있는 키워드도 있다.... ( 자바스크립트 진짜 대단하다.... )

const a = [1,2,3,4,5,6];
let [first, second, ...rest] = a;

console.log(first, second, rest);
// 1 2 [3, 4, 5, 6]

ES6 문법 8. 클래스의 등장

객체의 메서드를 정의할 때는 프로토타입 안에 직접 정의를 했어야 했다.

ES5

function Person(name, job) {
  this.name = name;
  this.job = job;
}

Person.prototype.print = function() {
  console.log(this.job + " 직업을 가지고 있는 " + this.name + "씨");
}

var donghyun = new Person("조동현", "프론트엔드 개발자");

donghyun.print();
//프론트엔드 개발자 직업을 가지고 있는 조동현씨

ES6

나같이 자바에 익숙한 사람들에게느 ES5의 문법은 너무나도 낯설다. 하지만 이제는 다음과 같이 선언 할 수 있다.

class Person {
  constructor(name, job) {
    this.name = name
    this.job = job
  }

  print() {
    console.log(this.job + " 직업을 가지고 있는 " + this.name + "씨");
  }
}

var donghyun = new Person("조동현", "프론트엔드 개발자");

donghyun.print();
//프론트엔드 개발자 직업을 가지고 있는 조동현씨

ES6 문법 9. Default Parameter

ES6부터는 함수 파라미터의 기본값을 설정할 수 있다.

ES5

function foo(a, b, c) {
  console.log(a, b, c);
}

foo('a');
//a undefined undefined

ES6

function foo(a, b='b', c='c') {
  console.log(a, b, c);
}

foo('a');
//a b c

ES6 문법 10. 모듈

ES6에서는 export와 import 키워드로 모듈화 구현을 할 수 있게 되었다.

초기화 방법 1. 초기화와 동시에 export

export const someConst = 5;
export function sum(a, b) {
  return a + b;
}

초기화 방법 2. 선언된 객체의 export

const someConst = 5;
const sum = function(a, b) {
  return a + b;
};

export { someConst, sum };

import는 다음과 같이 하면 된다.

import { name1, name2 } from './module.js';

import * as module from './module.js';
module.name1;

하지만 이 문법은 아직 지원하지 않는 브라우저가 많아 babel 등의 트랜스 파일러를 사용해야 한다.