ES5 and ES6

ES5 and ES6

기본 매개 변수 (Default Parameters)

var sum = function (x, y, z) {
  var x = x || 21;
  if (y === undefined) y = 7;
  if (z === undefined) z = 42;

  return x + y + z;
}

ES5에서는 함수의 인자값에 대한 default 처리를 위해 위와 같이 했다면, ES6에서는 아래와 같이 간단히 처리할 수 있다.

var sum = function(x = 21, y = 7, z = 42) {
  return x+y+z;
}

Rest parameter

ES6에서는 정해지지 않은 수(an indefinite number) 인수를 배열로 나타낼 수 있습니다.

function sum(...args) {
  return args.reduce((previous, current) => {
    return previous + current;
    })
}

console.log(sum(1,2,3));    // 6
console.log(sum(1,2,3,4));  // 10

Template Literals

var customer = { name: 'Foo' };
var card = { amount: 7, product: 'Bar', price: 42 };
var message = 'Hello ' + customer.name + ',\n'
  + 'want to buy ' + card.amount + ' ' + card.product + ' for \n'
  + 'a total of ' + (card.amount * card.price) + ' bucks?';

ES5에서는 멀티라인 문자열을 처리하기 위해 위와 같은 방법들을 사용하였습니다. ES6에서는 ``` (Back-ticked) 문자열을 이용해 간단히 처리할 수 있습니다.

var customer = { name: 'Foo' };
var card = { amount: 7, product: 'Bar', price: 42 };
var message = `Hello ${customer.name},
  want to buy ${card.amount} ${card.product} for
  a total of ${card.amount * card.price} bucks?`;

Block-scoped variables & functions

var는 function-scoped이고, let과 const는 block-scoped 입니다. var과 달리 let과 const는 변수 재선언이 불가능 하다는 공통점이, let은 변수를, const는 상수를 선언할 때 사용된다는 차이점이 있습니다.

ES6에서는 let과 const 키워드를 통해 중괄호 {} 로 정의된 블록으로 유효 범위(Scope)를 지정할 수 있습니다.

// 이미 생성된 변수 이름으로 재선언하였지만, 아무런 문제가 발생하지 않는다
var name = 'test'
var name = 'test2'

// let
let age = '29'
let age = '30'  // Uncaught SyntaxError: Identifier 'age' has already been declared
age = '31'    // 재할당 가능

// const
const gender = 'female'
const gender = 'male' // Uncaught SyntaxError: Identifier 'gender' has already been declared
const = 'unknown' // Uncaught TypeError: Assignment to constant variable

Arrow functions

화살표 함수는 항상 익명 함수이며, this의 값을 현재 문맥에 바인딩 시킵니다.

// ES5
var self = this
this.nums.forEach(function (v) {
  if (v % 5 === 0)
    self.fives.push(v)
});

//ES6
this.nums.forEach((v) => {
  if (v % 5 === 0)
    this.fives.push(v)
});

또한, 화살표 함수가 한 줄의 명령문과 함께 사용되면 표현식이 되어 명령문의 결과를 암시적으로 반환하게 됩니다. 또한, 2개 이상의 인자를 사용하는 경우엔 변수 목록을 ()로 감싸주어야 합니다.

// ES5
odds = evens.map(function (v) { return v + 1 })
pairs = evens.map(function (v) { return { even: v, odd: v + 1 } })
nums = evens.map(function (v, i) { return v + 1 })

// ES6
odds = evens.map(v => v + 1);
pairs = evens.map(v => ({ even : v, odd: v + 1 }))
nums = evens.map((v, i) => v + i)

Classes

var Shape = funcction (id, x, y) {
  this.id = id;
  this.move(x, y);
};
Shape.prototype.move = function (x, y) {
  this.x = x;
  this.y = y;
};

ES6에는 class 키워드가 추가되어 ES5의 prototype 기반의 상속 방식보다 명확하게 class를 정의할 수 있습니다.

class Shape {
  constructor (id, x, y) {
    this.id = id
    this.move(x, y)
  }

  move (x, y) {
    this.x = x
    this.y = y
  }
}

class Circle extends Shape {  // class Inheritance
  constructor (id, x, y, radius) {
    super(id, x, y)
    this.radius = radius
  }
}

constructor는 class 내부에 하나만 존재할 수 있습니다. get, set, static 키워드를 사용해 메소드를 정의하는 것도 가능합니다. 또한, 상속 역시 가능하며 부모 생성자를 호출하기 위해 super()를 사용할 수 있습니다.

[ES6 with Babel] 아직 모든 브라우저에서 완전하게 ES6를 지원하지 않기 때문에, Babel과 같은 컴파일러를 사용해야 합니다.

Ref

Share on: