注記
このレポは2019年に作成され、ここで提供される質問は、当時のJavaScriptの構文と動作に基づいています。 JavaScriptは絶えず進化する言語であるため、ここでは質問ではカバーされていない新しい言語機能があります。
BasicからAdvancedまで：JavaScriptをよく知っているか、知識を少し更新するか、コーディングインタビューの準備をしてください！ ？このレポは、新しい質問で定期的に更新します。質問の下に**崩壊したセクション**に答えを追加しました。それらをクリックして展開します。それはただ楽しみのためです、頑張ってください！ ❤❤️
お気軽にご連絡ください！ ？
Instagram || Twitter || LinkedIn ||ブログ
| プロジェクトで自由に使用してください！ ？私はこのレポへの参照を本当に感謝します、私は質問と説明を作成します（はい、私は悲しいです）。 ??ありがとう、そして楽しんでください！ |
|---|
function sayHi ( ) {
console . log ( name ) ;
console . log ( age ) ;
var name = 'Lydia' ;
let age = 21 ;
}
sayHi ( ) ;LydiaとundefinedLydiaとReferenceErrorReferenceErrorと21undefinedおよびReferenceError関数内で、最初にvarキーワードでname変数を宣言します。これは、変数を定義するラインに実際に到達するまで、変数がundefinedのデフォルト値で巻かれ（作成フェーズ中にメモリスペースが設定される）ことを意味します。 name変数を記録しようとする行で変数をまだ定義していないため、 undefinedの値を保持しています。
letキーワード（およびconst ）の変数は巻き上げられますが、 varとは異なり、初期化されないでください。それらは、私たちがそれらを宣言（初期化）する前にアクセスできません。これは「時間的デッドゾーン」と呼ばれます。変数が宣言される前に変数にアクセスしようとすると、JavaScriptはReferenceErrorをスローします。
for ( var i = 0 ; i < 3 ; i ++ ) {
setTimeout ( ( ) => console . log ( i ) , 1 ) ;
}
for ( let i = 0 ; i < 3 ; i ++ ) {
setTimeout ( ( ) => console . log ( i ) , 1 ) ;
}0 1 2および0 1 20 1 2および3 3 33 3 3および0 1 2 JavaScriptのイベントキューのため、ループが実行された後にsetTimeoutコールバック関数が呼び出されます。最初のループの変数i varキーワードを使用して宣言されたため、この値はグローバルでした。ループ中に、Unary Operator ++を使用して、 iの値を毎回1増やしました。 setTimeoutコールバック関数が呼び出される頃には、最初の例では3に等しくiました。
2番目のループでは、letキーワード： let （およびconst ）キーワードで宣言されたletキーワードを使用してiが宣言された変数はブロックスコープです（ブロックは{ }の間にあります）。各反復中、 i新しい値を持ち、各値はループ内でスコープされます。
const shape = {
radius : 10 ,
diameter ( ) {
return this . radius * 2 ;
} ,
perimeter : ( ) => 2 * Math . PI * this . radius ,
} ;
console . log ( shape . diameter ( ) ) ;
console . log ( shape . perimeter ( ) ) ;20および62.8318530717958620とNaN20および63NaNと63 diameterの値は通常の関数であり、 perimeterの値は矢印関数であることに注意してください。
矢印関数を使用すると、 thisキーワードは、通常の機能とは異なり、現在の周囲の範囲を指します！これは、 perimeterを呼び出す場合、形状オブジェクトを参照するのではなく、周囲の範囲（たとえばウィンドウ）を参照します。
矢印2 * Math.PIの範囲に値radiusがないため、 this.radius undefined NaNなります。
+ true ;
! 'Lydia' ;1とfalsefalseとNaNfalseとfalse Unary Plusは、オペランドを数に変換しようとします。 trueは1で、 falseは0です。
文字列'Lydia'は真実の価値です。私たちが実際に尋ねているのは、「この真実の価値はfalsyですか？」です。これはfalseを返します。
const bird = {
size : 'small' ,
} ;
const mouse = {
name : 'Mickey' ,
small : true ,
} ;mouse.bird.sizeは無効ですmouse[bird.size]無効ですmouse[bird["size"]]無効ですJavaScriptでは、すべてのオブジェクトキーが文字列です（シンボルでない限り）。私たちはそれらを弦としてタイプすることはないかもしれませんが、それらは常にフードの下の弦に変換されます。
JavaScriptは、ステートメントを解釈（または除外）します。ブラケット表記を使用すると、最初のオープニングブラケットが表示されます[閉鎖ブラケットが見つかるまで続けます] 。その場合にのみ、声明を評価します。
mouse[bird.size] ：最初にbird.size評価します。これは"small"です。 mouse["small"] trueを返します
ただし、DOT表記では、これは発生しません。 mouse birdと呼ばれるキーがありません。つまり、 mouse.birdはundefinedです。次に、ドット表記を使用してsizeを要求します： mouse.bird.size 。 mouse.birdはundefinedであるため、実際にはundefined.size求めています。これは有効ではなく、 Cannot read property "size" of undefinedと同様のエラーをスローします。
let c = { greeting : 'Hey!' } ;
let d ;
d = c ;
c . greeting = 'Hello' ;
console . log ( d . greeting ) ;HelloHey!undefinedReferenceErrorTypeErrorJavaScriptでは、すべてのオブジェクトが相互に等しく設定するときに参照によって相互作用します。
まず、変数cオブジェクトの値を保持します。その後、 cオブジェクトに持っているのと同じ参照をd割り当てます。
1つのオブジェクトを変更すると、すべてを変更します。
let a = 3 ;
let b = new Number ( 3 ) ;
let c = 3 ;
console . log ( a == b ) ;
console . log ( a === b ) ;
console . log ( b === c ) ;true false truefalse false truefalse true falsetrue ： false true new Number()組み込み関数コンストラクターです。数字のように見えますが、実際には数字ではありません。追加の機能がたくさんあり、オブジェクトです。
==オペレーター（equalityオペレーター）を使用する場合、同じ値があるかどうかをチェックします。どちらも3の値を持っているので、それはtrueです。
ただし、 ===オペレーター（Strict Equality Operator）を使用する場合、値とタイプの両方が同じでなければなりません。そうではありません： new Number()数字ではなく、オブジェクトです。どちらもfalse.
class Chameleon {
static colorChange ( newColor ) {
this . newColor = newColor ;
return this . newColor ;
}
constructor ( { newColor = 'green' } = { } ) {
this . newColor = newColor ;
}
}
const freddie = new Chameleon ( { newColor : 'purple' } ) ;
console . log ( freddie . colorChange ( 'orange' ) ) ;orangepurplegreenTypeError colorChange関数は静的です。静的メソッドは、作成されたコンストラクターのみで生活するように設計されており、子供に受け継がれたり、クラスのインスタンスに呼び出されたりすることはできません。 freddieクラスのカメレオンのインスタンスであるため、機能を呼び出すことはできません。 TypeErrorが投げられます。
let greeting ;
greetign = { } ; // Typo!
console . log ( greetign ) ;{}ReferenceError: greetign is not definedundefinedグローバルオブジェクトに空のオブジェクトを作成しただけなので、オブジェクトを記録します！ greetingをgreetignとして間違えたとき、JS通訳者は実際にこれを次のように見ました。
global.greetign = {} in node.jswindow.greetign = {} 、 frames.greetign = {}およびself.greetignのブラウザ。self.greetign 。globalThis.greetign 。これを回避するために、 "use strict"を使用できます。これにより、変数を何に等しく設定する前に、変数を宣言したことを確認します。
function bark ( ) {
console . log ( 'Woof!' ) ;
}
bark . animal = 'dog' ;SyntaxError 。この方法で機能にプロパティを追加することはできません。"Woof"が記録されます。ReferenceError関数はオブジェクトであるため、これはJavaScriptで可能です！ （プリミティブタイプ以外のすべてはオブジェクトです）
関数は特別なタイプのオブジェクトです。自分で書くコードは実際の関数ではありません。関数は、プロパティを備えたオブジェクトです。このプロパティは呼び出されます。
function Person ( firstName , lastName ) {
this . firstName = firstName ;
this . lastName = lastName ;
}
const member = new Person ( 'Lydia' , 'Hallie' ) ;
Person . getFullName = function ( ) {
return ` ${ this . firstName } ${ this . lastName } ` ;
} ;
console . log ( member . getFullName ( ) ) ;TypeErrorSyntaxErrorLydia Hallieundefined undefined JavaScriptでは、関数はオブジェクトであるため、メソッドgetFullNameコンストラクター関数オブジェクト自体に追加されます。そのため、 Person.getFullName()を呼び出すことができますが、 member.getFullName TypeErrorスローします。
すべてのオブジェクトインスタンスでメソッドを使用できるようにする場合は、プロトタイププロパティに追加する必要があります。
Person . prototype . getFullName = function ( ) {
return ` ${ this . firstName } ${ this . lastName } ` ;
} ; function Person ( firstName , lastName ) {
this . firstName = firstName ;
this . lastName = lastName ;
}
const lydia = new Person ( 'Lydia' , 'Hallie' ) ;
const sarah = Person ( 'Sarah' , 'Smith' ) ;
console . log ( lydia ) ;
console . log ( sarah ) ;Person {firstName: "Lydia", lastName: "Hallie"} 、 undefinedPerson {firstName: "Lydia", lastName: "Hallie"}およびPerson {firstName: "Sarah", lastName: "Smith"}Person {firstName: "Lydia", lastName: "Hallie"}および{}Person {firstName: "Lydia", lastName: "Hallie"}およびReferenceError sarahには、 newキーワードを使用しませんでした。 new使用する場合、 this作成した新しい空のオブジェクトを指します。ただし、 new追加を追加しない場合、 thisグローバルオブジェクトを指します！
this.firstName this.lastName "Sarah" "Smith"に等しいと言いました。私たちが実際にしたことは、 global.firstName = 'Sarah'とglobal.lastName = 'Smith'を定義することです。 sarah自体は、 Person関数から値を返さないため、 undefinedままです。
キャプチャフェーズ中、イベントは祖先要素をターゲット要素まで通過します。次に、ターゲット要素に到達し、泡立ちが始まります。
すべてのオブジェクトには、ベースオブジェクトを除き、プロトタイプがあります。ベースオブジェクトは、ユーザーによって作成されたオブジェクト、またはnewキーワードを使用して作成されるオブジェクトです。ベースオブジェクトには、 .toStringなどのいくつかのメソッドとプロパティにアクセスできます。これが、組み込みのJavaScriptメソッドを使用できる理由です！このような方法はすべて、プロトタイプで入手できます。 JavaScriptはオブジェクトで直接見つけることができませんが、プロトタイプチェーンを下ってそこに見つけられるため、アクセスしやすくなります。
function sum ( a , b ) {
return a + b ;
}
sum ( 1 , '2' ) ;NaNTypeError"12"3JavaScriptは動的にタイプされた言語です。特定の変数がどのようなタイプであるかは指定しません。値は、暗黙の型強制と呼ばれることなく、自動的に別のタイプに変換できます。強制は、あるタイプから別のタイプに変換されています。
この例では、JavaScriptは、関数が意味を作り、値を返すために、番号1文字列に変換します。数値タイプ（ 1 ）と文字列タイプ（ '2' ）を追加すると、数値は文字列として扱われます。 "Hello" + "World"のような文字列を連結することができます。したがって、ここで起こっているのは、 "12"を返す"1" + "2"です。
let number = 0 ;
console . log ( number ++ ) ;
console . log ( ++ number ) ;
console . log ( number ) ;1 1 21 2 20 2 20 1 2 Postfix Unary Operator ++ ：
0を返します）1です）接頭辞統一演算子++ ：
2です）2を返します）これは0 2 2を返します。
function getPersonInfo ( one , two , three ) {
console . log ( one ) ;
console . log ( two ) ;
console . log ( three ) ;
}
const person = 'Lydia' ;
const age = 21 ;
getPersonInfo ` ${ person } is ${ age } years old` ;"Lydia" 21 ["", " is ", " years old"]["", " is ", " years old"] "Lydia" 21"Lydia" ["", " is ", " years old"] 21タグ付きテンプレートリテラルを使用する場合、最初の引数の値は常に文字列値の配列です。残りの議論は、渡された式の値を取得します！
function checkAge ( data ) {
if ( data === { age : 18 } ) {
console . log ( 'You are an adult!' ) ;
} else if ( data == { age : 18 } ) {
console . log ( 'You are still an adult.' ) ;
} else {
console . log ( `Hmm.. You don't have an age I guess` ) ;
}
}
checkAge ( { age : 18 } ) ;You are an adult!You are still an adult.Hmm.. You don't have an age I guess平等をテストするとき、プリミティブはその価値によって比較され、オブジェクトは参照によって比較されます。 JavaScriptは、オブジェクトがメモリ内の同じ場所に参照されているかどうかを確認します。
私たちが比較している2つのオブジェクトはそれを持っていません。パラメーターとして渡したオブジェクトは、平等をチェックするために使用したオブジェクトとは異なる場所を指します。
これが{ age: 18 } === { age: 18 }と{ age: 18 } == { age: 18 }の両方がfalseを返す理由です。
function getAge ( ... args ) {
console . log ( typeof args ) ;
}
getAge ( 21 ) ;"number""array""object""NaN" RESTパラメーター（ ...args ）を使用すると、残りのすべての引数を配列に「収集」できます。アレイはオブジェクトであるため、 typeof args "object"を返します
function getAge ( ) {
'use strict' ;
age = 21 ;
console . log ( age ) ;
}
getAge ( ) ;21undefinedReferenceErrorTypeError "use strict"を使用すると、グローバル変数を誤って宣言しないようにすることができます。変動age宣言することはありませんでした。 "use strict"を使用するため、参照エラーが発生します。 "use strict"を使用しなければ、財産ageグローバルオブジェクトに追加されたため、機能していたでしょう。
sumの価値は何ですか？ const sum = eval ( '10*10+5' ) ;105"105"TypeError"10*10+5" eval文字列として渡されたコードを評価します。この場合のように、それが式である場合、式を評価します。式は10 * 10 + 5です。これにより、番号105が返されます。
sessionStorage . setItem ( 'cool_secret' , 123 ) ; sessionStorageに保存されているデータは、タブを閉じた後に削除されます。
localStorage使用した場合、たとえばlocalStorage.clear()が呼び出されない限り、データは永遠にそこにいたでしょう。
var num = 8 ;
var num = 10 ;
console . log ( num ) ;810SyntaxErrorReferenceError varキーワードを使用すると、同じ名前の複数の変数を宣言できます。変数は最新の値を保持します。
letまたはconstブロックスコープであるため、これを行うことはできません。
const obj = { 1 : 'a' , 2 : 'b' , 3 : 'c' } ;
const set = new Set ( [ 1 , 2 , 3 , 4 , 5 ] ) ;
obj . hasOwnProperty ( '1' ) ;
obj . hasOwnProperty ( 1 ) ;
set . has ( '1' ) ;
set . has ( 1 ) ;false true false truetrue false true truetrue true false truetrue true true trueすべてのオブジェクトキー（シンボルを除く）は、文字列として自分で入力しなくても、フードの下の文字列です。これがobj.hasOwnProperty('1')もtrueを返す理由です。
セットではそのように機能しません。私たちのセットには'1'はありません： set.has('1') falseを返します。数値タイプ1 、 set.has(1)がtrue返します。
const obj = { a : 'one' , b : 'two' , a : 'three' } ;
console . log ( obj ) ;{ a: "one", b: "two" }{ b: "two", a: "three" }{ a: "three", b: "two" }SyntaxError同じ名前の2つのキーがある場合、キーは交換されます。それはまだ最初の位置にありますが、最後に指定された値があります。
基本実行コンテキストは、グローバルな実行コンテキストです。コードのどこでもアクセスできるものです。
for ( let i = 1 ; i < 5 ; i ++ ) {
if ( i === 3 ) continue ;
console . log ( i ) ;
}1 21 2 31 2 41 3 4特定の条件がtrueを返す場合、 continueステートメントは反復をスキップします。
String . prototype . giveLydiaPizza = ( ) => {
return 'Just give Lydia pizza already!' ;
} ;
const name = 'Lydia' ;
console . log ( name . giveLydiaPizza ( ) )"Just give Lydia pizza already!"TypeError: not a functionSyntaxErrorundefined String 、プロパティを追加できる組み込みコンストラクターです。そのプロトタイプにメソッドを追加しました。プリミティブ文字列は、文字列プロトタイプ関数によって生成される文字列オブジェクトに自動的に変換されます。したがって、すべての文字列（文字列オブジェクト）はその方法にアクセスできます！
const a = { } ;
const b = { key : 'b' } ;
const c = { key : 'c' } ;
a [ b ] = 123 ;
a [ c ] = 456 ;
console . log ( a [ b ] ) ;123456undefinedReferenceErrorオブジェクトキーは自動的に文字列に変換されます。 123の値で、オブジェクトaの鍵としてオブジェクトを設定しようとしています。
ただし、オブジェクトをストリングすると、 "[object Object]"になります。それで、私たちがここで言っているのは、 a["[object Object]"] = 123あるということです。その後、もう一度同じことをすることができます。 c暗黙的にストリング化されている別のオブジェクトです。それで、 a["[object Object]"] = 456 。
次に、 a[b] a["[object Object]"]にします。それを456に設定するだけなので、 456返します。
const foo = ( ) => console . log ( 'First' ) ;
const bar = ( ) => setTimeout ( ( ) => console . log ( 'Second' ) ) ;
const baz = ( ) => console . log ( 'Third' ) ;
bar ( ) ;
foo ( ) ;
baz ( ) ;First Second ThirdFirst Third SecondSecond First 3 ThirdThird Second First setTimeout関数があり、最初に呼び出しました。それでも、最後に記録されました。
これは、ブラウザでは、ランタイムエンジンだけでなく、 WebAPIと呼ばれるものもあるためです。 WebAPI最初にsetTimeout関数を提供し、たとえばDOMを提供します。
コールバックがWebAPIにプッシュされた後、 setTimeout関数自体（コールバックではありません！）がスタックから飛び出します。
今、 foo呼び出され、 "First"が記録されています。
fooはスタックから飛び出し、 baz呼び出されます。 "Third"記録されます。
WebAPIは、準備ができたらいつでもスタックに物を追加することはできません。代わりに、コールバック関数をキューと呼ばれるものにプッシュします。
これは、イベントループが機能し始めた場所です。イベントループは、スタックとタスクキューを調べます。スタックが空の場合、キューに最初のものを取り、スタックに押し込みます。
bar呼び出され、 "Second"がログに記録され、スタックから飛び出します。
< div onclick =" console.log('first div') " >
< div onclick =" console.log('second div') " >
< button onclick =" console.log('button') " >
Click!
</ button >
</ div >
</ div >divdivbuttonイベントを引き起こした最も深いネストされた要素は、イベントのターゲットです。 event.stopPropagationによって泡立ちを止めることができます
< div onclick =" console.log('div') " >
< p onclick =" console.log('p') " >
Click here!
</ p >
</ div >p divdiv ppdiv pクリックすると、2つのログが表示されます： pとdiv 。イベントの伝播中に、キャプチャ、ターゲティング、泡の3つのフェーズがあります。デフォルトでは、イベントハンドラーはバブルフェーズで実行されます（ useCapture trueに設定しない限り）。それは、最も深いネストされた要素から外側に行きます。
const person = { name : 'Lydia' } ;
function sayHi ( age ) {
return ` ${ this . name } is ${ age } ` ;
}
console . log ( sayHi . call ( person , 21 ) ) ;
console . log ( sayHi . bind ( person , 21 ) ) ;undefined is 21 Lydia is 21function functionLydia is 21 Lydia is 21Lydia is 21 functionです両方を使用すると、 thisキーワードを参照したいオブジェクトを渡すことができます。ただし、 .callもすぐに実行されます！
.bind.関数のコピーを返しますが、バウンドコンテキストがあります！すぐに実行されません。
function sayHi ( ) {
return ( ( ) => 0 ) ( ) ;
}
console . log ( typeof sayHi ( ) ) ;"object""number""function""undefined" sayHi関数は、すぐに呼び出された関数式（IIFE）の返された値を返します。この関数は0返し、タイプ"number"です。
参考までに、 typeof次の値のリストを返すことができます： undefined 、 boolean 、 number 、 bigint object string 、シンボル、 symbol 、およびfunction 。 typeof null "object"を返すことに注意してください。
0 ;
new Number ( 0 ) ;
( '' ) ;
( ' ' ) ;
new Boolean ( false ) ;
undefined ;0 、 '' 、 undefined0 、 new Number(0) 、 '' 、 new Boolean(false) 、 undefined0 、 '' 、 new Boolean(false) 、 undefined8つのfalsy値があります：
undefinednullNaNfalse'' （空の文字列）0-00n （bigint（0）） new Numberやnew Booleanのような関数コンストラクターは真実です。
console . log ( typeof typeof 1 ) ;"number""string""object""undefined" typeof 1 "number"を返します。 typeof "number" return "string"
const numbers = [ 1 , 2 , 3 ] ;
numbers [ 10 ] = 11 ;
console . log ( numbers ) ;[1, 2, 3, null x 7, 11][1, 2, 3, 11][1, 2, 3, empty x 7, 11]SyntaxError配列の長さを超える配列内の要素に値を設定すると、JavaScriptは「空のスロット」と呼ばれるものを作成します。これらは実際にはundefinedの価値を持っていますが、次のようなものが表示されます。
[1, 2, 3, empty x 7, 11]
実行する場所に応じて（ブラウザ、ノードなどごとに異なります）
( ( ) => {
let x , y ;
try {
throw new Error ( ) ;
} catch ( x ) {
( x = 1 ) , ( y = 2 ) ;
console . log ( x ) ;
}
console . log ( x ) ;
console . log ( y ) ;
} ) ( ) ;1 undefined 2undefined undefined undefined1 1 2undefined undefined 1定義 catchブロックは引数x受け取ります。これは、引数を渡すときに変数と同じxではありません。この変数xブロックスコープです。
その後、このブロックスコープされた変数を1に等しく設定し、変数yの値を設定します。次に、ブロックスコープされた変数x 1に等しいログに記録します。
catchブロックの外側では、 xまだundefinedんyは2です。 catchブロックの外側の外側にconsole.log(x)作成すると、 undefined戻り、 y 2返します。
JavaScriptには、プリミティブタイプとオブジェクトのみがあります。
プリミティブタイプは、 boolean 、 null 、 undefined 、 bigint 、 number 、 string 、およびsymbolです。
原始をオブジェクトと区別するのは、プリミティブにはプロパティや方法がないことです。ただし、 'foo'.toUpperCase() 'FOO'に評価され、 TypeErrorには発生しないことに注意してください。これは、文字列のような原始的なプロパティまたはメソッドにアクセスしようとすると、JavaScriptは、ラッパークラスの1つ、つまりStringを使用してプリミティブタイプを暗黙的にラップし、式が評価された後にラッパーをすぐに破棄するためです。 nullおよびundefinedを除くすべてのプリミティブは、この動作を示しています。
[ [ 0 , 1 ] , [ 2 , 3 ] ] . reduce (
( acc , cur ) => {
return acc . concat ( cur ) ;
} ,
[ 1 , 2 ] ,
) ;[0, 1, 2, 3, 1, 2][6, 1, 2][1, 2, 0, 1, 2, 3][1, 2, 6] [1, 2]初期値です。これは、私たちが始める値であり、最初のaccの値です。最初のラウンドでは、 accは[1,2]であり、 curは[0, 1]です。それらを連結し、 [1, 2, 0, 1]になります。
次に、 [1, 2, 0, 1]はacc 、 [2, 3]はcurです。それらを連結して、 [1, 2, 0, 1, 2, 3]を取得します。
! ! null ;
! ! '' ;
! ! 1 ;false true falsefalse false truetrue ： false truetrue true false nullはfalsyです。 !null trueを返します。 !true falseを返します。
"" falsy。 !"" trueを返します。 !true falseを返します。
1真実です。 !1 falseを返します。 !false trueを返します。
setIntervalメソッドは何を返しますか？ setInterval ( ( ) => console . log ( 'Hi' ) , 1000 ) ;undefined一意のIDを返します。このIDを使用して、 clearInterval()関数を使用してその間隔をクリアできます。
[ ... 'Lydia' ] ;["L", "y", "d", "i", "a"]["Lydia"][[], "Lydia"][["L", "y", "d", "i", "a"]]文字列は反復可能です。スプレッド演算子は、1つの要素を反復可能なすべての文字をマッピングします。
function * generator ( i ) {
yield i ;
yield i * 2 ;
}
const gen = generator ( 10 ) ;
console . log ( gen . next ( ) . value ) ;
console . log ( gen . next ( ) . value ) ;[0, 10], [10, 20]20, 2010, 200, 10 and 10, 20呼び出し後、通常の機能を途中で停止することはできません。ただし、ジェネレーター機能は途中で「停止」し、後で停止した場所から続行できます。ジェネレーター関数がyieldキーワードに遭遇するたびに、関数はその後指定された値を生成します。その場合のジェネレーター関数は値を返さず、値が生成されることに注意してください。
まず、 iが10に等しく、ジェネレーター関数を初期化します。 next()メソッドを使用して、ジェネレーター機能を呼び出します。ジェネレーター関数を初めて呼び出すとき、 i 10に等しくなります。最初のyieldキーワードに遭遇しますiの値を生成します。ジェネレーターは「一時停止」になり、 10記録されます。
次に、 next()メソッドを使用して関数を再度呼び出します。それは以前に停止したところから続き始めますが、それでもiは10に等しくなります。これで、次のyieldキーワードに遭遇し、 i * 2獲得します。 i 10に等しいので、 10 * 2を返します。これは20です。これにより10, 20になります。
const firstPromise = new Promise ( ( res , rej ) => {
setTimeout ( res , 500 , 'one' ) ;
} ) ;
const secondPromise = new Promise ( ( res , rej ) => {
setTimeout ( res , 100 , 'two' ) ;
} ) ;
Promise . race ( [ firstPromise , secondPromise ] ) . then ( res => console . log ( res ) ) ;"one""two""two" "one""one" "two" Promise.raceメソッドに複数の約束を渡すと、解決/拒否を解決/拒否します。 setTimeoutメソッドには、最初の約束（ firstPromise ）で500ms、2番目の約束（ secondPromise ）で100msを渡します。これは、 secondPromiseが最初に'two'の値で解決することを意味します。 res 'two'の値を保持し、ログが記録されます。
let person = { name : 'Lydia' } ;
const members = [ person ] ;
person = null ;
console . log ( members ) ;null[null][{}][{ name: "Lydia" }]最初に、 nameプロパティを持つオブジェクトの値を持つ変数のperson宣言します。
次に、 membersと呼ばれる変数を宣言します。その配列の最初の要素を、 person変数の値に等しく設定します。オブジェクトは、相互に等しく設定するときに参照によって相互作用します。ある変数から別の変数に参照を割り当てると、その参照のコピーを作成します。 （同じ参照を持っていないことに注意してください！）
次に、 personをnullに等しく設定します。
その要素にはオブジェクトとは異なる（コピーされた）参照があるため、配列の最初の要素ではなく、 person変数の値のみを変更しています。 membersの最初の要素は、元のオブジェクトへの参照を保持しています。 membersアレイをログに記録すると、最初の要素はオブジェクトの値を保持し、ログが表示されます。
const person = {
name : 'Lydia' ,
age : 21 ,
} ;
for ( const item in person ) {
console . log ( item ) ;
}{ name: "Lydia" }, { age: 21 }"name", "age""Lydia", 21["name", "Lydia"], ["age", 21] for-inループを使用すると、オブジェクトキー、この場合はnameとageを繰り返すことができます。ボンネットの下では、オブジェクトキーは文字列です（シンボルではない場合）。すべてのループで、 itemの値を繰り返している現在のキーに等しく設定します。まず、 item nameと等しく、ログが表示されます。次に、 item ageに等しく、ログが表示されます。
console . log ( 3 + 4 + '5' ) ;"345""75"12"12"オペレーターの関連性は、コンパイラが左から右への式または右から右の式を評価する順序です。これは、すべてのオペレーターが同じ優先順位を持っている場合にのみ発生します。オペレーターのタイプは1つしかありません。 + 。追加の場合、連想は左から右にあります。
3 + 4最初に評価されます。これは7番になります。
7 + '5'強制のために"75"になります。 JavaScriptは数字7文字列に変換します。質問15を参照してください。 +演算子を使用して2つの文字列を連結できます。 "7" + "5" "75"になります。
numは何ですか？ const num = parseInt ( '7*6' , 10 ) ;42"42"7NaN文字列の最初の番号のみが返されます。基数（2番目の引数）に基づいて、ベース10、16進数、オクタル、バイナリなどを解析する数値を指定するために）、 parseInt 、文字列の文字が有効かどうかを確認します。基数の有効な数字ではないキャラクターに遭遇すると、解析を停止し、次の文字を無視します。
*有効な番号ではありません。 "7"は小数7にのみ解析します。 num 7の値を保持します。
[ 1 , 2 , 3 ] . map ( num => {
if ( typeof num === 'number' ) return ;
return num * 2 ;
} ) ;[][null, null, null][undefined, undefined, undefined][ 3 x empty ]配列をマッピングすると、 numの値は現在ループしている要素に等しくなります。この場合、要素は数値であるため、IFステートメントtypeof num === "number"の条件はtrue返します。マップ関数は新しい配列を作成し、関数から返される値を挿入します。
ただし、値は返されません。関数から値を返さない場合、関数はundefined戻ります。配列内のすべての要素について、関数ブロックが呼び出されるため、各要素に対してundefined戻ります。
function getInfo ( member , year ) {
member . name = 'Lydia' ;
year = '1998' ;
}
const person = { name : 'Sarah' } ;
const birthYear = '1997' ;
getInfo ( person , birthYear ) ;
console . log ( person , birthYear ) ;{ name: "Lydia" }, "1997"{ name: "Sarah" }, "1998"{ name: "Lydia" }, "1998"{ name: "Sarah" }, "1997"引数は、価値がオブジェクトでない限り、価値によって渡されます。その後、参照によって渡されます。 birthYear 、オブジェクトではなく文字列であるため、値で渡されます。 Valueで引数を渡すと、その値のコピーが作成されます（質問46を参照）。
可変birthYearは、値"1997"への参照があります。引数yearは、 "1997"の値への参照もありますが、 birthYearが参照しているのと同じ値ではありません。 "1998"に等しいyear設定することでyearの値を更新すると、 yearの値のみを更新します。 birthYearまだ"1997"に等しくなります。
personの価値はオブジェクトです。引数member同じオブジェクトへの（コピーされた）参照があります。オブジェクトmemberのプロパティを変更すると、参照がありますが、両方とも同じオブジェクトへの参照があるため、 personの値も変更されます。 personのnameプロパティは、 "Lydia"値に等しいようになりました
function greeting ( ) {
throw 'Hello world!' ;
}
function sayHi ( ) {
try {
const data = greeting ( ) ;
console . log ( 'It worked!' , data ) ;
} catch ( e ) {
console . log ( 'Oh no an error:' , e ) ;
}
}
sayHi ( ) ;It worked! Hello world!Oh no an error: undefinedSyntaxError: can only throw Error objectsOh no an error: Hello world! throwステートメントを使用すると、カスタムエラーを作成できます。この声明を使用すると、例外を投げることができます。例外は、文字列、数字、ブール値、またはオブジェクトです。この場合、私たちの例外は文字列'Hello world!'です。 。
catchステートメントを使用すると、 tryブロックに例外がスローされた場合の対処方法を指定できます。例外がスローされます：文字列'Hello world!' 。 e 、その文字列に等しくなり、ログに記録します。これにより、 'Oh an error: Hello world!' 。
function Car ( ) {
this . make = 'Lamborghini' ;
return { make : 'Maserati' } ;
}
const myCar = new Car ( ) ;
console . log ( myCar . make ) ;"Lamborghini""Maserati"ReferenceErrorTypeErrorコンストラクター関数がnewキーワードで呼び出されると、オブジェクトを作成し、 thisキーワードを設定してそのオブジェクトを参照します。デフォルトでは、コンストラクター関数が明示的に何も返さない場合、新しく作成されたオブジェクトが返されます。
この場合、コンストラクター機能Carデフォルトの動作をオーバーライドする"Maserati"に設定されたmakeが設定された新しいオブジェクトを明示的に返します。したがって、 new Car()が呼び出されると、返されたオブジェクトがmyCarに割り当てられ、 myCar.makeにアクセスすると出力が"Maserati"になります。
( ( ) => {
let x = ( y = 10 ) ;
} ) ( ) ;
console . log ( typeof x ) ;
console . log ( typeof y ) ;"undefined", "number""number", "number""object", "number""number", "undefined" let x = (y = 10);実際には速記です：
y = 10 ;
let x = y ; y 10に等しく設定すると、実際にグローバルオブジェクトにプロパティyを追加します（ブラウザのwindow 、ノードのglobal ）。ブラウザでは、 window.y 10に等しくなりました。
次に、 yの値で変数x宣言します。これは10です。 letキーワードで宣言された変数はブロックスコープであり、宣言されているブロック内でのみ定義されます。この場合、すぐに呼び出された関数式（IIFE）。 typeof演算子を使用すると、Operand x定義されていません。宣言されたブロックの外側にxにアクセスしようとしています。これは、 xが定義されていないことを意味します。値が割り当てられていない、または宣言された値は"undefined"のタイプです。 console.log(typeof x) "undefined"を返します。
ただし、 y 10に設定すると、グローバル変数y作成しました。この値は、コードのどこでもアクセスできます。 y定義されており、 "number"のタイプの値を保持します。 console.log(typeof y) "number"を返します。
class Dog {
constructor ( name ) {
this . name = name ;
}
}
Dog . prototype . bark = function ( ) {
console . log ( `Woof I am ${ this . name } ` ) ;
} ;
const pet = new Dog ( 'Mara' ) ;
pet . bark ( ) ;
delete Dog . prototype . bark ;
pet . bark ( ) ;"Woof I am Mara" 、 TypeError"Woof I am Mara" 、 "Woof I am Mara""Woof I am Mara" 、 undefinedTypeError 、 TypeErrorプロトタイプでも、 deleteキーワードを使用してオブジェクトからプロパティを削除できます。プロトタイプ上のプロパティを削除することにより、プロトタイプチェーンでは利用できなくなりました。この場合、 delete Dog.prototype.bark後、 bark関数はプロトタイプではもう利用できませんが、それでもアクセスしようとしています。
関数ではないものを呼び出すと、 TypeErrorがスローされます。この場合TypeError: pet.bark is not a function 。Pet.Bark pet.bark undefinedです。
const set = new Set ( [ 1 , 1 , 2 , 3 , 4 ] ) ;
console . log ( set ) ;[1, 1, 2, 3, 4][1, 2, 3, 4]{1, 1, 2, 3, 4}{1, 2, 3, 4} Setオブジェクトは、一意の値のコレクションです。値はセットで1回しか発生しません。
複製値1で反復可能[1, 1, 2, 3, 4]を渡しました。セットに2つの同じ値を持つことはできないため、そのうちの1つは削除されます。これにより{1, 2, 3, 4}になります。
// counter.js
let counter = 10 ;
export default counter ; // index.js
import myCounter from './counter' ;
myCounter += 1 ;
console . log ( myCounter ) ;1011ErrorNaNインポートされたモジュールは読み取り専用です。インポートされたモジュールを変更することはできません。それらをエクスポートするモジュールのみがその値を変更できます。
myCounterの値を増やそうとすると、エラーが発生します。MyCounter myCounter読み取り専用で、変更できません。
const name = 'Lydia' ;
age = 21 ;
console . log ( delete name ) ;
console . log ( delete age ) ;false 、 true"Lydia" 、 21true 、 trueundefined 、 undefined delete演算子はブール値を返します：削除が成功した場合にtrue 、そうしないとfalseが返されます。ただし、 var 、 const 、またはletキーワードで宣言された変数は、 delete演算子を使用して削除できません。
name変数はconstキーワードで宣言されたため、その削除は成功しません： falseが返されます。 age 21に等しく設定すると、実際にGlobalオブジェクトにageと呼ばれるプロパティを追加しました。この方法でオブジェクトからプロパティを正常に削除できます。グローバルオブジェクトであるため、 delete ageことはtrue 。
const numbers = [ 1 , 2 , 3 , 4 , 5 ] ;
const [ y ] = numbers ;
console . log ( y ) ;[[1, 2, 3, 4, 5]][1, 2, 3, 4, 5]1[1]アレイまたはプロパティからオブジェクトからのプロパティから破壊的なものを開梱できます。例えば：
[ a , b ] = [ 1 , 2 ] ; aの値は現在1で、 bの値は2なります。私たちが実際に質問でしたことは、次のとおりです。
[ y ] = [ 1 , 2 , 3 , 4 , 5 ] ;これは、 yの値が配列の最初の値、つまりナンバー1に等しいことを意味します。 y記録すると、 1返されます。
const user = { name : 'Lydia' , age : 21 } ;
const admin = { admin : true , ... user } ;
console . log ( admin ) ;{ admin: true, user: { name: "Lydia", age: 21 } }{ admin: true, name: "Lydia", age: 21 }{ admin: true, user: ["Lydia", 21] }{ admin: true }スプレッドオペレーターを使用してオブジェクトを結合することができます... 1つのオブジェクトのキー/値ペアのコピーを作成し、別のオブジェクトに追加できます。この場合、 userオブジェクトのコピーを作成し、 adminオブジェクトに追加します。 The admin object now contains the copied key/value pairs, which results in { admin: true, name: "Lydia", age: 21 } .
const person = { name : 'Lydia' } ;
Object . defineProperty ( person , 'age' , { value : 21 } ) ;
console . log ( person ) ;
console . log ( Object . keys ( person ) ) ;{ name: "Lydia", age: 21 } , ["name", "age"]{ name: "Lydia", age: 21 } , ["name"]{ name: "Lydia"} , ["name", "age"]{ name: "Lydia"} , ["age"] With the defineProperty method, we can add new properties to an object, or modify existing ones. When we add a property to an object using the defineProperty method, they are by default not enumerable . The Object.keys method returns all enumerable property names from an object, in this case only "name" .
Properties added using the defineProperty method are immutable by default. You can override this behavior using the writable , configurable and enumerable properties. This way, the defineProperty method gives you a lot more control over the properties you're adding to an object.
const settings = {
username : 'lydiahallie' ,
level : 19 ,
health : 90 ,
} ;
const data = JSON . stringify ( settings , [ 'level' , 'health' ] ) ;
console . log ( data ) ;"{"level":19, "health":90}""{"username": "lydiahallie"}""["level", "health"]""{"username": "lydiahallie", "level":19, "health":90}" The second argument of JSON.stringify is the replacer . The replacer can either be a function or an array, and lets you control what and how the values should be stringified.
If the replacer is an array , only the property names included in the array will be added to the JSON string. In this case, only the properties with the names "level" and "health" are included, "username" is excluded. data is now equal to "{"level":19, "health":90}" .
If the replacer is a function , this function gets called on every property in the object you're stringifying. The value returned from this function will be the value of the property when it's added to the JSON string. If the value is undefined , this property is excluded from the JSON string.
let num = 10 ;
const increaseNumber = ( ) => num ++ ;
const increasePassedNumber = number => number ++ ;
const num1 = increaseNumber ( ) ;
const num2 = increasePassedNumber ( num1 ) ;
console . log ( num1 ) ;
console . log ( num2 ) ;10 , 1010 , 1111 , 1111 , 12 The unary operator ++ first returns the value of the operand, then increments the value of the operand. The value of num1 is 10 , since the increaseNumber function first returns the value of num , which is 10 , and only increments the value of num afterward.
num2 is 10 , since we passed num1 to the increasePassedNumber . number is equal to 10 (the value of num1 ). Again, the unary operator ++ first returns the value of the operand, then increments the value of the operand. The value of number is 10 , so num2 is equal to 10 .
const value = { number : 10 } ;
const multiply = ( x = { ... value } ) => {
console . log ( ( x . number *= 2 ) ) ;
} ;
multiply ( ) ;
multiply ( ) ;
multiply ( value ) ;
multiply ( value ) ;20 , 40 , 80 , 16020 , 40 , 20 , 4020 , 20 , 20 , 40NaN , NaN , 20 , 40 In ES6, we can initialize parameters with a default value. The value of the parameter will be the default value, if no other value has been passed to the function, or if the value of the parameter is "undefined" . In this case, we spread the properties of the value object into a new object, so x has the default value of { number: 10 } .
The default argument is evaluated at call time ! Every time we call the function, a new object is created. We invoke the multiply function the first two times without passing a value: x has the default value of { number: 10 } . We then log the multiplied value of that number, which is 20 .
The third time we invoke multiply, we do pass an argument: the object called value . The *= operator is actually shorthand for x.number = x.number * 2 : we modify the value of x.number , and log the multiplied value 20 .
The fourth time, we pass the value object again. x.number was previously modified to 20 , so x.number *= 2 logs 40 .
[ 1 , 2 , 3 , 4 ] . reduce ( ( x , y ) => console . log ( x , y ) ) ;1 2 and 3 3 and 6 41 2 and 2 3 and 3 41 undefined and 2 undefined and 3 undefined and 4 undefined1 2 and undefined 3 and undefined 4 The first argument that the reduce method receives is the accumulator , x in this case. The second argument is the current value , y . With the reduce method, we execute a callback function on every element in the array, which could ultimately result in one single value.
In this example, we are not returning any values, we are simply logging the values of the accumulator and the current value.
The value of the accumulator is equal to the previously returned value of the callback function. If you don't pass the optional initialValue argument to the reduce method, the accumulator is equal to the first element on the first call.
On the first call, the accumulator ( x ) is 1 , and the current value ( y ) is 2 . We don't return from the callback function, we log the accumulator, and the current values: 1 and 2 get logged.
If you don't return a value from a function, it returns undefined . On the next call, the accumulator is undefined , and the current value is 3 . undefined and 3 get logged.
On the fourth call, we again don't return from the callback function. The accumulator is again undefined , and the current value is 4 . undefined and 4 get logged.
Dog class? class Dog {
constructor ( name ) {
this . name = name ;
}
} ;
class Labrador extends Dog {
// 1
constructor ( name , size ) {
this . size = size ;
}
// 2
constructor ( name , size ) {
super ( name ) ;
this . size = size ;
}
// 3
constructor ( size ) {
super ( name ) ;
this . size = size ;
}
// 4
constructor ( name , size ) {
this . name = name ;
this . size = size ;
}
} ; In a derived class, you cannot access the this keyword before calling super . If you try to do that, it will throw a ReferenceError: 1 and 4 would throw a reference error.
With the super keyword, we call that parent class's constructor with the given arguments. The parent's constructor receives the name argument, so we need to pass name to super .
The Labrador class receives two arguments, name since it extends Dog , and size as an extra property on the Labrador class. They both need to be passed to the constructor function on Labrador , which is done correctly using constructor 2.
// index.js
console . log ( 'running index.js' ) ;
import { sum } from './sum.js' ;
console . log ( sum ( 1 , 2 ) ) ;
// sum.js
console . log ( 'running sum.js' ) ;
export const sum = ( a , b ) => a + b ;running index.js , running sum.js , 3running sum.js , running index.js , 3running sum.js , 3 , running index.jsrunning index.js , undefined , running sum.js With the import keyword, all imported modules are pre-parsed . This means that the imported modules get run first , and the code in the file that imports the module gets executed after .
This is a difference between require() in CommonJS and import ! With require() , you can load dependencies on demand while the code is being run. If we had used require instead of import , running index.js , running sum.js , 3 would have been logged to the console.
console . log ( Number ( 2 ) === Number ( 2 ) ) ;
console . log ( Boolean ( false ) === Boolean ( false ) ) ;
console . log ( Symbol ( 'foo' ) === Symbol ( 'foo' ) ) ;true , true , falsefalse , true , falsetrue , false , truetrue , true , true Every Symbol is entirely unique. The purpose of the argument passed to the Symbol is to give the Symbol a description. The value of the Symbol is not dependent on the passed argument. As we test equality, we are creating two entirely new symbols: the first Symbol('foo') , and the second Symbol('foo') . These two values are unique and not equal to each other, Symbol('foo') === Symbol('foo') returns false .
const name = 'Lydia Hallie' ;
console . log ( name . padStart ( 13 ) ) ;
console . log ( name . padStart ( 2 ) ) ;"Lydia Hallie" , "Lydia Hallie"" Lydia Hallie" , " Lydia Hallie" ( "[13x whitespace]Lydia Hallie" , "[2x whitespace]Lydia Hallie" )" Lydia Hallie" , "Lydia Hallie" ( "[1x whitespace]Lydia Hallie" , "Lydia Hallie" )"Lydia Hallie" , "Lyd" , With the padStart method, we can add padding to the beginning of a string. The value passed to this method is the total length of the string together with the padding. The string "Lydia Hallie" has a length of 12 . name.padStart(13) inserts 1 space at the start of the string, because 12 + 1 is 13.
If the argument passed to the padStart method is smaller than the length of the array, no padding will be added.
console . log ( '?' + '' ) ;"?"257548 With the + operator, you can concatenate strings. In this case, we are concatenating the string "?" with the string "" , resulting in "?" 。
function * startGame ( ) {
const answer = yield 'Do you love JavaScript?' ;
if ( answer !== 'Yes' ) {
return "Oh wow... Guess we're done here" ;
}
return 'JavaScript loves you back ❤️' ;
}
const game = startGame ( ) ;
console . log ( /* 1 */ ) ; // Do you love JavaScript?
console . log ( /* 2 */ ) ; // JavaScript loves you back ❤️game.next("Yes").value and game.next().valuegame.next.value("Yes") and game.next.value()game.next().value and game.next("Yes").valuegame.next.value() and game.next.value("Yes") A generator function "pauses" its execution when it sees the yield keyword. First, we have to let the function yield the string "Do you love JavaScript?", which can be done by calling game.next().value .
Every line is executed, until it finds the first yield keyword. There is a yield keyword on the first line within the function: the execution stops with the first yield! This means that the variable answer is not defined yet!
When we call game.next("Yes").value , the previous yield is replaced with the value of the parameters passed to the next() function, "Yes" in this case. The value of the variable answer is now equal to "Yes" . The condition of the if-statement returns false , and JavaScript loves you back ❤️ gets logged.
console . log ( String . raw `Hellonworld` ) ;Hello world!HelloworldHellonworldHellonworld String.raw returns a string where the escapes ( n , v , t etc.) are ignored! Backslashes can be an issue since you could end up with something like:
const path = `C:DocumentsProjectstable.html`
Which would result in:
"C:DocumentsProjects able.html"
With String.raw , it would simply ignore the escape and print:
C:DocumentsProjectstable.html
In this case, the string is Hellonworld , which gets logged.
async function getData ( ) {
return await Promise . resolve ( 'I made it!' ) ;
}
const data = getData ( ) ;
console . log ( data ) ;"I made it!"Promise {<resolved>: "I made it!"}Promise {<pending>}undefined An async function always returns a promise. The await still has to wait for the promise to resolve: a pending promise gets returned when we call getData() in order to set data equal to it.
If we wanted to get access to the resolved value "I made it" , we could have used the .then() method on data :
data.then(res => console.log(res))
This would've logged "I made it!"
function addToList ( item , list ) {
return list . push ( item ) ;
}
const result = addToList ( 'apple' , [ 'banana' ] ) ;
console . log ( result ) ;['apple', 'banana']2trueundefined The .push() method returns the length of the new array! Previously, the array contained one element (the string "banana" ) and had a length of 1 . After adding the string "apple" to the array, the array contains two elements, and has a length of 2 . This gets returned from the addToList function.
The push method modifies the original array. If you wanted to return the array from the function rather than the length of the array , you should have returned list after pushing item to it.
const box = { x : 10 , y : 20 } ;
Object . freeze ( box ) ;
const shape = box ;
shape . x = 100 ;
console . log ( shape ) ;{ x: 100, y: 20 }{ x: 10, y: 20 }{ x: 100 }ReferenceError Object.freeze makes it impossible to add, remove, or modify properties of an object (unless the property's value is another object).
When we create the variable shape and set it equal to the frozen object box , shape also refers to a frozen object. You can check whether an object is frozen by using Object.isFrozen . In this case, Object.isFrozen(shape) would return true, since the variable shape has a reference to a frozen object.
Since shape is frozen, and since the value of x is not an object, we cannot modify the property x . x is still equal to 10 , and { x: 10, y: 20 } gets logged.
const { firstName : myName } = { firstName : 'Lydia' } ;
console . log ( firstName ) ;"Lydia""myName"undefinedReferenceErrorBy using destructuring assignment syntax we can unpack values from arrays, or properties from objects, into distinct variables:
const { firstName } = { firstName : 'Lydia' } ;
// ES5 version:
// var firstName = { firstName: 'Lydia' }.firstName;
console . log ( firstName ) ; // "Lydia"Also, a property can be unpacked from an object and assigned to a variable with a different name than the object property:
const { firstName : myName } = { firstName : 'Lydia' } ;
// ES5 version:
// var myName = { firstName: 'Lydia' }.firstName;
console . log ( myName ) ; // "Lydia"
console . log ( firstName ) ; // Uncaught ReferenceError: firstName is not defined Therefore, firstName does not exist as a variable, thus attempting to access its value will raise a ReferenceError .
Note: Be aware of the global scope properties:
const { name : myName } = { name : 'Lydia' } ;
console . log ( myName ) ; // "lydia"
console . log ( name ) ; // "" ----- Browser e.g. Chrome
console . log ( name ) ; // ReferenceError: name is not defined ----- NodeJS Whenever Javascript is unable to find a variable within the current scope , it climbs up the Scope chain and searches for it and if it reaches the top-level scope, aka Global scope , and still doesn't find it, it will throw a ReferenceError 。
In Browsers such as Chrome , name is a deprecated global scope property . In this example, the code is running inside global scope and there is no user-defined local variable for name , therefore it searches the predefined variables/properties in the global scope which is in the case of browsers, it searches through window object and it will extract the window.name value which is equal to an empty string .
In NodeJS , there is no such property on the global object, thus attempting to access a non-existent variable will raise a ReferenceError.
function sum ( a , b ) {
return a + b ;
}A pure function is a function that always returns the same result, if the same arguments are passed.
The sum function always returns the same result. If we pass 1 and 2 , it will always return 3 without side effects. If we pass 5 and 10 , it will always return 15 , and so on. This is the definition of a pure function.
const add = ( ) => {
const cache = { } ;
return num => {
if ( num in cache ) {
return `From cache! ${ cache [ num ] } ` ;
} else {
const result = num + 10 ;
cache [ num ] = result ;
return `Calculated! ${ result } ` ;
}
} ;
} ;
const addFunction = add ( ) ;
console . log ( addFunction ( 10 ) ) ;
console . log ( addFunction ( 10 ) ) ;
console . log ( addFunction ( 5 * 2 ) ) ;Calculated! 20 Calculated! 20 Calculated! 20Calculated! 20 From cache! 20 Calculated! 20Calculated! 20 From cache! 20 From cache! 20Calculated! 20 From cache! 20 Error The add function is a memoized function. With memoization, we can cache the results of a function in order to speed up its execution. In this case, we create a cache object that stores the previously returned values.
If we call the addFunction function again with the same argument, it first checks whether it has already gotten that value in its cache. If that's the case, the cache value will be returned, which saves execution time. Otherwise, if it's not cached, it will calculate the value and store it afterward.
We call the addFunction function three times with the same value: on the first invocation, the value of the function when num is equal to 10 isn't cached yet. The condition of the if-statement num in cache returns false , and the else block gets executed: Calculated! 20 gets logged, and the value of the result gets added to the cache object. cache now looks like { 10: 20 } .
The second time, the cache object contains the value that gets returned for 10 . The condition of the if-statement num in cache returns true , and 'From cache! 20' gets logged.
The third time, we pass 5 * 2 to the function which gets evaluated to 10 . The cache object contains the value that gets returned for 10 . The condition of the if-statement num in cache returns true , and 'From cache! 20' gets logged.
const myLifeSummedUp = [ '☕' , '' , '?' , '?' ] ;
for ( let item in myLifeSummedUp ) {
console . log ( item ) ;
}
for ( let item of myLifeSummedUp ) {
console . log ( item ) ;
}0 1 2 3 and "☕" "" "?" "?""☕" "" "?" "?" and "☕" "" "?" "?""☕" "" "?" "?" and 0 1 2 30 1 2 3 and {0: "☕", 1: "", 2: "?", 3: "?"}With a for-in loop, we can iterate over enumerable properties. In an array, the enumerable properties are the "keys" of array elements, which are actually their indexes. You could see an array as:
{0: "☕", 1: "", 2: "?", 3: "?"}
Where the keys are the enumerable properties. 0 1 2 3 get logged.
With a for-of loop, we can iterate over iterables . An array is an iterable. When we iterate over the array, the variable "item" is equal to the element it's currently iterating over, "☕" "" "?" "?" get logged.
const list = [ 1 + 2 , 1 * 2 , 1 / 2 ] ;
console . log ( list ) ;["1 + 2", "1 * 2", "1 / 2"]["12", 2, 0.5][3, 2, 0.5][1, 1, 1]Array elements can hold any value. Numbers, strings, objects, other arrays, null, boolean values, undefined, and other expressions such as dates, functions, and calculations.
The element will be equal to the returned value. 1 + 2 returns 3 , 1 * 2 returns 2 , and 1 / 2 returns 0.5 .
function sayHi ( name ) {
return `Hi there, ${ name } ` ;
}
console . log ( sayHi ( ) ) ;Hi there,Hi there, undefinedHi there, nullReferenceError By default, arguments have the value of undefined , unless a value has been passed to the function. In this case, we didn't pass a value for the name argument. name is equal to undefined which gets logged.
In ES6, we can overwrite this default undefined value with default parameters.例えば：
function sayHi(name = "Lydia") { ... }
In this case, if we didn't pass a value or if we passed undefined , name would always be equal to the string Lydia
var status = '?' ;
setTimeout ( ( ) => {
const status = '?' ;
const data = {
status : '?' ,
getStatus ( ) {
return this . status ;
} ,
} ;
console . log ( data . getStatus ( ) ) ;
console . log ( data . getStatus . call ( this ) ) ;
} , 0 ) ;"?"そして"?""?"そして"?""?"そして"?""?"そして"?" The value of the this keyword is dependent on where you use it. In a method , like the getStatus method, the this keyword refers to the object that the method belongs to . The method belongs to the data object, so this refers to the data object. When we log this.status , the status property on the data object gets logged, which is "?" 。
With the call method, we can change the object to which the this keyword refers. In functions , the this keyword refers to the the object that the function belongs to . We declared the setTimeout function on the global object , so within the setTimeout function, the this keyword refers to the global object . On the global object, there is a variable called status with the value of "?" 。 When logging this.status , "?" gets logged.
const person = {
name : 'Lydia' ,
age : 21 ,
} ;
let city = person . city ;
city = 'Amsterdam' ;
console . log ( person ) ;{ name: "Lydia", age: 21 }{ name: "Lydia", age: 21, city: "Amsterdam" }{ name: "Lydia", age: 21, city: undefined }"Amsterdam" We set the variable city equal to the value of the property called city on the person object. There is no property on this object called city , so the variable city has the value of undefined .
Note that we are not referencing the person object itself! We simply set the variable city equal to the current value of the city property on the person object.
Then, we set city equal to the string "Amsterdam" . This doesn't change the person object: there is no reference to that object.
When logging the person object, the unmodified object gets returned.
function checkAge ( age ) {
if ( age < 18 ) {
const message = "Sorry, you're too young." ;
} else {
const message = "Yay! You're old enough!" ;
}
return message ;
}
console . log ( checkAge ( 21 ) ) ;"Sorry, you're too young.""Yay! You're old enough!"ReferenceErrorundefined Variables with the const and let keywords are block-scoped . A block is anything between curly brackets ( { } ). In this case, the curly brackets of the if/else statements. You cannot reference a variable outside of the block it's declared in, a ReferenceError gets thrown.
fetch ( 'https://www.website.com/api/user/1' )
. then ( res => res . json ( ) )
. then ( res => console . log ( res ) ) ;fetch method.fetch method..then() . The value of res in the second .then is equal to the returned value of the previous .then . You can keep chaining .then s like this, where the value is passed to the next handler.
hasName equal to true , provided you cannot pass true as an argument? function getName ( name ) {
const hasName = //
}!!namenamenew Boolean(name)name.length With !!name , we determine whether the value of name is truthy or falsy. If the name is truthy, which we want to test for, !name returns false . !false (which is what !!name practically is) returns true .
By setting hasName equal to name , you set hasName equal to whatever value you passed to the getName function, not the boolean value true .
new Boolean(true) returns an object wrapper, not the boolean value itself.
name.length returns the length of the passed argument, not whether it's true .
console . log ( 'I want pizza' [ 0 ] ) ;""""I"SyntaxErrorundefined In order to get a character at a specific index of a string, you can use bracket notation. The first character in the string has index 0, and so on. In this case, we want to get the element with index 0, the character "I' , which gets logged.
Note that this method is not supported in IE7 and below. In that case, use .charAt() .
function sum ( num1 , num2 = num1 ) {
console . log ( num1 + num2 ) ;
}
sum ( 10 ) ;NaN20ReferenceErrorundefined You can set a default parameter's value equal to another parameter of the function, as long as they've been defined before the default parameter. We pass the value 10 to the sum function. If the sum function only receives 1 argument, it means that the value for num2 is not passed, and the value of num1 is equal to the passed value 10 in this case. The default value of num2 is the value of num1 , which is 10 . num1 + num2 returns 20 .
If you're trying to set a default parameter's value equal to a parameter that is defined after (to the right), the parameter's value hasn't been initialized yet, which will throw an error.
// module.js
export default ( ) => 'Hello world' ;
export const name = 'Lydia' ;
// index.js
import * as data from './module' ;
console . log ( data ) ;{ default: function default(), name: "Lydia" }{ default: function default() }{ default: "Hello world", name: "Lydia" }module.js With the import * as name syntax, we import all exports from the module.js file into the index.js file as a new object called data is created. In the module.js file, there are two exports: the default export, and a named export. The default export is a function that returns the string "Hello World" , and the named export is a variable called name which has the value of the string "Lydia" .
The data object has a default property for the default export, other properties have the names of the named exports and their corresponding values.
class Person {
constructor ( name ) {
this . name = name ;
}
}
const member = new Person ( 'John' ) ;
console . log ( typeof member ) ;"class""function""object""string" Classes are syntactical sugar for function constructors. The equivalent of the Person class as a function constructor would be:
function Person ( name ) {
this . name = name ;
} Calling a function constructor with new results in the creation of an instance of Person , typeof keyword returns "object" for an instance. typeof member returns "object" .
let newList = [ 1 , 2 , 3 ] . push ( 4 ) ;
console . log ( newList . push ( 5 ) ) ;[1, 2, 3, 4, 5][1, 2, 3, 5][1, 2, 3, 4]Error The .push method returns the new length of the array, not the array itself! By setting newList equal to [1, 2, 3].push(4) , we set newList equal to the new length of the array: 4 .
Then, we try to use the .push method on newList . Since newList is the numerical value 4 , we cannot use the .push method: a TypeError is thrown.
function giveLydiaPizza ( ) {
return 'Here is pizza!' ;
}
const giveLydiaChocolate = ( ) =>
"Here's chocolate... now go hit the gym already." ;
console . log ( giveLydiaPizza . prototype ) ;
console . log ( giveLydiaChocolate . prototype ) ;{ constructor: ...} { constructor: ...}{} { constructor: ...}{ constructor: ...} {}{ constructor: ...} undefined Regular functions, such as the giveLydiaPizza function, have a prototype property, which is an object (prototype object) with a constructor property. Arrow functions however, such as the giveLydiaChocolate function, do not have this prototype property. undefined gets returned when trying to access the prototype property using giveLydiaChocolate.prototype .
const person = {
name : 'Lydia' ,
age : 21 ,
} ;
for ( const [ x , y ] of Object . entries ( person ) ) {
console . log ( x , y ) ;
}name Lydia and age 21["name", "Lydia"] and ["age", 21]["name", "age"] and undefinedError Object.entries(person) returns an array of nested arrays, containing the keys and objects:
[ [ 'name', 'Lydia' ], [ 'age', 21 ] ]
Using the for-of loop, we can iterate over each element in the array, the subarrays in this case. We can destructure the subarrays instantly in the for-of loop, using const [x, y] . x is equal to the first element in the subarray, y is equal to the second element in the subarray.
The first subarray is [ "name", "Lydia" ] , with x equal to "name" , and y equal to "Lydia" , which get logged. The second subarray is [ "age", 21 ] , with x equal to "age" , and y equal to 21 , which get logged.
function getItems ( fruitList , ... args , favoriteFruit ) {
return [ ... fruitList , ... args , favoriteFruit ]
}
getItems ( [ "banana" , "apple" ] , "pear" , "orange" )["banana", "apple", "pear", "orange"][["banana", "apple"], "pear", "orange"]["banana", "apple", ["pear"], "orange"]SyntaxError ...args is a rest parameter. The rest parameter's value is an array containing all remaining arguments, and can only be the last parameter ! In this example, the rest parameter was the second parameter. This is not possible, and will throw a syntax error.
function getItems ( fruitList , favoriteFruit , ... args ) {
return [ ... fruitList , ... args , favoriteFruit ] ;
}
getItems ( [ 'banana' , 'apple' ] , 'pear' , 'orange' ) ; The above example works. This returns the array [ 'banana', 'apple', 'orange', 'pear' ]
function nums ( a , b ) {
if ( a > b ) console . log ( 'a is bigger' ) ;
else console . log ( 'b is bigger' ) ;
return
a + b ;
}
console . log ( nums ( 4 , 2 ) ) ;
console . log ( nums ( 1 , 2 ) ) ;a is bigger , 6 and b is bigger , 3a is bigger , undefined and b is bigger , undefinedundefined and undefinedSyntaxError In JavaScript, we don't have to write the semicolon ( ; ) explicitly, however the JavaScript engine still adds them after statements. This is called Automatic Semicolon Insertion . A statement can for example be variables, or keywords like throw , return , break , etc.
Here, we wrote a return statement, and another value a + b on a new line . However, since it's a new line, the engine doesn't know that it's actually the value that we wanted to return. Instead, it automatically added a semicolon after return . You could see this as:
return ;
a + b ; This means that a + b is never reached, since a function stops running after the return keyword. If no value gets returned, like here, the function returns undefined . Note that there is no automatic insertion after if/else statements!
class Person {
constructor ( ) {
this . name = 'Lydia' ;
}
}
Person = class AnotherPerson {
constructor ( ) {
this . name = 'Sarah' ;
}
} ;
const member = new Person ( ) ;
console . log ( member . name ) ;"Lydia""Sarah"Error: cannot redeclare PersonSyntaxError We can set classes equal to other classes/function constructors. In this case, we set Person equal to AnotherPerson . The name on this constructor is Sarah , so the name property on the new Person instance member is "Sarah" .
const info = {
[ Symbol ( 'a' ) ] : 'b' ,
} ;
console . log ( info ) ;
console . log ( Object . keys ( info ) ) ;{Symbol('a'): 'b'} and ["{Symbol('a')"]{} and []{ a: "b" } and ["a"]{Symbol('a'): 'b'} and []A Symbol is not enumerable . The Object.keys method returns all enumerable key properties on an object. The Symbol won't be visible, and an empty array is returned. When logging the entire object, all properties will be visible, even non-enumerable ones.
This is one of the many qualities of a symbol: besides representing an entirely unique value (which prevents accidental name collision on objects, for example when working with 2 libraries that want to add properties to the same object), you can also "hide" properties on objects this way (although not entirely. You can still access symbols using the Object.getOwnPropertySymbols() method).
const getList = ( [ x , ... y ] ) => [ x , y ]
const getUser = user => { name : user . name , age : user . age }
const list = [ 1 , 2 , 3 , 4 ]
const user = { name : "Lydia" , age : 21 }
console . log ( getList ( list ) )
console . log ( getUser ( user ) )[1, [2, 3, 4]] and SyntaxError[1, [2, 3, 4]] and { name: "Lydia", age: 21 }[1, 2, 3, 4] and { name: "Lydia", age: 21 }Error and { name: "Lydia", age: 21 } The getList function receives an array as its argument. Between the parentheses of the getList function, we destructure this array right away. You could see this as:
[x, ...y] = [1, 2, 3, 4]
With the rest parameter ...y , we put all "remaining" arguments in an array. The remaining arguments are 2 , 3 and 4 in this case. The value of y is an array, containing all the rest parameters. The value of x is equal to 1 in this case, so when we log [x, y] , [1, [2, 3, 4]] gets logged.
The getUser function receives an object. With arrow functions, we don't have to write curly brackets if we just return one value. However, if you want to instantly return an object from an arrow function, you have to write it between parentheses, otherwise everything between the two braces will be interpreted as a block statement. In this case the code between the braces is not a valid JavaScript code, so a SyntaxError gets thrown.
The following function would have returned an object:
const getUser = user => ({ name: user.name, age: user.age })
const name = 'Lydia' ;
console . log ( name ( ) ) ;SyntaxErrorReferenceErrorTypeErrorundefined The variable name holds the value of a string, which is not a function, and thus cannot be invoked.
TypeErrors get thrown when a value is not of the expected type. JavaScript expected name to be a function since we're trying to invoke it. It was a string however, so a TypeError gets thrown: name is not a function!
SyntaxErrors get thrown when you've written something that isn't valid JavaScript, for example when you've written the word return as retrun . ReferenceErrors get thrown when JavaScript isn't able to find a reference to a value that you're trying to access.
// ? This is my 100th question! ?
const output = ` ${ [ ] && 'Im' } possible!
You should ${ '' && `n't` } see a therapist after so much JavaScript lol` ;possible! You should see a therapist after so much JavaScript lolImpossible! You should see a therapist after so much JavaScript lolpossible! You shouldn't see a therapist after so much JavaScript lolImpossible! You shouldn't see a therapist after so much JavaScript lol [] is a truthy value. With the && operator, the right-hand value will be returned if the left-hand value is a truthy value. In this case, the left-hand value [] is a truthy value, so "Im' gets returned.
"" is a falsy value. If the left-hand value is falsy, nothing gets returned. n't doesn't get returned.
const one = false || { } || null ;
const two = null || false || '' ;
const three = [ ] || 0 || true ;
console . log ( one , two , three ) ;false null []null "" true{} "" []null null true With the || operator, we can return the first truthy operand. If all values are falsy, the last operand gets returned.
(false || {} || null) : the empty object {} is a truthy value. This is the first (and only) truthy value, which gets returned. one is equal to {} .
(null || false || "") : all operands are falsy values. This means that the last operand, "" gets returned. two is equal to "" .
([] || 0 || "") : the empty array [] is a truthy value. This is the first truthy value, which gets returned. three is equal to [] .
const myPromise = ( ) => Promise . resolve ( 'I have resolved!' ) ;
function firstFunction ( ) {
myPromise ( ) . then ( res => console . log ( res ) ) ;
console . log ( 'second' ) ;
}
async function secondFunction ( ) {
console . log ( await myPromise ( ) ) ;
console . log ( 'second' ) ;
}
firstFunction ( ) ;
secondFunction ( ) ;I have resolved! , second and I have resolved! 、 secondsecond , I have resolved! and second , I have resolved!I have resolved! , second and second , I have resolved!second , I have resolved! and I have resolved! 、 secondWith a promise, we basically say I want to execute this function, but I'll put it aside for now while it's running since this might take a while. Only when a certain value is resolved (or rejected), and when the call stack is empty, I want to use this value.
We can get this value with both .then and the await keywords in an async function. Although we can get a promise's value with both .then and await , they work a bit differently.
In the firstFunction , we (sort of) put the myPromise function aside while it was running, but continued running the other code, which is console.log('second') in this case. Then, the function resolved with the string I have resolved , which then got logged after it saw that the callstack was empty.
With the await keyword in secondFunction , we literally pause the execution of an async function until the value has been resolved before moving to the next line.
This means that it waited for the myPromise to resolve with the value I have resolved , and only once that happened, we moved to the next line: second got logged.
const set = new Set ( ) ;
set . add ( 1 ) ;
set . add ( 'Lydia' ) ;
set . add ( { name : 'Lydia' } ) ;
for ( let item of set ) {
console . log ( item + 2 ) ;
}3 , NaN , NaN3 , 7 , NaN3 , Lydia2 , [object Object]2"12" , Lydia2 , [object Object]2 The + operator is not only used for adding numerical values, but we can also use it to concatenate strings. Whenever the JavaScript engine sees that one or more values are not a number, it coerces the number into a string.
The first one is 1 , which is a numerical value. 1 + 2 returns the number 3.
However, the second one is a string "Lydia" . "Lydia" is a string and 2 is a number: 2 gets coerced into a string. "Lydia" and "2" get concatenated, which results in the string "Lydia2" .
{ name: "Lydia" } is an object. Neither a number nor an object is a string, so it stringifies both. Whenever we stringify a regular object, it becomes "[object Object]" . "[object Object]" concatenated with "2" becomes "[object Object]2" .
Promise . resolve ( 5 ) ;5Promise {<pending>: 5}Promise {<fulfilled>: 5}Error We can pass any type of value we want to Promise.resolve , either a promise or a non-promise. The method itself returns a promise with the resolved value ( <fulfilled> ). If you pass a regular function, it'll be a resolved promise with a regular value. If you pass a promise, it'll be a resolved promise with the resolved value of that passed promise.
In this case, we just passed the numerical value 5 . It returns a resolved promise with the value 5 .
function compareMembers ( person1 , person2 = person ) {
if ( person1 !== person2 ) {
console . log ( 'Not the same!' ) ;
} else {
console . log ( 'They are the same!' ) ;
}
}
const person = { name : 'Lydia' } ;
compareMembers ( person ) ;Not the same!They are the same!ReferenceErrorSyntaxError Objects are passed by reference. When we check objects for strict equality ( === ), we're comparing their references.
We set the default value for person2 equal to the person object, and passed the person object as the value for person1 .
This means that both values have a reference to the same spot in memory, thus they are equal.
The code block in the else statement gets run, and They are the same! gets logged.
const colorConfig = {
red : true ,
blue : false ,
green : true ,
black : true ,
yellow : false ,
} ;
const colors = [ 'pink' , 'red' , 'blue' ] ;
console . log ( colorConfig . colors [ 1 ] ) ;truefalseundefinedTypeError In JavaScript, we have two ways to access properties on an object: bracket notation, or dot notation. In this example, we use dot notation ( colorConfig.colors ) instead of bracket notation ( colorConfig["colors"] ).
With dot notation, JavaScript tries to find the property on the object with that exact name. In this example, JavaScript tries to find a property called colors on the colorConfig object. There is no property called colors , so this returns undefined . Then, we try to access the value of the first element by using [1] . We cannot do this on a value that's undefined , so it throws a TypeError : Cannot read property '1' of undefined .
JavaScript interprets (or unboxes) statements. When we use bracket notation, it sees the first opening bracket [ and keeps going until it finds the closing bracket ] . Only then, it will evaluate the statement. If we would've used colorConfig[colors[1]] , it would have returned the value of the red property on the colorConfig object.
console . log ( '❤️' === '❤️' ) ;truefalse Under the hood, emojis are unicodes. The unicodes for the heart emoji is "U+2764 U+FE0F" . These are always the same for the same emojis, so we're comparing two equal strings to each other, which returns true.
const emojis = [ '' , '?' , '?' ] ;
emojis . map ( x => x + '' ) ;
emojis . filter ( x => x !== '?' ) ;
emojis . find ( x => x !== '?' ) ;
emojis . reduce ( ( acc , cur ) => acc + '' ) ;
emojis . slice ( 1 , 2 , '' ) ;
emojis . splice ( 1 , 2 , '' ) ;All of themmap reduce slice splicemap slice splicesplice With splice method, we modify the original array by deleting, replacing or adding elements. In this case, we removed 2 items from index 1 (we removed '?' and '?' ) and added the emoji instead.
map , filter and slice return a new array, find returns an element, and reduce returns a reduced value.
const food = [ '?' , '?' , '?' , '?' ] ;
const info = { favoriteFood : food [ 0 ] } ;
info . favoriteFood = '?' ;
console . log ( food ) ;['?', '?', '?', '?']['?', '?', '?', '?']['?', '?', '?', '?', '?']ReferenceError We set the value of the favoriteFood property on the info object equal to the string with the pizza emoji, '?' 。 A string is a primitive data type. In JavaScript, primitive data types don't interact by reference.
In JavaScript, primitive data types (everything that's not an object) interact by value . In this case, we set the value of the favoriteFood property on the info object equal to the value of the first element in the food array, the string with the pizza emoji in this case ( '?' ). A string is a primitive data type, and interact by value (see my blogpost if you're interested in learning more)
Then, we change the value of the favoriteFood property on the info object. The food array hasn't changed, since the value of favoriteFood was merely a copy of the value of the first element in the array, and doesn't have a reference to the same spot in memory as the element on food[0] . When we log food, it's still the original array, ['?', '?', '?', '?'] .
JSON . parse ( ) ; With the JSON.parse() method, we can parse JSON string to a JavaScript value.
// Stringifying a number into valid JSON, then parsing the JSON string to a JavaScript value:
const jsonNumber = JSON . stringify ( 4 ) ; // '4'
JSON . parse ( jsonNumber ) ; // 4
// Stringifying an array value into valid JSON, then parsing the JSON string to a JavaScript value:
const jsonArray = JSON . stringify ( [ 1 , 2 , 3 ] ) ; // '[1, 2, 3]'
JSON . parse ( jsonArray ) ; // [1, 2, 3]
// Stringifying an object into valid JSON, then parsing the JSON string to a JavaScript value:
const jsonArray = JSON . stringify ( { name : 'Lydia' } ) ; // '{"name":"Lydia"}'
JSON . parse ( jsonArray ) ; // { name: 'Lydia' } let name = 'Lydia' ;
function getName ( ) {
console . log ( name ) ;
let name = 'Sarah' ;
}
getName ( ) ;undefinedReferenceError Each function has its own execution context (or scope ). The getName function first looks within its own context (scope) to see if it contains the variable name we're trying to access. In this case, the getName function contains its own name variable: we declare the variable name with the let keyword, and with the value of 'Sarah' .
Variables with the let keyword (and const ) are hoisted, but unlike var , don't get initialized . They are not accessible before the line we declare (initialize) them. This is called the "temporal dead zone". When we try to access the variables before they are declared, JavaScript throws a ReferenceError .
If we wouldn't have declared the name variable within the getName function, the javascript engine would've looked down the scope chain . The outer scope has a variable called name with the value of Lydia . In that case, it would've logged Lydia .
let name = 'Lydia' ;
function getName ( ) {
console . log ( name ) ;
}
getName ( ) ; // Lydia function * generatorOne ( ) {
yield [ 'a' , 'b' , 'c' ] ;
}
function * generatorTwo ( ) {
yield * [ 'a' , 'b' , 'c' ] ;
}
const one = generatorOne ( ) ;
const two = generatorTwo ( ) ;
console . log ( one . next ( ) . value ) ;
console . log ( two . next ( ) . value ) ;a and aa and undefined['a', 'b', 'c'] and aa and ['a', 'b', 'c'] With the yield keyword, we yield values in a generator function. With the yield* keyword, we can yield values from another generator function, or iterable object (for example an array).
In generatorOne , we yield the entire array ['a', 'b', 'c'] using the yield keyword. The value of value property on the object returned by the next method on one ( one.next().value ) is equal to the entire array ['a', 'b', 'c'] .
console . log ( one . next ( ) . value ) ; // ['a', 'b', 'c']
console . log ( one . next ( ) . value ) ; // undefined In generatorTwo , we use the yield* keyword. This means that the first yielded value of two , is equal to the first yielded value in the iterator. The iterator is the array ['a', 'b', 'c'] . The first yielded value is a , so the first time we call two.next().value , a is returned.
console . log ( two . next ( ) . value ) ; // 'a'
console . log ( two . next ( ) . value ) ; // 'b'
console . log ( two . next ( ) . value ) ; // 'c'
console . log ( two . next ( ) . value ) ; // undefined console . log ( ` ${ ( x => x ) ( 'I love' ) } to program` ) ;I love to programundefined to program${(x => x)('I love') to programTypeError Expressions within template literals are evaluated first. This means that the string will contain the returned value of the expression, the immediately invoked function (x => x)('I love') in this case. We pass the value 'I love' as an argument to the x => x arrow function. x is equal to 'I love' , which gets returned. This results in I love to program .
let config = {
alert : setInterval ( ( ) => {
console . log ( 'Alert!' ) ;
} , 1000 ) ,
} ;
config = null ;setInterval callback won't be invokedsetInterval callback gets invoked oncesetInterval callback will still be called every secondconfig.alert() , config is null Normally when we set objects equal to null , those objects get garbage collected as there is no reference anymore to that object. However, since the callback function within setInterval is an arrow function (thus bound to the config object), the callback function still holds a reference to the config object. As long as there is a reference, the object won't get garbage collected. Since this is an interval, setting config to null or delete -ing config.alert won't garbage-collect the interval, so the interval will still be called. It should be cleared with clearInterval(config.alert) to remove it from memory. Since it was not cleared, the setInterval callback function will still get invoked every 1000ms (1s).
'Hello world!' ？ const myMap = new Map ( ) ;
const myFunc = ( ) => 'greeting' ;
myMap . set ( myFunc , 'Hello world!' ) ;
//1
myMap . get ( 'greeting' ) ;
//2
myMap . get ( myFunc ) ;
//3
myMap . get ( ( ) => 'greeting' ) ; When adding a key/value pair using the set method, the key will be the value of the first argument passed to the set function, and the value will be the second argument passed to the set function. The key is the function () => 'greeting' in this case, and the value 'Hello world' . myMap is now { () => 'greeting' => 'Hello world!' } .
1 is wrong, since the key is not 'greeting' but () => 'greeting' . 3 is wrong, since we're creating a new function by passing it as a parameter to the get method. Object interacts by reference . Functions are objects, which is why two functions are never strictly equal, even if they are identical: they have a reference to a different spot in memory.
const person = {
name : 'Lydia' ,
age : 21 ,
} ;
const changeAge = ( x = { ... person } ) => ( x . age += 1 ) ;
const changeAgeAndName = ( x = { ... person } ) => {
x . age += 1 ;
x . name = 'Sarah' ;
} ;
changeAge ( person ) ;
changeAgeAndName ( ) ;
console . log ( person ) ;{name: "Sarah", age: 22}{name: "Sarah", age: 23}{name: "Lydia", age: 22}{name: "Lydia", age: 23} Both the changeAge and changeAgeAndName functions have a default parameter, namely a newly created object { ...person } . This object has copies of all the key/values in the person object.
First, we invoke the changeAge function and pass the person object as its argument. This function increases the value of the age property by 1. person is now { name: "Lydia", age: 22 } .
Then, we invoke the changeAgeAndName function, however we don't pass a parameter. Instead, the value of x is equal to a new object: { ...person } . Since it's a new object, it doesn't affect the values of the properties on the person object. person is still equal to { name: "Lydia", age: 22 } .
6 ? function sumValues ( x , y , z ) {
return x + y + z ;
}sumValues([...1, 2, 3])sumValues([...[1, 2, 3]])sumValues(...[1, 2, 3])sumValues([1, 2, 3]) With the spread operator ... , we can spread iterables to individual elements. The sumValues function receives three arguments: x , y and z . ...[1, 2, 3] will result in 1, 2, 3 , which we pass to the sumValues function.
let num = 1 ;
const list = [ '?' , '?' , '?' , '?' ] ;
console . log ( list [ ( num += 1 ) ] ) ;??SyntaxErrorReferenceError With the += operator, we're incrementing the value of num by 1 . num had the initial value 1 , so 1 + 1 is 2 . The item on the second index in the list array is ?, console.log(list[2]) prints ?.
const person = {
firstName : 'Lydia' ,
lastName : 'Hallie' ,
pet : {
name : 'Mara' ,
breed : 'Dutch Tulip Hound' ,
} ,
getFullName ( ) {
return ` ${ this . firstName } ${ this . lastName } ` ;
} ,
} ;
console . log ( person . pet ?. name ) ;
console . log ( person . pet ?. family ?. name ) ;
console . log ( person . getFullName ?. ( ) ) ;
console . log ( member . getLastName ?. ( ) ) ;undefined undefined undefined undefinedMara undefined Lydia Hallie ReferenceErrorMara null Lydia Hallie nullnull ReferenceError null ReferenceError With the optional chaining operator ?. , we no longer have to explicitly check whether the deeper nested values are valid or not. If we're trying to access a property on an undefined or null value ( nullish ), the expression short-circuits and returns undefined .
person.pet?.name : person has a property named pet : person.pet is not nullish. It has a property called name , and returns Mara . person.pet?.family?.name : person has a property named pet : person.pet is not nullish. pet does not have a property called family , person.pet.family is nullish. The expression returns undefined . person.getFullName?.() : person has a property named getFullName : person.getFullName() is not nullish and can get invoked, which returns Lydia Hallie . member.getLastName?.() : variable member is non-existent therefore a ReferenceError gets thrown!
const groceries = [ 'banana' , 'apple' , 'peanuts' ] ;
if ( groceries . indexOf ( 'banana' ) ) {
console . log ( 'We have to buy bananas!' ) ;
} else {
console . log ( `We don't have to buy bananas!` ) ;
}undefined1 We passed the condition groceries.indexOf("banana") to the if-statement. groceries.indexOf("banana") returns 0 , which is a falsy value. Since the condition in the if-statement is falsy, the code in the else block runs, and We don't have to buy bananas! gets logged.
const config = {
languages : [ ] ,
set language ( lang ) {
return this . languages . push ( lang ) ;
} ,
} ;
console . log ( config . language ) ;function language(lang) { this.languages.push(lang }0[]undefined The language method is a setter . Setters don't hold an actual value, their purpose is to modify properties. When calling a setter method, undefined gets returned.
const name = 'Lydia Hallie' ;
console . log ( ! typeof name === 'object' ) ;
console . log ( ! typeof name === 'string' ) ;false truetrue falsefalse falsetrue true typeof name returns "string" . The string "string" is a truthy value, so !typeof name returns the boolean value false . false === "object" and false === "string" both return false .
(If we wanted to check whether the type was (un)equal to a certain type, we should've written !== instead of !typeof )
const add = x => y => z => {
console . log ( x , y , z ) ;
return x + y + z ;
} ;
add ( 4 ) ( 5 ) ( 6 ) ;4 5 66 5 44 function functionundefined undefined 6 The add function returns an arrow function, which returns an arrow function, which returns an arrow function (still with me?). The first function receives an argument x with the value of 4 . We invoke the second function, which receives an argument y with the value 5 . Then we invoke the third function, which receives an argument z with the value 6 . When we're trying to access the value x , y and z within the last arrow function, the JS engine goes up the scope chain in order to find the values for x and y accordingly. This returns 4 5 6 .
async function * range ( start , end ) {
for ( let i = start ; i <= end ; i ++ ) {
yield Promise . resolve ( i ) ;
}
}
( async ( ) => {
const gen = range ( 1 , 3 ) ;
for await ( const item of gen ) {
console . log ( item ) ;
}
} ) ( ) ;Promise {1} Promise {2} Promise {3}Promise {<pending>} Promise {<pending>} Promise {<pending>}1 2 3undefined undefined undefined The generator function range returns an async object with promises for each item in the range we pass: Promise{1} , Promise{2} , Promise{3} . We set the variable gen equal to the async object, after which we loop over it using a for await ... of loop. We set the variable item equal to the returned Promise values: first Promise{1} , then Promise{2} , then Promise{3} . Since we're awaiting the value of item , the resolved promise, the resolved values of the promises get returned: 1 , 2 , then 3 .
const myFunc = ( { x , y , z } ) => {
console . log ( x , y , z ) ;
} ;
myFunc ( 1 , 2 , 3 ) ;1 2 3{1: 1} {2: 2} {3: 3}{ 1: undefined } undefined undefinedundefined undefined undefined myFunc expects an object with properties x , y and z as its argument. Since we're only passing three separate numeric values (1, 2, 3) instead of one object with properties x , y and z ({x: 1, y: 2, z: 3}), x , y and z have their default value of undefined .
function getFine ( speed , amount ) {
const formattedSpeed = new Intl . NumberFormat ( 'en-US' , {
style : 'unit' ,
unit : 'mile-per-hour'
} ) . format ( speed ) ;
const formattedAmount = new Intl . NumberFormat ( 'en-US' , {
style : 'currency' ,
currency : 'USD'
} ) . format ( amount ) ;
return `The driver drove ${ formattedSpeed } and has to pay ${ formattedAmount } ` ;
}
console . log ( getFine ( 130 , 300 ) ) With the Intl.NumberFormat method, we can format numeric values to any locale. We format the numeric value 130 to the en-US locale as a unit in mile-per-hour , which results in 130 mph . The numeric value 300 to the en-US locale as a currency in USD results in $300.00 .
const spookyItems = [ '?' , '?' , '?' ] ;
( { item : spookyItems [ 3 ] } = { item : '?' } ) ;
console . log ( spookyItems ) ;["?", "?", "?"]["?", "?", "?", "?"]["?", "?", "?", { item: "?" }]["?", "?", "?", "[object Object]"] By destructuring objects, we can unpack values from the right-hand object, and assign the unpacked value to the value of the same property name on the left-hand object. In this case, we're assigning the value "?" to spookyItems[3] . This means that we're modifying the spookyItems array, we're adding the "?"それに。 When logging spookyItems , ["?", "?", "?", "?"] gets logged.
const name = 'Lydia Hallie' ;
const age = 21 ;
console . log ( Number . isNaN ( name ) ) ;
console . log ( Number . isNaN ( age ) ) ;
console . log ( isNaN ( name ) ) ;
console . log ( isNaN ( age ) ) ;true false true falsetrue false false falsefalse false true falsefalse true false true With the Number.isNaN method, you can check if the value you pass is a numeric value and equal to NaN . name is not a numeric value, so Number.isNaN(name) returns false . age is a numeric value, but is not equal to NaN , so Number.isNaN(age) returns false .
With the isNaN method, you can check if the value you pass is not a number. name is not a number, so isNaN(name) returns true. age is a number, so isNaN(age) returns false .
const randomValue = 21 ;
function getInfo ( ) {
console . log ( typeof randomValue ) ;
const randomValue = 'Lydia Hallie' ;
}
getInfo ( ) ;"number""string"undefinedReferenceError Variables declared with the const keyword are not referenceable before their initialization: this is called the temporal dead zone . In the getInfo function, the variable randomValue is scoped in the functional scope of getInfo . On the line where we want to log the value of typeof randomValue , the variable randomValue isn't initialized yet: a ReferenceError gets thrown! The engine didn't go down the scope chain since we declared the variable randomValue in the getInfo function.
const myPromise = Promise . resolve ( 'Woah some cool data' ) ;
( async ( ) => {
try {
console . log ( await myPromise ) ;
} catch {
throw new Error ( `Oops didn't work` ) ;
} finally {
console . log ( 'Oh finally!' ) ;
}
} ) ( ) ;Woah some cool dataOh finally!Woah some cool data Oh finally!Oops didn't work Oh finally! In the try block, we're logging the awaited value of the myPromise variable: "Woah some cool data" . Since no errors were thrown in the try block, the code in the catch block doesn't run. The code in the finally block always runs, "Oh finally!" gets logged.
const emojis = [ '?' , [ '' , '' , [ '?' , '?' ] ] ] ;
console . log ( emojis . flat ( 1 ) ) ;['?', ['', '', ['?', '?']]]['?', '', '', ['?', '?']]['?', ['', '', '?', '?']]['?', '', '', '?', '?'] With the flat method, we can create a new, flattened array. The depth of the flattened array depends on the value that we pass. In this case, we passed the value 1 (which we didn't have to, that's the default value), meaning that only the arrays on the first depth will be concatenated. ['?'] and ['', '', ['?', '?']] in this case. Concatenating these two arrays results in ['?', '', '', ['?', '?']] .
class Counter {
constructor ( ) {
this . count = 0 ;
}
increment ( ) {
this . count ++ ;
}
}
const counterOne = new Counter ( ) ;
counterOne . increment ( ) ;
counterOne . increment ( ) ;
const counterTwo = counterOne ;
counterTwo . increment ( ) ;
console . log ( counterOne . count ) ;0123 counterOne is an instance of the Counter class. The counter class contains a count property on its constructor, and an increment method. First, we invoked the increment method twice by calling counterOne.increment() . Currently, counterOne.count is 2 .
Then, we create a new variable counterTwo , and set it equal to counterOne . Since objects interact by reference, we're just creating a new reference to the same spot in memory that counterOne points to. Since it has the same spot in memory, any changes made to the object that counterTwo has a reference to, also apply to counterOne . Currently, counterTwo.count is 2 .
We invoke counterTwo.increment() , which sets count to 3 . Then, we log the count on counterOne , which logs 3 .
const myPromise = Promise . resolve ( Promise . resolve ( 'Promise' ) ) ;
function funcOne ( ) {
setTimeout ( ( ) => console . log ( 'Timeout 1!' ) , 0 ) ;
myPromise . then ( res => res ) . then ( res => console . log ( ` ${ res } 1!` ) ) ;
console . log ( 'Last line 1!' ) ;
}
async function funcTwo ( ) {
const res = await myPromise ;
console . log ( ` ${ res } 2!` )
setTimeout ( ( ) => console . log ( 'Timeout 2!' ) , 0 ) ;
console . log ( 'Last line 2!' ) ;
}
funcOne ( ) ;
funcTwo ( ) ;Promise 1! Last line 1! Promise 2! Last line 2! Timeout 1! Timeout 2!Last line 1! Timeout 1! Promise 1! Last line 2! Promise2! Timeout 2!Last line 1! Promise 2! Last line 2! Promise 1! Timeout 1! Timeout 2!Timeout 1! Promise 1! Last line 1! Promise 2! Timeout 2! Last line 2! First, we invoke funcOne . On the first line of funcOne , we call the asynchronous setTimeout function, from which the callback is sent to the Web API. (see my article on the event loop here.)
Then we call the myPromise promise, which is an asynchronous operation. Pay attention, that now only the first then clause was added to the microtask queue.
Both the promise and the timeout are asynchronous operations, the function keeps on running while it's busy completing the promise and handling the setTimeout callback. This means that Last line 1! gets logged first, since this is not an asynchonous operation.
Since the callstack is not empty yet, the setTimeout function and promise in funcOne cannot get added to the callstack yet.
In funcTwo , the variable res gets Promise because Promise.resolve(Promise.resolve('Promise')) is equivalent to Promise.resolve('Promise') since resolving a promise just resolves it's value. The await in this line stops the execution of the function until it receives the resolution of the promise and then keeps on running synchronously until completion, so Promise 2! and then Last line 2! are logged and the setTimeout is sent to the Web API. If the first then clause in funcOne had its own log statement, it would be printed before Promise 2! 。 Howewer, it executed silently and put the second then clause in microtask queue. So, the second clause will be printed after Promise 2! 。
Then the call stack is empty. Promises are microtasks so they are resolved first when the call stack is empty so Promise 1! gets to be logged.
Now, since funcTwo popped off the call stack, the call stack is empty. The callbacks waiting in the queue ( () => console.log("Timeout 1!") from funcOne , and () => console.log("Timeout 2!") from funcTwo ) get added to the call stack one by 1つ。 The first callback logs Timeout 1! , and gets popped off the stack. Then, the second callback logs Timeout 2! , and gets popped off the stack.
sum in sum.js from index.js? // sum.js
export default function sum ( x ) {
return x + x ;
}
// index.js
import * as sum from './sum' ;sum(4)sum.sum(4)sum.default(4)* , only named exports With the asterisk * , we import all exported values from that file, both default and named. If we had the following file:
// info.js
export const name = 'Lydia' ;
export const age = 21 ;
export default 'I love JavaScript' ;
// index.js
import * as info from './info' ;
console . log ( info ) ;The following would get logged:
{
default : "I love JavaScript" ,
name : "Lydia" ,
age : 21
} For the sum example, it means that the imported value sum looks like this:
{ default : function sum ( x ) { return x + x } } We can invoke this function, by calling sum.default
const handler = {
set : ( ) => console . log ( 'Added a new property!' ) ,
get : ( ) => console . log ( 'Accessed a property!' ) ,
} ;
const person = new Proxy ( { } , handler ) ;
person . name = 'Lydia' ;
person . name ;Added a new property!Accessed a property!Added a new property! Accessed a property! With a Proxy object, we can add custom behavior to an object that we pass to it as the second argument. In this case, we pass the handler object which contains two properties: set and get . set gets invoked whenever we set property values, and get gets invoked whenever we get (access) property values.
The first argument is an empty object {} , which is the value of person . To this object, the custom behavior specified in the handler object gets added. If we add a property to the person object, set will get invoked. If we access a property on the person object, get gets invoked.
First, we added a new property name to the proxy object ( person.name = "Lydia" ). set gets invoked, and logs "Added a new property!" 。
Then, we access a property value on the proxy object, and the get property on the handler object is invoked. "Accessed a property!" gets logged.
person object? const person = { name : 'Lydia Hallie' } ;
Object . seal ( person ) ;person.name = "Evan Bacon"person.age = 21delete person.nameObject.assign(person, { age: 21 }) With Object.seal we can prevent new properties from being added , or existing properties to be removed .
However, you can still modify the value of existing properties.
person object? const person = {
name : 'Lydia Hallie' ,
address : {
street : '100 Main St' ,
} ,
} ;
Object . freeze ( person ) ;person.name = "Evan Bacon"delete person.addressperson.address.street = "101 Main St"person.pet = { name: "Mara" } The Object.freeze method freezes an object. No properties can be added, modified, or removed.
However, it only shallowly freezes the object, meaning that only direct properties on the object are frozen. If the property is another object, like address in this case, the properties on that object aren't frozen, and can be modified.
const add = x => x + x ;
function myFunc ( num = 2 , value = add ( num ) ) {
console . log ( num , value ) ;
}
myFunc ( ) ;
myFunc ( 3 ) ;2 4 and 3 62 NaN and 3 NaN2 Error and 3 62 4 and 3 Error First, we invoked myFunc() without passing any arguments. Since we didn't pass arguments, num and value got their default values: num is 2 , and value is the returned value of the function add . To the add function, we pass num as an argument, which had the value of 2 . add returns 4 , which is the value of value .
Then, we invoked myFunc(3) and passed the value 3 as the value for the argument num . We didn't pass an argument for value . Since we didn't pass a value for the value argument, it got the default value: the returned value of the add function. To add , we pass num , which has the value of 3 . add returns 6 , which is the value of value .
class Counter {
# number = 10
increment ( ) {
this . # number ++
}
getNum ( ) {
return this . # number
}
}
const counter = new Counter ( )
counter . increment ( )
console . log ( counter . # number )1011undefinedSyntaxError In ES2020, we can add private variables in classes by using the # . We cannot access these variables outside of the class. When we try to log counter.#number , a SyntaxError gets thrown: we cannot access it outside the Counter class!
const teams = [
{ name : 'Team 1' , members : [ 'Paul' , 'Lisa' ] } ,
{ name : 'Team 2' , members : [ 'Laura' , 'Tim' ] } ,
] ;
function * getMembers ( members ) {
for ( let i = 0 ; i < members . length ; i ++ ) {
yield members [ i ] ;
}
}
function * getTeams ( teams ) {
for ( let i = 0 ; i < teams . length ; i ++ ) {
// SOMETHING IS MISSING HERE
}
}
const obj = getTeams ( teams ) ;
obj . next ( ) ; // { value: "Paul", done: false }
obj . next ( ) ; // { value: "Lisa", done: false }yield getMembers(teams[i].members)yield* getMembers(teams[i].members)return getMembers(teams[i].members)return yield getMembers(teams[i].members) In order to iterate over the members in each element in the teams array, we need to pass teams[i].members to the getMembers generator function. The generator function returns a generator object. In order to iterate over each element in this generator object, we need to use yield* .
If we would've written yield , return yield , or return , the entire generator function would've gotten returned the first time we called the next method.
const person = {
name : 'Lydia Hallie' ,
hobbies : [ 'coding' ] ,
} ;
function addHobby ( hobby , hobbies = person . hobbies ) {
hobbies . push ( hobby ) ;
return hobbies ;
}
addHobby ( 'running' , [ ] ) ;
addHobby ( 'dancing' ) ;
addHobby ( 'baking' , person . hobbies ) ;
console . log ( person . hobbies ) ;["coding"]["coding", "dancing"]["coding", "dancing", "baking"]["coding", "running", "dancing", "baking"] The addHobby function receives two arguments, hobby and hobbies with the default value of the hobbies array on the person object.
First, we invoke the addHobby function, and pass "running" as the value for hobby and an empty array as the value for hobbies . Since we pass an empty array as the value for hobbies , "running" gets added to this empty array.
Then, we invoke the addHobby function, and pass "dancing" as the value for hobby . We didn't pass a value for hobbies , so it gets the default value, the hobbies property on the person object. We push the hobby dancing to the person.hobbies array.
Last, we invoke the addHobby function, and pass "baking" as the value for hobby , and the person.hobbies array as the value for hobbies . We push the hobby baking to the person.hobbies array.
After pushing dancing and baking , the value of person.hobbies is ["coding", "dancing", "baking"]
class Bird {
constructor ( ) {
console . log ( "I'm a bird. ?" ) ;
}
}
class Flamingo extends Bird {
constructor ( ) {
console . log ( "I'm pink. ?" ) ;
super ( ) ;
}
}
const pet = new Flamingo ( ) ;I'm pink. ?I'm pink. ? I'm a bird. ?I'm a bird. ? I'm pink. ? We create the variable pet which is an instance of the Flamingo class. When we instantiate this instance, the constructor on Flamingo gets called. First, "I'm pink. ?" gets logged, after which we call super() . super() calls the constructor of the parent class, Bird . The constructor in Bird gets called, and logs "I'm a bird. ?" 。
const emojis = [ '?' , '??' , '?' , '' ] ;
/* 1 */ emojis . push ( '?' ) ;
/* 2 */ emojis . splice ( 0 , 2 ) ;
/* 3 */ emojis = [ ... emojis , '?' ] ;
/* 4 */ emojis . length = 0 ; The const keyword simply means we cannot redeclare the value of that variable, it's read-only . However, the value itself isn't immutable. The properties on the emojis array can be modified, for example by pushing new values, splicing them, or setting the length of the array to 0.
person object to get ["Lydia Hallie", 21] as the output of [...person] ? const person = {
name : "Lydia Hallie" ,
age : 21
}
[ ... person ] // ["Lydia Hallie", 21]*[Symbol.iterator]() { for (let x in this) yield* this[x] }*[Symbol.iterator]() { yield* Object.values(this) }*[Symbol.iterator]() { for (let x in this) yield this } Objects aren't iterable by default. An iterable is an iterable if the iterator protocol is present. We can add this manually by adding the iterator symbol [Symbol.iterator] , which has to return a generator object, for example by making it a generator function *[Symbol.iterator]() {} . This generator function has to yield the Object.values of the person object if we want it to return the array ["Lydia Hallie", 21] : yield* Object.values(this) .
let count = 0 ;
const nums = [ 0 , 1 , 2 , 3 ] ;
nums . forEach ( num => {
if ( num ) count += 1
} )
console . log ( count ) The if condition within the forEach loop checks whether the value of num is truthy or falsy. Since the first number in the nums array is 0 , a falsy value, the if statement's code block won't be executed. count only gets incremented for the other 3 numbers in the nums array, 1 , 2 and 3 . Since count gets incremented by 1 3 times, the value of count is 3 .
function getFruit ( fruits ) {
console . log ( fruits ?. [ 1 ] ?. [ 1 ] )
}
getFruit ( [ [ '?' , '?' ] , [ '?' ] ] )
getFruit ( )
getFruit ( [ [ '?' ] , [ '?' , '?' ] ] )null , undefined , ?[] , null , ?[] , [] , ?undefined , undefined , ? The ? allows us to optionally access deeper nested properties within objects. We're trying to log the item on index 1 within the subarray that's on index 1 of the fruits array. If the subarray on index 1 in the fruits array doesn't exist, it'll simply return undefined . If the subarray on index 1 in the fruits array exists, but this subarray doesn't have an item on its 1 index, it'll also return undefined .
First, we're trying to log the second item in the ['?'] subarray of [['?', '?'], ['?']] . This subarray only contains one item, which means there is no item on index 1 , and returns undefined .
Then, we're invoking the getFruits function without passing a value as an argument, which means that fruits has a value of undefined by default. Since we're conditionally chaining the item on index 1 of fruits , it returns undefined since this item on index 1 does not exist.
Lastly, we're trying to log the second item in the ['?', '?'] subarray of ['?'], ['?', '?'] . The item on index 1 within this subarray is ? , which gets logged.
class Calc {
constructor ( ) {
this . count = 0
}
increase ( ) {
this . count ++
}
}
const calc = new Calc ( )
new Calc ( ) . increase ( )
console . log ( calc . count )01undefinedReferenceError We set the variable calc equal to a new instance of the Calc class. Then, we instantiate a new instance of Calc , and invoke the increase method on this instance. Since the count property is within the constructor of the Calc class, the count property is not shared on the prototype of Calc . This means that the value of count has not been updated for the instance calc points to, count is still 0 .
const user = {
email : "[email protected]" ,
password : "12345"
}
const updateUser = ( { email , password } ) => {
if ( email ) {
Object . assign ( user , { email } )
}
if ( password ) {
user . password = password
}
return user
}
const updatedUser = updateUser ( { email : "[email protected]" } )
console . log ( updatedUser === user )falsetrueTypeErrorReferenceError The updateUser function updates the values of the email and password properties on user, if their values are passed to the function, after which the function returns the user object. The returned value of the updateUser function is the user object, which means that the value of updatedUser is a reference to the same user object that user points to. updatedUser === user equals true .
const fruit = [ '?' , '?' , '?' ]
fruit . slice ( 0 , 1 )
fruit . splice ( 0 , 1 )
fruit . unshift ( '?' )
console . log ( fruit )['?', '?', '?']['?', '?']['?', '?', '?']['?', '?', '?', '?'] First, we invoke the slice method on the fruit array. The slice method does not modify the original array, but returns the value that it sliced off the array: the banana emoji. Then, we invoke the splice method on the fruit array. The splice method does modify the original array, which means that the fruit array now consists of ['?', '?'] . At last, we invoke the unshift method on the fruit array, which modifies the original array by adding the provided value, '?' in this case, as the first element in the array. The fruit array now consists of ['?', '?', '?'] .
const animals = { } ;
let dog = { emoji : '?' }
let cat = { emoji : '?' }
animals [ dog ] = { ... dog , name : "Mara" }
animals [ cat ] = { ... cat , name : "Sara" }
console . log ( animals [ dog ] ){ emoji: "?", name: "Mara" }{ emoji: "?", name: "Sara" }undefinedReferenceErrorObject keys are converted to strings.
Since the value of dog is an object, animals[dog] actually means that we're creating a new property called "[object Object]" equal to the new object. animals["[object Object]"] is now equal to { emoji: "?", name: "Mara"} .
cat is also an object, which means that animals[cat] actually means that we're overwriting the value of animals["[object Object]"] with the new cat properties.
Logging animals[dog] , or actually animals["[object Object]"] since converting the dog object to a string results "[object Object]" , returns the { emoji: "?", name: "Sara" } .
const user = {
email : "[email protected]" ,
updateEmail : email => {
this . email = email
}
}
user . updateEmail ( "[email protected]" )
console . log ( user . email )[email protected][email protected]undefinedReferenceError The updateEmail function is an arrow function, and is not bound to the user object. This means that the this keyword is not referring to the user object, but refers to the global scope in this case. The value of email within the user object does not get updated. When logging the value of user.email , the original value of [email protected] gets returned.
const promise1 = Promise . resolve ( 'First' )
const promise2 = Promise . resolve ( 'Second' )
const promise3 = Promise . reject ( 'Third' )
const promise4 = Promise . resolve ( 'Fourth' )
const runPromises = async ( ) => {
const res1 = await Promise . all ( [ promise1 , promise2 ] )
const res2 = await Promise . all ( [ promise3 , promise4 ] )
return [ res1 , res2 ]
}
runPromises ( )
. then ( res => console . log ( res ) )
. catch ( err => console . log ( err ) )[['First', 'Second'], ['Fourth']][['First', 'Second'], ['Third', 'Fourth']][['First', 'Second']]'Third' The Promise.all method runs the passed promises in parallel. If one promise fails, the Promise.all method rejects with the value of the rejected promise. In this case, promise3 is rejected with the value "Third" . We're catching the rejected value in the chained catch method on the runPromises invocation to catch any errors within the runPromises function. Only "Third" gets logged, since promise3 is rejected with this value.
method be to log { name: "Lydia", age: 22 } ? const keys = [ "name" , "age" ]
const values = [ "Lydia" , 22 ]
const method = /* ?? */
Object [ method ] ( keys . map ( ( _ , i ) => {
return [ keys [ i ] , values [ i ] ]
} ) ) // { name: "Lydia", age: 22 }entriesvaluesfromEntriesforEach The fromEntries method turns a 2d array into an object. The first element in each subarray will be the key, and the second element in each subarray will be the value. In this case, we're mapping over the keys array, which returns an array that the first element is the item on the key array on the current index, and the second element is the item of the values array on the current index.
This creates an array of subarrays containing the correct keys and values, which results in { name: "Lydia", age: 22 }
const createMember = ( { email , address = { } } ) => {
const validEmail = / .+@.+..+ / . test ( email )
if ( ! validEmail ) throw new Error ( "Valid email pls" )
return {
email ,
address : address ? address : null
}
}
const member = createMember ( { email : "[email protected]" } )
console . log ( member ){ email: "[email protected]", address: null }{ email: "[email protected]" }{ email: "[email protected]", address: {} }{ email: "[email protected]", address: undefined } The default value of address is an empty object {} . When we set the variable member equal to the object returned by the createMember function, we didn't pass a value for the address, which means that the value of the address is the default empty object {} . An empty object is a truthy value, which means that the condition of the address ? address : null conditional returns true . The value of the address is the empty object {} .
let randomValue = { name : "Lydia" }
randomValue = 23
if ( ! typeof randomValue === "string" ) {
console . log ( "It's not a string!" )
} else {
console . log ( "Yay it's a string!" )
}It's not a string!Yay it's a string!TypeErrorundefined The condition within the if statement checks whether the value of !typeof randomValue is equal to "string" . The ! operator converts the value to a boolean value. If the value is truthy, the returned value will be false , if the value is falsy, the returned value will be true . In this case, the returned value of typeof randomValue is the truthy value "number" , meaning that the value of !typeof randomValue is the boolean value false .
!typeof randomValue === "string" always returns false, since we're actually checking false === "string" . Since the condition returned false , the code block of the else statement gets run, and Yay it's a string! gets logged.
