ES6 에 따른 Javascript의 변화

CUBE·2023년 10월 30일

ES6 바뀐 점 정리

일단 기본적으로 ES5 까지는 비 파괴적인 데이터 구조를 갖고 있고, 비 파괴적인 데이터 구조는데이터의 변형을 일으키지 않기 때문에 하더라도 데이터 구조가 메모리에 크게 영향을 주지 않았다. 하지만 컴퓨터의 성능은 갈수록 좋아지고 있고, 이제 이러한 웹 사이트에서 Javascript 의 데이터를 이용한다고 하더라도 페이지가 느리게 로딩 되거나 하지 않기 때문에 ES6 파괴적인 데이터를 가진 내장 Methods도 포함된다.

From var to const

ES5 에서는 var를 통해 변수를 선언했다. 그런 변수는 function-scoped 였고, sopces 속성을 갖는 것들이 함수 내부로 깊숙이 들어갈 수 있었다. 그렇기 때매 var는 가끔 혼란스럽게 동작했다.

var x = 3;
function func(get_number){
	if(get_number){
		var x = Math.random(); 
		return x;
	} // scope end point
	return x; 
}
func(false); // undefined

var x = 3;
function func(randomsize) {
  var x; // x선언
	if(randomsize) {
		x = Math.random();
		return x;
	} // scope end point
	return x;
}
func(false); // undefined

javascript의 초기 코드인 var를 let과 const로 맹목적으로 변경할 수 없다.

let x = 3;
function func(randomsize) {
  if (randomsize) {
    let x = Math.random();
    return x;
  }
  return x;
}
func(false);

// Uncaught SyntaxError: Identifier 'x' has already been declared

core 조언

상수를 선호한다.
값이 변하지 않는 모든 변수에 사용할 수 있다.
그렇지 않으면 값이 변경되느 변수의 경우 let을 사용한다.
var를 피한다.

From IIFEs to blocks

변수 범위를 블록으로 제한하는 패턴

(function () {  // open IIFE
    var tmp = ···;
    ···
}());  // close IIFE

console.log(tmp); // ReferenceError


ES6에서 쉽게 block과 let을 선언(혹은const 선언)을 사용할 수 있습니다.

```jsx
{  // open block
    let tmp = ···;
    ···
}  // close block
console.log(tmp); // ReferenceError

From concatenating strings to `template literals`

ES6를 통해 문자열을 보간하거나, 다양한 형태의 결괏값을 리터럴하여 인자로 사용할 수 잇다.

String interpolation (문자열 보간)

ES5

function printCoord(x, y) {
    console.log('('+x+', '+y+')');
}

ES6

function printCoord(x, y) {
    console.log(`(${x}, ${y})`);
}

Multi-line strings

ES5 Template literal

var HTML5_SKELETON =
    '<!doctype html>\n' +
    '<html>\n' +
    '<head>\n' +
    '    <meta charset="UTF-8">\n' +
    '    <title></title>\n' +
    '</head>\n' +
    '<body>\n' +
    '</body>\n' +
    '</html>\n';

ES6 Template literal

  const HTML5_SKELETON = `
  <!doctype html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title></title>
  </head>
  <body>
  </body>
  </html>`;

(예는 공백을 포함하는 양에 차이가 있지만, 이 경우에는 상관이 없습니다.)

백슬래시를 통해 새 줄을 빠져나오면 상황이 좀 나아집니다

var HTML5_SKELETON = '\
      <!doctype html>\n\
      <html>\n\
      <head>\n\
          <meta charset="UTF-8">\n\
          <title></title>\n\
      </head>\n\
      <body>\n\
      </body>\n\
      </html>';

From function expressions to arrow functions

B코드에 접근하기 위한 A코드 구현

function UiComponent() {
    var _this = this; // (A)
    var button = document.getElementById('myButton');
    button.addEventListener('click', function () {
        console.log('CLICK');
        _this.handleClick(); // (B)
    });
}
UiComponent.prototype.handleClick = function () {
    ···
};

ES6에서는 화살표 기능을 사용할 수 있다.

function UiComponent() {
    var button = document.getElementById('myButton');
    button.addEventListener('click', () => {
        console.log('CLICK');
        this.handleClick(); // (A)
    });

ES6에서는 constructor 함수 대신 클래스를 사용할 수 있는 옵션도 있다.
화살표 기능은 식의 결과만 반환하는 짧은 콜백에 특히 유용합니다.

var arr = [1, 2, 3];

var squares = arr.map(function (x) { return x * x });

ES6에서 화살표 기능은 훨씬 더 간결합니다:

const arr = [1, 2, 3];
const squares = arr.map(x => x * x);

매개 변수를 정의할 때 매개 변수가 단일 식별자일 경우 괄호를 생략할 수도 있으므로,
(x) => x x => x x 모두 허용됩니다.

Handling multiple return `values`

함수나 methods는 배열이나 객체를 통해 여러 개의 값을 반환한다. ES5에서는 항상 중간 변수를 생성해야 합니다. ES6에서는 파괴를 통해 중간 변수를 피할 수 있다.

Multiple return values via arrays
- exec()은 Array-like 개체를 통해 caputer된 그룹을 반환한다. ES5에서는 그룹에만 관심이 있더라도 중간 변수(아래 예제의 matchObj)가 필요한다:
```
var matchObj =
    /^(\d\d\d\d)-(\d\d)-(\d\d)$/
    .exec('2999-12-31');
var year = matchObj[1];
var month = matchObj[2];
var day = matchObj[3];
```
- ES6에서 파괴하면 이 코드가 더 간단해집니다:
```
const [, year, month, day] =
    /^(\d\d\d\d)-(\d\d)-(\d\d)$/
    .exec('2999-12-31');
```
- Array 패턴 시작 부분의 빈 슬롯은 Array 요소를 인덱스 0에서 건너뜁니다.

Multiple return valuesvia objects

ES5에서는 개체의 속성에만 관심이 있더라도 중간 변수(아래 예제의 propDesc)가 필요합니다. Methods: Object.getOwnPropertyDescriptor()는 속성에 여러 값을 포함하는 개체인 속성 을 한다.

var obj = { foo: 123 };

var propDesc = Object.getOwnPropertyDescriptor(obj, 'foo');
var writable = propDesc.writable;
var configurable = propDesc.configurable;

console.log(writable, configurable); // true true

ES6에서는 파괴 기능을 사용할 수 있다:

const obj = { foo: 123 };

const {writable, configurable} =
    Object.getOwnPropertyDescriptor(obj, 'foo');

console.log(writable, configurable); // true true

{writable, configurable} 은(는) 다음의 약자이다.
```
{ writable: writable, configurable: configurable }
```

From for to forEach() to for-of
- ES5 이전에는 Array를 다음과 같이 반복했습니다:
```
var arr = ['a', 'b', 'c'];
for (var i=0; i<arr.length; i++) {
    var elem = arr[i];
    console.log(elem);
}
```
- ES5에서는 Array method for Each():
```
arr.forEach(function (elem) {
    console.log(elem);
});
```
- A for loop은 각 루프가 간결하다는 장점이 있기 때문에 이 루프에서 벗어날 수 있습니다.
  ES6에서 for-of-loop은 다음 두 가지 장점을 모두 결합합니다:
```
```jsx
  const arr = ['a', 'b', 'c'];
  for (const elem of arr) {
      console.log(elem);
  }
```
```

각 배열 요소의 인덱스와 값을 모두 원하는 경우, for-of는 새 배열 메서드 항목()과 파괴 기능을 통해서도 사용할 수 있다.

    ```jsx
    for (const [index, elem] of arr.entries()) {
        console.log(index+'. '+elem);
    }
    ```

Handling parameter default values

ES5에서는 다음과 같이 파라미터에 대한 기본값을 지정한다.

function foo(x, y) {
    x = x || 0;
    y = y || 0;
    ···
}

ES6는 구문이 더 좋음:

function foo(x=0, y=0) {
    ···
}

추가적인 이점은 ES6에서 매개 변수 기본 값은 정의되지 않은 경우에만 트리거 되지만 이전 ES5 코드의 임의의 잘못된 값에 의해 트리거 된다는 의미 이다.

Handling named parameters

자바스크립트에서 파라미터를 명명하는 일반적인 방법은 객체 리터럴(options object pattern)을 통해서 입니다.

selectEntries({ start: 0, end: -1 });

이 접근법의 두 가지 장점은 코드가 더 자기 설명적이 되고 임의의 매개변수를 생략하기가 더 쉽다는 것입니다. ES5에서는 다음과 같이 SelectEntries()를 구현할 수 있습니다:

function selectEntries(options) {
    var start = options.start || 0;
    var end = options.end || -1;
    var step = options.step || 1;
    ···
}

ES6에서는 파라미터 정의에서 destructuring을 사용할 수 있으며 코드는 보다 간단해집니다:

function selectEntries({ start=0, end=-1, step=1 }) {
    ···
}

Making the parameter optional

ES5에서 파라미터 옵션을 옵션으로 만들려면 코드에 A라인을 추가합니다:

function selectEntries(options) {
    options = options || {}; // (A)
    var start = options.start || 0;
    var end = options.end || -1;
    var step = options.step || 1;
    ···
}

ES6에서 {}을(를) 매개 변수 기본값으로 지정할 수 있습니다:

function selectEntries({ start=0, end=-1, step=1 } = {}) {
    ···
}

From `arguments` to rest parameters

ES5에서 함수(또는 메서드)에서 임의 수의 인수를 허용하려면
특수 변수 인수를 사용해야 합니다:

```jsx
function logAllArguments() {
    for (var i=0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}
```

ES6에서는 ... 연산자를 통해 휴식 파라미터(아래 예의 아르그)를 선언할 수 있습니다:

function logAllArguments(...args) {
    for (const arg of args) {
        console.log(arg);
    }
}

정지 파라미터는 후행 파라미터에만 관심이 있는 경우 더욱 좋습니다
```
function format(pattern, ...args) {
    ···
}
```

ES5에서 이 경우를 처리하는 것은 서투릅니다:

function format(pattern) {
    var args = [].slice.call(arguments, 1);
    ···
}

Rest Parameters (나머지 매개변수)

Rest parameters는 코드를 읽기 쉽게 만듭니다. 함수의 매개변수 정의만 보아도 함수의 매개변수 개수가 가변적임을 알 수 있습니다.

나머지 연산자( ...)를 마지막 형식 매개변수 앞에 놓는 것은 배열의 나머지 실제 매개변수를 모두 수신한다는 의미입니다.

**`function** f(x, ...y) {···}f('a', 'b', 'c'); *// x = 'a'; y = ['b', 'c']*`

남은 매개변수가 없으면 나머지 매개변수는 빈 배열로 설정됩니다.

`f(); *// x = undefined; y = []*

*** The spread operator 는 나머지 연산자와 똑같아 보이지만 함수 호출 및 배열 리터럴(구조 분해 패턴 내부가 아님) 내에서 사용됨

From `apply()` to the spread operator (`...`)

ES5에서는 apply()를 통해 배열을 매개 변수로 변환합니다. 이를 위해 ES6에는 spread연산자가 있습니다.

Math.max()
- Math.max()는 인수 중 가장 큰 값을 반환합니다. 임의 수의 인수에는 적용되지만 배열에는 적용되지 않습니다.
  - ES5 – apply():
```
Math.max.apply(Math, [-1, 5, 11, 3])
11
```
  - ES6 – spread operator:
```
Math.max(...[-1, 5, 11, 3])
11
```

Array.prototype.push()

Array.prototype.push()는 모든 인수를 수신 받는 요소로 추가합니다. Array를 다른 인수에 파괴적으로 추가하는 메서드는 없습니다.

ES5 – apply():

**var** arr1 = ['a', 'b'];**var** arr2 = ['c', 'd'];arr1.push.apply(arr1, arr2);
*// arr1 is now ['a', 'b', 'c', 'd']*

ES6 – spread operator:

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];

arr1.push(...arr2);
    // arr1 is now ['a', 'b', 'c', 'd']

From `concat()` to the spread operator (`...`)

spread 연산자는 피연산자의 내용을 (비 파괴적으로) Array elements로 변환할 수도 있습니다. 즉 Array method concat()의 대안이 됩니다.

ES5 – apply():

var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];

console.log(arr1.concat(arr2, arr3));
    // [ 'a', 'b', 'c', 'd', 'e' ]

ES6 – spread operator:

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];

arr1.push(...arr2);
    // arr1 is now ['a', 'b', 'c', 'd']

From function expressions in object literals to method definitions

자바스크립트에서 메서드는 값이 함수인 속성입니다.

메소드들은 ES5 객체 리터럴에서 다른 속성들과 같이 생성되며, 속성 값들은 함수식들을 통해 제공됩니다.

var obj = {
    foo: function () {
        ···
    },
    bar: function () {
        this.foo();
    }, // trailing comma is legal in ES5
}

ES6에는 Methods 정의, Methods생성을 위한 특별한 구문이 있습니다:

const obj = {
    foo() {
        ···
    },
    bar() {
        this.foo();
    },
}

From constructors to classes

ES6 클래스는 대부분 컨스트럭터 함수에 더 편리한 구문입니다.

Base classes

ES5에서는 constructor 기능을 직접 구현합니다:

function Person(name) {
    this.name = name;
}
Person.prototype.describe = function () {
    return 'Person called '+this.name;
};

ES6에서 클래스는 컨스트럭터 함수에 대해 약간 더 편리한 구문을 제공합니다:
```
class Person {
    constructor(name) {
        this.name = name;
    }
    describe() {
        return 'Person called '+this.name;
    }
}
```
methods 정의에 대한 간결한 구문을 확인하십시오. 키워드 기능은 필요 없습니다. 또한 class의 각 부분 사이에는 쉼표가 없습니다.

Derived classes

ES5에서 Subclassing은 특히 super-constructor와 super-properties를 언급할 때 복잡하다.
아래에는 super-constructor를 만드는 일반적인 방법입니다:

function Employee(name, title) {
    Person.call(this, name); // super(name)
    this.title = title;
}
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
Employee.prototype.describe = function () {
    return Person.prototype.describe.call(this) // super.describe()
           + ' (' + this.title + ')';
};

ES6는 확장 조항을 통해 Subclassing을 기본적으로 지원합니다:

class Employee extends Person {
    constructor(name, title) {
        super(name);
        this.title = title;
    }
    describe() {
        return super.describe() + ' (' + this.title + ')';
    }

From custom error constructors to subclasses of `Error`

ES6에서는 모든 내장형 컨스트럭터를 서브클래싱할 수 있으므로 다음 코드는 ES5 코드가 시뮬레이션만 할 수 있는 것을 달성합니다:

ES5에서는 built-in된 constructor를 예외의 Error에 대해 Subclass 할 수 없다. 다음 코드는 생성자 MyError에 더미를 추적 하는것과 같은 중요한 기능을 제공하는 해결 방법을 보여줍니다:

function MyError() {
    // Use Error as a function
    var superInstance = Error.apply(null, arguments);
    copyOwnPropertiesFrom(this, superInstance);
}
MyError.prototype = Object.create(Error.prototype);
MyError.prototype.constructor = MyError;

function copyOwnPropertiesFrom(target, source) {
    Object.getOwnPropertyNames(source)
    .forEach(function(propKey) {
        var desc = Object.getOwnPropertyDescriptor(source, propKey);
        Object.defineProperty(target, propKey, desc);
    });
    return target;
};

class MyError extends Error {
}
throw new MyError('Something happened!');

instance에서 길이를 적절하게 처리하는 Array의 하위 클래스를 만들 수도 있습니다:

class Stack extends Array {
    get top() {
        return this[this.length - 1];
    }
}

var stack = new Stack();
stack.push('world');
stack.push('hello');
console.log(stack.top); // hello
console.log(stack.length); // 2

일반적으로 Subclassing Array는 최선의 해결책이 아닙니다. 자신의 class(컨트롤 인터페이스)를 생성하고 개인 속성의 Array에 위임하는 것이 더 나은 경우가 많습니다.

서브클래싱 내장형 컨스트럭터는 엔진이 기본적으로 지원해야 하는 기능으로, 트랜스필러를 통해서는 이 기능을 제공할 수 없습니다.

Private data for classes

이 섹션에서는 ES6 클래스의 개인 데이터를 관리하는 네 가지 방법에 대해 설명합니다:
클래스 생성자의 환경에 개인 데이터 유지, 명명 규칙(예: 접두사 밑줄)을 통해 개인 속성 표시,
WickMaps에 개인 데이터 보관,기호를 개인 속성의 키로 사용 접근법 #1과 #2는 ES5에서 이미 일반적이었고, 접근법 #3과 #4는 ES6에서 새로운 것입니다. 각각의 접근법을 통해 동일한 예를 4번 구현해 봅시다.

시공자 환경을 통한 개인 데이터 제공

실행 중인 예로는 카운터(초기 값이 카운터)가 0에 도달하면 call-back 액션을 호출하는 class Countdown이 있습니다. 두 파라미터 액션과 카운터는 개인 데이터로 저장되어야 합니다.

첫 번째 구현에서, 우리는 액션과 카운터를 class constructor 환경에 저장합니다. 환경은 자바스크립트 엔진이 새로운 범위가 입력될 때마다 (함수 호출이나 constructor 호출을 통해) 존재하는 파라미터와 지역 변수를 저장하는 내부 데이터 구조입니다. 이것이 코드입니다:

class Countdown {
    constructor(counter, action) {
        Object.assign(this, {
            dec() {
                if (counter < 1) return;
                counter--;
                if (counter === 0) {
                    action();
                }
            }
        });
    }
}

Using Countdown looks like this:

> const c = new Countdown(2, () => console.log('DONE'));
> c.dec();
> c.dec();

Pros [찬성]

개인 데이터는 완전히 안전합니다
Private Property의 이름은 다른 Private Property(super-class 또는 sub-class)의 이름과 충돌하지 않습니다

Cons [단점 || 고려사항]

constructor 내부의 instance 모든 methods(최소한 개인 데이터에 액세스해야 하는 methods)를 추가해야 하기 때문에 코드의 품격이 떨어집니다.
instance methods로 인해 코드는 메모리를 낭비합니다. 만약 methods가 prototype methods였다면 공유되었을 것입니다.

From objects to Maps

Javascript에서 언어 constructor object를 문자열에서 임의의 값(데이터 구조)으로의 map을 사용하는 것은 항상 임시방편 적인 해결책 이었습니다. 가장 안전한 방법은 Prototype이 null인 개체를 만드는 것이고, 그럼에도 불구하고 속성 키가 많은 Javascript Engine에서 특별한 기능을 Trigger 하기 때문에 어떤 키도 문자열 ‘proto’ 인지 확인을 해야 한다. 다음 ES5 코드에는 개체 dict를 map으로 사용하는 함수 countWorld가 포함되어 있다.
```
var dict = Object.create(null);
function countWords(word) {
    var escapedWord = escapeKey(word);
    if (escapedWord in dict) {
        dict[escapedWord]++;
    } else {
        dict[escapedWord] = 1;
    }
}
function escapeKey(key) {
    if (key.indexOf('__proto__') === 0) {
        return key+'%';
    } else {
        return key;
    }
}
```

ES6에서는 내장된 데이터 구조 Map을 사용할 수 있으며 키를 피할 필요가 없습니다. 단점으로는 Maps 내부의 값을 증가시키는 것이 덜 편리합니다.
```
const map = new Map();
function countWords(word) {
    const count = map.get(word) || 0;
    map.set(word, count + 1);
}
```
map의 또 다른 장점은 문자열이 아닌 임의의 값을 key로 사용할 수 있다는 것이다.

New Sstring methods

ES6 표준 라이브러리는 문자열에 대한 몇 가지 새로운 방법을 제공합니다.

From indexOf to startsWith:

 
if (str.indexOf('x') === 0) {} // ES5
if (str.startsWith('x')) {} // ES6

From indexOf to endsWith:

function endsWith(str, suffix) { // ES5
  var index = str.indexOf(suffix);
  return index >= 0
    && index === str.length-suffix.length;
}
str.endsWith(suffix); // ES6

From indexOf to includes:

if (str.indexOf('x') >= 0) {} // ES5
if (str.includes('x')) {} // ES6

From join to repeat (문자열을 반복하는 ES5 방식은 해킹에 가깝다):
```
new Array(3+1).join('#') // ES5
'#'.repeat(3) // ES6
```

New Array methods

ES6에는 몇 가지 새로운 Array methods도 존재한다.

From Array.prototype.indexOf to Array.prototype.findIndex
뒤에 있는 methods는 NaN을 찾기 위해 사용될 수 있는데, 앞에 있는 것은 이를 감지할 수 없다.
```
```jsx
const arr = ['a', NaN];

arr.indexOf(NaN); // -1
arr.findIndex(x => Number.isNaN(x)); // 1
```

```jsx
sNaN('abc')
true

Number.isNaN('abc')
false
```
```

From Array.prototype.slice() to Array.from() or the spread operator
ES5에서는 Array.prototype.slice()를 사용하여 Array-like 개체를 Array로 변환 했다.
ES6에서는 Array.from():

```jsx
var arr1 = Array.prototype.slice.call(arguments); // ES5
const arr2 = Array.from(arguments); // ES6
```

지금까지 모든 Array-like DOM 데이터 구조와 같이 값이 반복 가능한 경우 spread 연산자(...)를 사용하여 Array로 변환 햇다. 

```jsx
const arr1 = [...'abc'];
    // ['a', 'b', 'c']
const arr2 = [...new Set().add('a').add('b')];
    // ['a', 'b']
```

From indexOf to includes:

if (str.indexOf('x') >= 0) {} // ES5
if (str.includes('x')) {} // ES6

From join to repeat (문자열을 반복하는 ES5 방식은 해킹에 가깝다):
```
new Array(3+1).join('#') // ES5
'#'.repeat(3) // ES6
```

From CommonJS modules to ES6 modules

ES5에서도 AMD로 구성된 또는 CommonJS 구문을 기반으로 하는 모듈 시스템은 대부분 노출된 모듈 패턴으로 코드를 작성하고 solution을 대체했습니다.

ES6에는 모듈이 내장되어 있습니다. 슬프게도 자바스크립트 엔진은 아직 모듈을 기본적으로 지원하지 않습니다. 그러나 browserify, webpack, jspm과 같은 도구를 사용하면 ES6 구문을 사용하여 모듈을 만들 수 있으므로 작성한 코드를 미래에 대비할 수 있습니다.

Multiple exports

Multiple exports in CommonJS

CommonJS에서는 다음과 같이 여러 Entity를 내보냅니다:

//------ lib.js ------
var sqrt = Math.sqrt;
function square(x) {
    return x * x;
}
function diag(x, y) {
    return sqrt(square(x) + square(y));
}
module.exports = {
    sqrt: sqrt,
    square: square,
    diag: diag,
};

//------ main1.js ------
var square = require('lib').square;
var diag = require('lib').diag;

console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

또는 전체 모듈을 개체로 가져와 이를 통해 사각형 및 다이어그램에 액세스할 수 있습니다:
```
var lib = require('lib');
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5
```

Multiple exports in ES6

ES6에서는 여러 내보내기를 명명된 내보내기라고 하며 다음과 같이 처리합니다:

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main1.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

모듈을 개체로 가져오기 위한 구문은 다음과 같습니다(행 A):

import * as lib from 'lib'; // (A)
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5

Single exports
- Single exports in CommonJS
  - Node.js는 CommonJS를 확장하며 module.exports를 통해 모듈의 단일 값을 내보낼 수 있습니다:
```
//------ myFunc.js ------
module.exports = function () { ··· };

//------ main1.js ------
var myFunc = require('myFunc');
myFunc();
```
- Single exports in ES6
  - ES6에서는 소위 기본 내보내기(export default를 통해 선언됨)를 통해 동일한 작업이 수행됩니다:

CUBE

엄마이오빠이상해

이전 포스트

Yarn 을 통한 workspace 구현하기

다음 포스트

ES6 에 따른 Javascript의 변화

ES6 바뀐 점 정리

From var to const

core 조언

From IIFEs to blocks

From concatenating strings to `template literals`

Handling multiple return `values`

Handling parameter default values

Handling named parameters

Making the parameter optional

From `arguments` to rest parameters

From `apply()` to the spread operator (`...`)

From `concat()` to the spread operator (`...`)

From function expressions in object literals to method definitions

From constructors to classes

Derived classes

From custom error constructors to subclasses of `Error`

Private data for classes

시공자 환경을 통한 개인 데이터 제공

Pros [찬성]

Cons [단점 || 고려사항]

From objects to Maps

New Sstring methods

New Array methods

From CommonJS modules to ES6 modules

Multiple exports

Yarn 을 통한 workspace 구현하기

typescript 완벽 정복

0개의 댓글

ES6 에 따른 Javascript의 변화

ES6 바뀐 점 정리

From var to const

core 조언

From IIFEs to blocks

From concatenating strings to template literals

Handling multiple return values

Handling parameter default values

Handling named parameters

Making the parameter optional

From arguments to rest parameters

From apply() to the spread operator (...)

From concat() to the spread operator (...)

From function expressions in object literals to method definitions

From constructors to classes

Derived classes

From custom error constructors to subclasses of Error

Private data for classes

시공자 환경을 통한 개인 데이터 제공

Pros [찬성]

Cons [단점 || 고려사항]

From objects to Maps

New Sstring methods

New Array methods

From CommonJS modules to ES6 modules

Multiple exports

Yarn 을 통한 workspace 구현하기

typescript 완벽 정복

0개의 댓글

From concatenating strings to `template literals`

Handling multiple return `values`

From `arguments` to rest parameters

From `apply()` to the spread operator (`...`)

From `concat()` to the spread operator (`...`)

From custom error constructors to subclasses of `Error`