振り返りと個人的メモを共有します。

JavaScript ES6

ECMAScript 2015(ES6)

変数の宣言

var name = "xxxx";//再宣言可、再代入可、関数スコープ(ES5以下でも動作)
let name = "xxxx";//再宣言不可、再代入可、ブロックスコープ
const name  = "xxxx";//再宣言不可、再代入不可、ブロックスコープ

算術演算子

演算	数式
加算	a+b
減算	a-b
乗算	a*b
除算	a/b
剰余	a%b

if文

if (a === b) {
  proc();
  } else if {
  proc();
  }else{
  proc();
  }

switch文

switch (val) {
  case 1:

関数

const 定数名 = function(){
  //纏めたい処理
};

定数に対し、function()の内容を代入することで
関数を定義する。

関数を定義しただけでは処理は実行されない
「定義した定数名();」と書くことで実行される。

アロー関数

関数定義時のfunction()を()=>と記載することも可能。
これはES6から導入されたアロー関数と呼ばれるもの。

const 定数名 = ()=>{

  //纏めたい処理

};

引数

const 定数名 = (第1引数,第2引数,・・・)=>{

  //纏めたい処理

};

戻り値

関数の中でreturnを使うと、呼び出し元で値を受け取れるようになる。

値の返却

const 関数A = (第1引数,第2引数,・・・)=>{

  //纏めたい処理

  return 値;
};

const 結果用変数 = 関数A(引数1,引数2);
console.log(結果用変数); // =>returnされた値

真偽値の返却

const 関数A = (第1引数,第2引数,・・・)=>{

  //纏めたい処理

  return 値 === x; //条件に応じたtrue/falseを返却
};

if(関数A(引数)){ //関数の真偽を条件に処理を実行
  //関数Aが真の場合に実行する処理
}else{
  //関数Aが偽の場合に実行する処理
}

文字列中の変数展開

テンプレートリテラルによる文字列中での変数展開

const val = "World"
// ダブルクォート
const output1 = "Hello " + val + "!" // => Hello World!
// テンプレート構文
const output2 = `Hello ${val}!` // => Hello World!

プレースホルダー内での値の取り扱い

プレースホルダー${...}内では計算や関数呼び出しが可能。

const num1 = 2, num2 = 3

console.log( `num1 + num2 = ${num1 + num2}` )
// => num1 + num2 = 5

function sub(a, b) {
  return b + a
}
console.log( `num1 + num2 = ${sub(num1, num2)}` )
// => num1 + num2 = 5