Help us understand the problem. What is going on with this article?

【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が1ずつ増えて100になるまでiの値を繰り返し出力するという命令です

let i = 0; 

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

3.forのループ処理

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

// 見本

for (let 初期値を代入した変数名; 条件式; 変数の再代入) {
  console.log(i);
}
// 下記はiが1ずつ増えて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 処理
};

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

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

以上

Yu-8chan
フロントエンドエンジニアです。 主に日々の学習で学んだことをアウトプットしています(React多め)。 初学者故、至らぬ点等ございますが温かい目で見守っていただけると幸いです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away