บันทึก
repo นี้ถูกสร้างขึ้นในปี 2562 และคำถามที่ให้ไว้ที่นี่จึงขึ้นอยู่กับไวยากรณ์และพฤติกรรม JavaScript ในเวลานั้น เนื่องจาก JavaScript เป็นภาษาที่มีการพัฒนาอย่างต่อเนื่องจึงมีคุณสมบัติภาษาใหม่ที่ไม่ได้กล่าวถึงคำถามที่นี่
จากขั้นพื้นฐานถึงขั้นสูง: ทดสอบว่าคุณรู้จัก JavaScript ได้ดีเพียงใดรีเฟรชความรู้ของคุณเล็กน้อยหรือเตรียมตัวสำหรับการสัมภาษณ์การเขียนโค้ดของคุณ! - ฉันอัปเดต repo นี้เป็นประจำด้วยคำถามใหม่ ฉันเพิ่มคำตอบในส่วนที่ยุบ ** ด้านล่างคำถามเพียงคลิกที่พวกเขาเพื่อขยาย มันเป็นเรื่องสนุกโชคดี!
อย่าลังเลที่จะติดต่อฉัน! -
Instagram || Twitter || LinkedIn || บล็อก
| อย่าลังเลที่จะใช้พวกเขาในโครงการ! - ฉัน ขอ ขอบคุณการอ้างอิงถึง repo นี้ฉันสร้างคำถามและคำอธิบาย (ใช่ฉันเศร้าฮ่า ๆ ) และชุมชนช่วยฉันอย่างมากในการรักษาและปรับปรุงมัน! - ขอบคุณและขอให้สนุก! |
|---|
function sayHi ( ) {
console . log ( name ) ;
console . log ( age ) ;
var name = 'Lydia' ;
let age = 21 ;
}
sayHi ( ) ;Lydia และ undefinedLydia และ ReferenceErrorReferenceError และ 21undefined และ ReferenceError ภายในฟังก์ชั่นเราจะประกาศตัวแปร name ด้วยคำหลัก var ก่อน ซึ่งหมายความว่าตัวแปรได้รับการยก (พื้นที่หน่วยความจำถูกตั้งค่าระหว่างขั้นตอนการสร้าง) ด้วยค่าเริ่มต้นของ undefined จนกว่าเราจะไปถึงบรรทัดที่เรากำหนดตัวแปร เรายังไม่ได้กำหนดตัวแปรในบรรทัดที่เราพยายามบันทึกตัวแปร name ดังนั้นมันยังคงมีค่าของ undefined
ตัวแปรที่มีคำ let (และ const ) ถูกยกขึ้น แต่ไม่เหมือน var ไม่ได้ เริ่มต้น พวกเขาไม่สามารถเข้าถึงได้ก่อนที่บรรทัดที่เราประกาศ (เริ่มต้น) พวกเขา สิ่งนี้เรียกว่า "โซนตายชั่วคราว" เมื่อเราพยายามเข้าถึงตัวแปรก่อนที่จะมีการประกาศ JavaScript จะทำการ ReferenceError
for ( var i = 0 ; i < 3 ; i ++ ) {
setTimeout ( ( ) => console . log ( i ) , 1 ) ;
}
for ( let i = 0 ; i < 3 ; i ++ ) {
setTimeout ( ( ) => console . log ( i ) , 1 ) ;
}0 1 2 และ 0 1 20 1 2 และ 3 3 33 3 3 และ 0 1 2 เนื่องจากคิวเหตุการณ์ใน JavaScript ฟังก์ชั่นการโทรกลับ setTimeout จึงถูกเรียกใช้ หลังจาก การวนซ้ำถูกดำเนินการแล้ว เนื่องจากตัวแปร i ในลูปแรกได้รับการประกาศโดยใช้คำหลัก var ค่านี้เป็นส่วนกลาง ในระหว่างการวนรอบเราจะเพิ่มค่าของ i โดย 1 ในแต่ละครั้งโดยใช้ Unary Operator ++ เมื่อถึงเวลาที่เรียกใช้ฟังก์ชั่นการโทรกลับ setTimeout i เท่ากับ 3 ในตัวอย่างแรก
ในลูปที่สองตัวแปร i ได้รับการประกาศโดยใช้คำ let : ตัวแปรที่ประกาศด้วยคำหลัก 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 Interpret (หรือ Unboxes) เมื่อเราใช้สัญลักษณ์วงเล็บมันจะเห็นวงเล็บเปิดแรก [ และดำเนินต่อไปจนกว่าจะพบวงเล็บปิด ] ตอนนั้นมันจะประเมินคำสั่ง
mouse[bird.size] : ก่อนอื่นมันจะประเมิน bird.size ซึ่งเป็น "small" mouse["small"] ส่งคืน true
อย่างไรก็ตามด้วยสัญกรณ์ดอทสิ่งนี้ไม่ได้เกิดขึ้น mouse ไม่มีกุญแจที่เรียกว่า bird ซึ่งหมายความว่า mouse.bird undefined จากนั้นเราขอ size โดยใช้สัญลักษณ์ DOT: 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 : true falsetrue false falsetrue false falsetrue : false 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.jswindow.greetign = {} , frames.greetign = {} และ self.greetign ในเบราว์เซอร์self.greetign ในเว็บพนักงานglobalThis.greetign ในทุกสภาพแวดล้อม เพื่อหลีกเลี่ยงสิ่งนี้เราสามารถใช้ "use strict" สิ่งนี้ทำให้แน่ใจว่าคุณได้ประกาศตัวแปรก่อนที่จะตั้งค่าเท่ากับสิ่งใด
function bark ( ) {
console . log ( 'Woof!' ) ;
}
bark . animal = 'dog' ;SyntaxError คุณไม่สามารถเพิ่มคุณสมบัติลงในฟังก์ชั่นด้วยวิธีนี้"Woof" ถูกบันทึกไว้ReferenceErrorสิ่งนี้เป็นไปได้ใน JavaScript เพราะฟังก์ชั่นเป็นวัตถุ! (ทุกอย่างนอกเหนือจากประเภทดั้งเดิมคือวัตถุ)
ฟังก์ชั่นเป็นวัตถุชนิดพิเศษ รหัสที่คุณเขียนด้วยตัวเองไม่ใช่ฟังก์ชั่นจริง ฟังก์ชั่นเป็นวัตถุที่มีคุณสมบัติ คุณสมบัตินี้สามารถเรียกคืนได้
function Person ( firstName , lastName ) {
this . firstName = firstName ;
this . lastName = lastName ;
}
const member = new Person ( 'Lydia' , 'Hallie' ) ;
Person . getFullName = function ( ) {
return ` ${ this . firstName } ${ this . lastName } ` ;
} ;
console . log ( member . getFullName ( ) ) ;TypeErrorSyntaxErrorLydia Hallieundefined undefined ใน JavaScript ฟังก์ชั่นเป็นวัตถุดังนั้นวิธีการ getFullName จะถูกเพิ่มเข้าไปในวัตถุฟังก์ชั่นคอนสตรัคเตอร์เอง ด้วยเหตุผลดังกล่าวเราสามารถโทรหา Person.getFullName() แต่ member.getFullName โยน TypeError
หากคุณต้องการให้วิธีการสำหรับอินสแตนซ์ของวัตถุทั้งหมดคุณต้องเพิ่มลงในคุณสมบัติต้นแบบ:
Person . prototype . getFullName = function ( ) {
return ` ${ this . firstName } ${ this . lastName } ` ;
} ; function Person ( firstName , lastName ) {
this . firstName = firstName ;
this . lastName = lastName ;
}
const lydia = new Person ( 'Lydia' , 'Hallie' ) ;
const sarah = Person ( 'Sarah' , 'Smith' ) ;
console . log ( lydia ) ;
console . log ( sarah ) ;Person {firstName: "Lydia", lastName: "Hallie"} และ undefinedPerson {firstName: "Lydia", lastName: "Hallie"} และ Person {firstName: "Sarah", lastName: "Smith"}Person {firstName: "Lydia", lastName: "Hallie"} และ {}Person {firstName: "Lydia", lastName: "Hallie"} และ ReferenceError สำหรับ sarah เราไม่ได้ใช้คำหลัก new เมื่อใช้ new this หมายถึงวัตถุเปล่าใหม่ที่เราสร้าง อย่างไรก็ตามหากคุณไม่ได้เพิ่ม new this หมายถึง วัตถุทั่วโลก !
เราบอกว่า this.firstName เท่ากับ "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 Postfix Unary Operator ++ :
0 )1 ) คำนำหน้าตัว ดำเนินการ unary ++ :
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 ) ;true false true falsetrue : 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 คำสั่ง continue ไปข้ามการวนซ้ำหากเงื่อนไขบางอย่างส่งคืน true
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 First SecondSecond 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 >div ด้านนอกdiv ภายในbutton องค์ประกอบซ้อนที่ลึกที่สุดที่ทำให้เกิดเหตุการณ์คือเป้าหมายของเหตุการณ์ คุณสามารถหยุดเดือดด้วย event.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"
FYI: 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 ตอนนี้เราเข้าสู่ระบบ X-scoped Variable x ซึ่งเท่ากับ 1
ด้านนอกของบล็อก 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 จะห่อประเภทดั้งเดิมโดยปริยายโดยใช้คลาส wrapper หนึ่งคลาสเช่น String แล้วทิ้ง wrapper ทันทีหลังจากนิพจน์ประเมิน ดั้งเดิมทั้งหมดยกเว้น null และ undefined พฤติกรรมนี้
[ [ 0 , 1 ] , [ 2 , 3 ] ] . reduce (
( acc , cur ) => {
return acc . concat ( cur ) ;
} ,
[ 1 , 2 ] ,
) ;[0, 1, 2, 3, 1, 2][6, 1, 2][1, 2, 0, 1, 2, 3][1, 2, 6] [1, 2] เป็นค่าเริ่มต้นของเรา นี่คือค่าที่เราเริ่มต้นด้วยและค่าของ acc แรก ในช่วงรอบแรก acc คือ [1,2] และ cur คือ [0, 1] เราเชื่อมต่อพวกเขาซึ่งส่งผลให้ [1, 2, 0, 1]
จากนั้น [1, 2, 0, 1] คือ acc และ [2, 3] คือ cur เราต่อพวกเขาและรับ [1, 2, 0, 1, 2, 3]
! ! null ;
! ! '' ;
! ! 1 ;false true falsetrue false falsetrue false truetrue true false null เป็นเรื่องปลอม !null กลับมา true !true กลับมา false
"" เป็นเรื่องปลอม !"" ส่งคืน true !true กลับมา false
1 คือความจริง !1 ส่งคืน false !false ส่งคืน true
setInterval กลับในเบราว์เซอร์อะไร setInterval ( ( ) => console . log ( 'Hi' ) , 1000 ) ;undefined มันส่งคืนรหัสที่ไม่ซ้ำกัน 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 เราผ่านตัวจับเวลา: 500ms สำหรับสัญญาแรก ( firstPromise ) และ 100ms สำหรับสัญญาที่สอง ( secondPromise ) ซึ่งหมายความว่า secondPromise แก้ไขก่อนด้วยค่าของ 'two' ตอนนี้ res ถือค่าของ 'two' ซึ่งถูกบันทึกไว้
let person = { name : 'Lydia' } ;
const members = [ person ] ;
person = null ;
console . log ( members ) ;null[null][{}][{ name: "Lydia" }] ก่อนอื่นเราประกาศ person ที่มีค่าของวัตถุที่มีคุณสมบัติ name
จากนั้นเราประกาศตัวแปรที่เรียกว่า members เราตั้งค่าองค์ประกอบแรกของอาร์เรย์นั้นเท่ากับค่าของตัวแปร person วัตถุโต้ตอบโดย การอ้างอิง เมื่อตั้งค่าเท่ากับกัน เมื่อคุณกำหนดข้อมูลอ้างอิงจากตัวแปรหนึ่งไปยังอีกตัวแปรหนึ่งคุณจะทำ สำเนา ของการอ้างอิงนั้น (โปรดทราบว่าพวกเขาไม่มีข้อมูลอ้างอิง เดียวกัน !)
จากนั้นเราตั้งค่าตัวแปร person เท่ากับ null
เรากำลังแก้ไขค่าของตัวแปร person เท่านั้นและไม่ใช่องค์ประกอบแรกในอาร์เรย์เนื่องจากองค์ประกอบนั้นมีการอ้างอิง (คัดลอก) ที่แตกต่างกันไปยังวัตถุ องค์ประกอบแรกใน members ยังคงอ้างอิงถึงวัตถุต้นฉบับ เมื่อเราบันทึกอาร์เรย์ members องค์ประกอบแรกยังคงมีค่าของวัตถุซึ่งถูกบันทึกไว้
const person = {
name : 'Lydia' ,
age : 21 ,
} ;
for ( const item in person ) {
console . log ( item ) ;
}{ name: "Lydia" }, { age: 21 }"name", "age""Lydia", 21["name", "Lydia"], ["age", 21] ด้วยการ for-in เราสามารถวนซ้ำผ่านปุ่มวัตถุใน name และ age นี้ ภายใต้ประทุนปุ่มวัตถุเป็นสตริง (ถ้าไม่ใช่สัญลักษณ์) ในทุก ๆ ลูปเราจะตั้งค่าของ item เท่ากับคีย์ปัจจุบันที่วนซ้ำ อันดับแรก item เท่ากับ name และถูกบันทึกไว้ จากนั้น item จะเท่ากับ age ซึ่งถูกบันทึกไว้
console . log ( 3 + 4 + '5' ) ;"345""75"12"12" การเชื่อมโยงของผู้ประกอบการเป็นลำดับที่คอมไพเลอร์ประเมินการแสดงออกทั้งจากซ้ายไปขวาหรือขวาไปซ้าย สิ่งนี้จะเกิดขึ้นหากผู้ให้บริการทั้งหมดมีความสำคัญ เท่ากัน เรามีผู้ให้บริการประเภทเดียวเท่านั้น: + นอกจากนี้การเชื่อมโยงจะอยู่กับซ้ายไปขวา
3 + 4 ได้รับการประเมินก่อน ส่งผลให้หมายเลข 7
7 + '5' ส่งผลให้ "75" เพราะการบีบบังคับ JavaScript แปลงหมายเลข 7 เป็นสตริงดูคำถามที่ 15 เราสามารถเชื่อมต่อสองสตริงโดยใช้ตัวดำเนินการ + "7" + "5" ผลลัพธ์ใน "75"
num คืออะไร? const num = parseInt ( '7*6' , 10 ) ;42"42"7NaN เฉพาะหมายเลขแรกในสตริงจะถูกส่งคืน ขึ้นอยู่กับ radix (อาร์กิวเมนต์ที่สองเพื่อระบุประเภทของหมายเลขที่เราต้องการแยกวิเคราะห์เป็น: ฐาน 10, hexadecimal, octal, binary, ฯลฯ ), 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 โดยการตั้ง year เท่ากับ "1998" เราจะอัปเดตมูลค่าของ year เท่านั้น birthYear ยังคงเท่ากับ "1997"
คุณค่าของ person เป็นวัตถุ member อาร์กิวเมนต์มีการอ้างอิง (คัดลอก) ไปยังวัตถุ เดียวกัน เมื่อเราแก้ไขคุณสมบัติของ member วัตถุมีการอ้างอิงถึงค่าของ person จะได้รับการแก้ไขเนื่องจากพวกเขาทั้งคู่มีการอ้างอิงถึงวัตถุเดียวกัน คุณสมบัติ name ของ person นั้นเท่ากับค่า "Lydia"
function greeting ( ) {
throw 'Hello world!' ;
}
function sayHi ( ) {
try {
const data = greeting ( ) ;
console . log ( 'It worked!' , data ) ;
} catch ( e ) {
console . log ( 'Oh no an error:' , e ) ;
}
}
sayHi ( ) ;It worked! Hello world!Oh no an error: undefinedSyntaxError: can only throw Error objectsOh no an error: Hello world! ด้วยคำ throw เราสามารถสร้างข้อผิดพลาดที่กำหนดเอง ด้วยคำสั่งนี้คุณสามารถโยนข้อยกเว้นได้ ข้อยกเว้นอาจเป็น สตริง ตัวเลข บูลีน หรือ วัตถุ ในกรณีนี้ข้อยกเว้นของเราคือสตริง 'Hello world!' -
ด้วยคำสั่ง catch เราสามารถระบุสิ่งที่ต้องทำหากมีข้อยกเว้นถูกโยนลงในบล็อก try มีการโยนข้อยกเว้น: สตริง 'Hello world!' - ตอนนี้ e เท่ากับสตริงนั้นซึ่งเราเข้าสู่ระบบ ผลลัพธ์นี้เป็น 'Oh an error: Hello world!' -
function Car ( ) {
this . make = 'Lamborghini' ;
return { make : 'Maserati' } ;
}
const myCar = new Car ( ) ;
console . log ( myCar . make ) ;"Lamborghini""Maserati"ReferenceErrorTypeError เมื่อมีการเรียกฟังก์ชันตัวสร้างด้วยคำหลัก new มันจะสร้างวัตถุและตั้งค่าคำหลัก this เพื่ออ้างถึงวัตถุนั้น โดยค่าเริ่มต้นหากฟังก์ชั่นคอนสตรัคเตอร์ไม่ส่งคืนสิ่งใดจะส่งคืนวัตถุที่สร้างขึ้นใหม่
ในกรณีนี้ Car ฟังก์ชั่นคอนสตรัคเตอร์จะส่งคืนวัตถุใหม่อย่างชัดเจนด้วย 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 ในเบราว์เซอร์ global ในโหนด) ในเบราว์เซอร์, window.y ตอนนี้เท่ากับ 10
จากนั้นเราประกาศตัวแปร x ด้วยค่าของ y ซึ่งคือ 10 ตัวแปรที่ประกาศด้วยคำหลัก let เป็น บล็อกบล็อก ซึ่งถูกกำหนดไว้เฉพาะภายในบล็อกที่พวกเขาประกาศไว้ นิพจน์ฟังก์ชั่นเรียกใช้ทันที (IIFE) ในกรณีนี้ เมื่อเราใช้ตัวดำเนินการ typeof ตัวดำเนินการ x ไม่ได้กำหนด: เราพยายามเข้าถึง x นอกบล็อกที่ประกาศเข้ามาซึ่งหมายความว่า x ไม่ได้กำหนด ค่าที่ไม่ได้รับมอบหมายค่าหรือประกาศเป็นประเภท "undefined" console.log(typeof x) ส่งคืน "undefined"
อย่างไรก็ตามเราสร้างตัวแปรส่วนกลาง y เมื่อตั้งค่า y เท่ากับ 10 ค่านี้สามารถเข้าถึงได้ทุกที่ในรหัสของเรา 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 รวมถึงบนต้นแบบ โดยการลบคุณสมบัติบนต้นแบบจะไม่สามารถใช้งานได้อีกต่อไปในห่วงโซ่ต้นแบบ ในกรณีนี้ฟังก์ชั่น bark ไม่สามารถใช้งานได้อีกต่อไปบนต้นแบบหลังจาก delete Dog.prototype.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, 2, 3, 4] ด้วยค่าที่ซ้ำกัน 1 เนื่องจากเราไม่สามารถมีค่าเดียวกันสองค่าเดียวกันในชุดหนึ่งในนั้นจึงถูกลบออก ส่งผลให้ {1, 2, 3, 4}
// counter.js
let counter = 10 ;
export default counter ; // index.js
import myCounter from './counter' ;
myCounter += 1 ;
console . log ( myCounter ) ;1011ErrorNaNโมดูลที่นำเข้านั้นเป็น แบบอ่านอย่างเดียว : คุณไม่สามารถแก้ไขโมดูลที่นำเข้าได้ เฉพาะโมดูลที่ส่งออกสามารถเปลี่ยนค่าได้
เมื่อเราพยายามเพิ่มค่าของ myCounter มันจะเกิดข้อผิดพลาด: myCounter เป็นแบบอ่านอย่างเดียวและไม่สามารถแก้ไขได้
const name = 'Lydia' ;
age = 21 ;
console . log ( delete name ) ;
console . log ( delete age ) ;true : false"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 } เป็นไปได้ที่จะรวมวัตถุโดยใช้ตัวดำเนินการสเปรด ... มันช่วยให้คุณสร้างสำเนาของคู่คีย์/ค่าของวัตถุหนึ่งและเพิ่มลงในวัตถุอื่น In this case, we create copies of the user object, and add them to the admin object. The admin object now contains the copied key/value pairs, which results in { admin: true, name: "Lydia", age: 21 } .
const person = { name : 'Lydia' } ;
Object . defineProperty ( person , 'age' , { value : 21 } ) ;
console . log ( person ) ;
console . log ( Object . keys ( person ) ) ;{ name: "Lydia", age: 21 } , ["name", "age"]{ name: "Lydia", age: 21 } , ["name"]{ name: "Lydia"} , ["name", "age"]{ name: "Lydia"} , ["age"] With the defineProperty method, we can add new properties to an object, or modify existing ones. When we add a property to an object using the defineProperty method, they are by default not enumerable . The Object.keys method returns all enumerable property names from an object, in this case only "name" .
Properties added using the defineProperty method are immutable by default. You can override this behavior using the writable , configurable and enumerable properties. This way, the defineProperty method gives you a lot more control over the properties you're adding to an object.
const settings = {
username : 'lydiahallie' ,
level : 19 ,
health : 90 ,
} ;
const data = JSON . stringify ( settings , [ 'level' , 'health' ] ) ;
console . log ( data ) ;"{"level":19, "health":90}""{"username": "lydiahallie"}""["level", "health"]""{"username": "lydiahallie", "level":19, "health":90}" The second argument of JSON.stringify is the replacer . The replacer can either be a function or an array, and lets you control what and how the values should be stringified.
If the replacer is an array , only the property names included in the array will be added to the JSON string. In this case, only the properties with the names "level" and "health" are included, "username" is excluded. data is now equal to "{"level":19, "health":90}" .
If the replacer is a function , this function gets called on every property in the object you're stringifying. The value returned from this function will be the value of the property when it's added to the JSON string. If the value is undefined , this property is excluded from the JSON string.
let num = 10 ;
const increaseNumber = ( ) => num ++ ;
const increasePassedNumber = number => number ++ ;
const num1 = increaseNumber ( ) ;
const num2 = increasePassedNumber ( num1 ) ;
console . log ( num1 ) ;
console . log ( num2 ) ;10 , 1010 , 1111 , 1111 , 12 The unary operator ++ first returns the value of the operand, then increments the value of the operand. The value of num1 is 10 , since the increaseNumber function first returns the value of num , which is 10 , and only increments the value of num afterward.
num2 is 10 , since we passed num1 to the increasePassedNumber . number is equal to 10 (the value of num1 ). Again, the unary operator ++ first returns the value of the operand, then increments the value of the operand. The value of number is 10 , so num2 is equal to 10 .
const value = { number : 10 } ;
const multiply = ( x = { ... value } ) => {
console . log ( ( x . number *= 2 ) ) ;
} ;
multiply ( ) ;
multiply ( ) ;
multiply ( value ) ;
multiply ( value ) ;20 , 40 , 80 , 16020 , 40 , 20 , 4020 , 20 , 20 , 40NaN , NaN , 20 , 40 In ES6, we can initialize parameters with a default value. The value of the parameter will be the default value, if no other value has been passed to the function, or if the value of the parameter is "undefined" . In this case, we spread the properties of the value object into a new object, so x has the default value of { number: 10 } .
The default argument is evaluated at call time ! Every time we call the function, a new object is created. We invoke the multiply function the first two times without passing a value: x has the default value of { number: 10 } . We then log the multiplied value of that number, which is 20 .
The third time we invoke multiply, we do pass an argument: the object called value . The *= operator is actually shorthand for x.number = x.number * 2 : we modify the value of x.number , and log the multiplied value 20 .
The fourth time, we pass the value object again. x.number was previously modified to 20 , so x.number *= 2 logs 40 .
[ 1 , 2 , 3 , 4 ] . reduce ( ( x , y ) => console . log ( x , y ) ) ;1 2 and 3 3 and 6 41 2 and 2 3 and 3 41 undefined and 2 undefined and 3 undefined and 4 undefined1 2 and undefined 3 and undefined 4 The first argument that the reduce method receives is the accumulator , x in this case. The second argument is the current value , y . With the reduce method, we execute a callback function on every element in the array, which could ultimately result in one single value.
In this example, we are not returning any values, we are simply logging the values of the accumulator and the current value.
The value of the accumulator is equal to the previously returned value of the callback function. If you don't pass the optional initialValue argument to the reduce method, the accumulator is equal to the first element on the first call.
On the first call, the accumulator ( x ) is 1 , and the current value ( y ) is 2 . We don't return from the callback function, we log the accumulator, and the current values: 1 and 2 get logged.
If you don't return a value from a function, it returns undefined . On the next call, the accumulator is undefined , and the current value is 3 . undefined and 3 get logged.
On the fourth call, we again don't return from the callback function. The accumulator is again undefined , and the current value is 4 . undefined and 4 get logged.
Dog class? class Dog {
constructor ( name ) {
this . name = name ;
}
} ;
class Labrador extends Dog {
// 1
constructor ( name , size ) {
this . size = size ;
}
// 2
constructor ( name , size ) {
super ( name ) ;
this . size = size ;
}
// 3
constructor ( size ) {
super ( name ) ;
this . size = size ;
}
// 4
constructor ( name , size ) {
this . name = name ;
this . size = size ;
}
} ; In a derived class, you cannot access the this keyword before calling super . If you try to do that, it will throw a ReferenceError: 1 and 4 would throw a reference error.
With the super keyword, we call that parent class's constructor with the given arguments. The parent's constructor receives the name argument, so we need to pass name to super .
The Labrador class receives two arguments, name since it extends Dog , and size as an extra property on the Labrador class. They both need to be passed to the constructor function on Labrador , which is done correctly using constructor 2.
// index.js
console . log ( 'running index.js' ) ;
import { sum } from './sum.js' ;
console . log ( sum ( 1 , 2 ) ) ;
// sum.js
console . log ( 'running sum.js' ) ;
export const sum = ( a , b ) => a + b ;running index.js , running sum.js , 3running sum.js , running index.js , 3running sum.js , 3 , running index.jsrunning index.js , undefined , running sum.js With the import keyword, all imported modules are pre-parsed . This means that the imported modules get run first , and the code in the file that imports the module gets executed after .
This is a difference between require() in CommonJS and import ! With require() , you can load dependencies on demand while the code is being run. If we had used require instead of import , running index.js , running sum.js , 3 would have been logged to the console.
console . log ( Number ( 2 ) === Number ( 2 ) ) ;
console . log ( Boolean ( false ) === Boolean ( false ) ) ;
console . log ( Symbol ( 'foo' ) === Symbol ( 'foo' ) ) ;true , true , falsefalse , true , falsetrue , false , truetrue , true , true Every Symbol is entirely unique. The purpose of the argument passed to the Symbol is to give the Symbol a description. The value of the Symbol is not dependent on the passed argument. As we test equality, we are creating two entirely new symbols: the first Symbol('foo') , and the second Symbol('foo') . These two values are unique and not equal to each other, Symbol('foo') === Symbol('foo') returns false .
const name = 'Lydia Hallie' ;
console . log ( name . padStart ( 13 ) ) ;
console . log ( name . padStart ( 2 ) ) ;"Lydia Hallie" , "Lydia Hallie"" Lydia Hallie" , " Lydia Hallie" ( "[13x whitespace]Lydia Hallie" , "[2x whitespace]Lydia Hallie" )" Lydia Hallie" , "Lydia Hallie" ( "[1x whitespace]Lydia Hallie" , "Lydia Hallie" )"Lydia Hallie" , "Lyd" , With the padStart method, we can add padding to the beginning of a string. The value passed to this method is the total length of the string together with the padding. The string "Lydia Hallie" has a length of 12 . name.padStart(13) inserts 1 space at the start of the string, because 12 + 1 is 13.
If the argument passed to the padStart method is smaller than the length of the array, no padding will be added.
console . log ( '?' + '' ) ;"?"257548 With the + operator, you can concatenate strings. In this case, we are concatenating the string "?" with the string "" , resulting in "?" -
function * startGame ( ) {
const answer = yield 'Do you love JavaScript?' ;
if ( answer !== 'Yes' ) {
return "Oh wow... Guess we're done here" ;
}
return 'JavaScript loves you back ❤️' ;
}
const game = startGame ( ) ;
console . log ( /* 1 */ ) ; // Do you love JavaScript?
console . log ( /* 2 */ ) ; // JavaScript loves you back ❤️game.next("Yes").value and game.next().valuegame.next.value("Yes") and game.next.value()game.next().value and game.next("Yes").valuegame.next.value() and game.next.value("Yes") A generator function "pauses" its execution when it sees the yield keyword. First, we have to let the function yield the string "Do you love JavaScript?", which can be done by calling game.next().value .
Every line is executed, until it finds the first yield keyword. There is a yield keyword on the first line within the function: the execution stops with the first yield! This means that the variable answer is not defined yet!
When we call game.next("Yes").value , the previous yield is replaced with the value of the parameters passed to the next() function, "Yes" in this case. The value of the variable answer is now equal to "Yes" . The condition of the if-statement returns false , and JavaScript loves you back ❤️ gets logged.
console . log ( String . raw `Hellonworld` ) ;Hello world!HelloworldHellonworldHellonworld String.raw returns a string where the escapes ( n , v , t etc.) are ignored! Backslashes can be an issue since you could end up with something like:
const path = `C:DocumentsProjectstable.html`
Which would result in:
"C:DocumentsProjects able.html"
With String.raw , it would simply ignore the escape and print:
C:DocumentsProjectstable.html
In this case, the string is Hellonworld , which gets logged.
async function getData ( ) {
return await Promise . resolve ( 'I made it!' ) ;
}
const data = getData ( ) ;
console . log ( data ) ;"I made it!"Promise {<resolved>: "I made it!"}Promise {<pending>}undefined An async function always returns a promise. The await still has to wait for the promise to resolve: a pending promise gets returned when we call getData() in order to set data equal to it.
If we wanted to get access to the resolved value "I made it" , we could have used the .then() method on data :
data.then(res => console.log(res))
This would've logged "I made it!"
function addToList ( item , list ) {
return list . push ( item ) ;
}
const result = addToList ( 'apple' , [ 'banana' ] ) ;
console . log ( result ) ;['apple', 'banana']2trueundefined The .push() method returns the length of the new array! Previously, the array contained one element (the string "banana" ) and had a length of 1 . After adding the string "apple" to the array, the array contains two elements, and has a length of 2 . This gets returned from the addToList function.
The push method modifies the original array. If you wanted to return the array from the function rather than the length of the array , you should have returned list after pushing item to it.
const box = { x : 10 , y : 20 } ;
Object . freeze ( box ) ;
const shape = box ;
shape . x = 100 ;
console . log ( shape ) ;{ x: 100, y: 20 }{ x: 10, y: 20 }{ x: 100 }ReferenceError Object.freeze makes it impossible to add, remove, or modify properties of an object (unless the property's value is another object).
When we create the variable shape and set it equal to the frozen object box , shape also refers to a frozen object. You can check whether an object is frozen by using Object.isFrozen . In this case, Object.isFrozen(shape) would return true, since the variable shape has a reference to a frozen object.
Since shape is frozen, and since the value of x is not an object, we cannot modify the property x . x is still equal to 10 , and { x: 10, y: 20 } gets logged.
const { firstName : myName } = { firstName : 'Lydia' } ;
console . log ( firstName ) ;"Lydia""myName"undefinedReferenceErrorBy using destructuring assignment syntax we can unpack values from arrays, or properties from objects, into distinct variables:
const { firstName } = { firstName : 'Lydia' } ;
// ES5 version:
// var firstName = { firstName: 'Lydia' }.firstName;
console . log ( firstName ) ; // "Lydia"Also, a property can be unpacked from an object and assigned to a variable with a different name than the object property:
const { firstName : myName } = { firstName : 'Lydia' } ;
// ES5 version:
// var myName = { firstName: 'Lydia' }.firstName;
console . log ( myName ) ; // "Lydia"
console . log ( firstName ) ; // Uncaught ReferenceError: firstName is not defined Therefore, firstName does not exist as a variable, thus attempting to access its value will raise a ReferenceError .
Note: Be aware of the global scope properties:
const { name : myName } = { name : 'Lydia' } ;
console . log ( myName ) ; // "lydia"
console . log ( name ) ; // "" ----- Browser e.g. Chrome
console . log ( name ) ; // ReferenceError: name is not defined ----- NodeJS Whenever Javascript is unable to find a variable within the current scope , it climbs up the Scope chain and searches for it and if it reaches the top-level scope, aka Global scope , and still doesn't find it, it will throw a ReferenceError .
In Browsers such as Chrome , name is a deprecated global scope property . In this example, the code is running inside global scope and there is no user-defined local variable for name , therefore it searches the predefined variables/properties in the global scope which is in the case of browsers, it searches through window object and it will extract the window.name value which is equal to an empty string .
In NodeJS , there is no such property on the global object, thus attempting to access a non-existent variable will raise a ReferenceError.
function sum ( a , b ) {
return a + b ;
}A pure function is a function that always returns the same result, if the same arguments are passed.
The sum function always returns the same result. If we pass 1 and 2 , it will always return 3 without side effects. If we pass 5 and 10 , it will always return 15 , and so on. This is the definition of a pure function.
const add = ( ) => {
const cache = { } ;
return num => {
if ( num in cache ) {
return `From cache! ${ cache [ num ] } ` ;
} else {
const result = num + 10 ;
cache [ num ] = result ;
return `Calculated! ${ result } ` ;
}
} ;
} ;
const addFunction = add ( ) ;
console . log ( addFunction ( 10 ) ) ;
console . log ( addFunction ( 10 ) ) ;
console . log ( addFunction ( 5 * 2 ) ) ;Calculated! 20 Calculated! 20 Calculated! 20Calculated! 20 From cache! 20 Calculated! 20Calculated! 20 From cache! 20 From cache! 20Calculated! 20 From cache! 20 Error The add function is a memoized function. With memoization, we can cache the results of a function in order to speed up its execution. In this case, we create a cache object that stores the previously returned values.
If we call the addFunction function again with the same argument, it first checks whether it has already gotten that value in its cache. If that's the case, the cache value will be returned, which saves execution time. Otherwise, if it's not cached, it will calculate the value and store it afterward.
We call the addFunction function three times with the same value: on the first invocation, the value of the function when num is equal to 10 isn't cached yet. The condition of the if-statement num in cache returns false , and the else block gets executed: Calculated! 20 gets logged, and the value of the result gets added to the cache object. cache now looks like { 10: 20 } .
The second time, the cache object contains the value that gets returned for 10 . The condition of the if-statement num in cache returns true , and 'From cache! 20' gets logged.
The third time, we pass 5 * 2 to the function which gets evaluated to 10 . The cache object contains the value that gets returned for 10 . The condition of the if-statement num in cache returns true , and 'From cache! 20' gets logged.
const myLifeSummedUp = [ '☕' , '' , '?' , '?' ] ;
for ( let item in myLifeSummedUp ) {
console . log ( item ) ;
}
for ( let item of myLifeSummedUp ) {
console . log ( item ) ;
}0 1 2 3 and "☕" "" "?" "?""☕" "" "?" "?" and "☕" "" "?" "?""☕" "" "?" "?" and 0 1 2 30 1 2 3 and {0: "☕", 1: "", 2: "?", 3: "?"}With a for-in loop, we can iterate over enumerable properties. In an array, the enumerable properties are the "keys" of array elements, which are actually their indexes. You could see an array as:
{0: "☕", 1: "", 2: "?", 3: "?"}
Where the keys are the enumerable properties. 0 1 2 3 get logged.
With a for-of loop, we can iterate over iterables . An array is an iterable. When we iterate over the array, the variable "item" is equal to the element it's currently iterating over, "☕" "" "?" "?" get logged.
const list = [ 1 + 2 , 1 * 2 , 1 / 2 ] ;
console . log ( list ) ;["1 + 2", "1 * 2", "1 / 2"]["12", 2, 0.5][3, 2, 0.5][1, 1, 1]Array elements can hold any value. Numbers, strings, objects, other arrays, null, boolean values, undefined, and other expressions such as dates, functions, and calculations.
The element will be equal to the returned value. 1 + 2 returns 3 , 1 * 2 returns 2 , and 1 / 2 returns 0.5 .
function sayHi ( name ) {
return `Hi there, ${ name } ` ;
}
console . log ( sayHi ( ) ) ;Hi there,Hi there, undefinedHi there, nullReferenceError By default, arguments have the value of undefined , unless a value has been passed to the function. In this case, we didn't pass a value for the name argument. name is equal to undefined which gets logged.
In ES6, we can overwrite this default undefined value with default parameters. ตัวอย่างเช่น:
function sayHi(name = "Lydia") { ... }
In this case, if we didn't pass a value or if we passed undefined , name would always be equal to the string Lydia
var status = '?' ;
setTimeout ( ( ) => {
const status = '?' ;
const data = {
status : '?' ,
getStatus ( ) {
return this . status ;
} ,
} ;
console . log ( data . getStatus ( ) ) ;
console . log ( data . getStatus . call ( this ) ) ;
} , 0 ) ;"?" และ "?""?" และ "?""?" และ "?""?" และ "?" The value of the this keyword is dependent on where you use it. In a method , like the getStatus method, the this keyword refers to the object that the method belongs to . The method belongs to the data object, so this refers to the data object. When we log this.status , the status property on the data object gets logged, which is "?" -
With the call method, we can change the object to which the this keyword refers. In functions , the this keyword refers to the the object that the function belongs to . We declared the setTimeout function on the global object , so within the setTimeout function, the this keyword refers to the global object . On the global object, there is a variable called status with the value of "?" - When logging this.status , "?" gets logged.
const person = {
name : 'Lydia' ,
age : 21 ,
} ;
let city = person . city ;
city = 'Amsterdam' ;
console . log ( person ) ;{ name: "Lydia", age: 21 }{ name: "Lydia", age: 21, city: "Amsterdam" }{ name: "Lydia", age: 21, city: undefined }"Amsterdam" We set the variable city equal to the value of the property called city on the person object. There is no property on this object called city , so the variable city has the value of undefined .
Note that we are not referencing the person object itself! We simply set the variable city equal to the current value of the city property on the person object.
Then, we set city equal to the string "Amsterdam" . This doesn't change the person object: there is no reference to that object.
When logging the person object, the unmodified object gets returned.
function checkAge ( age ) {
if ( age < 18 ) {
const message = "Sorry, you're too young." ;
} else {
const message = "Yay! You're old enough!" ;
}
return message ;
}
console . log ( checkAge ( 21 ) ) ;"Sorry, you're too young.""Yay! You're old enough!"ReferenceErrorundefined Variables with the const and let keywords are block-scoped . A block is anything between curly brackets ( { } ). In this case, the curly brackets of the if/else statements. You cannot reference a variable outside of the block it's declared in, a ReferenceError gets thrown.
fetch ( 'https://www.website.com/api/user/1' )
. then ( res => res . json ( ) )
. then ( res => console . log ( res ) ) ;fetch method.fetch method..then() . The value of res in the second .then is equal to the returned value of the previous .then . You can keep chaining .then s like this, where the value is passed to the next handler.
hasName equal to true , provided you cannot pass true as an argument? function getName ( name ) {
const hasName = //
}!!namenamenew Boolean(name)name.length With !!name , we determine whether the value of name is truthy or falsy. If the name is truthy, which we want to test for, !name returns false . !false (which is what !!name practically is) returns true .
By setting hasName equal to name , you set hasName equal to whatever value you passed to the getName function, not the boolean value true .
new Boolean(true) returns an object wrapper, not the boolean value itself.
name.length returns the length of the passed argument, not whether it's true .
console . log ( 'I want pizza' [ 0 ] ) ;""""I"SyntaxErrorundefined In order to get a character at a specific index of a string, you can use bracket notation. The first character in the string has index 0, and so on. In this case, we want to get the element with index 0, the character "I' , which gets logged.
Note that this method is not supported in IE7 and below. In that case, use .charAt() .
function sum ( num1 , num2 = num1 ) {
console . log ( num1 + num2 ) ;
}
sum ( 10 ) ;NaN20ReferenceErrorundefined You can set a default parameter's value equal to another parameter of the function, as long as they've been defined before the default parameter. We pass the value 10 to the sum function. If the sum function only receives 1 argument, it means that the value for num2 is not passed, and the value of num1 is equal to the passed value 10 in this case. The default value of num2 is the value of num1 , which is 10 . num1 + num2 returns 20 .
If you're trying to set a default parameter's value equal to a parameter that is defined after (to the right), the parameter's value hasn't been initialized yet, which will throw an error.
// module.js
export default ( ) => 'Hello world' ;
export const name = 'Lydia' ;
// index.js
import * as data from './module' ;
console . log ( data ) ;{ default: function default(), name: "Lydia" }{ default: function default() }{ default: "Hello world", name: "Lydia" }module.js With the import * as name syntax, we import all exports from the module.js file into the index.js file as a new object called data is created. In the module.js file, there are two exports: the default export, and a named export. The default export is a function that returns the string "Hello World" , and the named export is a variable called name which has the value of the string "Lydia" .
The data object has a default property for the default export, other properties have the names of the named exports and their corresponding values.
class Person {
constructor ( name ) {
this . name = name ;
}
}
const member = new Person ( 'John' ) ;
console . log ( typeof member ) ;"class""function""object""string" Classes are syntactical sugar for function constructors. The equivalent of the Person class as a function constructor would be:
function Person ( name ) {
this . name = name ;
} Calling a function constructor with new results in the creation of an instance of Person , typeof keyword returns "object" for an instance. typeof member returns "object" .
let newList = [ 1 , 2 , 3 ] . push ( 4 ) ;
console . log ( newList . push ( 5 ) ) ;[1, 2, 3, 4, 5][1, 2, 3, 5][1, 2, 3, 4]Error The .push method returns the new length of the array, not the array itself! By setting newList equal to [1, 2, 3].push(4) , we set newList equal to the new length of the array: 4 .
Then, we try to use the .push method on newList . Since newList is the numerical value 4 , we cannot use the .push method: a TypeError is thrown.
function giveLydiaPizza ( ) {
return 'Here is pizza!' ;
}
const giveLydiaChocolate = ( ) =>
"Here's chocolate... now go hit the gym already." ;
console . log ( giveLydiaPizza . prototype ) ;
console . log ( giveLydiaChocolate . prototype ) ;{ constructor: ...} { constructor: ...}{} { constructor: ...}{ constructor: ...} {}{ constructor: ...} undefined Regular functions, such as the giveLydiaPizza function, have a prototype property, which is an object (prototype object) with a constructor property. Arrow functions however, such as the giveLydiaChocolate function, do not have this prototype property. undefined gets returned when trying to access the prototype property using giveLydiaChocolate.prototype .
const person = {
name : 'Lydia' ,
age : 21 ,
} ;
for ( const [ x , y ] of Object . entries ( person ) ) {
console . log ( x , y ) ;
}name Lydia and age 21["name", "Lydia"] and ["age", 21]["name", "age"] and undefinedError Object.entries(person) returns an array of nested arrays, containing the keys and objects:
[ [ 'name', 'Lydia' ], [ 'age', 21 ] ]
Using the for-of loop, we can iterate over each element in the array, the subarrays in this case. We can destructure the subarrays instantly in the for-of loop, using const [x, y] . x is equal to the first element in the subarray, y is equal to the second element in the subarray.
The first subarray is [ "name", "Lydia" ] , with x equal to "name" , and y equal to "Lydia" , which get logged. The second subarray is [ "age", 21 ] , with x equal to "age" , and y equal to 21 , which get logged.
function getItems ( fruitList , ... args , favoriteFruit ) {
return [ ... fruitList , ... args , favoriteFruit ]
}
getItems ( [ "banana" , "apple" ] , "pear" , "orange" )["banana", "apple", "pear", "orange"][["banana", "apple"], "pear", "orange"]["banana", "apple", ["pear"], "orange"]SyntaxError ...args is a rest parameter. The rest parameter's value is an array containing all remaining arguments, and can only be the last parameter ! In this example, the rest parameter was the second parameter. This is not possible, and will throw a syntax error.
function getItems ( fruitList , favoriteFruit , ... args ) {
return [ ... fruitList , ... args , favoriteFruit ] ;
}
getItems ( [ 'banana' , 'apple' ] , 'pear' , 'orange' ) ; The above example works. This returns the array [ 'banana', 'apple', 'orange', 'pear' ]
function nums ( a , b ) {
if ( a > b ) console . log ( 'a is bigger' ) ;
else console . log ( 'b is bigger' ) ;
return
a + b ;
}
console . log ( nums ( 4 , 2 ) ) ;
console . log ( nums ( 1 , 2 ) ) ;a is bigger , 6 and b is bigger , 3a is bigger , undefined and b is bigger , undefinedundefined and undefinedSyntaxError In JavaScript, we don't have to write the semicolon ( ; ) explicitly, however the JavaScript engine still adds them after statements. This is called Automatic Semicolon Insertion . A statement can for example be variables, or keywords like throw , return , break , etc.
Here, we wrote a return statement, and another value a + b on a new line . However, since it's a new line, the engine doesn't know that it's actually the value that we wanted to return. Instead, it automatically added a semicolon after return . You could see this as:
return ;
a + b ; This means that a + b is never reached, since a function stops running after the return keyword. If no value gets returned, like here, the function returns undefined . Note that there is no automatic insertion after if/else statements!
class Person {
constructor ( ) {
this . name = 'Lydia' ;
}
}
Person = class AnotherPerson {
constructor ( ) {
this . name = 'Sarah' ;
}
} ;
const member = new Person ( ) ;
console . log ( member . name ) ;"Lydia""Sarah"Error: cannot redeclare PersonSyntaxError We can set classes equal to other classes/function constructors. In this case, we set Person equal to AnotherPerson . The name on this constructor is Sarah , so the name property on the new Person instance member is "Sarah" .
const info = {
[ Symbol ( 'a' ) ] : 'b' ,
} ;
console . log ( info ) ;
console . log ( Object . keys ( info ) ) ;{Symbol('a'): 'b'} and ["{Symbol('a')"]{} []{ 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 "?" to it. 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 , ? The ? allows us to optionally access deeper nested properties within objects. We're trying to log the item on index 1 within the subarray that's on index 1 of the fruits array. If the subarray on index 1 in the fruits array doesn't exist, it'll simply return undefined . If the subarray on index 1 in the fruits array exists, but this subarray doesn't have an item on its 1 index, it'll also return undefined .
First, we're trying to log the second item in the ['?'] subarray of [['?', '?'], ['?']] . This subarray only contains one item, which means there is no item on index 1 , and returns undefined .
Then, we're invoking the getFruits function without passing a value as an argument, which means that fruits has a value of undefined by default. Since we're conditionally chaining the item on index 1 of fruits , it returns undefined since this item on index 1 does not exist.
Lastly, we're trying to log the second item in the ['?', '?'] subarray of ['?'], ['?', '?'] . The item on index 1 within this subarray is ? , which gets logged.
class Calc {
constructor ( ) {
this . count = 0
}
increase ( ) {
this . count ++
}
}
const calc = new Calc ( )
new Calc ( ) . increase ( )
console . log ( calc . count )01undefinedReferenceError We set the variable calc equal to a new instance of the Calc class. Then, we instantiate a new instance of Calc , and invoke the increase method on this instance. Since the count property is within the constructor of the Calc class, the count property is not shared on the prototype of Calc . This means that the value of count has not been updated for the instance calc points to, count is still 0 .
const user = {
email : "[email protected]" ,
password : "12345"
}
const updateUser = ( { email , password } ) => {
if ( email ) {
Object . assign ( user , { email } )
}
if ( password ) {
user . password = password
}
return user
}
const updatedUser = updateUser ( { email : "[email protected]" } )
console . log ( updatedUser === user )falsetrueTypeErrorReferenceError The updateUser function updates the values of the email and password properties on user, if their values are passed to the function, after which the function returns the user object. The returned value of the updateUser function is the user object, which means that the value of updatedUser is a reference to the same user object that user points to. updatedUser === user equals true .
const fruit = [ '?' , '?' , '?' ]
fruit . slice ( 0 , 1 )
fruit . splice ( 0 , 1 )
fruit . unshift ( '?' )
console . log ( fruit )['?', '?', '?']['?', '?']['?', '?', '?']['?', '?', '?', '?'] First, we invoke the slice method on the fruit array. The slice method does not modify the original array, but returns the value that it sliced off the array: the banana emoji. Then, we invoke the splice method on the fruit array. The splice method does modify the original array, which means that the fruit array now consists of ['?', '?'] . At last, we invoke the unshift method on the fruit array, which modifies the original array by adding the provided value, '?' in this case, as the first element in the array. The fruit array now consists of ['?', '?', '?'] .
const animals = { } ;
let dog = { emoji : '?' }
let cat = { emoji : '?' }
animals [ dog ] = { ... dog , name : "Mara" }
animals [ cat ] = { ... cat , name : "Sara" }
console . log ( animals [ dog ] ){ emoji: "?", name: "Mara" }{ emoji: "?", name: "Sara" }undefinedReferenceErrorObject keys are converted to strings.
Since the value of dog is an object, animals[dog] actually means that we're creating a new property called "[object Object]" equal to the new object. animals["[object Object]"] is now equal to { emoji: "?", name: "Mara"} .
cat is also an object, which means that animals[cat] actually means that we're overwriting the value of animals["[object Object]"] with the new cat properties.
Logging animals[dog] , or actually animals["[object Object]"] since converting the dog object to a string results "[object Object]" , returns the { emoji: "?", name: "Sara" } .
const user = {
email : "[email protected]" ,
updateEmail : email => {
this . email = email
}
}
user . updateEmail ( "[email protected]" )
console . log ( user . email )[email protected][email protected]undefinedReferenceError The updateEmail function is an arrow function, and is not bound to the user object. This means that the this keyword is not referring to the user object, but refers to the global scope in this case. The value of email within the user object does not get updated. When logging the value of user.email , the original value of [email protected] gets returned.
const promise1 = Promise . resolve ( 'First' )
const promise2 = Promise . resolve ( 'Second' )
const promise3 = Promise . reject ( 'Third' )
const promise4 = Promise . resolve ( 'Fourth' )
const runPromises = async ( ) => {
const res1 = await Promise . all ( [ promise1 , promise2 ] )
const res2 = await Promise . all ( [ promise3 , promise4 ] )
return [ res1 , res2 ]
}
runPromises ( )
. then ( res => console . log ( res ) )
. catch ( err => console . log ( err ) )[['First', 'Second'], ['Fourth']][['First', 'Second'], ['Third', 'Fourth']][['First', 'Second']]'Third' The Promise.all method runs the passed promises in parallel. If one promise fails, the Promise.all method rejects with the value of the rejected promise. In this case, promise3 is rejected with the value "Third" . We're catching the rejected value in the chained catch method on the runPromises invocation to catch any errors within the runPromises function. Only "Third" gets logged, since promise3 is rejected with this value.
method be to log { name: "Lydia", age: 22 } ? const keys = [ "name" , "age" ]
const values = [ "Lydia" , 22 ]
const method = /* ?? */
Object [ method ] ( keys . map ( ( _ , i ) => {
return [ keys [ i ] , values [ i ] ]
} ) ) // { name: "Lydia", age: 22 }entriesvaluesfromEntriesforEach The fromEntries method turns a 2d array into an object. The first element in each subarray will be the key, and the second element in each subarray will be the value. In this case, we're mapping over the keys array, which returns an array that the first element is the item on the key array on the current index, and the second element is the item of the values array on the current index.
This creates an array of subarrays containing the correct keys and values, which results in { name: "Lydia", age: 22 }
const createMember = ( { email , address = { } } ) => {
const validEmail = / .+@.+..+ / . test ( email )
if ( ! validEmail ) throw new Error ( "Valid email pls" )
return {
email ,
address : address ? address : null
}
}
const member = createMember ( { email : "[email protected]" } )
console . log ( member ){ email: "[email protected]", address: null }{ email: "[email protected]" }{ email: "[email protected]", address: {} }{ email: "[email protected]", address: undefined } The default value of address is an empty object {} . When we set the variable member equal to the object returned by the createMember function, we didn't pass a value for the address, which means that the value of the address is the default empty object {} . An empty object is a truthy value, which means that the condition of the address ? address : null conditional returns true . The value of the address is the empty object {} .
let randomValue = { name : "Lydia" }
randomValue = 23
if ( ! typeof randomValue === "string" ) {
console . log ( "It's not a string!" )
} else {
console . log ( "Yay it's a string!" )
}It's not a string!Yay it's a string!TypeErrorundefined The condition within the if statement checks whether the value of !typeof randomValue is equal to "string" . The ! operator converts the value to a boolean value. If the value is truthy, the returned value will be false , if the value is falsy, the returned value will be true . In this case, the returned value of typeof randomValue is the truthy value "number" , meaning that the value of !typeof randomValue is the boolean value false .
!typeof randomValue === "string" always returns false, since we're actually checking false === "string" . Since the condition returned false , the code block of the else statement gets run, and Yay it's a string! gets logged.
