ES 6構文の概要

序文

JavaScriptとES 6を学習して得たES 6文法を簡単にまとめます.

Hoistingとvar

シースとは、varとして宣言された変数を集合させ、まず最上位に宣言することです.

console.log(name);
var name = "hello";

는 실제로

var name;
console.log(name);
var name = "hello";

로 동작한다.

cont内部の変更

constで指定したオブジェクトは変更できませんが、内部プロパティは変更できます.

const tom = { lang: "Python" };
tom.lang = "JavaScript";

console.log(tom);

JavaScript dict内部string

pythonとは異なり、キー値は内部に「」を付ける必要がなく文字列で処理できます.

const tom = {
	lang = "JavaScript";
}

const tom = {
	"lang" = "Javascript";
}

key値を計算したい場合は[]で囲みます.

const tom = {
	["score" + "1"]: 10
};

ショートカット属性名

属性のキーが変数名と一致する場合は、ボタンをガチャガチャと書き込むしかありません.

let name = "Tom";
let age = 10;

let tom = {
	name: name,
    age: age,
    print: function() {
    	console.log(`name: ${this.name}, age:  age${this.age}`);
    }
}

let tom = {
    name,
    age,
    print() {
    	console.log(`name: ${this.name}, age:  age${this.age}`);
    }
}

オブジェクトのコピー時に浅いコピーを適用

object,array対入コピー時は浅いコピーです.
1つの破壊法はシリアル化−非シリアル化法である.

const obj1 = { value: 10 };
const obj2 = obj1;

obj1.value += 1;
console.log(`obj1:`, obj1);
console.log(`obj2:`, obj2);

const obj3 = JSON.parse(JSON.stringify(obj1));

Template Literals

バンド

`string text ${expression} string text`

Python、Pythonとは異なり、以下の式ではfなどの追加の記号は必要ありません.

f"""string text {expression} string text"""

配列非構造化(array destructuring)

左右の変数の数が異なる場合でも、構文が実行されます.
必要な変数のみをインポートしたり、変数を定義しなかったり、default valueを設定したりできます.

let [name] = ["Tom", 10, "Seoul"];
let [,age,] = ["Tom", 10, "Seoul"];

let [name, age, region, height] = ["Tom", 10, "Seoul"]
let [name, age, region, height=150] = ["Tom", 10, "Seoul"]

function get_default_height() {
  return 150;
}
let [name, age, region, height=get_default_height()] = ["Tom", 10, "Seoul"]

dictの場合

const tom = {
  name: "Tom",
  age: 10,
  region: "Seoul"
};

const {age, name, height} = tom;

dictと関数を組み合わせて使用する場合

const f = (person) => {
  console.log(person.name);
}

const f = ({name}) => {
  console.log(name);
}

活動場所を表す

for (const person of people) {
  console.log(person.name, person.age);
}

for (const {name, age} of people) {
  console.log(name, age);
}

nest文の場合
次の領域は変数として指定されていません

const person = {
  name: "Tom",
  age: 10,
  region: {
    contry: "서울",
    postcode: "06222",
  }
};

const { name, region: { postcode }} = person;
console.log(name, postcode);

展開演算子

JAvascriptは展開演算子で、...を使用します.

let [name, ...rest] = ["Tom", 10, "Seoul"];

let names = ["Steve", "John"];
let students = ["Tome", ...names, ...names];

関数としてのパラメータ

let f = (...args) => {
  console.log(args);
}

新しいオブジェクトを作成するとき

let tom = {
  name: "Tom",
  age: 10,
  region: "Seoul"
};

let steve = {
  ...tom,
  name: "Steve"
};

複雑な場合はimmerライブラリの使用を検討できます.
次は一般的なnodejs関数を用いた哲学です

const numbers = [1, 3, 7, 8];
Math.max(numbers) # Nan
Math.max(...numbers)

関数のDefault Parametersですべてのタイプの変数を有効にする

pythonは可変値のみ使用できます
したがって、関数を実行することで関数を定義できます.
JAvascriptは、関数を呼び出すときに1回呼び出されます.

function f(name="Tom", age=10) {
}
const get_default_age = () => 10
function h(name="Tom", age=get_default_age()) {
}

関数のNameパラメータ

サポート場所と名前とは異なり、pythonはjavascriptが{}形式のオブジェクトを作成しない限りpositionalパラメータのみをサポートします.

# python
def f(name, age, region):
	pass
    
f(name="Tom", age=10, region="Seoul")

// javascript
function f(name, age, region) {
}
f({name: "Tom", age: 10, region: "Seoul"})

Arrow Function

function fn1(){
  return
};

const fn2 = function() {
  return
};

const fn3 = () => {
};

arrow関数ではreturnがなくても式のみが使用され、その意味はreturnと同じです.

const fn4 = (x, y) => (x + y);
const fn5 = x => x + 10;

arrow関数でこのメソッドを使用する
arrow関数の場合、これは変わらず、直接使用できます.

var tom = {
  name: "Tom",
  print1: function() {
    console.log(`[print1-1] name : ${this.name}`);
    (function() {
      console.log(`[print1-2] name : ${this.name}`);
    })();
  },
  print2: function() {
    console.log(`[print2-1] name: ${this.name}`);
    var me = this;
    (function() {
      console.log(`[print3-1] name : ${me.name}`);
    })();
  },
  print3: function() {
    console.log(`[print[3-1] name : ${this.name}`);
    (() => {
      console.log(`[print3-2] name: ${this.name}`);
    })();
  }
}

関数の使い方をまとめる

const f = (x, y) => x + y;
const f = (x, y) => {x, y};
const f = (x, y) => ({x: x, y: y}); // 소괄호 꼭 필요
const f = (x, y) => {
  return {x: x, y: y};
}
const f = function(x, y) {
  return {x: x, y: y};
}
function f(x, y) {
  return {x: x, y: y};
}

ダイヤルバック(地獄)->Promise->async/await(ES 8,ECAM 2017)
awaitを内部に書き込むには、関数をasyncと宣言する必要があります.
ES 6からクラスキーコンストラクタキー,class,constructor,super,extendsを導入

モジュラシステム

scriptラベルのみでロードします.
CommonJSモジュール、ES 6モジュールなどに置き換える

//commonjs, a.js
const name = "tom";
const age = 10;
module.exports = {
  name,
  age,
  region: "Seoul"
};
//b.js
const my_module = require("./a");
const { name } = require("./a");

// es6, c.js
const name = "tom";
const age = 10;

export default {
  name,
  age,
  region: "Seoul"
};

export {
  name,
};
// d.js
import my_module from "./c";
import { name } from "./c";

カッコがない場合はdefault全体をロードします.
Nodeの後にes 6 moduleが現れ、nodeはes 6構文の一部をサポートしていません.moduleが典型的な例です

高次関数

Pythonのdecoratorに似ています

function base_10(fn) {
  function wrap(x, y) {
    return fn(x, y) + 10;
  }
  return wrap;
}

function mysum(x, y) {
  return x + y;
}

mysum = base_10(mysum);
console.log(mysum(1, 2)); // 13

矢印関数を使用して展開

const base_10 = (fn) => (x, y) => fn(x, y) + 10;
const mysum = (a, b) => a + b;

const return_fn = base_10(mysum);
console.log(return_fn(1, 2)); // 13

es6 (ECMAScript2015)
babelijs.io/docs/en/learn