筆記
此存儲庫是在2019年創建的，因此此處提供的問題基於當時的JavaScript語法和行為。由於JavaScript是一種不斷發展的語言，因此這裡有一些較新的語言功能。
從基本到高級：測試您對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回調函數被調用。由於使用var關鍵字聲明了第一個循環中的變量i ，因此此值是全局的。在循環期間，我們使用Unary Operator ++每次將i的值增加1 。當調用setTimeout回調函數時， i在第一個示例中等於3 。
在第二個循環中，使用let關鍵字聲明的變量i被聲明：使用let （和const ）關鍵字聲明的變量是塊分佈的（ { }之間的任何塊）。在每次迭代期間， 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時，它不是指形狀對象，而是指其周圍範圍（例如窗口）。
由於箭頭函數的範圍中沒有值radius ，因此this.radius返回undefined ，當乘以2 * Math.PI時，它會導致NaN 。
+ true ;
! 'Lydia' ;1和falsefalse和NaNfalse和false Unary Plus試圖將操作數轉換為一個數字。 true是1 ， false是0 。
字符串'Lydia'是一個真實的價值。我們實際問的是：“這是虛假的價值嗎？”。這返回false 。
const bird = {
size : 'small' ,
} ;
const mouse = {
name : 'Mickey' ,
small : true ,
} ;mouse.bird.size無效mouse[bird.size]無效mouse[bird["size"]]無效在JavaScript中，所有對象鍵都是字符串（除非是符號）。即使我們可能不會將它們鍵入字符串，但它們始終將其轉換為引擎蓋下的琴弦。
JavaScript解釋（或Unboxes）語句。當我們使用括號符號時，它會看到第一個打開的括號[並繼續前進，直到找到閉合支架]只有這樣，它才能評估該陳述。
mouse[bird.size] ：首先評估bird.size ，這是"small" 。 mouse["small"]返回true
但是，使用點表示法，這不會發生。 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!undefinedReferenceErrorTypeError在JavaScript中，所有對象將它們設置為彼此相等時通過參考進行交互。
首先，變量c具有對象的值。稍後，我們分配了d具有與c相同的引用。
當您更改一個對象時，您會更改它們。
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 truetrue false falsefalse true true new Number()是一個內置函數構造函數。儘管它看起來像一個數字，但並不是一個數字：它具有許多額外的功能，並且是一個對象。
當我們使用==運算符（平等運算符）時，它僅檢查其是否具有相同的值。他們倆的值為3 ，因此返回true 。
但是，當我們使用===操作員（嚴格的平等運算符）時，值和類型都應相同。不是： 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 = {}在node.js中window.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等於"Sarah" ，而this.lastName等於"Smith" 。我們實際做的是定義global.firstName = 'Sarah'和global.lastName = 'Smith' 。 sarah本身是undefined ，因為我們沒有從Person功能中返回價值。
在捕獲階段，事件通過祖先元素到目標元素。然後它到達目標元素，然後開始冒泡。
所有對像都有原型，除了基本對象。基本對像是用戶創建的對象，或使用new關鍵字創建的對象。基本對象可以訪問某些方法和屬性，例如.toString 。這就是您可以使用內置JavaScript方法的原因！所有此類方法都在原型上可用。儘管JavaScript無法直接在您的對像上找到它，但它沿著原型鏈中找到並在那裡找到它，這使您可以使用它。
function sum ( a , b ) {
return a + b ;
}
sum ( 1 , '2' ) ;NaNTypeError"12"3JavaScript是一種動態鍵入的語言：我們沒有指定某些類型某些變量是什麼。值可以在不知道的情況下自動轉換為另一種類型，這稱為隱式類型的脅迫。脅迫正在從一種類型轉換為另一種類型。
在此示例中，JavaScript將數字1轉換為字符串，以使函數有意義並返回值。在添加數字類型（ 1 ）和字符串類型（ '2' ）期間，該數字被視為字符串。我們可以像"Hello" + "World"這樣的串聯字符串，因此這裡發生的事情是"1" + "2" ，返回"12" 。
let number = 0 ;
console . log ( number ++ ) ;
console . log ( ++ number ) ;
console . log ( number ) ;1 1 21 2 20 2 20 1 2後綴一元操作員++ ：
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檢查對像是否對內存中的同一位置有參考。
我們要比較的兩個對像沒有：我們傳遞給參數的對像是指與我們使用的對像中的一個不同的位置來檢查平等。
這就是為什麼{ age: 18 } === { age: 18 }和{ age: 18 } == { age: 18 }返回false原因。
function getAge ( ... args ) {
console . log ( typeof args ) ;
}
getAge ( 21 ) ;"number""array""object""NaN"其餘參數（ ...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 true falsetrue true true true所有對象鍵（不包括符號）都是引擎蓋下方的字符串，即使您自己不作為字符串鍵入它。這就是為什麼obj.hasOwnProperty('1')也返回正確的原因。
它不適用於一套。我們的集合中沒有'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如果您有兩個具有相同名稱的鍵，則將更換鍵。它仍然處於第一位置，但具有最後指定的值。
基本執行上下文是全局執行上下文：這是代碼中無處可訪問的內容。
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對象鍵自動轉換為字符串。我們正在嘗試將對象設置為對象a鍵，值為123 。
但是，當我們將對象串制時，它會變成"[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 ( ) ;Third ： First SecondSecond ： First ThirdThird ： Second FirstSecond Third 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冒泡。Stoppropagation
< div onclick =" console.log('div') " >
< p onclick =" console.log('p') " >
Click here!
</ p >
</ div >p divdiv ppdiv如果單擊p ，我們會看到兩個日誌： 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 ， string ， symbol ， function和object 。請注意， typeof null返回"object" 。
0 ;
new Number ( 0 ) ;
( '' ) ;
( ' ' ) ;
new Boolean ( false ) ;
undefined ;0 ， '' ， undefined0 ， new Number(0) ， '' ， new Boolean(false) ， undefined0 ， '' ， new Boolean(false) ， undefined有8個虛假值：
undefinednullNaNfalse'' （空字符串）0-00n （bigint（0））函數構造函數，例如new Number和new Boolean是真實的。
console . log ( typeof typeof 1 ) ;"number""string""object""undefined" typeof 1返回"number" 。 typeof "number"返回"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 21 undefined undefined catch塊接收參數x 。當我們通過參數時，這與x不同。此變量x是塊分佈的。
後來，我們將此塊掃描的變量設置為等於1 ，並設置變量y的值。現在，我們記錄了等於1塊被劃分的變量x 。
在catch塊外， x仍然undefined ，而y為2 。當我們想console.log(x)在catch塊外部時，它會返回undefined ，而y則返回2 。
JavaScript僅具有原始類型和對象。
原始類型是boolean ， null ， undefined ， bigint ， number ， string和symbol 。
原始與對象區分的是，原始物沒有任何屬性或方法。但是，您會注意到'foo'.toUpperCase()評估'FOO'並且不會導致TypeError 。這是因為當您嘗試在字符串（例如字符串）上訪問屬性或方法時，JavaScript將使用其中一個包裝類類（即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的價值。在第一輪中， 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 truefalse true truetrue true false null是虛假的。 !null返回true 。 !true返回false 。
""是虛假的。 !""返回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"]]字符串是一個覺得的。傳播操作員映射一個值得一個元素的每個字符。
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，第二個承諾（ 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變量的值。當對象將它們設置為彼此時，對象通過參考進行交互。當您將一個從一個變量分配給另一個變量時，您將製作該參考文獻的副本。 （請注意，他們沒有相同的參考！）
然後，我們設置了等於null變量person 。
我們僅修改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"操作員協會是編譯器評估表達式的順序，即從左到右或左右。僅當所有運營商都具有相同的優先級時，才會發生這種情況。我們只有一種類型的操作員： + 。另外，關聯是從左到右的。
3 + 4首先評估。這導致數字7 。
7 + '5'導致"75"導致強迫。 JavaScript將數字7轉換為字符串，請參見問題15。我們可以使用+運算符連接兩個字符串。 "7" + "5"導致"75" 。
num的值是多少？ const num = parseInt ( '7*6' , 10 ) ;42"42"7NaN字符串中僅返回的第一個數字。基於radix （第二個參數是為了指定我們要將其解析為哪種類型的數字：基本10，十六進制，八分之一，二進制等）， parseInt檢查字符串中的字符中的字符是否有效。一旦它遇到了一個不是radix中有效數字的字符，便會停止解析並忽略以下字符。
*不是有效的數字。它僅在十進制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是按價值傳遞的，因為它是一個字符串，而不是對象。當我們按值通過參數時，將創建該值的副本（請參閱問題46）。
可變的birthYear有一個值"1997"值。論點year還提到了"1997"的值，但與birthYear參考值不同。當我們通過將year等於"1998"來更新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 Block中，該怎麼辦。拋出了一個例外：字符串'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明確返回一個新對象， make設置為"Maserati" ，從而覆蓋了默認行為。因此，當調用new Car()時，將返回的對象分配給myCar ，導致輸出為"Maserati"當訪問myCar.make時。
( ( ) => {
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 ，Node中的global ）。在瀏覽器中， window.y現在等於10 。
然後，我們聲明一個具有y值的變量x ，即10 。使用let關鍵字聲明的變量是塊範圍的，僅在聲明的塊中定義它們；在這種情況下，立即調用的函數表達式（IIFE）。當我們使用typeof操作員時，未定義操作數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 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, 2, 3, 4] 。由於我們不能在一個集合中具有兩個相同的值，因此其中一個被刪除。這導致{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是只讀的，無法修改。
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 ，實際上，我們將一個名為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 }可以使用傳播操作員組合對象...它使您可以創建一個對象的密鑰/值對的副本，並將它們添加到另一個對象。在這種情況下，我們創建user對象的副本，然後將其添加到admin對像中。 admin對象現在包含複製的鍵/值對，其中導致{ 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"]使用defineProperty方法，我們可以將新屬性添加到對像中，或修改現有的屬性。當我們使用defineProperty方法將屬性添加到對像中時，默認情況下它們是無法枚舉的。 Object.keys方法從對象返回所有枚舉的屬性名稱，在這種情況下僅"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')"]{} []{ 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一。 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 , ?這? 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" .這! 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.
