[TIL] JS: ES6

へんすう

var / let / const

ES 6ではvarキーワードは使用されません.

は基本的にconstを使用し、再割り当てが必要な場合はletを使用します.

letキーワードを使用すると、スキャンはできるだけ狭くなります.

Template Literals

通常の文字列とは異なり、複数行にわたって文字列を記述し、スペース形式で適用できます.

${...}

新しい文字列を挿入するには、演算子を使用しません.内部式は文字列タイプに変換されます.
ex)${1+1}は文字「2」に変換されます.

Arrow Function

1.基本文法

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.

() => { return { a: 1 }; }
() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.

() => {           // multi line block.
  const x = 10;
  return x * x;
};

2.コール

const pow = x => x * x;
console.log(pow(10)); // 100

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

console.log(pow); // [ 1, 4, 9 ]

パラメータパラメータ

1. Rest parameter

parameterの前の3つの点...(=Spread構文)で定義したパラメータを貼り付けます.

function bar(param1, param2, ...rest) {
  console.log(param1); // 1
  console.log(param2); // 2
  console.log(rest);   // [ 3, 4, 5 ]
}

bar(1, 2, 3, 4, 5);

2.length()には影響しません.

function foo(...rest) {}
console.log(foo.length); // 0

function bar(x, ...rest) {}
console.log(bar.length); // 1

function baz(x, y, ...rest) {}
console.log(baz.length); // 2

可変因子のリストは配列によって伝送され得る.

function sum(...args) {
  console.log(arguments); // Arguments(5) [1, 2, 3, 4, 5, callee: (...), Symbol(Symbol.iterator): ƒ]
  console.log(Array.isArray(args)); // true
  return args.reduce((pre, cur) => pre + cur);
}
console.log(sum(1, 2, 3, 4, 5)); // 15

2.Spread構文

オブジェクトを個々の要素に分離する構文.console.log(...[1, 2, 3]) // 1, 2, 3

を関数引数として使用する方法

function foo(v, w, x, y, z) {
  console.log(v); // 1
  console.log(w); // 2
  console.log(x); // 3
  console.log(y); // 4
  console.log(z); // 5
}

// ...[2, 3]는 [2, 3]을 개별 요소로 분리한다(→ 2, 3)
// spread 문법에 의해 분리된 배열의 요소는 개별적인 인자로서 각각의 매개변수에 전달된다.
foo(1, ...[2, 3], 4, ...[5]);

案
Contactは省略できます!

const arr = [1, 2, 3];
console.log([...arr, 4, 5, 6]); // [ 1, 2, 3, 4, 5, 6 ]

push, splice, copy

// 기존 배열에 다른 배열의 개별 요소를 각각 push 하는 방법
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

arr1.push(...arr2); // == arr1.push(4, 5, 6);
console.log(arr1); // [ 1, 2, 3, 4, 5, 6 ]

// splice (삽입)
const arr1 = [1, 2, 3, 6];
const arr2 = [4, 5];

arr1.splice(3, 0, ...arr2); // == arr1.splice(3, 0, 4, 5);
console.log(arr1); // [ 1, 2, 3, 4, 5, 6 ]

// copy
const arr = [1, 2, 3];
const copy = [...arr];

console.log(copy); // [ 1, 2, 3 ]
copy.push(4); // copy를 변경한다.
console.log(copy); // [ 1, 2, 3, 4 ]

// arr은 변경되지 않는다.
console.log(arr);  // [ 1, 2, 3 ]

3. Rest/Spread Property

Object.assignを置き換えてオブジェクトをマージ/変更できます.

// 객체의 병합
const merged = { ...{ x: 1, y: 2 }, ...{ y: 10, z: 3 } };
console.log(merged); // { x: 1, y: 10, z: 3 }

// 특정 프로퍼티 변경
const changed = { ...{ x: 1, y: 2 }, y: 100 };
// changed = { ...{ x: 1, y: 2 }, ...{ y: 100 } }
console.log(changed); // { x: 1, y: 100 }

// 프로퍼티 추가
const added = { ...{ x: 1, y: 2 }, z: 0 };
// added = { ...{ x: 1, y: 2 }, ...{ z: 0 } }
console.log(added); // { x: 1, y: 2, z: 0 }

Object property

1.サムネイル

property値を変数として使用する場合は、名前を省略できます.

let x = 1, y = 2;
const obj = { x, y };

console.log(obj); // { x: 1, y: 2 }

メソッド宣言時にfunctionキーワードを省略できます.

const obj = {
  name: 'Song',
  // 메소드 축약 표현
  sayHi() {
    console.log('Hi! ' + this.name);
  }
};

obj.sayHi(); // Hi! Song

Object.create()関数ではなく、オブジェクトの内部に設定できます.

const parent = {
  name: 'parent',
  sayHi() {
    console.log('Hi! ' + this.name);
  }
};

const child = {
  // child 객체의 프로토타입 객체에 parent 객체를 바인딩하여 상속을 구현한다.
  __proto__: parent,
  name: 'child'
};

parent.sayHi(); // Hi! parent
child.sayHi();  // Hi! child

2. Destructuring

オブジェクトからオブジェクトの各プロパティを抽出し、変数リストに割り当てます.このとき、割り当て基準はproperty keyです.

const obj = { firstName: 'Ungmo', lastName: 'Lee' };

// property key를 기준으로 destructuring할당이 이루어진다. 순서는 의미가 없다.
// 변수 lastName, firstName가 선언되고 obj가 Destructuring되어 할당된다.
const { lastName, firstName } = obj;

console.log(firstName, lastName); // Ungmo Lee

Class

1.定義

インスタンスの作成:new演算子を使用してクラス名(=Constructor)を呼び出します.

Constructor作成者
クラスに複数のConstructorが存在する場合、構文エラーが発生します.

// 클래스 선언문
class Person {
  // constructor(생성자)
  constructor(name) {
    // this 클래스가 생성할 인스턴스
    this._name = name; // _name 클래스 필드의 선언과 초기화
  }

  sayHi() {
    console.log(`Hi! ${this._name}`);
  }
}
// 인스턴스 생성
const me = new Person('Lee');
me.sayHi(); // Hi! Lee

console.log(me) // Person {_name: "Lee"}

2.クラスフィールド

クラスフィールドの宣言と初期化は、コンストラクション関数の内部で行う必要があります.

3. Getter, Setter

クラスフィールドに値を割り当てるたびに、クラスフィールドの値を操作するために使用されます.訪問者の割合.

Getキーワード
何かを得るときに使うには、何かを返さなければなりません.

class Foo {
  constructor(arr = []) {
    this._arr = arr;
  }

  // getter: get 키워드 뒤에 오는 메소드 이름 firstElem은 클래스 필드 이름처럼 사용된다.
  get firstElem() {
    // getter는 반드시 무언가를 반환해야 한다.
    return this._arr.length ? this._arr[0] : null;
  }
}

const foo = new Foo([1, 2]);
// 필드 firstElem에 접근하면 getter가 호출된다.
console.log(foo.firstElem); // 1

Setキーワード
割り当てられた形式で使用されます.

class Foo {
  constructor(arr = []) {
    this._arr = arr;
  }
  
// setter: set 키워드 뒤에 오는 메소드 이름 firstElem은 클래스 필드 이름처럼 사용된다.
  set firstElem(elem) {
    // ...this._arr은 this._arr를 개별 요소로 분리한다
    this._arr = [elem, ...this._arr];
  }
}
// 클래스 필드 firstElem에 값을 할당하면 setter가 호출된다.
foo.firstElem = 100;

console.log(foo.firstElem); // 100

4. Static method

主にアプリケーションのグローバル作成に使用されるユーティリティ関数です.

静的メソッド呼び出しクラス名.

静的メソッドは、インスタンスによって呼び出されません.(=thisは使用できません.)

5.クラス継承

これは、子クラスによって再定義され、親クラスが持つメソッドを使用する方法です.(= overriding)

Exferenceキーワード
親Circleを継承する子Cylinderを定義します.

Superキーワード
親を参照するか、親を呼び出すコンストラクション関数.

lass Parent {}

class Child extends Parent {
  // ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
  constructor() {}
}

const child = new Child();