はじめに

こんにちは。web開発未経験からwebアプリケーションエンジニアになるため、勉強を始めようと思い記事にいたします。
私のこれまでの経験はC言語を嗜む程度であり、コンピュータサイエンスに関する知識がゼロのところからのスタートとなりますので暖かく見守っていただけると幸いです。最終的にはReact、Next.jsとモダンなweb開発?へと繋げていけたらと思います。また、初学者の方は、私の記事と一緒に勉強していけたらと思います。
よろしくお願いいたします！

1. アロー関数（簡潔さが命！）

アロー関数はコードを短く、シンプルに書けるから、実戦ではよく使われるらしい。特にコールバック関数や、関数の中でシンプルな処理をしたいときに便利だと。

例えば、配列の各要素を2倍にするなら、アロー関数でこんな感じに書ける：

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled);  // [2, 4, 6, 8]

アロー関数のおかげで、無駄なく簡潔に書ける。returnを省略できるのがポイント。

2. デフォルト引数（めんどくさい処理を回避！）

実戦では、関数に引数を渡さないときもあるかも？そんなときに役立つのがデフォルト引数。

const greet = (name = 'Guest') => {
  return `Hello, ${name}!`;
};

console.log(greet());        // "Hello, Guest!"
console.log(greet('Luna'));  // "Hello, Luna!"

引数を忘れてもデフォルトで処理してくれるから、コードの頑丈さが増す。これで引数を渡し忘れた初心者にも優しいコードが書ける。

3. 即時関数（IIFE）

「この関数、すぐに実行したいけど、外に影響を与えたくない！」ってとき、即時関数（IIFE）が役立つ。ブロックスコープを持ちながら、一度だけ実行されるのが特徴。

(function() {
  console.log('This runs immediately!');
})();

グローバルスコープを汚さないし、使い捨ての処理を書くときに超便利。だから、他のコードと衝突することがなく、クリーンな設計ができる。

4. 高階関数（関数を返す、または引数に関数を取る）

関数を引数に取ったり、関数を返す高階関数は、実戦でかなり強力なツール。例えば、何度も同じ操作をするけど、ちょっとだけ処理が違う場合に便利。

const multiplier = (factor) => {
  return (num) => num * factor;
};

const double = multiplier(2);
console.log(double(5));  // 10

const triple = multiplier(3);
console.log(triple(5));  // 15

こんな風にカスタマイズ可能な関数を作れる。プロジェクトの中で使い回しできる関数を作るときは、こういう柔軟性が必要。

5. コールバック関数（非同期処理の親友）

非同期処理（例えばデータベースやAPIとのやりとり）では、コールバック関数が大活躍。例えば、データの読み込みが完了した後に処理を行うことができる。

const fetchData = (callback) => {
  setTimeout(() => {
    const data = 'Sample data';
    callback(data);
  }, 2000);  // 2秒後にデータを取得
};

fetchData((result) => {
  console.log(`Fetched: ${result}`);
});

これで、時間のかかる処理が終わったタイミングで後続の処理を行える。

6. クロージャ（Closure）

クロージャは、関数が定義されたときのスコープを保持する特殊な機能だ。クロージャを使うと、関数外からでも関数内の変数にアクセスできるようになる。

コードをコピーする
function outer() {
  let count = 0;

  function inner() {
    count++;
    console.log(count);
  }

  return inner;
}

const counter = outer();
counter();  // 1
counter();  // 2
counter();  // 3

inner関数がouter関数のcount変数にアクセスできる。このように、内部関数が外部関数の変数を覚えている状態をクロージャという。
これがむずいな。
const counter = outer();ではouterが呼ばれて、return innerが起こることによって、次回以降のcounterではinnerだけが呼ばれてるんだな。はえー。

おわりに

網羅などできちゃいませんが、一旦触れてみました。ChatGPTのみだと、情報の正確性や、網羅性を担保することができないので、しっかり体型的に勉強するにはプロンプトを工夫するか、本やドキュメントを活用しないとなと思います。
それでは失礼します。