【JavaScript】基礎編

自分用の簡単な備忘録です。。。

#1.switchで条件分岐

if文で条件の分岐が多数になるときに、switchを使用すればもっと簡単に書くことができます。

// 見本

変数名 = "値"

switch (変数名) {
  case "値":  
    処理
    break;
  case "値":
    処理
    break;
  case "値":
    処理
    break;
  default:
    処理
    break;
}

// 信号機の色別で出力内容を条件分岐してみます

color = "red"

switch (color) {
  case "red":  
    console.log("STOP!!")
    break;
  case "yellow":
    console.log("be careful!!")
    break;
  case "blue":
  case "green":  // caseは複数指定することもできます
    console.log("GO!!")
    break;
  default:  // 条件のどれにも当てはまらなかった場合にdefaultで指定した内容が出力されます
    console.log("Not applicable!!")
    break;

// 結果としてはredのSTOPが出力されます

}

#2.whileのループ処理

while文は指定した条件が満たされるまで、ループ処理を繰り返して値を出力してくれる便利なプロパティです。

// 下記はiが１ずつ増えて100になるまでiの値を繰り返し出力するという命令です

let i = 0; 

while (i <= 100) {
  console.log(i);
  i++;  // この記述がないと無限に処理が実行されるので注意しましょう！
}

#3.forのループ処理

for文はwhile文をさらに簡略化した記述ができるプロパティです。

// 見本

for (let 初期値を代入した変数名; 条件式; 変数の再代入) {
  console.log(i);
}

// 下記はiが１ずつ増えて100になるまでiの値を繰り返し出力するという命令です

for (let i = 0; i <= 100; i++) {
  console.log(i);
}

#4.テンプレートリテラル記法

下記のような記述で、文字列と変数を接続することができます。

const animal = "猫";
// シングルクオーテーションの代わりにバッククオートで${}に囲むことで文字列と変数を接続できます
console.log(`この動物は ${animal} です` );

// 出力内容：この動物は猫です

#5.continueとbreak

continueは対象の値をスキップしたいときに、
breakは対象の値で処理を停止させたいときに使用します

for文を使って見ていきます。

for (let i = 1; i <= 10; i++) {
  if (i === 4) {
    continue;
  }
  console.log(i);
}

// この条件式なら、1~10の出力の中で4の値のみスキップされます

for (let i = 1; i <= 10; i++) {
  if (i === 4) {
    break;
  }
  console.log(i);
}

// この条件式なら、4の値でループ処理が停止するので、3の値までしか出力されません

#6.関数

// 引数にはデフォルトで値を入れておくこともできる
function 関数名（引数） {
  処理
}
// 呼び出す
関数名（引数）;

#7.関数宣言と関数式の違い

6で紹介した関数の記述方法は関数宣言と言われています。
その他に関数宣言を変数に代入する関数式というものがあるので紹介しつつ違いを明確にしていきます。

// 関数宣言
function 関数名（引数） {
  処理
}
関数名（引数）;

関数式とは、関数を定数に代入することを言います。

// 関数式
const 定数 = function（引数） {  // 関数名がいらなくなります
  処理
};  // 定数に代入しているので末尾には;が必要です
// 呼び出すときは定数名になります
定数名（引数）;

#8.アロー関数
関数をもっと短く記述することができる記法です。

const 定数 = (引数) => { // functionがいらなくなり、=>が必要
  return 処理
};

また、引数が１つの場合やreturnの処理が１つの場合はもっと簡易的に気j仏することができます。

const 定数 = 引数 => 処理;
// ()も{}も必要なくなります

以上