Catatan
Karenanya repo ini dibuat pada tahun 2019 dan pertanyaan -pertanyaan yang diberikan di sini didasarkan pada sintaks dan perilaku JavaScript pada waktu itu. Karena JavaScript adalah bahasa yang terus berkembang, ada fitur bahasa yang lebih baru yang tidak dicakup oleh pertanyaan di sini.
Dari dasar hingga lanjutan: Uji seberapa baik Anda tahu JavaScript, sedikit menyegarkan pengetahuan Anda atau mempersiapkan wawancara pengkodean Anda! ? Saya memperbarui repo ini secara teratur dengan pertanyaan baru. Saya menambahkan jawaban di bagian ** yang runtuh ** di bawah pertanyaan, cukup klik pada mereka untuk memperluasnya. Ini hanya untuk bersenang -senang, semoga berhasil! ❤️
Jangan ragu untuk menghubungi saya! ?
Instagram || Twitter || LinkedIn || Blog
| Jangan ragu untuk menggunakannya dalam suatu proyek! ? Saya akan sangat menghargai referensi untuk repo ini, saya membuat pertanyaan dan penjelasan (ya saya sedih lol) dan komunitas sangat membantu saya untuk mempertahankan dan memperbaikinya! ?? Terima kasih dan bersenang -senang! |
|---|
function sayHi ( ) {
console . log ( name ) ;
console . log ( age ) ;
var name = 'Lydia' ;
let age = 21 ;
}
sayHi ( ) ;Lydia dan undefinedLydia dan ReferenceErrorReferenceError dan 21undefined dan ReferenceError Dalam fungsi, pertama -tama kami mendeklarasikan variabel name dengan kata kunci var . Ini berarti bahwa variabel akan diangkat (ruang memori diatur selama fase pembuatan) dengan nilai default yang undefined , sampai kita benar -benar sampai ke garis di mana kita menentukan variabel. Kami belum mendefinisikan variabel pada garis di mana kami mencoba mencatat variabel name , sehingga masih memegang nilai yang undefined .
Variabel dengan kata kunci let (dan const ) diangkat, tetapi tidak seperti var , jangan diinisialisasi . Mereka tidak dapat diakses sebelum jalur yang kami nyatakan (inisialisasi) mereka. Ini disebut "zona mati temporal". Ketika kami mencoba mengakses variabel sebelum dinyatakan, JavaScript melempar 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 dan 0 1 20 1 2 dan 3 3 33 3 3 dan 0 1 2 Karena antrian acara di JavaScript, fungsi panggilan balik setTimeout dipanggil setelah loop telah dieksekusi. Karena variabel i di loop pertama dinyatakan menggunakan kata kunci var , nilai ini global. Selama loop, kami menambah nilai i sebesar 1 setiap kali, menggunakan operator unary ++ . Pada saat fungsi panggilan balik setTimeout dipanggil, i sama dengan 3 pada contoh pertama.
Pada loop kedua, variabel i dinyatakan menggunakan kata kunci let : variabel yang dinyatakan dengan kata kunci let (dan const ) diblokir (blok adalah apa pun antara { } ). Selama setiap iterasi, i akan memiliki nilai baru, dan setiap nilai dilingkupi di dalam loop.
const shape = {
radius : 10 ,
diameter ( ) {
return this . radius * 2 ;
} ,
perimeter : ( ) => 2 * Math . PI * this . radius ,
} ;
console . log ( shape . diameter ( ) ) ;
console . log ( shape . perimeter ( ) ) ;20 dan 62.8318530717958620 dan NaN20 dan 63NaN dan 63 Perhatikan bahwa nilai diameter adalah fungsi reguler, sedangkan nilai perimeter adalah fungsi panah.
Dengan fungsi panah, kata kunci this mengacu pada ruang lingkup sekitarnya saat ini, tidak seperti fungsi reguler! Ini berarti bahwa ketika kita menyebut perimeter , itu tidak merujuk pada objek bentuk, tetapi pada ruang lingkup sekitarnya (jendela misalnya).
Karena tidak ada radius nilai dalam ruang lingkup fungsi panah, this.radius mengembalikan undefined yang, ketika dikalikan dengan 2 * Math.PI , menghasilkan NaN .
+ true ;
! 'Lydia' ;1 dan falsefalse dan NaNfalse dan false Unary Plus mencoba mengonversi operan ke nomor. true adalah 1 , dan false adalah 0 .
String 'Lydia' adalah nilai kebenaran. Apa yang sebenarnya kami tanyakan, adalah "Apakah nilai kebenaran ini falsy?". Ini mengembalikan false .
const bird = {
size : 'small' ,
} ;
const mouse = {
name : 'Mickey' ,
small : true ,
} ;mouse.bird.size tidak validmouse[bird.size] tidak validmouse[bird["size"]] tidak validDalam JavaScript, semua kunci objek adalah string (kecuali itu simbol). Meskipun kita mungkin tidak mengetiknya sebagai string, mereka selalu diubah menjadi senar di bawah kap.
Pernyataan JavaScript menafsirkan (atau unbox). Ketika kami menggunakan notasi braket, ia melihat braket pembuka pertama [ dan terus berjalan sampai menemukan braket penutup ] . Hanya dengan begitu, itu akan mengevaluasi pernyataan itu.
mouse[bird.size] : Pertama mengevaluasi bird.size , yang "small" . mouse["small"] kembali true
Namun, dengan notasi titik, ini tidak terjadi. mouse tidak memiliki kunci yang disebut bird , yang berarti mouse.bird undefined . Kemudian, kami meminta size menggunakan notasi titik: mouse.bird.size . Karena mouse.bird undefined , kami benar -benar bertanya undefined.size . Ini tidak valid, dan akan melempar kesalahan yang mirip dengan Cannot read property "size" of undefined .
let c = { greeting : 'Hey!' } ;
let d ;
d = c ;
c . greeting = 'Hello' ;
console . log ( d . greeting ) ;HelloHey!undefinedReferenceErrorTypeErrorDalam JavaScript, semua objek berinteraksi dengan referensi saat mengaturnya sama satu sama lain.
Pertama, variabel c memiliki nilai pada suatu objek. Kemudian, kami menetapkan d dengan referensi yang sama yang dimiliki c ke objek.
Saat Anda mengubah satu objek, Anda mengubah semuanya.
let a = 3 ;
let b = new Number ( 3 ) ;
let c = 3 ;
console . log ( a == b ) ;
console . log ( a === b ) ;
console . log ( b === c ) ;true false truefalse false truetrue false falsefalse true true new Number() adalah konstruktor fungsi bawaan. Meskipun terlihat seperti angka, ini bukan nomor: ia memiliki banyak fitur tambahan dan merupakan objek.
Ketika kami menggunakan operator == (operator kesetaraan), ia hanya memeriksa apakah ia memiliki nilai yang sama. Mereka berdua memiliki nilai 3 , jadi itu mengembalikan true .
Namun, ketika kami menggunakan operator === (operator kesetaraan yang ketat), baik nilai dan tipe harus sama. Ini bukan: new Number() bukan angka, itu objek . Keduanya mengembalikan 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 Fungsi colorChange statis. Metode statis dirancang untuk hidup hanya pada konstruktor di mana mereka dibuat, dan tidak dapat diturunkan ke anak -anak atau dipanggil berdasarkan contoh kelas. Karena freddie adalah contoh dari bunglon kelas, fungsi tidak dapat dipanggil. TypeError dilemparkan.
let greeting ;
greetign = { } ; // Typo!
console . log ( greetign ) ;{}ReferenceError: greetign is not definedundefined Ini mencatat objek, karena kami baru saja membuat objek kosong pada objek global! Ketika kami greeting sebagai greetign , penerjemah JS benar -benar melihat ini sebagai:
global.greetign = {} di node.jswindow.greetign = {} , frames.greetign = {} dan self.greetign di browser.self.greetign dalam pekerja web.globalThis.greetign di semua lingkungan. Untuk menghindari ini, kita dapat menggunakan "use strict" . Ini memastikan bahwa Anda telah mendeklarasikan variabel sebelum mengaturnya sama dengan apa pun.
function bark ( ) {
console . log ( 'Woof!' ) ;
}
bark . animal = 'dog' ;SyntaxError . Anda tidak dapat menambahkan properti ke fungsi dengan cara ini."Woof" dicatat.ReferenceErrorIni dimungkinkan dalam JavaScript, karena fungsi adalah objek! (Semuanya selain tipe primitif adalah objek)
Fungsi adalah jenis objek khusus. Kode yang Anda tulis sendiri bukan fungsi yang sebenarnya. Fungsi adalah objek dengan properti. Properti ini dapat diungkapkan.
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 Dalam JavaScript, fungsi adalah objek, dan oleh karena itu, metode getFullName ditambahkan ke objek fungsi konstruktor itu sendiri. Untuk alasan itu, kita dapat memanggil Person.getFullName() , tetapi member.getFullName melempar TypeError .
Jika Anda ingin metode tersedia untuk semua instance objek, Anda harus menambahkannya ke properti prototipe:
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"} dan undefinedPerson {firstName: "Lydia", lastName: "Hallie"} dan Person {firstName: "Sarah", lastName: "Smith"}Person {firstName: "Lydia", lastName: "Hallie"} dan {}Person {firstName: "Lydia", lastName: "Hallie"} dan ReferenceError Untuk sarah , kami tidak menggunakan kata kunci new . Saat menggunakan new , this mengacu pada objek kosong baru yang kami buat. Namun, jika Anda tidak menambahkan new , this mengacu pada objek global !
Kami mengatakan bahwa this.firstName sama dengan "Sarah" dan this.lastName sama dengan "Smith" . Apa yang sebenarnya kami lakukan, adalah mendefinisikan global.firstName = 'Sarah' dan global.lastName = 'Smith' . sarah sendiri undefined , karena kami tidak mengembalikan nilai dari fungsi Person tersebut.
Selama fase penangkapan , acara melewati elemen leluhur ke elemen target. Kemudian mencapai elemen target , dan menggelegak dimulai.
Semua objek memiliki prototipe, kecuali untuk objek dasar . Objek dasar adalah objek yang dibuat oleh pengguna, atau objek yang dibuat menggunakan kata kunci new . Objek dasar memiliki akses ke beberapa metode dan properti, seperti .toString . Inilah alasan mengapa Anda dapat menggunakan metode javascript bawaan! Semua metode tersebut tersedia di prototipe. Meskipun JavaScript tidak dapat menemukannya secara langsung pada objek Anda, itu turun ke rantai prototipe dan menemukannya di sana, yang membuatnya dapat diakses untuk Anda.
function sum ( a , b ) {
return a + b ;
}
sum ( 1 , '2' ) ;NaNTypeError"12"3JavaScript adalah bahasa yang diketik secara dinamis : kami tidak menentukan jenis variabel tertentu. Nilai dapat secara otomatis dikonversi menjadi tipe lain tanpa Anda sadari, yang disebut paksaan tipe implisit . Paksaan mengkonversi dari satu jenis menjadi jenis lainnya.
Dalam contoh ini, JavaScript mengubah angka 1 menjadi string, agar fungsi dapat masuk akal dan mengembalikan nilai. Selama penambahan tipe numerik ( 1 ) dan tipe string ( '2' ), angka diperlakukan sebagai string. Kita dapat menggabungkan string seperti "Hello" + "World" , jadi apa yang terjadi di sini adalah "1" + "2" yang mengembalikan "12" .
let number = 0 ;
console . log ( number ++ ) ;
console . log ( ++ number ) ;
console . log ( number ) ;1 1 21 2 20 2 20 1 2 Operator Postfix Unary ++ :
0 )1 ) Operator awalan unary ++ :
2 )2 ) Ini mengembalikan 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"] 21Jika Anda menggunakan literal template yang ditandai, nilai argumen pertama selalu merupakan array dari nilai string. Argumen yang tersisa mendapatkan nilai -nilai dari ekspresi yang disahkan!
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 guessSaat menguji kesetaraan, primitif dibandingkan dengan nilainya , sedangkan objek dibandingkan dengan referensi mereka. JavaScript memeriksa apakah objek memiliki referensi ke lokasi yang sama dalam memori.
Dua objek yang kami bandingkan tidak memiliki itu: objek yang kami lewati sebagai parameter mengacu pada lokasi yang berbeda dalam memori dari objek yang kami gunakan untuk memeriksa kesetaraan.
Inilah sebabnya mengapa keduanya { age: 18 } === { age: 18 } dan { age: 18 } == { age: 18 } return false .
function getAge ( ... args ) {
console . log ( typeof args ) ;
}
getAge ( 21 ) ;"number""array""object""NaN" Parameter sisanya ( ...args ) memungkinkan kita "mengumpulkan" semua argumen yang tersisa ke dalam array. Array adalah objek, jadi typeof args mengembalikan "object"
function getAge ( ) {
'use strict' ;
age = 21 ;
console . log ( age ) ;
}
getAge ( ) ;21undefinedReferenceErrorTypeError Dengan "use strict" , Anda dapat memastikan bahwa Anda tidak secara tidak sengaja menyatakan variabel global. Kami tidak pernah menyatakan age variabel, dan karena kami menggunakan "use strict" , itu akan melempar kesalahan referensi. Jika kami tidak menggunakan "use strict" , itu akan berhasil, karena age properti akan ditambahkan ke objek global.
sum ? const sum = eval ( '10*10+5' ) ;105"105"TypeError"10*10+5" eval evaluasi kode yang dilewatkan sebagai string. Jika itu adalah ekspresi, seperti dalam kasus ini, ia mengevaluasi ekspresi. Ekspresi adalah 10 * 10 + 5 . Ini mengembalikan nomor 105 .
sessionStorage . setItem ( 'cool_secret' , 123 ) ; Data yang disimpan di sessionStorage dihapus setelah menutup tab .
Jika Anda menggunakan localStorage , data akan ada di sana selamanya, kecuali misalnya localStorage.clear() dipanggil.
var num = 8 ;
var num = 10 ;
console . log ( num ) ;810SyntaxErrorReferenceError Dengan kata kunci var , Anda dapat mendeklarasikan beberapa variabel dengan nama yang sama. Variabel kemudian akan menahan nilai terbaru.
Anda tidak dapat melakukan ini dengan let atau const karena mereka diblokir dan karenanya tidak dapat diedekasikan kembali.
const obj = { 1 : 'a' , 2 : 'b' , 3 : 'c' } ;
const set = new Set ( [ 1 , 2 , 3 , 4 , 5 ] ) ;
obj . hasOwnProperty ( '1' ) ;
obj . hasOwnProperty ( 1 ) ;
set . has ( '1' ) ;
set . has ( 1 ) ;false true false truefalse true true truetrue true false truetrue true true true Semua kunci objek (tidak termasuk simbol) adalah string di bawah kap, bahkan jika Anda tidak mengetik sendiri sebagai string. Inilah sebabnya mengapa obj.hasOwnProperty('1') juga kembali benar.
Itu tidak berfungsi seperti itu untuk satu set. Tidak ada '1' di set kami: set.has('1') mengembalikan false . Ini memiliki tipe numerik 1 , set.has(1) mengembalikan true .
const obj = { a : 'one' , b : 'two' , a : 'three' } ;
console . log ( obj ) ;{ a: "one", b: "two" }{ b: "two", a: "three" }{ a: "three", b: "two" }SyntaxErrorJika Anda memiliki dua kunci dengan nama yang sama, kunci akan diganti. Ini masih akan berada di posisi pertama, tetapi dengan nilai yang ditentukan terakhir.
Konteks eksekusi dasar adalah konteks eksekusi global: itulah yang dapat diakses di mana -mana dalam kode Anda.
for ( let i = 1 ; i < 5 ; i ++ ) {
if ( i === 3 ) continue ;
console . log ( i ) ;
}1 21 2 31 2 41 3 4 Pernyataan continue melewatkan iterasi jika suatu kondisi tertentu mengembalikan 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 adalah konstruktor bawaan, yang dapat kami tambahkan properti. Saya baru saja menambahkan metode ke prototipe. String primitif secara otomatis dikonversi menjadi objek string, yang dihasilkan oleh fungsi prototipe string. Jadi, semua string (objek string) memiliki akses ke metode itu!
const a = { } ;
const b = { key : 'b' } ;
const c = { key : 'c' } ;
a [ b ] = 123 ;
a [ c ] = 456 ;
console . log ( a [ b ] ) ;123456undefinedReferenceError Kunci objek secara otomatis dikonversi menjadi string. Kami mencoba mengatur objek sebagai kunci untuk objek a , dengan nilai 123 .
Namun, ketika kita merangkai suatu objek, itu menjadi "[object Object]" . Jadi apa yang kami katakan di sini, adalah bahwa a["[object Object]"] = 123 . Kemudian, kita dapat mencoba melakukan hal yang sama lagi. c adalah objek lain yang secara implisit kita merangkai. Jadi, a["[object Object]"] = 456 .
Kemudian, kami mencatat a[b] , yang sebenarnya adalah a["[object Object]"] . Kami hanya mengaturnya ke 456 , jadi itu mengembalikan 456 .
const foo = ( ) => console . log ( 'First' ) ;
const bar = ( ) => setTimeout ( ( ) => console . log ( 'Second' ) ) ;
const baz = ( ) => console . log ( 'Third' ) ;
bar ( ) ;
foo ( ) ;
baz ( ) ;Third Second FirstSecond Third FirstThird First SecondSecond Third First Kami memiliki fungsi setTimeout dan memohonnya terlebih dahulu. Namun, itu dicatat terakhir.
Ini karena di browser, kami tidak hanya memiliki mesin runtime, kami juga memiliki sesuatu yang disebut WebAPI . WebAPI memberi kami fungsi setTimeout untuk memulai, dan misalnya DOM.
Setelah panggilan balik didorong ke webapi, fungsi setTimeout itu sendiri (tetapi bukan panggilan balik!) Muncul dari tumpukan.
Sekarang, foo dipanggil, dan "First" sedang dicatat.
foo muncul dari tumpukan, dan baz dipanggil. "Third" dicatat.
Webapi tidak bisa begitu saja menambahkan barang ke tumpukan kapan pun siap. Sebaliknya, ia mendorong fungsi panggilan balik ke sesuatu yang disebut antrian .
Di sinilah loop acara mulai bekerja. Lingkaran acara melihat tumpukan dan antrian tugas. Jika tumpukannya kosong, ia mengambil hal pertama pada antrian dan mendorongnya ke tumpukan.
bar dipanggil, "Second" dicatat, dan itu muncul dari tumpukan.
< div onclick =" console.log('first div') " >
< div onclick =" console.log('second div') " >
< button onclick =" console.log('button') " >
Click!
</ button >
</ div >
</ div >div luardiv dalambutton Elemen bersarang terdalam yang menyebabkan acara adalah target acara. Anda dapat berhenti menggelembung dengan event.stopPropagation
< div onclick =" console.log('div') " >
< p onclick =" console.log('p') " >
Click here!
</ p >
</ div >p divdiv ppdiv Jika kita mengklik p , kita melihat dua log: p dan div . Selama perambatan acara, ada 3 fase: menangkap, menargetkan, dan menggelegak. Secara default, penangan acara dieksekusi dalam fase menggelegak (kecuali jika Anda mengatur useCapture ke true ). Ini berubah dari elemen bersarang terdalam ke luar.
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 21 Dengan keduanya, kita dapat meneruskan objek yang kita inginkan kata kunci this . Namun, .call juga dieksekusi segera !
.bind. Mengembalikan salinan fungsi, tetapi dengan konteks yang terikat! Itu tidak segera dieksekusi.
function sayHi ( ) {
return ( ( ) => 0 ) ( ) ;
}
console . log ( typeof sayHi ( ) ) ;"object""number""function""undefined" Fungsi sayHi mengembalikan nilai yang dikembalikan dari ekspresi fungsi yang segera dipanggil (IIFE). Fungsi ini dikembalikan 0 , yang merupakan tipe "number" .
FYI: typeof dapat mengembalikan daftar nilai -nilai berikut: undefined , boolean , number , bigint , string , symbol , function dan object . Perhatikan bahwa typeof null mengembalikan "object" .
0 ;
new Number ( 0 ) ;
( '' ) ;
( ' ' ) ;
new Boolean ( false ) ;
undefined ;0 , '' , undefined0 , new Number(0) , '' , new Boolean(false) , undefined0 , '' , new Boolean(false) , undefinedAda 8 nilai falsy:
undefinednullNaNfalse'' (string kosong)0-00n (Bigint (0)) Konstruktor fungsi, seperti new Number dan new Boolean adalah kebenaran.
console . log ( typeof typeof 1 ) ;"number""string""object""undefined" typeof 1 mengembalikan "number" . typeof "number" mengembalikan "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 Saat Anda menetapkan nilai ke elemen dalam array yang melebihi panjang array, Javascript menciptakan sesuatu yang disebut "slot kosong". Ini sebenarnya memiliki nilai undefined , tetapi Anda akan melihat sesuatu seperti:
[1, 2, 3, empty x 7, 11]
Tergantung di mana Anda menjalankannya (berbeda untuk setiap browser, node, dll.)
( ( ) => {
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 Blok catch menerima argumen x . Ini tidak sama x dengan variabel ketika kita lulus argumen. Variabel x ini diblokir.
Kemudian, kami mengatur variabel blok-scoped ini sama dengan 1 , dan mengatur nilai variabel y . Sekarang, kami mencatat variabel blok-scoped x , yang sama dengan 1 .
Di luar blok catch , x masih undefined , dan y adalah 2 . undefined y 2 console.log(x) catch
JavaScript hanya memiliki tipe dan objek primitif.
Jenis primitif adalah boolean , null , undefined , bigint , number , string , dan symbol .
Yang membedakan primitif dari suatu objek adalah bahwa primitif tidak memiliki sifat atau metode apa pun; Namun, Anda akan mencatat bahwa 'foo'.toUpperCase() mengevaluasi ke 'FOO' dan tidak menghasilkan TypeError . Ini karena ketika Anda mencoba mengakses properti atau metode pada primitif seperti string, JavaScript akan secara implisit membungkus tipe primitif menggunakan salah satu kelas pembungkus, yaitu String , dan kemudian segera membuang pembungkus setelah ekspresi mengevaluasi. Semua primitif kecuali null dan undefined menunjukkan perilaku ini.
[ [ 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] adalah nilai awal kami. Ini adalah nilai yang kita mulai dengan, dan nilai acc pertama. Selama babak pertama, acc adalah [1,2] , dan cur adalah [0, 1] . Kami menggabungkan mereka, yang menghasilkan [1, 2, 0, 1] .
Kemudian, [1, 2, 0, 1] adalah acc dan [2, 3] adalah cur . Kami menggabungkan mereka, dan mendapatkan [1, 2, 0, 1, 2, 3]
! ! null ;
! ! '' ;
! ! 1 ;false true falsefalse false truefalse true truetrue true false null adalah Falsy. !null kembali true . !true mengembalikan false .
"" Falsy. !"" Kembali true . !true mengembalikan false .
1 adalah kebenaran. !1 mengembalikan false . !false Returns true .
setInterval di browser? setInterval ( ( ) => console . log ( 'Hi' ) , 1000 ) ;undefined Ini mengembalikan ID unik. ID ini dapat digunakan untuk menghapus interval itu dengan fungsi clearInterval() .
[ ... 'Lydia' ] ;["L", "y", "d", "i", "a"]["Lydia"][[], "Lydia"][["L", "y", "d", "i", "a"]]String adalah iterable. Operator penyebaran memetakan setiap karakter yang dapat diulang ke satu elemen.
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 Fungsi reguler tidak dapat dihentikan di tengah jalan setelah doa. Namun, fungsi generator dapat "berhenti" di tengah jalan, dan kemudian melanjutkan dari tempat berhenti. Setiap kali fungsi generator menemukan kata kunci yield , fungsi menghasilkan nilai yang ditentukan setelahnya. Perhatikan bahwa fungsi generator dalam kasus itu tidak mengembalikan nilai, itu menghasilkan nilainya.
Pertama, kami menginisialisasi fungsi generator dengan i sama dengan 10 . Kami memohon fungsi generator menggunakan metode next() . Pertama kali kami memohon fungsi generator, i sama dengan 10 . Ini bertemu kata kunci yield pertama: Ini menghasilkan nilai i . Generator sekarang "berhenti", dan 10 dicatat.
Kemudian, kami memohon fungsi lagi dengan metode next() . Itu mulai berlanjut di mana ia berhenti sebelumnya, masih dengan i sama dengan 10 . Sekarang, ia menemukan kata kunci yield berikutnya, dan menghasilkan i * 2 . i sama dengan 10 , jadi mengembalikan 10 * 2 , yaitu 20 . Ini menghasilkan 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" Ketika kita memberikan banyak janji kepada Metode Promise.race , itu menyelesaikan/menolak janji pertama yang menyelesaikan/menolak. Untuk metode setTimeout , kami melewati timer: 500ms untuk janji pertama ( firstPromise ), dan 100ms untuk janji kedua ( secondPromise ). Ini berarti bahwa secondPromise menyelesaikan terlebih dahulu dengan nilai 'two' . res sekarang memegang nilai 'two' , yang dicatat.
let person = { name : 'Lydia' } ;
const members = [ person ] ;
person = null ;
console . log ( members ) ;null[null][{}][{ name: "Lydia" }] Pertama, kami mendeklarasikan person variabel dengan nilai objek yang memiliki properti name .
Kemudian, kami menyatakan variabel yang disebut members . Kami menetapkan elemen pertama dari array itu sama dengan nilai variabel person . Objek berinteraksi dengan referensi saat mengaturnya sama satu sama lain. Saat Anda menetapkan referensi dari satu variabel ke variabel lain, Anda membuat salinan referensi itu. (Perhatikan bahwa mereka tidak memiliki referensi yang sama !)
Kemudian, kami mengatur variabel person yang sama dengan null .
Kami hanya memodifikasi nilai variabel person , dan bukan elemen pertama dalam array, karena elemen itu memiliki referensi (disalin) yang berbeda ke objek. Elemen pertama dalam members masih memegang referensi ke objek asli. Ketika kami mencatat array members , elemen pertama masih memegang nilai objek, yang akan dicatat.
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] Dengan loop for-in , kita dapat beralih melalui kunci objek, dalam hal ini name dan age . Di bawah kap, tombol objek adalah string (jika mereka bukan simbol). Pada setiap loop, kami menetapkan nilai item yang sama dengan kunci saat ini ia berulang kali. Pertama, item sama dengan name , dan dicatat. Kemudian, item sama dengan age , yang dicatat.
console . log ( 3 + 4 + '5' ) ;"345""75"12"12" Asosiasi operator adalah urutan di mana kompiler mengevaluasi ekspresi, baik kiri-ke-kanan atau kanan-ke-kiri. Ini hanya terjadi jika semua operator memiliki prioritas yang sama . Kami hanya memiliki satu jenis operator: + . Sebagai tambahan, asosiasi kiri-ke-kanan.
3 + 4 dievaluasi terlebih dahulu. Ini menghasilkan angka 7 .
7 + '5' menghasilkan "75" karena paksaan. JavaScript mengubah angka 7 menjadi string, lihat pertanyaan 15. Kita dapat menggabungkan dua string menggunakan operator + . "7" + "5" menghasilkan "75" .
num ? const num = parseInt ( '7*6' , 10 ) ;42"42"7NaN Hanya nomor pertama dalam string yang dikembalikan. Berdasarkan radix (argumen kedua untuk menentukan jenis nomor apa yang ingin kita piringkan: basis 10, heksadesimal, oktal, biner, dll.), parseInt memeriksa apakah karakter dalam string valid. Setelah menemukan karakter yang bukan nomor yang valid di radix, ia berhenti parsing dan mengabaikan karakter berikut.
* bukan nomor yang valid. Itu hanya mem -parsing "7" ke dalam desimal 7 . num sekarang memiliki nilai 7 .
[ 1 , 2 , 3 ] . map ( num => {
if ( typeof num === 'number' ) return ;
return num * 2 ;
} ) ;[][null, null, null][undefined, undefined, undefined][ 3 x empty ] Saat memetakan di atas array, nilai num sama dengan elemen yang saat ini diulang. Dalam hal ini, elemen -elemennya adalah angka, sehingga kondisi typeof num === "number" mengembalikan true . Fungsi peta membuat array baru dan memasukkan nilai yang dikembalikan dari fungsi.
Namun, kami tidak mengembalikan nilai. Ketika kami tidak mengembalikan nilai dari fungsi, fungsi mengembalikan undefined . Untuk setiap elemen dalam array, blok fungsi dipanggil, jadi untuk setiap elemen kami mengembalikan 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" Argumen dilewatkan oleh nilai , kecuali nilainya adalah objek, maka mereka dilewatkan dengan referensi . birthYear dilewatkan oleh nilai, karena itu adalah string, bukan objek. Ketika kami memberikan argumen berdasarkan nilai, salinan nilai itu dibuat (lihat pertanyaan 46).
Variabel birthYear memiliki referensi pada nilai "1997" . year argumen juga memiliki referensi untuk nilai "1997" , tetapi itu bukan nilai yang sama dengan birthYear memiliki referensi. Ketika kami memperbarui nilai year berdasarkan pengaturan year yang sama dengan "1998" , kami hanya memperbarui nilai year . birthYear masih sama dengan "1997" .
Nilai person adalah objek. member argumen memiliki referensi (disalin) ke objek yang sama . Ketika kami memodifikasi properti dari member objek memiliki referensi, nilai person juga akan dimodifikasi, karena keduanya memiliki referensi ke objek yang sama. Properti name person sekarang sama dengan nilai "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! Dengan pernyataan throw , kami dapat membuat kesalahan khusus. Dengan pernyataan ini, Anda dapat memberikan pengecualian. Pengecualian bisa berupa string , angka , boolean atau objek . Dalam hal ini, pengecualian kami adalah string 'Hello world!' .
Dengan pernyataan catch , kami dapat menentukan apa yang harus dilakukan jika pengecualian dilemparkan ke blok try . Pengecualian dilemparkan: string 'Hello world!' . e sekarang sama dengan string itu, yang kami log. Ini menghasilkan 'Oh an error: Hello world!' .
function Car ( ) {
this . make = 'Lamborghini' ;
return { make : 'Maserati' } ;
}
const myCar = new Car ( ) ;
console . log ( myCar . make ) ;"Lamborghini""Maserati"ReferenceErrorTypeError Ketika fungsi konstruktor dipanggil dengan kata kunci new , itu membuat objek dan mengatur kata kunci this untuk merujuk ke objek itu. Secara default, jika fungsi konstruktor tidak secara eksplisit mengembalikan apa pun, itu akan mengembalikan objek yang baru dibuat.
Dalam hal ini, Car fungsi konstruktor secara eksplisit mengembalikan objek baru dengan make ke "Maserati" , yang mengesampingkan perilaku default. Oleh karena itu, ketika new Car() dipanggil, objek yang dikembalikan ditugaskan ke myCar , menghasilkan output adalah "Maserati" ketika myCar.make diakses.
( ( ) => {
let x = ( y = 10 ) ;
} ) ( ) ;
console . log ( typeof x ) ;
console . log ( typeof y ) ;"undefined", "number""number", "number""object", "number""number", "undefined" let x = (y = 10); sebenarnya singkatan untuk:
y = 10 ;
let x = y ; Ketika kami mengatur y sama dengan 10 , kami benar -benar menambahkan properti y ke objek global ( window di browser, global di simpul). Di browser, window.y sekarang sama dengan 10 .
Kemudian, kami mendeklarasikan variabel x dengan nilai y , yaitu 10 . Variabel yang dinyatakan dengan kata kunci let diblokir , mereka hanya didefinisikan dalam blok yang mereka nyatakan; Ekspresi fungsi yang segera dipanggil (IIFE) dalam kasus ini. Ketika kami menggunakan operator typeof , operan x tidak ditentukan: kami mencoba mengakses x di luar blok yang dinyatakan dalam. Ini berarti x tidak ditentukan. Nilai yang belum diberi nilai atau dinyatakan dari tipe "undefined" . console.log(typeof x) mengembalikan "undefined" .
Namun, kami menciptakan variabel global y ketika menetapkan y sama dengan 10 . Nilai ini dapat diakses di mana saja dalam kode kami. y didefinisikan, dan memiliki nilai jenis "number" . console.log(typeof y) Mengembalikan "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 Kami dapat menghapus properti dari objek menggunakan kata kunci delete , juga pada prototipe. Dengan menghapus properti pada prototipe, itu tidak tersedia lagi dalam rantai prototipe. Dalam hal ini, fungsi bark tidak tersedia lagi pada prototipe setelah delete Dog.prototype.bark , namun kami masih mencoba mengaksesnya.
Ketika kami mencoba memohon sesuatu yang bukan fungsi, seorang TypeError dilemparkan. Dalam hal ini TypeError: pet.bark is not a function , karena 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} Objek Set adalah kumpulan nilai unik : Nilai hanya dapat terjadi sekali dalam satu set.
Kami melewati iterable [1, 1, 2, 3, 4] dengan nilai duplikat 1 . Karena kita tidak dapat memiliki dua nilai yang sama dalam suatu set, salah satunya dihapus. Ini menghasilkan {1, 2, 3, 4} .
// counter.js
let counter = 10 ;
export default counter ; // index.js
import myCounter from './counter' ;
myCounter += 1 ;
console . log ( myCounter ) ;1011ErrorNaNModul yang diimpor hanya baca : Anda tidak dapat memodifikasi modul yang diimpor. Hanya modul yang mengekspornya yang dapat mengubah nilainya.
Ketika kami mencoba menambah nilai myCounter , ia melakukan kesalahan: myCounter hanya baca dan tidak dapat dimodifikasi.
const name = 'Lydia' ;
age = 21 ;
console . log ( delete name ) ;
console . log ( delete age ) ;false , true"Lydia" , 21true , trueundefined , undefined Operator delete mengembalikan nilai boolean: true pada penghapusan yang berhasil, kalau tidak, ia akan mengembalikan false . Namun, variabel yang dideklarasikan dengan kata kunci var , const , atau let tidak dapat dihapus menggunakan operator delete .
Variabel name dinyatakan dengan kata kunci const , sehingga penghapusannya tidak berhasil: false dikembalikan. Ketika kami menetapkan age sama dengan 21 , kami benar -benar menambahkan properti yang disebut age ke objek global. Anda dapat berhasil menghapus properti dari objek dengan cara ini, juga objek global, jadi delete age mengembalikan 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]Kita dapat membongkar nilai dari array atau properti dari objek melalui perusak. Misalnya:
[ a , b ] = [ 1 , 2 ] ; Nilai a sekarang 1 , dan nilai b sekarang 2 . Apa yang sebenarnya kami lakukan dalam pertanyaan, adalah:
[ y ] = [ 1 , 2 , 3 , 4 , 5 ] ; Ini berarti bahwa nilai y sama dengan nilai pertama dalam array, yang merupakan angka 1 . Ketika kita y , 1 dikembalikan.
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 } Dimungkinkan untuk menggabungkan objek menggunakan operator penyebaran ... Ini memungkinkan Anda membuat salinan pasangan kunci/nilai dari satu objek, dan menambahkannya ke objek lain. 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. Misalnya:
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 ) ;"?" Dan "?""?" Dan "?""?" Dan "?""?" Dan "?" The value of the this keyword is dependent on where you use it. In a method , like the getStatus method, the this keyword refers to the object that the method belongs to . The method belongs to the data object, so this refers to the data object. When we log this.status , the status property on the data object gets logged, which is "?" .
With the call method, we can change the object to which the this keyword refers. In functions , the this keyword refers to the the object that the function belongs to . We declared the setTimeout function on the global object , so within the setTimeout function, the this keyword refers to the global object . On the global object, there is a variable called status with the value of "?" . When logging this.status , "?" gets logged.
const person = {
name : 'Lydia' ,
age : 21 ,
} ;
let city = person . city ;
city = 'Amsterdam' ;
console . log ( person ) ;{ name: "Lydia", age: 21 }{ name: "Lydia", age: 21, city: "Amsterdam" }{ name: "Lydia", age: 21, city: undefined }"Amsterdam" We set the variable city equal to the value of the property called city on the person object. There is no property on this object called city , so the variable city has the value of undefined .
Note that we are not referencing the person object itself! We simply set the variable city equal to the current value of the city property on the person object.
Then, we set city equal to the string "Amsterdam" . This doesn't change the person object: there is no reference to that object.
When logging the person object, the unmodified object gets returned.
function checkAge ( age ) {
if ( age < 18 ) {
const message = "Sorry, you're too young." ;
} else {
const message = "Yay! You're old enough!" ;
}
return message ;
}
console . log ( checkAge ( 21 ) ) ;"Sorry, you're too young.""Yay! You're old enough!"ReferenceErrorundefined Variables with the const and let keywords are block-scoped . A block is anything between curly brackets ( { } ). In this case, the curly brackets of the if/else statements. You cannot reference a variable outside of the block it's declared in, a ReferenceError gets thrown.
fetch ( 'https://www.website.com/api/user/1' )
. then ( res => res . json ( ) )
. then ( res => console . log ( res ) ) ;fetch method.fetch method..then() . The value of res in the second .then is equal to the returned value of the previous .then . You can keep chaining .then s like this, where the value is passed to the next handler.
hasName equal to true , provided you cannot pass true as an argument? function getName ( name ) {
const hasName = //
}!!namenamenew Boolean(name)name.length With !!name , we determine whether the value of name is truthy or falsy. If the name is truthy, which we want to test for, !name returns false . !false (which is what !!name practically is) returns true .
By setting hasName equal to name , you set hasName equal to whatever value you passed to the getName function, not the boolean value true .
new Boolean(true) returns an object wrapper, not the boolean value itself.
name.length returns the length of the passed argument, not whether it's true .
console . log ( 'I want pizza' [ 0 ] ) ;""""I"SyntaxErrorundefined In order to get a character at a specific index of a string, you can use bracket notation. The first character in the string has index 0, and so on. In this case, we want to get the element with index 0, the character "I' , which gets logged.
Note that this method is not supported in IE7 and below. In that case, use .charAt() .
function sum ( num1 , num2 = num1 ) {
console . log ( num1 + num2 ) ;
}
sum ( 10 ) ;NaN20ReferenceErrorundefined You can set a default parameter's value equal to another parameter of the function, as long as they've been defined before the default parameter. We pass the value 10 to the sum function. If the sum function only receives 1 argument, it means that the value for num2 is not passed, and the value of num1 is equal to the passed value 10 in this case. The default value of num2 is the value of num1 , which is 10 . num1 + num2 returns 20 .
If you're trying to set a default parameter's value equal to a parameter that is defined after (to the right), the parameter's value hasn't been initialized yet, which will throw an error.
// module.js
export default ( ) => 'Hello world' ;
export const name = 'Lydia' ;
// index.js
import * as data from './module' ;
console . log ( data ) ;{ default: function default(), name: "Lydia" }{ default: function default() }{ default: "Hello world", name: "Lydia" }module.js With the import * as name syntax, we import all exports from the module.js file into the index.js file as a new object called data is created. In the module.js file, there are two exports: the default export, and a named export. The default export is a function that returns the string "Hello World" , and the named export is a variable called name which has the value of the string "Lydia" .
The data object has a default property for the default export, other properties have the names of the named exports and their corresponding values.
class Person {
constructor ( name ) {
this . name = name ;
}
}
const member = new Person ( 'John' ) ;
console . log ( typeof member ) ;"class""function""object""string" Classes are syntactical sugar for function constructors. The equivalent of the Person class as a function constructor would be:
function Person ( name ) {
this . name = name ;
} Calling a function constructor with new results in the creation of an instance of Person , typeof keyword returns "object" for an instance. typeof member returns "object" .
let newList = [ 1 , 2 , 3 ] . push ( 4 ) ;
console . log ( newList . push ( 5 ) ) ;[1, 2, 3, 4, 5][1, 2, 3, 5][1, 2, 3, 4]Error The .push method returns the new length of the array, not the array itself! By setting newList equal to [1, 2, 3].push(4) , we set newList equal to the new length of the array: 4 .
Then, we try to use the .push method on newList . Since newList is the numerical value 4 , we cannot use the .push method: a TypeError is thrown.
function giveLydiaPizza ( ) {
return 'Here is pizza!' ;
}
const giveLydiaChocolate = ( ) =>
"Here's chocolate... now go hit the gym already." ;
console . log ( giveLydiaPizza . prototype ) ;
console . log ( giveLydiaChocolate . prototype ) ;{ constructor: ...} { constructor: ...}{} { constructor: ...}{ constructor: ...} {}{ constructor: ...} undefined Regular functions, such as the giveLydiaPizza function, have a prototype property, which is an object (prototype object) with a constructor property. Arrow functions however, such as the giveLydiaChocolate function, do not have this prototype property. undefined gets returned when trying to access the prototype property using giveLydiaChocolate.prototype .
const person = {
name : 'Lydia' ,
age : 21 ,
} ;
for ( const [ x , y ] of Object . entries ( person ) ) {
console . log ( x , y ) ;
}name Lydia and age 21["name", "Lydia"] and ["age", 21]["name", "age"] and undefinedError Object.entries(person) returns an array of nested arrays, containing the keys and objects:
[ [ 'name', 'Lydia' ], [ 'age', 21 ] ]
Using the for-of loop, we can iterate over each element in the array, the subarrays in this case. We can destructure the subarrays instantly in the for-of loop, using const [x, y] . x is equal to the first element in the subarray, y is equal to the second element in the subarray.
The first subarray is [ "name", "Lydia" ] , with x equal to "name" , and y equal to "Lydia" , which get logged. The second subarray is [ "age", 21 ] , with x equal to "age" , and y equal to 21 , which get logged.
function getItems ( fruitList , ... args , favoriteFruit ) {
return [ ... fruitList , ... args , favoriteFruit ]
}
getItems ( [ "banana" , "apple" ] , "pear" , "orange" )["banana", "apple", "pear", "orange"][["banana", "apple"], "pear", "orange"]["banana", "apple", ["pear"], "orange"]SyntaxError ...args is a rest parameter. The rest parameter's value is an array containing all remaining arguments, and can only be the last parameter ! In this example, the rest parameter was the second parameter. This is not possible, and will throw a syntax error.
function getItems ( fruitList , favoriteFruit , ... args ) {
return [ ... fruitList , ... args , favoriteFruit ] ;
}
getItems ( [ 'banana' , 'apple' ] , 'pear' , 'orange' ) ; The above example works. This returns the array [ 'banana', 'apple', 'orange', 'pear' ]
function nums ( a , b ) {
if ( a > b ) console . log ( 'a is bigger' ) ;
else console . log ( 'b is bigger' ) ;
return
a + b ;
}
console . log ( nums ( 4 , 2 ) ) ;
console . log ( nums ( 1 , 2 ) ) ;a is bigger , 6 and b is bigger , 3a is bigger , undefined and b is bigger , undefinedundefined and undefinedSyntaxError In JavaScript, we don't have to write the semicolon ( ; ) explicitly, however the JavaScript engine still adds them after statements. This is called Automatic Semicolon Insertion . A statement can for example be variables, or keywords like throw , return , break , etc.
Here, we wrote a return statement, and another value a + b on a new line . However, since it's a new line, the engine doesn't know that it's actually the value that we wanted to return. Instead, it automatically added a semicolon after return . You could see this as:
return ;
a + b ; This means that a + b is never reached, since a function stops running after the return keyword. If no value gets returned, like here, the function returns undefined . Note that there is no automatic insertion after if/else statements!
class Person {
constructor ( ) {
this . name = 'Lydia' ;
}
}
Person = class AnotherPerson {
constructor ( ) {
this . name = 'Sarah' ;
}
} ;
const member = new Person ( ) ;
console . log ( member . name ) ;"Lydia""Sarah"Error: cannot redeclare PersonSyntaxError We can set classes equal to other classes/function constructors. In this case, we set Person equal to AnotherPerson . The name on this constructor is Sarah , so the name property on the new Person instance member is "Sarah" .
const info = {
[ Symbol ( 'a' ) ] : 'b' ,
} ;
console . log ( info ) ;
console . log ( Object . keys ( info ) ) ;{Symbol('a'): 'b'} and ["{Symbol('a')"]{} and []{ a: "b" } and ["a"]{Symbol('a'): 'b'} and []A Symbol is not enumerable . The Object.keys method returns all enumerable key properties on an object. The Symbol won't be visible, and an empty array is returned. When logging the entire object, all properties will be visible, even non-enumerable ones.
This is one of the many qualities of a symbol: besides representing an entirely unique value (which prevents accidental name collision on objects, for example when working with 2 libraries that want to add properties to the same object), you can also "hide" properties on objects this way (although not entirely. You can still access symbols using the Object.getOwnPropertySymbols() method).
const getList = ( [ x , ... y ] ) => [ x , y ]
const getUser = user => { name : user . name , age : user . age }
const list = [ 1 , 2 , 3 , 4 ]
const user = { name : "Lydia" , age : 21 }
console . log ( getList ( list ) )
console . log ( getUser ( user ) )[1, [2, 3, 4]] and SyntaxError[1, [2, 3, 4]] and { name: "Lydia", age: 21 }[1, 2, 3, 4] and { name: "Lydia", age: 21 }Error and { name: "Lydia", age: 21 } The getList function receives an array as its argument. Between the parentheses of the getList function, we destructure this array right away. You could see this as:
[x, ...y] = [1, 2, 3, 4]
With the rest parameter ...y , we put all "remaining" arguments in an array. The remaining arguments are 2 , 3 and 4 in this case. The value of y is an array, containing all the rest parameters. The value of x is equal to 1 in this case, so when we log [x, y] , [1, [2, 3, 4]] gets logged.
The getUser function receives an object. With arrow functions, we don't have to write curly brackets if we just return one value. However, if you want to instantly return an object from an arrow function, you have to write it between parentheses, otherwise everything between the two braces will be interpreted as a block statement. In this case the code between the braces is not a valid JavaScript code, so a SyntaxError gets thrown.
The following function would have returned an object:
const getUser = user => ({ name: user.name, age: user.age })
const name = 'Lydia' ;
console . log ( name ( ) ) ;SyntaxErrorReferenceErrorTypeErrorundefined The variable name holds the value of a string, which is not a function, and thus cannot be invoked.
TypeErrors get thrown when a value is not of the expected type. JavaScript expected name to be a function since we're trying to invoke it. It was a string however, so a TypeError gets thrown: name is not a function!
SyntaxErrors get thrown when you've written something that isn't valid JavaScript, for example when you've written the word return as retrun . ReferenceErrors get thrown when JavaScript isn't able to find a reference to a value that you're trying to access.
// ? This is my 100th question! ?
const output = ` ${ [ ] && 'Im' } possible!
You should ${ '' && `n't` } see a therapist after so much JavaScript lol` ;possible! You should see a therapist after so much JavaScript lolImpossible! You should see a therapist after so much JavaScript lolpossible! You shouldn't see a therapist after so much JavaScript lolImpossible! You shouldn't see a therapist after so much JavaScript lol [] is a truthy value. With the && operator, the right-hand value will be returned if the left-hand value is a truthy value. In this case, the left-hand value [] is a truthy value, so "Im' gets returned.
"" is a falsy value. If the left-hand value is falsy, nothing gets returned. n't doesn't get returned.
const one = false || { } || null ;
const two = null || false || '' ;
const three = [ ] || 0 || true ;
console . log ( one , two , three ) ;false null []null "" true{} "" []null null true With the || operator, we can return the first truthy operand. If all values are falsy, the last operand gets returned.
(false || {} || null) : the empty object {} is a truthy value. This is the first (and only) truthy value, which gets returned. one is equal to {} .
(null || false || "") : all operands are falsy values. This means that the last operand, "" gets returned. two is equal to "" .
([] || 0 || "") : the empty array [] is a truthy value. This is the first truthy value, which gets returned. three is equal to [] .
const myPromise = ( ) => Promise . resolve ( 'I have resolved!' ) ;
function firstFunction ( ) {
myPromise ( ) . then ( res => console . log ( res ) ) ;
console . log ( 'second' ) ;
}
async function secondFunction ( ) {
console . log ( await myPromise ( ) ) ;
console . log ( 'second' ) ;
}
firstFunction ( ) ;
secondFunction ( ) ;I have resolved! , second and I have resolved! , secondsecond , I have resolved! and second , I have resolved!I have resolved! , second and second , I have resolved!second , I have resolved! and I have resolved! , secondWith a promise, we basically say I want to execute this function, but I'll put it aside for now while it's running since this might take a while. Only when a certain value is resolved (or rejected), and when the call stack is empty, I want to use this value.
We can get this value with both .then and the await keywords in an async function. Although we can get a promise's value with both .then and await , they work a bit differently.
In the firstFunction , we (sort of) put the myPromise function aside while it was running, but continued running the other code, which is console.log('second') in this case. Then, the function resolved with the string I have resolved , which then got logged after it saw that the callstack was empty.
With the await keyword in secondFunction , we literally pause the execution of an async function until the value has been resolved before moving to the next line.
This means that it waited for the myPromise to resolve with the value I have resolved , and only once that happened, we moved to the next line: second got logged.
const set = new Set ( ) ;
set . add ( 1 ) ;
set . add ( 'Lydia' ) ;
set . add ( { name : 'Lydia' } ) ;
for ( let item of set ) {
console . log ( item + 2 ) ;
}3 , NaN , NaN3 , 7 , NaN3 , Lydia2 , [object Object]2"12" , Lydia2 , [object Object]2 The + operator is not only used for adding numerical values, but we can also use it to concatenate strings. Whenever the JavaScript engine sees that one or more values are not a number, it coerces the number into a string.
The first one is 1 , which is a numerical value. 1 + 2 returns the number 3.
However, the second one is a string "Lydia" . "Lydia" is a string and 2 is a number: 2 gets coerced into a string. "Lydia" and "2" get concatenated, which results in the string "Lydia2" .
{ name: "Lydia" } is an object. Neither a number nor an object is a string, so it stringifies both. Whenever we stringify a regular object, it becomes "[object Object]" . "[object Object]" concatenated with "2" becomes "[object Object]2" .
Promise . resolve ( 5 ) ;5Promise {<pending>: 5}Promise {<fulfilled>: 5}Error We can pass any type of value we want to Promise.resolve , either a promise or a non-promise. The method itself returns a promise with the resolved value ( <fulfilled> ). If you pass a regular function, it'll be a resolved promise with a regular value. If you pass a promise, it'll be a resolved promise with the resolved value of that passed promise.
In this case, we just passed the numerical value 5 . It returns a resolved promise with the value 5 .
function compareMembers ( person1 , person2 = person ) {
if ( person1 !== person2 ) {
console . log ( 'Not the same!' ) ;
} else {
console . log ( 'They are the same!' ) ;
}
}
const person = { name : 'Lydia' } ;
compareMembers ( person ) ;Not the same!They are the same!ReferenceErrorSyntaxError Objects are passed by reference. When we check objects for strict equality ( === ), we're comparing their references.
We set the default value for person2 equal to the person object, and passed the person object as the value for person1 .
This means that both values have a reference to the same spot in memory, thus they are equal.
The code block in the else statement gets run, and They are the same! gets logged.
const colorConfig = {
red : true ,
blue : false ,
green : true ,
black : true ,
yellow : false ,
} ;
const colors = [ 'pink' , 'red' , 'blue' ] ;
console . log ( colorConfig . colors [ 1 ] ) ;truefalseundefinedTypeError In JavaScript, we have two ways to access properties on an object: bracket notation, or dot notation. In this example, we use dot notation ( colorConfig.colors ) instead of bracket notation ( colorConfig["colors"] ).
With dot notation, JavaScript tries to find the property on the object with that exact name. In this example, JavaScript tries to find a property called colors on the colorConfig object. There is no property called colors , so this returns undefined . Then, we try to access the value of the first element by using [1] . We cannot do this on a value that's undefined , so it throws a TypeError : Cannot read property '1' of undefined .
JavaScript interprets (or unboxes) statements. When we use bracket notation, it sees the first opening bracket [ and keeps going until it finds the closing bracket ] . Only then, it will evaluate the statement. If we would've used colorConfig[colors[1]] , it would have returned the value of the red property on the colorConfig object.
console . log ( '❤️' === '❤️' ) ;truefalse Under the hood, emojis are unicodes. The unicodes for the heart emoji is "U+2764 U+FE0F" . These are always the same for the same emojis, so we're comparing two equal strings to each other, which returns true.
const emojis = [ '' , '?' , '?' ] ;
emojis . map ( x => x + '' ) ;
emojis . filter ( x => x !== '?' ) ;
emojis . find ( x => x !== '?' ) ;
emojis . reduce ( ( acc , cur ) => acc + '' ) ;
emojis . slice ( 1 , 2 , '' ) ;
emojis . splice ( 1 , 2 , '' ) ;All of themmap reduce slice splicemap slice splicesplice With splice method, we modify the original array by deleting, replacing or adding elements. In this case, we removed 2 items from index 1 (we removed '?' and '?' ) and added the emoji instead.
map , filter and slice return a new array, find returns an element, and reduce returns a reduced value.
const food = [ '?' , '?' , '?' , '?' ] ;
const info = { favoriteFood : food [ 0 ] } ;
info . favoriteFood = '?' ;
console . log ( food ) ;['?', '?', '?', '?']['?', '?', '?', '?']['?', '?', '?', '?', '?']ReferenceError We set the value of the favoriteFood property on the info object equal to the string with the pizza emoji, '?' . A string is a primitive data type. In JavaScript, primitive data types don't interact by reference.
In JavaScript, primitive data types (everything that's not an object) interact by value . In this case, we set the value of the favoriteFood property on the info object equal to the value of the first element in the food array, the string with the pizza emoji in this case ( '?' ). A string is a primitive data type, and interact by value (see my blogpost if you're interested in learning more)
Then, we change the value of the favoriteFood property on the info object. The food array hasn't changed, since the value of favoriteFood was merely a copy of the value of the first element in the array, and doesn't have a reference to the same spot in memory as the element on food[0] . When we log food, it's still the original array, ['?', '?', '?', '?'] .
JSON . parse ( ) ; With the JSON.parse() method, we can parse JSON string to a JavaScript value.
// Stringifying a number into valid JSON, then parsing the JSON string to a JavaScript value:
const jsonNumber = JSON . stringify ( 4 ) ; // '4'
JSON . parse ( jsonNumber ) ; // 4
// Stringifying an array value into valid JSON, then parsing the JSON string to a JavaScript value:
const jsonArray = JSON . stringify ( [ 1 , 2 , 3 ] ) ; // '[1, 2, 3]'
JSON . parse ( jsonArray ) ; // [1, 2, 3]
// Stringifying an object into valid JSON, then parsing the JSON string to a JavaScript value:
const jsonArray = JSON . stringify ( { name : 'Lydia' } ) ; // '{"name":"Lydia"}'
JSON . parse ( jsonArray ) ; // { name: 'Lydia' } let name = 'Lydia' ;
function getName ( ) {
console . log ( name ) ;
let name = 'Sarah' ;
}
getName ( ) ;undefinedReferenceError Each function has its own execution context (or scope ). The getName function first looks within its own context (scope) to see if it contains the variable name we're trying to access. In this case, the getName function contains its own name variable: we declare the variable name with the let keyword, and with the value of 'Sarah' .
Variables with the let keyword (and const ) are hoisted, but unlike var , don't get initialized . They are not accessible before the line we declare (initialize) them. This is called the "temporal dead zone". When we try to access the variables before they are declared, JavaScript throws a ReferenceError .
If we wouldn't have declared the name variable within the getName function, the javascript engine would've looked down the scope chain . The outer scope has a variable called name with the value of Lydia . In that case, it would've logged Lydia .
let name = 'Lydia' ;
function getName ( ) {
console . log ( name ) ;
}
getName ( ) ; // Lydia function * generatorOne ( ) {
yield [ 'a' , 'b' , 'c' ] ;
}
function * generatorTwo ( ) {
yield * [ 'a' , 'b' , 'c' ] ;
}
const one = generatorOne ( ) ;
const two = generatorTwo ( ) ;
console . log ( one . next ( ) . value ) ;
console . log ( two . next ( ) . value ) ;a and aa and undefined['a', 'b', 'c'] and aa and ['a', 'b', 'c'] With the yield keyword, we yield values in a generator function. With the yield* keyword, we can yield values from another generator function, or iterable object (for example an array).
In generatorOne , we yield the entire array ['a', 'b', 'c'] using the yield keyword. The value of value property on the object returned by the next method on one ( one.next().value ) is equal to the entire array ['a', 'b', 'c'] .
console . log ( one . next ( ) . value ) ; // ['a', 'b', 'c']
console . log ( one . next ( ) . value ) ; // undefined In generatorTwo , we use the yield* keyword. This means that the first yielded value of two , is equal to the first yielded value in the iterator. The iterator is the array ['a', 'b', 'c'] . The first yielded value is a , so the first time we call two.next().value , a is returned.
console . log ( two . next ( ) . value ) ; // 'a'
console . log ( two . next ( ) . value ) ; // 'b'
console . log ( two . next ( ) . value ) ; // 'c'
console . log ( two . next ( ) . value ) ; // undefined console . log ( ` ${ ( x => x ) ( 'I love' ) } to program` ) ;I love to programundefined to program${(x => x)('I love') to programTypeError Expressions within template literals are evaluated first. This means that the string will contain the returned value of the expression, the immediately invoked function (x => x)('I love') in this case. We pass the value 'I love' as an argument to the x => x arrow function. x is equal to 'I love' , which gets returned. This results in I love to program .
let config = {
alert : setInterval ( ( ) => {
console . log ( 'Alert!' ) ;
} , 1000 ) ,
} ;
config = null ;setInterval callback won't be invokedsetInterval callback gets invoked oncesetInterval callback will still be called every secondconfig.alert() , config is null Normally when we set objects equal to null , those objects get garbage collected as there is no reference anymore to that object. However, since the callback function within setInterval is an arrow function (thus bound to the config object), the callback function still holds a reference to the config object. As long as there is a reference, the object won't get garbage collected. Since this is an interval, setting config to null or delete -ing config.alert won't garbage-collect the interval, so the interval will still be called. It should be cleared with clearInterval(config.alert) to remove it from memory. Since it was not cleared, the setInterval callback function will still get invoked every 1000ms (1s).
'Hello world!' ? const myMap = new Map ( ) ;
const myFunc = ( ) => 'greeting' ;
myMap . set ( myFunc , 'Hello world!' ) ;
//1
myMap . get ( 'greeting' ) ;
//2
myMap . get ( myFunc ) ;
//3
myMap . get ( ( ) => 'greeting' ) ; When adding a key/value pair using the set method, the key will be the value of the first argument passed to the set function, and the value will be the second argument passed to the set function. The key is the function () => 'greeting' in this case, and the value 'Hello world' . myMap is now { () => 'greeting' => 'Hello world!' } .
1 is wrong, since the key is not 'greeting' but () => 'greeting' . 3 is wrong, since we're creating a new function by passing it as a parameter to the get method. Object interacts by reference . Functions are objects, which is why two functions are never strictly equal, even if they are identical: they have a reference to a different spot in memory.
const person = {
name : 'Lydia' ,
age : 21 ,
} ;
const changeAge = ( x = { ... person } ) => ( x . age += 1 ) ;
const changeAgeAndName = ( x = { ... person } ) => {
x . age += 1 ;
x . name = 'Sarah' ;
} ;
changeAge ( person ) ;
changeAgeAndName ( ) ;
console . log ( person ) ;{name: "Sarah", age: 22}{name: "Sarah", age: 23}{name: "Lydia", age: 22}{name: "Lydia", age: 23} Both the changeAge and changeAgeAndName functions have a default parameter, namely a newly created object { ...person } . This object has copies of all the key/values in the person object.
First, we invoke the changeAge function and pass the person object as its argument. This function increases the value of the age property by 1. person is now { name: "Lydia", age: 22 } .
Then, we invoke the changeAgeAndName function, however we don't pass a parameter. Instead, the value of x is equal to a new object: { ...person } . Since it's a new object, it doesn't affect the values of the properties on the person object. person is still equal to { name: "Lydia", age: 22 } .
6 ? function sumValues ( x , y , z ) {
return x + y + z ;
}sumValues([...1, 2, 3])sumValues([...[1, 2, 3]])sumValues(...[1, 2, 3])sumValues([1, 2, 3]) With the spread operator ... , we can spread iterables to individual elements. The sumValues function receives three arguments: x , y and z . ...[1, 2, 3] will result in 1, 2, 3 , which we pass to the sumValues function.
let num = 1 ;
const list = [ '?' , '?' , '?' , '?' ] ;
console . log ( list [ ( num += 1 ) ] ) ;??SyntaxErrorReferenceError With the += operator, we're incrementing the value of num by 1 . num had the initial value 1 , so 1 + 1 is 2 . The item on the second index in the list array is ?, console.log(list[2]) prints ?.
const person = {
firstName : 'Lydia' ,
lastName : 'Hallie' ,
pet : {
name : 'Mara' ,
breed : 'Dutch Tulip Hound' ,
} ,
getFullName ( ) {
return ` ${ this . firstName } ${ this . lastName } ` ;
} ,
} ;
console . log ( person . pet ?. name ) ;
console . log ( person . pet ?. family ?. name ) ;
console . log ( person . getFullName ?. ( ) ) ;
console . log ( member . getLastName ?. ( ) ) ;undefined undefined undefined undefinedMara undefined Lydia Hallie ReferenceErrorMara null Lydia Hallie nullnull ReferenceError null ReferenceError With the optional chaining operator ?. , we no longer have to explicitly check whether the deeper nested values are valid or not. If we're trying to access a property on an undefined or null value ( nullish ), the expression short-circuits and returns undefined .
person.pet?.name : person has a property named pet : person.pet is not nullish. It has a property called name , and returns Mara . person.pet?.family?.name : person has a property named pet : person.pet is not nullish. pet does not have a property called family , person.pet.family is nullish. The expression returns undefined . person.getFullName?.() : person has a property named getFullName : person.getFullName() is not nullish and can get invoked, which returns Lydia Hallie . member.getLastName?.() : variable member is non-existent therefore a ReferenceError gets thrown!
const groceries = [ 'banana' , 'apple' , 'peanuts' ] ;
if ( groceries . indexOf ( 'banana' ) ) {
console . log ( 'We have to buy bananas!' ) ;
} else {
console . log ( `We don't have to buy bananas!` ) ;
}undefined1 We passed the condition groceries.indexOf("banana") to the if-statement. groceries.indexOf("banana") returns 0 , which is a falsy value. Since the condition in the if-statement is falsy, the code in the else block runs, and We don't have to buy bananas! gets logged.
const config = {
languages : [ ] ,
set language ( lang ) {
return this . languages . push ( lang ) ;
} ,
} ;
console . log ( config . language ) ;function language(lang) { this.languages.push(lang }0[]undefined The language method is a setter . Setters don't hold an actual value, their purpose is to modify properties. When calling a setter method, undefined gets returned.
const name = 'Lydia Hallie' ;
console . log ( ! typeof name === 'object' ) ;
console . log ( ! typeof name === 'string' ) ;false truetrue falsefalse falsetrue true typeof name returns "string" . The string "string" is a truthy value, so !typeof name returns the boolean value false . false === "object" and false === "string" both return false .
(If we wanted to check whether the type was (un)equal to a certain type, we should've written !== instead of !typeof )
const add = x => y => z => {
console . log ( x , y , z ) ;
return x + y + z ;
} ;
add ( 4 ) ( 5 ) ( 6 ) ;4 5 66 5 44 function functionundefined undefined 6 The add function returns an arrow function, which returns an arrow function, which returns an arrow function (still with me?). The first function receives an argument x with the value of 4 . We invoke the second function, which receives an argument y with the value 5 . Then we invoke the third function, which receives an argument z with the value 6 . When we're trying to access the value x , y and z within the last arrow function, the JS engine goes up the scope chain in order to find the values for x and y accordingly. This returns 4 5 6 .
async function * range ( start , end ) {
for ( let i = start ; i <= end ; i ++ ) {
yield Promise . resolve ( i ) ;
}
}
( async ( ) => {
const gen = range ( 1 , 3 ) ;
for await ( const item of gen ) {
console . log ( item ) ;
}
} ) ( ) ;Promise {1} Promise {2} Promise {3}Promise {<pending>} Promise {<pending>} Promise {<pending>}1 2 3undefined undefined undefined The generator function range returns an async object with promises for each item in the range we pass: Promise{1} , Promise{2} , Promise{3} . We set the variable gen equal to the async object, after which we loop over it using a for await ... of loop. We set the variable item equal to the returned Promise values: first Promise{1} , then Promise{2} , then Promise{3} . Since we're awaiting the value of item , the resolved promise, the resolved values of the promises get returned: 1 , 2 , then 3 .
const myFunc = ( { x , y , z } ) => {
console . log ( x , y , z ) ;
} ;
myFunc ( 1 , 2 , 3 ) ;1 2 3{1: 1} {2: 2} {3: 3}{ 1: undefined } undefined undefinedundefined undefined undefined myFunc expects an object with properties x , y and z as its argument. Since we're only passing three separate numeric values (1, 2, 3) instead of one object with properties x , y and z ({x: 1, y: 2, z: 3}), x , y and z have their default value of undefined .
function getFine ( speed , amount ) {
const formattedSpeed = new Intl . NumberFormat ( 'en-US' , {
style : 'unit' ,
unit : 'mile-per-hour'
} ) . format ( speed ) ;
const formattedAmount = new Intl . NumberFormat ( 'en-US' , {
style : 'currency' ,
currency : 'USD'
} ) . format ( amount ) ;
return `The driver drove ${ formattedSpeed } and has to pay ${ formattedAmount } ` ;
}
console . log ( getFine ( 130 , 300 ) ) With the Intl.NumberFormat method, we can format numeric values to any locale. We format the numeric value 130 to the en-US locale as a unit in mile-per-hour , which results in 130 mph . The numeric value 300 to the en-US locale as a currency in USD results in $300.00 .
const spookyItems = [ '?' , '?' , '?' ] ;
( { item : spookyItems [ 3 ] } = { item : '?' } ) ;
console . log ( spookyItems ) ;["?", "?", "?"]["?", "?", "?", "?"]["?", "?", "?", { item: "?" }]["?", "?", "?", "[object Object]"] By destructuring objects, we can unpack values from the right-hand object, and assign the unpacked value to the value of the same property name on the left-hand object. In this case, we're assigning the value "?" to spookyItems[3] . This means that we're modifying the spookyItems array, we're adding the "?" 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 satu. 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.
