Stack Overflow Survey調査によると、JavaScriptはこれまでもこれからも最も人気のあるプログラミング言語です。 すべての空席の3分の1がJavaScriptの知識を必要とすることは驚くことではありません。 したがって、近い将来開発者として働く予定がある場合は、この非常に人気のある言語に慣れる必要があります。
この出版物の目的は、インタビューでよく見られるJavaScriptのすべての概念を1か所に集めることです。
記事を始める前に、居心地の良い電報チャンネル@justkorolevを購読することをお勧めします。ここでは、さまざまな書籍に興味深い技術記事とレビューを投稿します。
タイプと変換
7つの組み込みタイプがあります： null 、 undefined 、 boolean 、 number 、 string 、 objectおよびsymbol （ES6）。
これらのタイプはすべてプリミティブと呼ばれます （ オブジェクトを除くすべて）。
typeof 0 // number typeof true // boolean typeof 'Hello' // string typeof Math // object typeof null // object !! typeof Symbol('Hi') // symbol (New ES6)
ヌルvs未定義
未定義とは、変数宣言がないことです。 初期化されていない変数、関数の引数（値が渡されなかった）、およびオブジェクトの欠損値のデフォルト値として使用されます。
NULLは、変数値が存在しないことです。
暗黙的な変換
この例を見てください：
var name = 'Joey'; if (name) { console.log(name + " doesn't share food!") // Joey doesn't share food! }
ここでは、 name変数の値はtrueを返すため、コンソールは「Joeyは食べ物を共有しません！」と出力します。 しかし、何がtrueを返し、何がfalseを返すかをどのようにして知ることができますか？
偽の値は、ブール型にキャストするときに偽を返す値です。
偽の値には、 "" 、 0 、 null 、 undefined 、 NaN、およびfalseが含まれます 。
falseではないすべてがtrueを返します。
Boolean(null) // false Boolean('hello') // true Boolean('0') // true Boolean(' ') // true Boolean([]) // true Boolean(function(){}) // true
はい あなたはすべてを正しく読みます。 空の配列、オブジェクト、および関数はtrueを返します！
文字列と数値変換
最初に知っておくべきことは+演算子です。 これは、数字を追加して文字列を連結するために機能するため、複雑なステートメントです。
* 、 /および-演算子は、数値演算専用の演算子です。 したがって、文字列で使用される場合、これにより数値形式に変換されます。
1 + "2" = "12" "" + 1 + 0 = "10" "" - 1 + 0 = -1 "-9\n" + 5 = "-9\n5" "-9\n" - 5 = -14 "2" * "3" = 6 4 + 5 + "px" = "9px" "$" + 4 + 5 = "$45" "4" - 2 = 2 "4px" - 2 = NaN null + 1 = 1 undefined + 1 = NaN
== vs ===
==が等式をチェックし、 ===が等式とタイプをチェックするという広範な信念。 しかし、これは誤解です。
実際、 ==は変換との等価性をチェックし、 ===はそれなしで2つの値の等価性をチェックします- 厳密な比較 。
2 == '2' // True 2 === '2' // False undefined == null // True undefined === null // False
変換は複雑になる可能性があります。 以下の例をご覧ください。
let a = '0'; console.log(Boolean(a)); // True let b = false; console.log(Boolean(b)); // False
次の比較から何を期待しますか？
console.log(a == b); (1)
trueを返します。 なんで？
実際に実際に行われるのは、ブール値をブール値以外と比較する場合、JavaScriptはブール値を数値型に変換してから比較するだけです（2） 。
これで、式は数値と文字列を比較しています 。 これを行うために、JavaScriptはストリングをタイプ番号 （3）に強制的に変換します。
したがって、結果として、式0 == 0が得られますが、これは真です。
'0' == false (1) '0' == 0 (2) 0 == 0 (3)
このような比較がどのように行われるかをよりよく理解するには、ES5のドキュメントをこちらで確認できます 。
また、 チートシートを見ることができます。
次に、いくつかの複雑な例を示します。
false == "" // true false == [] // true false == {} // false "" == 0 // true "" == [] // true "" == {} // false 0 == [] // true 0 == {} // false 0 == null // false
価値とリンク
Null 、 undefined 、 boolean 、 number 、 stringおよびES6 シンボルは単純な値（プリミティブとも呼ばれます）です。 それらは常にその内容を変数にコピーします。
複雑な値は、割り当てられたときに常にリンクのコピーを作成します。
var a = 2; // 'a' 2 . var b = a; // 'b' 'a' b++; console.log(a); // 2 console.log(b); // 3 var c = [1,2,3]; var d = c; // 'd' d.push( 4 ); // console.log(c); // [1,2,3,4] console.log(d); // [1,2,3,4] /* */ var e = [1,2,3,4]; console.log(c === d); // true console.log(c === e); // false
複雑な値をコピーするには、そのコピーを作成する必要があります。そうすると、リンクは元の場所を指しません。
const copy = c.slice() // 'copy' console.log(c); // [1,2,3,4] console.log(copy); // [1,2,3,4] console.log(c === copy); // false
範囲
スコープは実行コンテキストを定義します。 コード内の値と関数の可用性を決定します。
グローバルスコープは、最も大きな領域です。 関数の外部で宣言された値はグローバルであり、プログラム内のどこからでもアクセスできます。 ブラウザでは、 ウィンドウオブジェクトはグローバルスコープのリポジトリです。
ローカルスコープは、関数に囲まれたスコープです。 ローカルスコープで宣言された変数は、その中でのみアクセスできます。
function outer() { let a = 1; function inner() { let b = 2; function innermost() { let c = 3; console.log(a, b, c); // 1 2 3 } innermost(); console.log(a, b); // 1 2 — 'c' } inner(); console.log(a); // 1 — 'b' 'c' } outer();
スコープは、サイズが（最大から最小に）縮小する一連のドアと考えることができます。 一番小さなドア、つまり最も内側の領域に収まる背の低い人も、あらゆる大きなドア、つまり外側の領域を通過します。
しかし、たとえば、3番目のドアで立ち往生している背の高い人は、以前のすべてのドア-外部エリアにアクセスできますが、より小さなドア-内部エリアにはアクセスできません。
育てる
コンパイル段階でそれぞれの領域の上部にある変数と関数の宣言を「移動」する動作は、 liftingと呼ばれます。
アナウンス機能が完全に提起されています。 つまり、宣言された関数は、定義される前に呼び出すことができます。
console.log(toSquare(3)); // 9 function toSquare(n){ return n*n; }
部分的に発生した変数。 var演算子で宣言された変数は発生しますが、値は発生しません。
letとconstはアップグレードをサポートしません。
{ /* */ console.log(i); // undefined var i = 10 console.log(i); // 10 } { /* */ var i; console.log(i); // undefined i = 10 console.log(i); // 10 } // ES6 let & const { console.log(i); // ReferenceError: i is not defined const i = 10 console.log(i); // 10 } { console.log(i); // ReferenceError: i is not defined let i = 10 console.log(i); // 10 }
関数式と関数宣言
関数式
実行が宣言に達すると、関数式が作成されます（生成されません）。
機能的な広告
機能的宣言は、その説明の前後に呼び出すことができます（それが発生します）。
変数：var、let、およびconst
ES6標準が導入される前は、変数はvarでのみ宣言できました。 別の関数内で宣言された変数と関数は、どのカバーエリアからもアクセスできません-機能によって制限されています。
中括弧内で宣言された値は、それらの外側でも使用できます。
ご注意 var 、 let、またはconstキーワードなしで宣言された変数は、グローバルスコープにvar変数を作成します。
function greeting() { console.log(s) // undefined if(true) { var s = 'Hi'; undeclaredVar = 'I am automatically created in global scope'; } console.log(s) // 'Hi' } console.log(s); // Error — ReferenceError: s is not defined greeting(); console.log(undeclaredVar) // 'I am automatically created in global scope'
ES6 letおよびconstは新しいものです。 彼らは持ち上げていない+宣言されている中括弧のペアは、スコープを制限します。
let g1 = 'global 1' let g2 = 'global 2' { /* */ g1 = 'new global 1' let g2 = 'local global 2' console.log(g1) // 'new global 1' console.log(g2) // 'local global 2' console.log(g3) // ReferenceError: g3 is not defined let g3 = 'I am not hoisted'; } console.log(g1) // 'new global 1' console.log(g2) // 'global 2'
一般的な誤解は、 constは不変であるということです。 再宣言することはできませんが、参照する値（配列/オブジェクトの場合）は変更できます ！
const tryMe = 'initial assignment'; tryMe = 'this has been reassigned'; // TypeError: Assignment to constant variable. // , ... const array = ['Ted', 'is', 'awesome!']; array[0] = 'Barney'; array[3] = 'Suit up!'; console.log(array); // [“Barney”, “is”, “awesome!”, “Suit up!”] const airplane = {}; airplane.wings = 2; airplane.passengers = 200; console.log(airplane); // {passengers: 200, wings: 2}