すべての開発者が知っておくべき JavaScript の奇妙な部分をデコードする

私たちが大好きな (あるいは大嫌いな) 言語である JavaScript には、強力であると同時に複雑さをもたらす独特の動作や癖がたくさんあります。これらの「奇妙な部分」は初心者を混乱させる可能性がありますが、これらをマスターすることは熟練した開発者になるために不可欠です。すべての開発者が知っておくべき、JavaScript の興味深い奇妙な点について詳しく見ていきましょう。

---

1. 強制: JavaScript の秘密の魔術師

JavaScript は、型間で値を変換することで役に立とうとしますが、この「有用性」が驚くべき結果を引き起こす可能性があります。

例: 予期せぬ数学

console.log('5' - 3);  // 2
console.log('5' + 3);  // '53'

• 減算: JavaScript は減算する前に「5」を数値に変換します。
• 加算: 文字列が関係する場合、JavaScript は加算ではなく連結します。

なぜそれが重要なのか

• この暗黙的な変換 (型強制) は、注意しないとバグを引き起こす可能性があります。
• 予期せぬ事態を避けるために、常に Number()、String()、または Boolean() を使用した明示的な変換を使用してください。

---

2. この謎

JavaScript での this の動作は、関数の呼び出し方法に応じて変化するため、混乱を招くことがよくあります。

例: 異なるコンテキスト

function showThis() {
  console.log(this);
}

showThis();  // Window or undefined in strict mode

const obj = { method: showThis };
obj.method();  // obj

const boundFunc = showThis.bind(obj);
boundFunc();  // obj

なぜそれが重要なのか

• これは宣言時には設定されません。それは呼び出しサイトによって異なります。
• アロー関数には独自の this がないため、語彙のコンテキストを保持するのに最適です。

---

3. イベント ループ: 非同期 JavaScript の謎を解く

JavaScript はシングルスレッドですが、イベント ループを通じて非同期タスクを処理できます。

例: 最初に実行されるものは何ですか?

console.log('Start');

setTimeout(() => console.log('Timeout'), 0);

Promise.resolve().then(() => console.log('Promise'));

console.log('End');

出力

Start
End
Promise
Timeout

• 同期コードが最初に実行されます。
• Promise (マイクロタスク) は setTimeout (マクロタスク) よりも優先されます。

なぜそれが重要なのか

イベント ループを理解することは、パフォーマンスの高い非同期コードを作成するための鍵となります。

---

4. クロージャ: 記憶する機能

クロージャとは、外部関数が戻った後でも関数がその字句スコープを「記憶」しているときのことです。

例: プライベート変数

function counter() {
  let count = 0;
  return function () {
    count++;
    console.log(count);
  };
}

const increment = counter();
increment();  // 1
increment();  // 2

なぜそれが重要なのか

クロージャを使用すると、プライベート変数を作成し、関数呼び出し全体で状態を維持できます。

---

5. プロトタイプ: JavaScript のバックボーン

JavaScript はプロトタイプベースの継承を使用します。つまり、オブジェクトは他のオブジェクトからプロパティとメソッドを継承できます。

例: カスタム メソッド

console.log('5' - 3);  // 2
console.log('5' + 3);  // '53'

なぜそれが重要なのか

プロトタイプを使用すると、インスタンス間でメソッドを効率的に共有できます。

---

6. 等価性チェック: == 対 ===

JavaScript は緩やかな等価性 (==) と厳密な等価性 (===) の両方を提供しており、それらは異なる動作をします。

例: Null と未定義の奇妙なケース

function showThis() {
  console.log(this);
}

showThis();  // Window or undefined in strict mode

const obj = { method: showThis };
obj.method();  // obj

const boundFunc = showThis.bind(obj);
boundFunc();  // obj

• == は型変換を実行するため、null は大まかに未定義と等しくなります。
• === 型と値の両方が等しいかどうかをチェックします。

なぜそれが重要なのか

明示的に型変換が必要でない限り、常に === を使用してください。
非プリミティブ値を直接比較することは避けてください ({} !== {})。

---

7. 不変性と参照型

JavaScript はオブジェクトと配列を参照型として扱います。つまり、参照への変更は元の参照に影響します。

例: コピーの落とし穴

console.log('Start');

setTimeout(() => console.log('Timeout'), 0);

Promise.resolve().then(() => console.log('Promise'));

console.log('End');

なぜそれが重要なのか

• 浅いコピーを作成するには、Object.assign() またはスプレッド演算子 ({ ...original }) を使用します。
• ディープ コピーの場合は、Lodash や StructuredClone などのライブラリを検討してください。

---

8. NaN: 見た目ほど単純ではない

NaN は「Not a Number」の略ですが、その動作は単純なものではありません。

例: NaN の比較

Start
End
Promise
Timeout

なぜそれが重要なのか

NaN などの特殊な場合の厳密な等価性が必要な場合は、Object.is を使用します。

---

9. ホイスティング: 最初に宣言するものは何ですか?

ホイスティングにより、変数と関数の宣言がスコープの先頭に移動します。

例: 変数のホイスト

function counter() {
  let count = 0;
  return function () {
    count++;
    console.log(count);
  };
}

const increment = counter();
increment();  // 1
increment();  // 2

• var 宣言は巻き上げられますが、未定義として初期化されます。
• 関数宣言は完全にホイストされています。

なぜそれが重要なのか

変数ホイスティングの混乱を避けるには、let と const を使用します。

---

10. 奇妙なデフォルト: デフォルトパラメータ

デフォルトのパラメータは関数をより柔軟にしますが、未定義と組み合わせると奇妙な動作をする可能性があります。

例: デフォルトと引数

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function () {
  console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person('Alice');
alice.greet();  // Hello, my name is Alice

なぜそれが重要なのか

デフォルトのパラメータは、引数が null ではなく未定義の場合にのみ適用されます。

---

結論: 奇妙さを受け入れよう

JavaScript の癖により、JavaScript はイライラすると同時に楽しいものになります。これらの動作を理解すると、より優れた開発者になるだけでなく、言語の柔軟性と設計の選択肢を理解するのにも役立ちます。

次の癖のうちどれに遭遇しましたか?どのように対処しましたか?以下のコメント欄でご意見を共有してください!

以上がすべての開発者が知っておくべき JavaScript の奇妙な部分をデコードするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。