モダンフロントエンド開発に必要なJavaScriptメソッドまとめ

概要

数多あるJavaScriptメソッドの中、モダンフロントエンド開発でこれは頻出するぞ！というメソッドのまとめ

背景

JavaScriptのメソッドはたくさんありますが全て網羅するにはものすごい時間がかかります。
個人的にはudemyに動画を上げているコードマフィアさんやよしぴぃさんらのように隅々まで理解をしたい所存です。
しかし最初から完璧な理解は難しいし、あまり使わないメソッドに対しても最初から時間をかけるべきではないというのが私の感想です。

モダンフロントエンドの開発をしていく中でJavaScriptの基礎力が重要になってくるのは言うまでもないのでしっかり習得するべくまとめていきたいと思います💪
また初心者の方でもわかるような解説を意識したいと思います。

分と式

参照：https://jsprimer.net/basic/statement-expression/

読めば要点がわかります。

以前if文を変数に代入しようとしてエラーが出てたんですが、それはif文が文だったからなんですね。
文：変数に代入不可🙅‍♂️
式：変数に代入可🙆‍♂️
ちなみにその時のエラーはSyntaxError (構文エラー)

関数と式

参照：https://jsprimer.net/basic/function-declaration/

要点は下記

• 仮引数と実引数
  • 仮引数: 関数定義時に使用する引数
  • 実引数: 関数使用時に使用する引数
• 関数でreturn文が実行されると、関数内ではそれ以降の処理は行われない
  • つまり何か記述する際はreturnより前に書かないといけない
  • また処理をストップさせるときにも有効なのでは？
• 関数が値を返す必要がない場合は、return文では返り値を省略できる
  • returnそのものも省略できる
• 呼び出し時の引数が少ない時: undefiend
• 呼び出し時の引数が多い時: 無視される
• 引数はデフォルト設定できる (ES2015以降)
  • 例function (name = "taro", age = 30)
• 可変長引数: 任意の個数の引数を受け取れる

// Math.maxは可変長引数を受け取る関数
const max = Math.max(1, 5, 10, 20);
console.log(max); // => 20

• Rest parameters: 仮引数名の前に...をつけた仮引数のことで、残余引数とも呼ばれる
  • 渡された値が配列として代入される

function fn(...args) {
    // argsは引数の値が順番に入った配列
    console.log(args); // => ["a", "b", "c"]
}
fn("a", "b", "c");

• 関数の引数で分割代入をすることができる (以下参照)

// ES2015より前
function printUserId(user) {
    console.log(user.id); // => 42
}
const user = {
    id: 42
};
printUserId(user);

// 分割代入後に関数定義
const user = {
    id: 42
};
const { id } = user;
function printUserId({ id }) {
    console.log(id); // => 42
}
printUserId(user);

// 引数で分割代入
function printUserId({ id }) {
    console.log(id); // => 42
}
const user = {
    id: 42
};
printUserId(user);

// 配列も然り
function print([first, second]) {
    console.log(first); // => 1
    console.log(second); // => 2
}
const array = [1, 2];
print(array);

• 基本的にArrow functionを使用し、それで対応できない場合通常のfunctionを使用する
• コールバック関数とは引数として渡される関数のこと
  • コールバック関数を持つ関数のことを高階関数と呼ぶ
• obj内のメソッドの短縮記法(ES2015以降)・・・class構文でも使用できる
  • 旧: method: function(){}
  • 新: method(){}