JavaScriptインタビューの質問：一般的な落とし穴

投稿日: 2022-04-20 2022-04-20
タグ: javascript

JavaScriptには、発見するまで最初はまったく意味をなさない技術はほとんどありません。現在、誰もが独自のJavaScriptの落とし穴のリストを持っていますが、「JavaScriptは大文字と小文字を区別する」などは、本当の落とし穴ではありません。私にとって、それはそうあるべきです。紛らわしいトリックではありません。それはそのように技術的なことです。

私にとっての本当の「落とし穴」は、1 == 1と1 == '1'が真であるが、[] == []が真ではない場合です。これは、より単純な「落とし穴」の1つですが、「理由」を掘り下げるまで、すぐには直感的に見えません。

このガイドでは、JavaScriptのインタビューで見つかる可能性のある一般的な落とし穴をいくつか紹介します。インタビュアーはおそらくこれらの質問を直接尋ねることはありませんが、彼らはあなたに彼らに関連する何かを尋ねたり、彼らに関係する問題を行うかもしれません。

var vs. させて

これは最も基本的な落とし穴の1つです。最初はvarキーワードとletキーワードが私に非常に似ているように見えたので、違いがあるとは言えませんでした。ただし、違いを示す一般的な方法は次のとおりです。

// let
for(let i=0; i<10; i++) {
  //...
}
console.log(i) // Reference Error: i is not defined

// var
for(var j=0; j<10; j++) {
  //...
}
console.log(j) // 10

大きな違いの1つは、letがブロックスコープであるということです。つまり、定義されているブロックに制限されます。 console.logがiとは何かを知るには、ホイストiをforループから外す必要があります。それはまさにvarが舞台裏で行うことです。 varキーワードは、のように関数スコープであり、親関数によってのみ制限されます。そして、それが宣言されているブロックの外側に自動的に持ち上げられます。

加算と連結

1 + 1; // 2, obviously
1 + "1"; // "11"

ご覧のとおり、JavaScriptは数値を文字列に変換します。それともそうですか？

1 - "1"; // 0 (number)
1 * "1"; // 1 (number)
1 / "1"; // 1 (number)
"1" * "1"; // 1 (yep, still a number)

いいえ、実際、JavaScriptはほとんどの場合文字列を数値に変換します。 +演算子の場合、追加されるのではなく連結されます。文字列のように連結："your" + "name" // "your name"。

NaN Gotchas

NaNは「数字ではない」の略です。これは、JavaScriptで処理するのがより混乱する（「数」？）ものの1つです。例えば：

NaN === NaN; // false
NaN == NaN; // false as well
typeof NaN; // number
"" == NaN; // false

実際、「NaN」に等しいものはすべて誤りです。「数ではない」ものはたくさんありますが、イベントです。そのため、代わりにisNaN()を使用する必要があります。しかし、それでも混乱する可能性があります。

isNaN("string"); // true - what we would expect, as a string is not a number
isNaN(123); // false - also expected
// false means it's a number, right?

isNaN(""); // false - hmm...
isNaN("45"); // false - this is a string, I thought
isNaN([]); // false - wait so an empty array is a number?

isNaN([1, 2]); // true
isNaN({}); // true
isNaN(() => {}); // true

平等/真実vs偽り

==と===の違いについてはすでにご存知かもしれません。 ==は値のみをチェックし、===はタイプチェックを含みます。そのため、1 === "1"は偽ですが、1 == "1"は真です。しかし、これが真実であることをご存知でしたか：null == undefined。しかしもちろん、これは==での緩いチェックです。

「等しくない」と言う!=もあります。これは正しいです：null !== undefined、しかしこれは間違っていますnull != undefined。続く？基本的に、最初のものは「nullはundefinedと正確に等しくない」と言っていますが、2番目は「nullはundefinedと大まかに等しくない」（二重否定、それらが大まかに等しいことを意味します）と言います。

しかし、さらに複雑になる比較をもっと見てみましょう。これらはすべてtrueとしてチェックアウトします。

false == '0' // true
0 == false   // true
'' == 0      // true
false == ''  // true
[] == ''     // true, but we'll get to this

'1' == true  // true
1 == true    // true
'false' == true // true

これらは紛らわしい比較チェックですが、技術的には真実ではありません。偽物。 []==[]の結果は偽であり、「[]」は真の値であることに注意してください。真実か偽かをチェックする方法は、ifブロックに物を置くことです。例えば：

if ("") {
  console.log(true);
} else {
  console.log(false);
}
// logs false

//But look at this
if ([]) {
  console.log(true);
}
// logs true - an empty array is still truthy

if ([] == "") {
  console.log(true);
}
// logs true - but look at the first one - it logged false

空のオブジェクト{}もtrueを記録します。 JavaScriptは、等式と型に関しては非常に興味深いものですが、比較にはトリプルイコール===または!==を使用することをお勧めします。

さて、最後の例は重要な違いの良い絵です。ゆるい平等はチェックし、価値をチェックしますが、必ずしも偽り/真実である必要はありません。 ifブロックは、偽り/真実をチェックします。 JavaScriptではこれが当てはまります：[] == false。しかし、上で見たように、ifブロックは空の配列を真であるとチェックします。明らかに、if(false)はどこにも行きません。

自動セミコロン挿入

コードの1行を終了するためにセミコロンを追加するのを忘れても、エラーが発生しないことに気づきました。舞台裏自動セミコロン挿入は、欠落しているセミコロンを挿入します。これは問題ありませんが、悪い習慣を生み出す可能性があります。一部のステートメントはセミコロンを必要とします。またはJavaScriptはそれらが終了したことを認識しない場合がありますが、他のステートメントは、後で説明するように、まったく終了していませんが、JavaScriptは終了したと考えました。

function increment(num) {
  return
  ++num
}
console.log(increment(3))

これは世界で最良の例ではありませんが、undefinedを返すことに驚かれるかもしれません。これは、「return」の最後にセミコロンが密かに挿入されており、コードの次の行に到達しないためです。このように少し：

function increment(num) {
  return;
  ++num;
}
console.log(increment(3));

グローバル変数

最後に、JavaScriptには、空中からグローバル変数を作成するという奇妙な動作があります。これは、letとvarのキーワードを扱う最初の落とし穴に戻ります。

letはブロックスコープであり、varは関数スコープであると言ったことを覚えていますか？では、これは何ですか？

for(i = 0; i < 10; i++) {
  // ...
}
console.log(i); // 10

私たちがしたことに気づきましたか？「i」変数の定義はありません：i=0。結果はどうですか？グローバル変数が作成されました。 i変数がグローバルになっているため、これは危険なことです。

これは、function someFn() { someVar = 0; }のすべての関数にも当てはまります。ここでのsomeVarはグローバル変数になり、window.var = 0と言っているのと似ています。

結論

JavaScriptにはナビゲートするのが難しいものがいくつかあります。実際のシナリオでは実際に見たことがない場合でも、インタビュアーがJavaScriptについてクイズを出します。しかし、あなたは何をしますか？

良いニュースは、これらのことを示すためのドキュメントやビデオ教育がたくさんあることです。「JavaScriptの難しい面接の質問」や「JavaScriptの難しい質問」などを検索することをお勧めします。そして、面接でそれらを取得しなくても、少なくとも、それらが発生した場合、将来の問題についてそれらを知っています。さらに、友達をだまして一緒に楽しむこともできます。

幸運を祈ります。疑問がある場合は、これらがすべての開発者が直面していることを覚えておいてください。あなただけではありません。

getdocs

13036