知っておくべきJavaScriptの面接でよくある質問

はじめに:

JavaScript は、依然として Web 開発において最も人気のあるプログラミング言語の 1 つです。あなたが若手開発者であっても、熟練したプロフェッショナルであっても、面接で合格するには JavaScript をマスターすることが重要です。このブログでは、すべての開発者が答える準備をしておかなければならない JavaScript 面接の重要な質問 10 個を取り上げます。

1. JavaScript におけるクロージャとは何ですか?

クロージャは JavaScript の基本概念です。これらは、関数がその字句スコープ外で実行された場合でも、関数がその字句スコープへのアクセスを保持している場合に発生します。

function outerFunction() {
  let outerVariable = 'I am from outer scope';

  function innerFunction() {
    console.log(outerVariable); // Accesses outerVariable
  }

  return innerFunction;
}

const closureFunction = outerFunction();
closureFunction(); // Outputs: I am from outer scope

重要な理由: クロージャは、JavaScript のデータのカプセル化と関数スコープを理解するための鍵です。

2.イベントループとその仕組みを説明します

イベント ループは、JavaScript がシングルスレッドであるにもかかわらずノンブロッキング操作を実行できるようにするメカニズムです。これは、操作をキューに配置し、呼び出しスタックが空のときに実行することで機能します。

キーポイント:

コールスタック: 関数の実行を処理します。
コールバック キュー: 実行の準備ができているコールバックを保持します。
イベント ループ: タスクをコールバック キューからコール スタックに移動します。
重要な理由: イベント ループを理解することは、効率的で応答性の高い JavaScript コードを作成するために不可欠です。

3. == と === の違いは何ですか?

== (等価演算子): 型強制を使用して値を比較します。
=== (厳密等価演算子): 型強制なしで値を比較します (厳密等価)。

console.log(5 == '5');  // true
console.log(5 === '5'); // false

重要な理由: === を使用すると、型強制によって引き起こされる予期せぬバグが回避され、コードの予測可能性と信頼性が高まります。

4. Promise とは何ですか?また、どのように機能しますか?

Promise は、非同期操作の最終的な完了または失敗を表すオブジェクトです。これらは、コールバックと比較して、非同期コードを処理するためのよりクリーンな方法を提供します。

主要なメソッド:

then(onFulfilled, onRejected): 解決された状態と拒否された状態を処理します。
catch(onRejected): エラーを処理します。
finally(onFinally): Promise の結果に関係なくコードを実行します。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Resolved!'), 1000);
});

promise.then(result => console.log(result)); // Outputs: Resolved!

5. JavaScript の this キーワードとは何ですか?

this キーワードは、現在の関数を実行しているオブジェクトを参照します。その値は、関数が呼び出されるコンテキストによって異なります。

一般的な使用例:

グローバル コンテキスト: これはグローバル オブジェクトを指します。
オブジェクト メソッド: これはオブジェクトを参照します。
コンストラクター関数: 作成されたインスタンスを参照します。

const obj = {
  name: 'Alice',
  greet: function() {
    console.log(this.name);
  }
};

obj.greet(); // Outputs: Alice

6.アロー関数とは何ですか?通常の関数との違いは何ですか?

アロー関数は、より簡潔な構文を提供し、語彙的な this バインディングを持ちます。つまり、周囲のコンテキストからこれを継承します。

const add = (a, b) => a + b;

違い:

通常の関数: 独自の this があります。
アロー関数: 親スコープからこれを継承します。

重要な理由: アロー関数はコードを簡素化し、コールバックでのこのバインディングに関する一般的な問題を防ぎます。アロー関数はコードを簡素化し、コールバックでのこのバインディングに関する一般的な問題を防ぎます。

7. JavaScript でのプロトタイプ継承はどのように機能しますか?

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

const animal = {
  speak() {
    console.log('Animal speaks');
  }
};

const dog = Object.create(animal);
dog.bark = function() {
  console.log('Woof');
};

dog.speak(); // Outputs: Animal speaks
dog.bark();  // Outputs: Woof

8. nullと未定義の違いは何ですか?

null: 値が意図的に存在しないことを表します。

未定義: 宣言されているが初期化されていない変数を表します。

let a;
console.log(a); // Outputs: undefined

let b = null;
console.log(b); // Outputs: null

9. map、filter、reduce メソッドとは何ですか?

これらは配列操作に使用される高階関数です:

map: 各要素に関数を適用して新しい配列を作成します。
filter: テストに合格した要素を含む新しい配列を作成します。
reduce: 関数を適用して配列を単一の値に削減します。

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);
const sum = numbers.reduce((total, n) => total + n, 0);

console.log(doubled); // [2, 4, 6, 8, 10]
console.log(evens);   // [2, 4]
console.log(sum);     // 15

10. JavaScript のパフォーマンスを最適化するにはどうすればよいですか?

パフォーマンス最適化テクニック:

縮小してバンドル: Webpack などのツールを使用して、JavaScript ファイルを縮小してバンドルします。

遅延読み込み: 必要な場合にのみリソースを読み込みます。

デバウンス/スロットリング: イベントに応じて関数の実行速度を制御します。

メモリ リークを避ける: イベント リスナーと間隔を適切にクリーンアップします。

結論

これら 10 個の JavaScript 面接の質問をマスターすると、技術面接で直面する可能性のあるさまざまなシナリオや課題に備えることができます。これらのトピックについて理解を深めれば、面接で役立つだけでなく、JavaScript スキル全体の向上にも役立ちます。

「力は欲望ではなく、ニーズに応じて生まれます。そのニーズを作り出す必要があります。」

以上が知っておくべきJavaScriptの面接でよくある質問の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。