array.js

// 分割代入
// 従来
var numbers = [1, 2, 3];
var a = numbers[0];
var b = numbers[1];
var c = numbers[2];

a;
b;
c;

// ECMAScript
let [x, y, z] = numbers;
x;
y;
z;

// 使用例
function getConfig() {
  return [true, 10, "hoge", "fuga"];
}

// 従来
const config = getConfig();
console.log(config[0]);
console.log(config[1]);

// ECMAScript
const [isOn, amount, ...hoge] = getConfig();
isOn;
amount;
hoge;

function setConfig([isOn, amount]) {
  _isOn = isOn;
  _amount = amount;
}

setConfig([true, 20]);
_isOn;
_amount;

arrow.js

// アロー関数
const array = [1, 2, 3, 4];
array;

const byTwo = array.map(function(number) {
  return number * 2;
});
byTwo;

// 引数が一つの場合は()を省略できる
const byTwoArrow = array.map(number => {
  return number * 2;
});
byTwoArrow;

// 引数が２つの場合は、（）は必要です
const byTwoArrow2 = array.map((number, index) => {
  console.log(index);
  return number * 2;
});
byTwoArrow2;

// returnなしで返すこともできる
const byTwoArrow3 = array.map(number => number * 2);
byTwoArrow3;

async_wait.js

import { resolve } from "dns";
import { isMainThread } from "worker_threads";

let myPromise = new Promise(resolve => {
  resolve("tarou");
});

function main() {
  let name = myPromise;
  name; // then tarouが返ってくる
}

async function main2() {
  let name = await myPromise;
  name; //tarouというシンプルな値が取れる
}

main();
main2();

function getName() {
  return Promise.resolve("name");
}

function getAge() {
  return Promise.resolve(20);
}

async function main3() {
  let name = await getName();
  let age = await getAge();
  name;
  age;
}

main3();

function damedayo() {
  return Promise.reject("Hogeeeeeeeee");
}

async function main4() {
  try {
    let name = await damedayo();
  } catch (err) {
    console.log(err);
  }
}

main4();

// awaitをいい感じにする
async function main5() {
  let [name, age] = await Promise.all([getName(), getAge()]);
  name;
  age;
}
main5();

let outputwords = async () => {
  await Promise.all([
    myPromise("four", 4000),
    myPromise("three", 3000),
    myPromise("two", 2000),
    myPromise("one", 1000)
  ]);
};

outputwords();

class.js

// クラスの宣言
var Person = function(name, age) {
  this.name = name;
  this.age = age;
};

// メソッド生やす
Person.prototype.jump = function() {
  console.log("jump!");
};
var person = new Person("tarou", 30);

// ECMAScript
class Person2 {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  jump() {
    console.log("jump!");
  }

  static setName(person, name) {
    person.name = name;
  }
}

let person2 = new Person2("tarou", 30);
person2;
person2.jump();

// newによるインスタンス呼び出しなしで呼べるo
Person2.setName(person2, "yamada");
person2;

// 継承
class Employee extends Person2 {
  constructor(name, age, years) {
    super(name, age);
    this.years = years;
  }
  // オーバーライド
  jump() {
    super.jump();
    console.log("jumpppppppppppppppp");
  }
  quit() {
    console.log("おつ");
  }
}

let employee = new Employee("tarou", 20, 15);
employee;
employee.jump();
employee.quit();

class_getter_setter.js

class Person {
  constructor(name, age) {
    this._name = name;
    this._age = age;
  }

  get name() {
    return `getname ${this._name}`;
  }
  set name(name) {
    this._name = name;
  }
}

let person = new Person("tarou", 20);
person;

const hoge = person.name;
hoge;

person.name = "yamada";
person;

default_arg.js

function buy(item, amout) {
  item;
  amout;
}

buy("eggs", 2);

function buy2(item, amout) {
  item;
  amout; // undefinedになる
}
buy2("eggs");

function buy3(item, amount) {
  if (amount == undefined) {
    amout = 0;
  }
  item;
  amout;
}
buy3("eggs");

// デフォルト引数で同じことが出来る
function buy4(item, amount = 0) {
  item;
  amount;
}

buy4("eggs");

generator.js

// ジェネレーター yield
function* myGenerator() {
  yield 1;
}

let iter = myGenerator();
iter;
console.log(iter.next());
console.log(iter.next());

function* myGenerator2() {
  yield 1;
  yield 2;
  yield 3;
}

let iter2 = myGenerator2();
iter2;
console.log(iter2.next());
console.log(iter2.next());

// フィボナッチ数列
function* fib() {
  let n1 = 0;
  let n2 = 1;
  while (true) {
    let current = n1;
    n1 = n2;
    n2 = current + n1;
    let reset = yield current;
    if (reset) {
      return;
    }
  }
}

let iter4 = fib();
console.log(iter4.next());
console.log(iter4.next());
console.log(iter4.next());
console.log(iter4.next());
console.log(iter4.next());
console.log(iter4.next());
console.log(iter4.next(true));

// 配列でやるといい感じになる
function* myGene() {
  yield* [1, 2, 3];
}

let iter5 = myGene();
console.log(iter5.next());
console.log(iter5.next());
console.log(iter5.next());
console.log(iter5.next());

iterable.js

// シンボル
let symbol = Symbol();
symbol;

console.log(typeof symbol);
let symbolA = Symbol("symbol");
let symbolB = Symbol("symbol");
console.log(symbolA === symbolB);

// シンボルの利用用途は、どのプロパティとも競合しないようにするために、ライブラリ開発者向けのもの

// イテレーターの使用例
let message = "Hello";
let iterator = message[Symbol.iterator]();

let a = iterator.next();
a;
let b = iterator.next();
b;

// カスタムイテレーター
// 通常の配列の例
let arr = [10, 20, 30];
for (let i = 0; i < arr.length; i++) {
  console.log(i);
}

let nums = {
  [Symbol.iterator]() {
    let data = [1, 2, 3, 4];
    let num = 0;
    return {
      next() {
        return {
          value: data[num],
          done: num++ < 4
        };
      }
    };
  }
};

let iter = nums[Symbol.iterator]();
console.log(iter.next());

// for of
let arr2 = [1, 2, 3];
for (n of arr) {
  console.log(n);
}

for (n of arr.entries()) {
  console.log(n);
}

module.js

// モジュール化
import { add, person } from "./module_add";
console.log(add(1, 2));
console.log(person);

// エイリアス
import { add as myAdd } from "./module_add";
console.log(myAdd(1, 2));

// ワイルドカード
import * as my from "./module_add";
my.add(1, 2);

// デフォルトはそれぞれのmoduleで一回まで
import myAll from "./module_default";
myAll.add;

module_add.js

export * from "./module_some";
// modulesomeにあるものを呼び出せるようになる

export function add(a, b) {
  return a + b;
}

export let person = {
  firstname: "hoge"
};

module_default.js

export default {
  name: "Tom",
  add(a, b) {
    a + b;
  }
};

module_some.js

export function mul(a, b) {
  return a * b;
}

object.js

// 従来
function getConfig() {
  return {
    isOn: true,
    amount: 10,
    name: "tarou"
  };
}

var config = getConfig();
var i = config.isOn;
var a = config.amount;
i;
a;

// ECMA
// 取得したいプロパティ名を指定する
let { isOn, name } = getConfig();
isOn;
name;

// 取得したいプロパティ名を指定しないとundefined
let { aa, bb } = getConfig();
aa;
bb;

// 引数を指定することも出来る
var configSample = {};
function setConfig({ hoge, fuga }) {
  config = { hoge, fuga };
}

setConfig({ hoge: "test1", fuga: "test2" });
config;

// 任意の引数名に代入することも出来る
let { isOn: onOffInfo, amount: dataAmount } = getConfig();
onOffInfo;
dataAmount;

// デフォルト
const arr = [1];
let [t1, t2 = 2000] = arr;
t1;
t2;

const obj = {
  isOn: true
};
var { isOn: serverOn, amount = 1000 } = obj;
serverOn;
amount;

object_assign.js

// 従来のオブジェクトコピー
let obj1 = {};
let obj2 = { name: "tarou" };
Object.keys(obj2).forEach(function(key) {
  obj1[key] = obj2[key];
});
obj1;

// ECMAScript

let obj3 = {};
let obj4 = { name: "tarou" };
let obj5 = { age: 20 };
Object.assign(obj3, obj4, obj5);
obj3;

obj6 = Object.assign(obj4, obj5);
obj6;

promise.js

var func_one = function(callback) {
  console.log("one");
  if (callback) {
    callback();
  }
};
var func_two = function(callback) {
  console.log("two");
  if (callback) {
    callback();
  }
};
var func_three = function(callback) {
  console.log("three");
  if (callback) {
    callback();
  }
};

// これの次にこれみたいな感じを愚直にやるとこうなる
func_one(function() {
  func_two(function() {
    func_three();
  });
});

function getName() {
  setTimeout(() => {
    console.log("hi!");
  }, 2000);
}

getName();

// Promiseを使うと以下のようになる

function getNamePromise() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Jone"); // 処理が終わったらこれを返す
    }, 2000);
  });
}

getNamePromise().then(name => {
  console.log(name);
});

// メソッドチェーン
getNamePromise()
  .then(name => {
    console.log(name);
    return 20;
  })
  .then(age => {
    console.log(age);
  });

function getAgePromise() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(20);
    }, 4000);
  });
}

// 以下のような感じで、チェーンさせれる
getNamePromise()
  .then(name => {
    console.log(name);
    // return getAgePromise();
  })
  .then(getAgePromise) // こういうのもできる
  .then(age => {
    console.log(age);
  });

// まとめてやることもできる
Promise.all([getNamePromise(), getAgePromise()]).then(([name, age]) => {
  console.log(name);
  console.log(age);
});

// エラーを扱う
function errorPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("error!");
      // thrnow new Hogeでも同じことになる
    }, 4000);
  });
}

getNamePromise()
  .then(name => {
    console.log(name);
  })
  .then(errorPromise)
  .catch(err => {
    console.log(err);
    return "yeah";
  })
  .then(value => {
    console.log("finally");
    console.log(value);
  });

// resolveについてもうちょい

let myPromise = (word, sec) =>
  new Promise(resolve => {
    setTimeout(() => {
      console.log(word);
    }, sec);
    // 何も渡すものがなかったとしても、resolveを終わりに必ず呼ぶ
    resolve();
  });

myPromise("hello", 1000)
  .then(() => myPromise("world", 2000))
  .then(() => myPromise("agin", 2000));

// 以下のようなこともできる
function getNameSimplePromise() {
  return Promise.resolve("hoge");
}

getNameSimplePromise().then(name => {
  console.log(name);
});

property.js

let person = {
  firstname: "tarou",
  lastname: "yamada"
};

let fn = "tarou";
let ln = "tarou";
let person2 = {
  fn, // プロパティ名書かない場合はそのまま名前が使われる
  ln: ln // こういうのしなくてよい
};

console.log(person2);

// computed property name

function getKey() {
  return "place";
}

let key = "lastname";
let person3 = {
  firstname: "hoge",
  [getKey()]: "Tokyo" // こういうのも出来る プロパティ名を色々やれる
};

person3[key] = "YAMADA"; // lastnameのキーにYamadaが入るような感じになる
console.log(person3);

// メソッド定義
let person4 = {
  firstname: "hoge",
  getName() {
    return this.firstname;
  }
};

console.log(person4.getName());

rest_opt.js

// レスト演算子（...仮引数名）
function print() {
  console.log(arguments); // Iterator[1, "a", 2]
}

print(1, "a", 2);

// Arrayに変換
function print2() {
  console.log(Array.prototype.slice.call(arguments)); // Iterator[1, "a", 2]
}

print2(1, "a", 2);

// ...で引数で渡してあげると、簡単に配列に出来る
function print3(...ary) {
  console.log(ary);
}

print3(1, "a", 2);

function print4(ele1, ele2, ...arr) {
  ele1;
  ele2;
  console.log(arr);
}

print4(1, "a", 2);

spred.js

// スプレッド演算子(...配列名)

var arr = ["Hello", ",", "world"];
arr = ["<br>"].concat(arr).concat(["<br>"]);
console.log(arr.join(""));

// 以下のように簡単にかける
var arr2 = ["Hello", ",", "world"];
arr2 = ["<br>", ...arr2, "<br>"];
console.log(arr2.join(""));

// 文字列を配列にすることもできる
const message = "Hello, world";
const chars = [...message];
console.log(chars);

// 引数にわたすことも出来る
function add(a, b) {
  return a + b;
}

var arr3 = [1, 2];
console.log(add(...arr3));

const arr4 = [1, 2, 3];
const arr5 = [4, 5, 6];
arr4.push(...arr5);
console.log(arr4);

const arrsrc = [1, 2, 3];
const dist = [...arrsrc];
console.log(dist);

const arr6 = [1, 2, 3];
const arr7 = [4, 5, 6];
const arr8 = ["a", ...arr6, ...arr7, true];
console.log(arr8);

template.js

// templateリテラル
// `

let name = "太郎";
let age = 18;
let greet = "私の名前は" + name + "で年齢は" + age;
console.log(greet);

let greet2 = `私の名前は${name}で年齢は${age}`;
console.log(greet2);

// \nで改行しなくてよくなった
let greet3 = `私の名前は${name}
で年齢は${age}`;
console.log(greet3);

// 他にも色々
let greet4 = `私の名前は${"hoge" + name}で年齢は${age}`;
console.log(greet4);

let foods = ["a", "b", "c"];
let msg = `hoge, ${foods.join("")}`;
console.log(msg);

// tagged templateリテラル
function output() {
  console.log(arguments);
}

output("a", "b");

// タグ付きテンプレートリテラル
output`"a", "b"`;

function output2(string, ...values) {
  console.log(string);
  console.log(values);
}

output2`"a", "b"`;
output2`私の名前は${"hoge" + name}で年齢は${age}`;

// エスケープしない例
console.log(String.raw`あいうえ\nお`);

this.js

// this
let obj = {
  value: 0,
  increment: function() {
    setTimeout(function() {
      this.value++;
      console.log(this.value); // NaN
    }, 1000);
  }
};

let obj2 = {
  value: 0,
  increment: function() {
    setTimeout(
      function() {
        this.value++;
        console.log(this.value); // NaN
      }.bind(this),
      1000
    );
  }
};

obj2.increment();

let obj3 = {
  value: 0,
  increment: function() {
    // アロー関数を使うのthisは親のスコープのthisを引き継ぐ
    setTimeout(() => {
      this.value++;
      console.log(this.value); // 1
    }, 1000);
  }
};

obj3.increment();