Saya post pertanyaan pilihan ganda ke Instagram stories saya, yang saya post juga di sini ! update terakhir: December 24th
Mulai tingkat dasar ke mahir: tes seberapa paham kamu tentang javascript, segarkan sedikit pengetahuan kamu, atau bersiap-siap untuk coding interview kamu! 💪 🚀 Saya update repo ini secara berkala dengan pertanyaan baru. Saya masukkan jawaban dibagian yang tersembunyi di bawah pertanyaan, cukup klik pada bagian itu untuk menampilkannya. Pertanyaan ini hanya untuk bersenang-senang, Semoga berhasil ❤️
Jangan sungkan untuk terhubung dengan saya! 😊
Instagram || Twitter || LinkedIn || Blog
Lihat 20 Terjemahan yang tersedia 🇪🇸🇮🇹🇩🇪 🇫🇷🇷🇺🇨🇳🇵🇹🇽🇰
function sayHi() {
console.log(name);
console.log(age);
var name = 'Lydia';
let age = 21;
}
sayHi();- A:
Lydiadanundefined - B:
LydiadanReferenceError - C:
ReferenceErrordan21 - D:
undefineddanReferenceError
Jawaban
Di dalam function, kita membuat sebuah variabel name dan variabel tersebut di deklarasikan menggunakan var. Artinya variable tersebut di hoisting (dalam fase pembuatan ini menggunakan memory penyimpanan) dengan isi standar-nya undefined, saat javascript mengeksekusi baris code pembuatan variabel-nya. variabel name isinya masih undefined, jadi isi dari variabel tersebut undefined
Mendeklarasikan varibel menggunakan let (dan const) juga terkena hoisting, tidak seperti var, variabel declaration let dan const tidak ditentukan isi standar-nya. let dan const tidak bisa diakses sebelum di tentukan dulu isi-nya. Kejadian ini disebut "temporal dead zone". Saat kita mencoba memanggil variabel yang belum ditentukan isi-nya, Javascript mengeluarkan error 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);
}- A:
0 1 2and0 1 2 - B:
0 1 2and3 3 3 - C:
3 3 3and0 1 2
Jawaban
Karena antrean peristiwa di JavaScript, fungsi callback setTimeout disebut after loop telah dijalankan. Karena variabel i di loop pertama dideklarasikan menggunakan kata kunci var, nilai ini adalah global. Selama perulangan, kita menambah nilai i sebesar 1 setiap kali, menggunakan operator unary++. Pada saat fungsi callback setTimeout dipanggil, i sama dengan 3 di contoh pertama.
Pada perulangan kedua, variabel i dideklarasikan menggunakan kata kunci let: variabel yang dideklarasikan dengan kata kunci let (dan const) memiliki cakupan blok (blok adalah apa saja di antara {}). Selama setiap iterasi, i akan memiliki nilai baru, dan setiap nilai dicakup 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());- A:
20dan62.83185307179586 - B:
20danNaN - C:
20dan63 - D:
NaNdan63
Jawaban
Perhatikan pada nilai 'diameter' adalah fungsi biasa, sedangkan nilai 'perimeter' yaitu fungsi panah.
Dengan fungsi panah, kata kunci 'this' merujuk ke cakupan sekitarnya saat ini, tidak seperti fungsi biasa. Ini berarti bahwa ketika kita memanggil 'perimeter' itu tidak mengacu pada objek bentuk, tetapi pada lingkup sekitarnya.
Tidak ada nilai 'radius' pada objek itu, yang mengembalikan 'tidak ditentukan'.
+true;
!'Lydia';- A:
1danfalse - B:
falsedanNaN - C:
falsedanfalse
Jawaban
Tia unary plus mencoba mengonversi operan menjadi angka. true adalah 1, dan false adalah 0.
String "'Lydia'adalah nilai yang benar. Apa yang sebenarnya kami tanyakan adalah "apakah nilai kebenaran ini salah?". Ini mengembalikansalah`.
const bird = {
size: 'small',
};
const mouse = {
name: 'Mickey',
small: true,
};- A:
mouse.bird.sizetidak benar - B:
mouse[bird.size]tidak benar - C:
mouse[bird["size"]]tidak benar - D: Semua jawaban benar
Jawaban
Pada JavaScript, semua kunci objek adalah string (kecuali jika itu berupa Simbol). Meskipun kita mungkin tidak mengetiknya sebagai string, tetap saja mereka selalu berubah menjadi string didalamnya.
JavaScript menginterpretasikan (atau membuka) pernyataan-pernyataan. Saat kita menggunakan notasi kurung siku, ia melihat kurung buka pertama [ dan terus berjalan sampai menemukan kurung tutup ]. Baru setelah itu akan mengevaluasi pernyataannya. mouse[bird.size]: Pertama, ini mengevaluasi bird.size, yang mana "small". mouse["small"] mengembalikan nilai true.
Namun, dengan notasi dot (.), hal ini tidak terjadi. mouse tidak memiliki kunci dengan nama bird, yang menyebabkan mouse.bird bernilai undefined. Kemudian, kita meminta size untuk menggunakan notasi dot (.): mouse.bird.size. Kita mengetahui bahwa mouse.bird bernilai undefined, yang sebenarnya kita minta adalah undefined.size. Yang mana hal ini tidak valid, dan akan memunculkan 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);- A:
Hello - B:
Hey! - C:
undefined - D:
ReferenceError - E:
TypeError
Jawaban
Dalam JavaScript, semua objek berinteraksi dengan reference saat menyetelnya agar sama satu sama lain.
Pertama, variabel c menyimpan nilai ke sebuah objek. Nanti, kita 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);- A:
truefalsetrue - B:
falsefalsetrue - C:
truefalsefalse - D:
falsetruetrue
Jawaban
new Number() adalah konstruktor fungsi bawaan pada JavaScript. Meskipun hasilnya terlihat seperti integer, namun sebenarnya itu bukan integer: aslinya memiliki banyak fitur tambahan dan merupakan sebuah objek.
Saat kita menggunakan operator ==, hal ini hanya akan memeriksa bahwa keduanya memiliki nilai yang sama. Pada kasus ini kedua variabel tersebut memiliki nilai yang sama, yaitu 3, maka akan mengembalikan nilai true.
Namun, saat kita menggunakan operator ===, operator ini memeriksa bahwa kedua variabel memiliki nilai dan tipe yang sama. Bagaimanapun: new Number() bukanlah sebuah integer, ini adalah sebuah object. Keduanya akan mengembalikan nilai 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'));- A:
orange - B:
purple - C:
green - D:
TypeError
Jawaban
Fungsi colorChange adalah statis. Metode statis dirancang hanya dapat aktif pada kontruktor dimana fungsi itu dibuat, dan tidak bisa dibawa ke-turunannya. Kita tahu bahwa freddie adalah sebuah turunan, maka fungsi itu tidak bisa turun, dan tidak tersedia pada instance freddie: sebuah pesan TypeError akan dikembalikan
let greeting;
greetign = {}; // Typo!
console.log(greetign);- A:
{} - B:
ReferenceError: greetign is not defined - C:
undefined
Jawaban
Ini mencatat objek, karena kita baru saja membuat objek kosong di objek global! Saat kita salah mengetik greeting sebagai greetign, interpreter JS sebenarnya melihat ini sebagai global.greetign = {} (atau window.greetign = {} di browser).
Untuk menghindari hal ini, kita bisa menggunakan " use strict ". Ini memastikan bahwa Anda telah mendeklarasikan variabel sebelum menetapkannya dengan apa pun.
function bark() {
console.log('Woof!');
}
bark.animal = 'dog';- A: Nothing, this is totally fine!
- B:
SyntaxError. You cannot add properties to a function this way. - C:
"Woof"gets logged. - D:
ReferenceError
Jawaban
Ini dimungkinkan dalam JavaScript, karena fungsi adalah objek! (Segala sesuatu selain tipe primitif adalah objek)
Fungsi adalah jenis objek khusus. Kode yang Anda tulis sendiri bukanlah fungsi sebenarnya. Fungsinya adalah objek dengan properti. Properti ini tidak dapat dipanggil.
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());- A:
TypeError - B:
SyntaxError - C:
Lydia Hallie - D:
undefinedundefined
Jawaban
Anda tidak dapat menambahkan properti ke constructor seperti yang Anda lakukan dengan objek biasa. Jika Anda ingin menambahkan fitur ke semua objek sekaligus, Anda harus menggunakan prototipe sebagai gantinya. Jadi dalam kasus ini:
Person.prototype.getFullName = function() {
return `${this.firstName} ${this.lastName}`;
};Akan membuat member.getFullName() berfungsi. Mengapa ini bermanfaat? Katakanlah kita menambahkan metode ini ke konstruktor itu sendiri. Mungkin tidak setiap instance Person membutuhkan metode ini. Ini akan membuang banyak ruang memori, karena mereka masih memiliki properti itu, yang mengambil ruang memori untuk setiap instance. Sebaliknya, jika kita hanya menambahkannya ke prototipe, kita hanya memilikinya di satu tempat di memori, namun mereka semua memiliki akses ke sana!
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);- A:
Person {firstName: "Lydia", lastName: "Hallie"}danundefined - B:
Person {firstName: "Lydia", lastName: "Hallie"}danPerson {firstName: "Sarah", lastName: "Smith"} - C:
Person {firstName: "Lydia", lastName: "Hallie"}dan{} - D:
Person {firstName: "Lydia", lastName: "Hallie"}danReferenceError
Jawaban
Pada sarah, kita tidak menggunakan kata kunci new. Saat menggunakan new, Ini mengacu pada object kosong yang kita buat. Namun, jika Anda tidak menambahkan new ini merujuk pada global object!
Kita tahu bahwa this.firstName setara dengan "Sarah" dan this.lastName sama dengan "Smith". Apa yang sebenarnya kami lakukan adalah mendefinisikan global.firstName = 'Sarah' dan global.lastName = 'Smith'. sarah sendiri dibiarkan undefined, karena kita tidak mengembalikan nilai dari fungsi Person.
- A: Target > Capturing > Bubbling
- B: Bubbling > Target > Capturing
- C: Target > Bubbling > Capturing
- D: Capturing > Target > Bubbling
Jawaban
Selama fase capturing, event melewati elemen ancestor hingga ke elemen target. Kemudian mencapai element target, dan bubbling dimulai.
- A: true
- B: false
Jawaban
Semua objek memiliki prototypes, kecuali objek dasar. Objek dasar adalah objek yang dibuat oleh pengguna, atau objek yang dibuat dengan menggunakan kata kunci baru. 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 di objek Anda, JavaScript berada di rantai prototipe dan menemukannya di sana, yang membuatnya dapat diakses untuk Anda.
function sum(a, b) {
return a + b;
}
sum(1, '2');- A:
NaN - B:
TypeError - C:
"12" - D:
3
Jawaban
JavaScript adalah Bahasa yang bersifat dinamis: yang tidak menentukan jenis variabel tertentu. Values dapat secara otomatis diubah menjadi jenis lain tanpa Anda sadari, yang disebut implicit type coercion. Coercion adalah mengubah dari satu jenis ke jenis lainnya.
Pada contoh ini, JavaScript mengubah number 1 menjadi sebuah string, agar fungsi tersebut masuk akal dan mengembalikan nilai. Selama penambahan tipe numerik (1) dan tipe string ('2'), angka tersebut diperlakukan sebagai string. Kita bisa menggabungkan string seperti "Hello" + "World", jadi yang terjadi di sini adalah "1" + "2" yang mengembalikan "12".
let number = 0;
console.log(number++);
console.log(++number);
console.log(number);- A:
112 - B:
122 - C:
022 - D:
012
Jawaban
Akhiran operator unary ++:
- Mengembalikan nilai (ini mengembalikan
0) - Menambahkan nilai (angkanya sekarang
1)
Awalan operator unary ++:
- Menambah nilai (angkanya sekarang
2) - Mengembalikan nilai (ini mengembalikan
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`;- A:
"Lydia"21["", " is ", " years old"] - B:
["", " is ", " years old"]"Lydia"21 - C:
"Lydia"["", " is ", " years old"]21
Jawaban
Jika Anda menggunakan literal template yang diberi tag, nilai argumen pertama selalu berupa array bernilai string. Argumen yang tersisa mendapatkan nilai dari ekspresi yang diteruskan!
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 });- A:
You are an adult! - B:
You are still an adult. - C:
Hmm.. You don't have an age I guess
Jawaban
Saat menguji persamaan, primitif dibandingkan dengan nilainya, sedangkan objek dibandingkan dengan referensinya. JavaScript memeriksa apakah objek memiliki referensi ke lokasi yang sama di memori.
Dua objek yang kita bandingkan tidak memiliki itu: objek yang kita lewati sebagai parameter merujuk ke lokasi yang berbeda dalam memori dari objek yang kita gunakan untuk memeriksa persamaan.
Inilah mengapa {age: 18} === {age: 18} dan {age: 18} == {age: 18} mengembalikan nilai false.
function getAge(...args) {
console.log(typeof args);
}
getAge(21);- A:
"number" - B:
"array" - C:
"object" - D:
"NaN"
Jawaban
Parameter sisanya (... args.) Memungkinkan kita "mengumpulkan" semua argumen yang tersisa ke dalam sebuah array. Array adalah sebuah objek, jadi typeof args mengembalikan "objek"
function getAge() {
'use strict';
age = 21;
console.log(age);
}
getAge();- A:
21 - B:
undefined - C:
ReferenceError - D:
TypeError
Jawaban
Dengan " use strict ", Anda dapat memastikan bahwa Anda tidak mendeklarasikan variabel global secara tidak sengaja. Kita tidak pernah mendeklarasikan variabel age, dan karena kita menggunakan " use strict ", ini akan memunculkan kesalahan referensi. Jika kita tidak menggunakan " use strict ", ini akan berhasil, karena properti age akan ditambahkan ke objek global.
const sum = eval('10*10+5');- A:
105 - B:
"105" - C:
TypeError - D:
"10*10+5"
Jawaban
eval mengevaluasi kode yang berlalu sebagai string. Jika itu adalah ekspresi, seperti dalam kasus ini, itu mengevaluasi ekspresi. Ungkapannya adalah 10 * 10 + 5. Ini kembali nomor 105.
sessionStorage.setItem('cool_secret', 123);- A: Selamanya, data tersebut tidak akan hilang.
- B: Saat pengguna menutup tab browser.
- C: Saat pengguna menutup seluruh browser, tidak hanya tab.
- D: Saat pengguna mematikan komputernya.
Jawaban
Data yang disimpan di sessionStorage akan dihapus setelah menutup tab.
Jika anda menggunakan localStorage, data tersebut akan tersimpan selamanya, kecuali misalnya method localStorage.clear() dipanggil.
var num = 8;
var num = 10;
console.log(num);- A:
8 - B:
10 - C:
SyntaxError - D:
ReferenceError
Jawaban
Dengan kata kunci var, anda dapat menyatakan beberapa variabel dengan nama yang sama. Variabelnya akan memegang nilai terakhir.
Anda tidak dapat melakukan ini dengan let atau const karena mereka block-scoped.
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);- A:
falsetruefalsetrue - B:
falsetruetruetrue - C:
truetruefalsetrue - D:
truetruetruetrue
Jawaban
All object keys (excluding Symbols) are strings under the hood, even if you don't type it yourself as a string. This is why obj.hasOwnProperty('1') also returns true.
It doesn't work that way for a set. There is no '1' in our set: set.has('1') returns false. It has the numeric type 1, set.has(1) returns true.
const obj = { a: 'one', b: 'two', a: 'three' };
console.log(obj);- A:
{ a: "one", b: "two" } - B:
{ b: "two", a: "three" } - C:
{ a: "three", b: "two" } - D:
SyntaxError
Jawaban
Jika anda memiliki dua kunci dengan nama yang sama, kunci akan diganti. Ini masih dalam posisi pertama, tetapi dengan nilai terakhir yang ditentukan.
26. The JavaScript global execution context creates two things for you: the global object, and the "this" keyword.
- A: true
- B: false
- C: it depends
Jawaban
The base execution context is the global execution context: it's what's accessible everywhere in your code.
for (let i = 1; i < 5; i++) {
if (i === 3) continue;
console.log(i);
}- A:
12 - B:
123 - C:
124 - D:
134
String.prototype.giveLydiaPizza = () => {
return 'Just give Lydia pizza already!';
};
const name = 'Lydia';
console.log(name.giveLydiaPizza())- A:
"Just give Lydia pizza already!" - B:
TypeError: not a function - C:
SyntaxError - D:
undefined
Jawaban
String adalah konstruksi dibangun, yang dapat kita tambahkan properti ke. Aku hanya menambahkan metode ke prototipe. String primitif string secara otomatis dikonversi menjadi objek string, 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]);- A:
123 - B:
456 - C:
undefined - D:
ReferenceError
Jawaban
Object keys are automatically converted into strings. We are trying to set an object as a key to object a, with the value of 123.
However, when we stringify an object, it becomes "[object Object]". So what we are saying here, is that a["object Object"] = 123. Then, we can try to do the same again. c is another object that we are implicitly stringifying. So then, a["object Object"] = 456.
Then, we log a[b], which is actually a["object Object"]. We just set that to 456, so it returns 456.
const foo = () => console.log('First');
const bar = () => setTimeout(() => console.log('Second'));
const baz = () => console.log('Third');
bar();
foo();
baz();- A:
FirstSecondThird - B:
FirstThirdSecond - C:
SecondFirstThird - D:
SecondThirdFirst
Jawaban
Kami memiliki fungsi setTimeout dan dimohonkan terlebih dahulu. Namun, itu login terakhir.
Hal ini karena di browsers, kita tidak hanya memiliki mesin waktu runtime, kita juga memiliki sesuatu yang disebut WebAPI. WebAPI memberi kita fungsi setTimeout, dan misalnya DOM.
Setelah callback (panggilan balik) didorong ke WebAPI, fungsi setTimeout itu sendiri (tetapi tidak panggilan balik) muncul dari tumpukan.
Sekarang, foo mendapat hambatan, dan "First" yang login.
foo yang muncul dari tumpukan, dan baz mendapat perantara. "Third" akan login.
WebAPI tidak bisa hanya menambahkan barang-barang ke tumpukan setiap kali siap. Sebaliknya, ia mendorong fungsi panggilan balik ke sesuatu yang disebut queue (antrian).
Di sinilah serangkaian acara mulai bekerja. Sebuah event loop (putaran kejadian/peristiwa) melihat tumpukan dan antrian tugas. Jika tumpukan kosong, itu mengambil hal pertama pada antrian dan mendorong ke tumpukan.
bar bisa dipanggil, "Second" akan login, 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>- A: Outer
div - B: Inner
div - C:
button - D: An array of all nested elements.
Jawaban
The deepest nested element that caused the event is the target of the event. You can stop bubbling by event.stopPropagation
<div onclick="console.log('div')">
<p onclick="console.log('p')">
Click here!
</p>
</div>- A:
pdiv - B:
divp - C:
p - D:
div
Jawaban
If we click p, we see two logs: p and div. During event propagation, there are 3 phases: capturing, target, and bubbling. By default, event handlers are executed in the bubbling phase (unless you set useCapture to true). It goes from the deepest nested element outwards.
const person = { name: 'Lydia' };
function sayHi(age) {
return `${this.name} is ${age}`;
}
console.log(sayHi.call(person, 21));
console.log(sayHi.bind(person, 21));- A:
undefined is 21Lydia is 21 - B:
functionfunction - C:
Lydia is 21Lydia is 21 - D:
Lydia is 21function
Jawaban
With both, we can pass the object to which we want the this keyword to refer to. However, .call is also executed immediately!
.bind. returns a copy of the function, but with a bound context! It is not executed immediately.
function sayHi() {
return (() => 0)();
}
console.log(typeof sayHi());- A:
"object" - B:
"number" - C:
"function" - D:
"undefined"
Jawaban
The sayHi function returns the returned value of the immediately invoked function (IIFE). This function returned 0, which is type "number".
FYI: there are only 7 built-in types: null, undefined, boolean, number, string, object, symbol, and bigint. "function" is not a type, since functions are objects, it's of type "object".
0;
new Number(0);
('');
(' ');
new Boolean(false);
undefined;- A:
0,'',undefined - B:
0,new Number(0),'',new Boolean(false),undefined - C:
0,'',new Boolean(false),undefined - D: All of them are falsy
Jawaban
Hanya ada enam nilai yang salah:
undefinednullNaN0''(string kosong)false
Konstruktor fungsi, seperti Number baru dan Boolean baru, benar.
console.log(typeof typeof 1);- A:
"number" - B:
"string" - C:
"object" - D:
"undefined"
const numbers = [1, 2, 3];
numbers[10] = 11;
console.log(numbers);- A:
[1, 2, 3, 7 x null, 11] - B:
[1, 2, 3, 11] - C:
[1, 2, 3, 7 x empty, 11] - D:
SyntaxError
Jawaban
Saat Anda menyetel nilai ke elemen dalam larik yang melebihi panjang larik, JavaScript membuat sesuatu yang disebut "slot kosong". Ini sebenarnya memiliki nilai tidak terdefinisi, tetapi Anda akan melihat sesuatu seperti:
[1, 2, 3, 7 x empty, 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);
})();- A:
1undefined2 - B:
undefinedundefinedundefined - C:
112 - D:
1undefinedundefined
Jawaban
The catch block receives the argument x. This is not the same x as the variable when we pass arguments. This variable x is block-scoped.
Later, we set this block-scoped variable equal to 1, and set the value of the variable y. Now, we log the block-scoped variable x, which is equal to 1.
Outside of the catch block, x is still undefined, and y is 2. When we want to console.log(x) outside of the catch block, it returns undefined, and y returns 2.
- A: primitive or object
- B: function or object
- C: trick question! only objects
- D: number or object
Jawaban
JavaScript only has primitive types and objects.
Primitive types are boolean, null, undefined, bigint, number, string, and symbol.
What differentiates a primitive from an object is that primitives do not have any properties or methods; however, you'll note that 'foo'.toUpperCase() evaluates to 'FOO' and does not result in a TypeError. This is because when you try to access a property or method on a primitive like a string, JavaScript will implicitly wrap the object using one of the wrapper classes, i.e. String, and then immediately discard the wrapper after the expression evaluates. All primitives except for null and undefined exhibit this behaviour.
[[0, 1], [2, 3]].reduce(
(acc, cur) => {
return acc.concat(cur);
},
[1, 2],
);- A:
[0, 1, 2, 3, 1, 2] - B:
[6, 1, 2] - C:
[1, 2, 0, 1, 2, 3] - D:
[1, 2, 6]
Jawaban
[1, 2] is our initial value. This is the value we start with, and the value of the very first acc. During the first round, acc is [1,2], and cur is [0, 1]. We concatenate them, which results in [1, 2, 0, 1].
Then, [1, 2, 0, 1] is acc and [2, 3] is cur. We concatenate them, and get [1, 2, 0, 1, 2, 3]
!!null;
!!'';
!!1;- A:
falsetruefalse - B:
falsefalsetrue - C:
falsetruetrue - D:
truetruefalse
Jawaban
null is falsy. !null returns true. !true returns false.
"" is falsy. !"" returns true. !true returns false.
1 is truthy. !1 returns false. !false returns true.
setInterval(() => console.log('Hi'), 1000);- A: a unique id
- B: the amount of milliseconds specified
- C: the passed function
- D:
undefined
Jawaban
Itu adalah mengembalikan sebuah id unik. id unik dapat digunakan untuk menghapus interval dengan menggunakan fungsi clearInterval()
[...'Lydia'];- A:
["L", "y", "d", "i", "a"] - B:
["Lydia"] - C:
[[], "Lydia"] - D:
[["L", "y", "d", "i", "a"]]
Jawaban
Sebuah string adalah iterable. Operator memetakan setiap karakter dari sebuah iterable ke dalam satu elemen.
function* generator(i) {
yield i;
yield i * 2;
}
const gen = generator(10);
console.log(gen.next().value);
console.log(gen.next().value);- A:
[0, 10], [10, 20] - B:
20, 20 - C:
10, 20 - D:
0, 10 dan 10, 20
Jawaban
Regular functions cannot be stopped mid-way after invocation. However, a generator function can be "stopped" midway, and later continue from where it stopped. Every time a generator function encounters a yield keyword, the function yields the value specified after it. Note that the generator function in that case doesn’t return the value, it yields the value.
First, we initialize the generator function with i equal to 10. We invoke the generator function using the next() method. The first time we invoke the generator function, i is equal to 10. It encounters the first yield keyword: it yields the value of i. The generator is now "paused", and 10 gets logged.
Then, we invoke the function again with the next() method. It starts to continue where it stopped previously, still with i equal to 10. Now, it encounters the next yield keyword, and yields i * 2. i is equal to 10, so it returns 10 * 2, which is 20. This results in 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));- A:
"one" - B:
"two" - C:
"two" "one" - D:
"one" "two"
Jawaban
When we pass multiple promises to the Promise.race method, it resolves/rejects the first promise that resolves/rejects. To the setTimeout method, we pass a timer: 500ms for the first promise (firstPromise), and 100ms for the second promise (secondPromise). This means that the secondPromise resolves first with the value of 'two'. res now holds the value of 'two', which gets logged.
let person = { name: 'Lydia' };
const members = [person];
person = null;
console.log(members);- A:
null - B:
[null] - C:
[{}] - D:
[{ name: "Lydia" }]
Jawaban
First, we declare a variable person with the value of an object that has a name property.
Then, we declare a variable called members. We set the first element of that array equal to the value of the person variable. Objects interact by reference when setting them equal to each other. When you assign a reference from one variable to another, you make a copy of that reference. (note that they don't have the same reference!)
Then, we set the variable person equal to null.
We are only modifying the value of the person variable, and not the first element in the array, since that element has a different (copied) reference to the object. The first element in members still holds its reference to the original object. When we log the members array, the first element still holds the value of the object, which gets logged.
const person = {
name: 'Lydia',
age: 21,
};
for (const item in person) {
console.log(item);
}- A:
{ name: "Lydia" }, { age: 21 } - B:
"name", "age" - C:
"Lydia", 21 - D:
["name", "Lydia"], ["age", 21]
Jawaban
With a for-in loop, we can iterate through object keys, in this case name and age. Under the hood, object keys are strings (if they're not a Symbol). On every loop, we set the value of item equal to the current key it’s iterating over. First, item is equal to name, and gets logged. Then, item is equal to age, which gets logged.
console.log(3 + 4 + '5');- A:
"345" - B:
"75" - C:
12 - D:
"12"
Jawaban
Operator associativity is the order in which the compiler evaluates the expressions, either left-to-right or right-to-left. This only happens if all operators have the same precedence. We only have one type of operator: +. For addition, the associativity is left-to-right.
3 + 4 gets evaluated first. This results in the number 7.
7 + '5' results in "75" because of coercion. JavaScript converts the number 7 into a string, see question 15. We can concatenate two strings using the +operator. "7" + "5" results in "75".
const num = parseInt('7*6', 10);- A:
42 - B:
"42" - C:
7 - D:
NaN
Jawaban
Only the first numbers in the string is returned. Based on the radix (the second argument in order to specify what type of number we want to parse it to: base 10, hexadecimal, octal, binary, etc.), the parseInt checks whether the characters in the string are valid. Once it encounters a character that isn't a valid number in the radix, it stops parsing and ignores the following characters.
* is not a valid number. It only parses "7" into the decimal 7. num now holds the value of 7.
[1, 2, 3].map(num => {
if (typeof num === 'number') return;
return num * 2;
});- A:
[] - B:
[null, null, null] - C:
[undefined, undefined, undefined] - D:
[ 3 x empty ]
Jawaban
When mapping over the array, the value of num is equal to the element it’s currently looping over. In this case, the elements are numbers, so the condition of the if statement typeof num === "number" returns true. The map function creates a new array and inserts the values returned from the function.
However, we don’t return a value. When we don’t return a value from the function, the function returns undefined. For every element in the array, the function block gets called, so for each element we return undefined.
function getInfo(member, year) {
member.name = 'Lydia';
year = '1998';
}
const person = { name: 'Sarah' };
const birthYear = '1997';
getInfo(person, birthYear);
console.log(person, birthYear);- A:
{ name: "Lydia" }, "1997" - B:
{ name: "Sarah" }, "1998" - C:
{ name: "Lydia" }, "1998" - D:
{ name: "Sarah" }, "1997"
Jawaban
Arguments are passed by value, unless their value is an object, then they're passed by reference. birthYear is passed by value, since it's a string, not an object. When we pass arguments by value, a copy of that value is created (see question 46).
The variable birthYear has a reference to the value "1997". The argument year also has a reference to the value "1997", but it's not the same value as birthYear has a reference to. When we update the value of year by setting year equal to "1998", we are only updating the value of year. birthYear is still equal to "1997".
The value of person is an object. The argument member has a (copied) reference to the same object. When we modify a property of the object member has a reference to, the value of person will also be modified, since they both have a reference to the same object. person's name property is now equal to the value "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();- A:
It worked! Hello world! - B:
Oh no an error: undefined - C:
SyntaxError: can only throw Error objects - D:
Oh no an error: Hello world!
Jawaban
With the throw statement, we can create custom errors. With this statement, you can throw exceptions. An exception can be a string, a number, a boolean or an object. In this case, our exception is the string 'Hello world'.
With the catch statement, we can specify what to do if an exception is thrown in the try block. An exception is thrown: the string 'Hello world'. e is now equal to that string, which we log. This results in 'Oh an error: Hello world'.
function Car() {
this.make = 'Lamborghini';
return { make: 'Maserati' };
}
const myCar = new Car();
console.log(myCar.make);- A:
"Lamborghini" - B:
"Maserati" - C:
ReferenceError - D:
TypeError
Jawaban
When you return a property, the value of the property is equal to the returned value, not the value set in the constructor function. We return the string "Maserati", so myCar.make is equal to "Maserati".
(() => {
let x = (y = 10);
})();
console.log(typeof x);
console.log(typeof y);- A:
"undefined", "number" - B:
"number", "number" - C:
"object", "number" - D:
"number", "undefined"
Jawaban
let x = y = 10; is actually shorthand for:
y = 10;
let x = y;When we set y equal to 10, we actually add a property y to the global object (window in browser, global in Node). In a browser, window.y is now equal to 10.
Then, we declare a variable x with the value of y, which is 10. Variables declared with the let keyword are block scoped, they are only defined within the block they're declared in; the immediately-invoked function (IIFE) in this case. When we use the typeof operator, the operand x is not defined: we are trying to access x outside of the block it's declared in. This means that x is not defined. Values who haven't been assigned a value or declared are of type "undefined". console.log(typeof x) returns "undefined".
However, we created a global variable y when setting y equal to 10. This value is accessible anywhere in our code. y is defined, and holds a value of type "number". console.log(typeof y) returns "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();- A:
"Woof I am Mara",TypeError - B:
"Woof I am Mara","Woof I am Mara" - C:
"Woof I am Mara",undefined - D:
TypeError,TypeError
Jawaban
We can delete properties from objects using the delete keyword, also on the prototype. By deleting a property on the prototype, it is not available anymore in the prototype chain. In this case, the bark function is not available anymore on the prototype after delete Dog.prototype.bark, yet we still try to access it.
When we try to invoke something that is not a function, a TypeError is thrown. In this case TypeError: pet.bark is not a function, since pet.bark is undefined.
const set = new Set([1, 1, 2, 3, 4]);
console.log(set);- A:
[1, 1, 2, 3, 4] - B:
[1, 2, 3, 4] - C:
{1, 1, 2, 3, 4} - D:
{1, 2, 3, 4}
Jawaban
The Set object is a collection of unique values: a value can only occur once in a set.
We passed the iterable [1, 1, 2, 3, 4] with a duplicate value 1. Since we cannot have two of the same values in a set, one of them is removed. This results in {1, 2, 3, 4}.
// counter.js
let counter = 10;
export default counter;// index.js
import myCounter from './counter';
myCounter += 1;
console.log(myCounter);- A:
10 - B:
11 - C:
Error - D:
NaN
Jawaban
Modul yang diimpor adalah read-only: Anda tidak dapat mengubah modul yang diimpor. Hanya modul yang mengekspornya yang dapat mengubah nilainya.
Ketika kita mencoba untuk menambah nilai myCounter, itu melemparkan kesalahan: myCounter adalah baca-saja dan tidak dapat dimodifikasi.
const name = 'Lydia';
age = 21;
console.log(delete name);
console.log(delete age);- A:
false,true - B:
"Lydia",21 - C:
true,true - D:
undefined,undefined
Jawaban
The delete operator returns a boolean value: true on a successful deletion, else it'll return false. However, variables declared with the var, const or let keyword cannot be deleted using the delete operator.
The name variable was declared with a const keyword, so its deletion is not successful: false is returned. When we set age equal to 21, we actually added a property called age to the global object. You can successfully delete properties from objects this way, also the global object, so delete age returns true.
const numbers = [1, 2, 3, 4, 5];
const [y] = numbers;
console.log(y);- A:
[[1, 2, 3, 4, 5]] - B:
[1, 2, 3, 4, 5] - C:
1 - D:
[1]
Jawaban
We can unpack values from arrays or properties from objects through destructuring. For example:
[a, b] = [1, 2];
The value of a is now 1, and the value of b is now 2. What we actually did in the question, is:
[y] = [1, 2, 3, 4, 5];
This means that the value of y is equal to the first value in the array, which is the number 1. When we log y, 1 is returned.
const user = { name: 'Lydia', age: 21 };
const admin = { admin: true, ...user };
console.log(admin);- A:
{ admin: true, user: { name: "Lydia", age: 21 } } - B:
{ admin: true, name: "Lydia", age: 21 } - C:
{ admin: true, user: ["Lydia", 21] } - D:
{ admin: true }
Jawaban
It's possible to combine objects using the spread operator .... It lets you create copies of the key/value pairs of one object, and add them to another object. 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));- A:
{ name: "Lydia", age: 21 },["name", "age"] - B:
{ name: "Lydia", age: 21 },["name"] - C:
{ name: "Lydia"},["name", "age"] - D:
{ name: "Lydia"},["age"]
Jawaban
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);- A:
"{"level":19, "health":90}" - B:
"{"username": "lydiahallie"}" - C:
"["level", "health"]" - D:
"{"username": "lydiahallie", "level":19, "health":90}"
Jawaban
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);- A:
10,10 - B:
10,11 - C:
11,11 - D:
11,12
Jawaban
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 afterwards.
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);- A:
20,40,80,160 - B:
20,40,20,40 - C:
20,20,20,40 - D:
NaN,NaN,20,40
Jawaban
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));- A:
12and33and64 - B:
12and23and34 - C:
1undefinedand2undefinedand3undefinedand4undefined - D:
12andundefined3andundefined4
Jawaban
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 current value: 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.
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;
}
};- A: 1
- B: 2
- C: 3
- D: 4
Jawaban
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;- A:
running index.js,running sum.js,3 - B:
running sum.js,running index.js,3 - C:
running sum.js,3,running index.js - D:
running index.js,undefined,running sum.js
Jawaban
With the import keyword, all imported modules are pre-parsed. This means that the imported modules get run first, the code in the file which 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 would have 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'));- A:
true,true,false - B:
false,true,false - C:
true,false,true - D:
true,true,true
Jawaban
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));- A:
"Lydia Hallie","Lydia Hallie" - B:
" Lydia Hallie"," Lydia Hallie"("[13x whitespace]Lydia Hallie","[2x whitespace]Lydia Hallie") - C:
" Lydia Hallie","Lydia Hallie"("[1x whitespace]Lydia Hallie","Lydia Hallie") - D:
"Lydia Hallie","Lyd",
Jawaban
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('🥑' + '💻');- A:
"🥑💻" - B:
257548 - C: A string containing their code points
- D: Error
Jawaban
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 gone here";
}
return 'JavaScript loves you back ❤️';
}
const game = startGame();
console.log(/* 1 */); // Do you love JavaScript?
console.log(/* 2 */); // JavaScript loves you back ❤️- A:
game.next("Yes").valuedangame.next().value - B:
game.next.value("Yes")dangame.next.value() - C:
game.next().valuedangame.next("Yes").value - D:
game.next.value()dangame.next.value("Yes")
Jawaban
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`Hello\nworld`);- A:
Hello world! - B:
Hello
world - C:
Hello\nworld - D:
Hello\n
world
Jawaban
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:\Documents\Projects\table.html`
Which would result in:
"C:DocumentsProjects able.html"
With String.raw, it would simply ignore the escape and print:
C:\Documents\Projects\table.html
In this case, the string is Hello\nworld, which gets logged.
async function getData() {
return await Promise.resolve('I made it!');
}
const data = getData();
console.log(data);- A:
"I made it!" - B:
Promise {<resolved>: "I made it!"} - C:
Promise {<pending>} - D:
undefined
Jawaban
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);- A:
['apple', 'banana'] - B:
2 - C:
true - D:
undefined
Jawaban
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);- A:
{ x: 100, y: 20 } - B:
{ x: 10, y: 20 } - C:
{ x: 100 } - D:
ReferenceError
Jawaban
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) returns 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 { name: myName } = { name: 'Lydia' };
console.log(name);- A:
"Lydia" - B:
"myName" - C:
undefined - D:
ReferenceError
Jawaban
When we unpack the property name from the object on the right-hand side, we assign its value "Lydia" to a variable with the name myName.
With { name: myName }, we tell JavaScript that we want to create a new variable called myName with the value of the name property on the right-hand side.
Since we try to log name, a variable that is not defined, a ReferenceError gets thrown.
function sum(a, b) {
return a + b;
}- A: Yes
- B: No
Jawaban
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));- A:
Calculated! 20Calculated! 20Calculated! 20 - B:
Calculated! 20From cache! 20Calculated! 20 - C:
Calculated! 20From cache! 20From cache! 20 - D:
Calculated! 20From cache! 20Error
Jawaban
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 caches value will be returned, which saves on execution time. Else, if it's not cached, it will calculate the value and store it afterwards.
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);
}- A:
0123and"☕""💻""🍷""🍫" - B:
"☕""💻""🍷""🍫"and"☕""💻""🍷""🍫" - C:
"☕""💻""🍷""🍫"and0123 - D:
0123and{0: "☕", 1: "💻", 2: "🍷", 3: "🍫"}
Jawaban
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);- A:
["1 + 2", "1 * 2", "1 / 2"] - B:
["12", 2, 0.5] - C:
[3, 2, 0.5] - D:
[1, 1, 1]
Jawaban
Elemen array dapat berisi beberapa nilai. angka, string, objek, array lain, null, nilai boolean, undefined, dan lainnya seperti tanggal, fungsi, dan kalkulasi.
elemen akan sama dengan nilai hasilnya. 1 + 2 menghasilkan 3, 1 * 2 menghasilkan 2, dan 1 / 2 menghasilkan 0.5.
function sayHi(name) {
return `Hi there, ${name}`;
}
console.log(sayHi());- A:
Hi there, - B:
Hi there, undefined - C:
Hi there, null - D:
ReferenceError
Jawaban
Secara default, arguments memiliki nilai undefined, kecuali nilai telah diisi ke fungsi. Pada kasus ini, kita tidak mengisi nilai untuk argument name. name sama dengan undefined yang mana mendapat catatan.
Di ES6, kita dapat menulis ulang nilai default undefined dengan parameter default. Sebagai contoh:
function sayHi(name = "Lydia") { ... }
Pada kasus ini, juka kita tidak mengisi nilai atau mengisi undefined, name akan selalu sama dengan 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);- A:
"🥑"and"😍" - B:
"🥑"and"😎" - C:
"😍"and"😎" - D:
"😎"and"😎"
Jawaban
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);- A:
{ name: "Lydia", age: 21 } - B:
{ name: "Lydia", age: 21, city: "Amsterdam" } - C:
{ name: "Lydia", age: 21, city: undefined } - D:
"Amsterdam"
Jawaban
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));- A:
"Sorry, you're too young." - B:
"Yay! You're old enough!" - C:
ReferenceError - D:
undefined
Jawaban
Variables with the const and let keyword 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))- A: The result of the
fetchmethod. - B: The result of the second invocation of the
fetchmethod. - C: The result of the callback in the previous
.then(). - D: It would always be undefined.
Jawaban
The value of res in the second .then is equal to the returned value of the previous .then. You can keep chaining .thens like this, where the value is passed to the next handler.
86. Which option is a way to set hasName equal to true, provided you cannot pass true as an argument?
function getName(name) {
const hasName = //
}- A:
!!name - B:
name - C:
new Boolean(name) - D:
name.length
Jawaban
With !!name, we determine whether the value of name is truthy or falsy. If 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]);- A:
""" - B:
"I" - C:
SyntaxError - D:
undefined
Jawaban
In order to get an character on a specific index in 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 which index is 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);- A:
NaN - B:
20 - C:
ReferenceError - D:
undefined
Jawaban
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 which 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);- A:
{ default: function default(), name: "Lydia" } - B:
{ default: function default() } - C:
{ default: "Hello world", name: "Lydia" } - D: Global object of
module.js
Jawaban
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 which 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);- A:
"class" - B:
"function" - C:
"object" - D:
"string"
Jawaban
Classes are syntactical sugar for function constructors. The equivalent of the Person class as a function constructor would be:
function Person() {
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));- A:
[1, 2, 3, 4, 5] - B:
[1, 2, 3, 5] - C:
[1, 2, 3, 4] - D:
Error
Jawaban
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);- A:
{ constructor: ...}{ constructor: ...} - B:
{}{ constructor: ...} - C:
{ constructor: ...}{} - D:
{ constructor: ...}undefined
Jawaban
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);
}- A:
nameLydiaandage21 - B:
["name", "Lydia"]and["age", 21] - C:
["name", "age"]andundefined - D:
Error
Jawaban
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")- A:
["banana", "apple", "pear", "orange"] - B:
[["banana", "apple"], "pear", "orange"] - C:
["banana", "apple", ["pear"], "orange"] - D:
SyntaxError
Jawaban
...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:
a is bigger,6andb is bigger,3 - B:
a is bigger,undefinedandb is bigger,undefined - C:
undefinedandundefined - D:
SyntaxError
Jawaban
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);- A:
"Lydia" - B:
"Sarah" - C:
Error: cannot redeclare Person - D:
SyntaxError
Jawaban
Kita dapat mengatur kelas yang sama dengan kelas / fungsi konstruktor lainnya. Dalam kasus ini, kita mengatur Person sama dengan AnotherPerson. Nama pada konstruktor ini adalah Sarah, jadi nama properti yang baru pada Person instance member adalah "Sarah".
const info = {
[Symbol('a')]: 'b',
};
console.log(info);
console.log(Object.keys(info));- A:
{Symbol('a'): 'b'}and["{Symbol('a')"] - B:
{}and[] - C:
{ a: "b" }and["a"] - D:
{Symbol('a'): 'b'}and[]
Jawaban
Simbol bukanlah merupakan suatu enumerable. Metode Object.keys akan mengembalikan semua properti kunci enumerable pada sebuah objek. Simbol tidak akan terlihat, dan array kosong dikembalikan. Saat mencatat seluruh objek, semua properti akan terlihat, bahkan yang bukan non-enumerable.
Ini adalah salah satu dari banyak kualitas simbol: Disamping selain mewakili nilai yang sepenuhnya unik (yang mencegah terjadinya benturan nama yang tidak disengaja pada objek, misalnya saat bekerja dengan 2 library yang ingin menambahkan properti ke objek yang sama), anda juga dapat "menyembunyikan" properti pada objek dengan cara ini (meskipun tidak seluruhnya. Anda masih dapat mengakses simbol menggunakan metode Object.getOwnPropertySymbols()).
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))- A:
[1, [2, 3, 4]]andundefined - B:
[1, [2, 3, 4]]and{ name: "Lydia", age: 21 } - C:
[1, 2, 3, 4]and{ name: "Lydia", age: 21 } - D:
Errorand{ name: "Lydia", age: 21 }
Jawaban
Fungsi getList menerima array sebagai argumennya. Di antara tanda kurung pada fungsi getList, Kita akan menstruktur ulang. Anda dapat melihat ini sebagai:
[x, ...y] = [1, 2, 3, 4]
Dengan parameter sisa ...y, kita akan meletakkan semua argumen "yang tersisa" dalam array. Dalam kasus ini argumen yang tersisa adalah 2, 3 dan 4. Nilai dari y merupakan suatu array, yang berisi semua parameter lainnya. Pada kasus ini nilai dari x sama dengan 1, jadi saat kita mencatat [x, y], maka catatannya [1, [2, 3, 4]].
Fungsi getUser menerima sebuah objek. Dengan fungsi tanda panah, kita tidak perlu menulis tanda kurung kurawal jika hanya mengembalikan satu nilai. Namun, jika anda mengembalikan nilai object dari fungsi tanda panah, Anda harus menuliskannya di antara tanda kurung, jika tidak maka tidak ada nilai yang dikembalikan! Fungsi berikut akan mengembalikan sebuah objek:
const getUser = user => ({ name: user.name, age: user.age })
Karena tidak ada nilai yang dikembalikan dalam kasus ini, maka fungsi akan mengembalikan undefined.
const name = 'Lydia';
console.log(name());- A:
SyntaxError - B:
ReferenceError - C:
TypeError - D:
undefined
Jawaban
Variabel name menyimpan nilai string, yang bukan merupakan suatu fungsi, sehingga tidak dapat dipanggil.
TypeErrors dilemparkan ketika nilai yang didapatkan bukan dari jenis yang kita harapkan. JavaScript mengharapkan name menjadi sebuah fungsi karena kita mencoba untuk memanggilnya. Namun itu adalah sebuah string, sehingga akan muncul TypeError gets thrown: name is not a function!
SyntaxErrors muncul ketika anda salah menulis suatu Javascript, seperti return menjadi retrun.
ReferenceErrors muncul ketika JavaScript tidak dapat menemukan nilai referensi ke nilai yang anda coba akses.
// 🎉✨ This is my 100th question! ✨🎉
const output = `${[] && 'Im'}possible!
You should${'' && `n't`} see a therapist after so much JavaScript lol`;- A:
possible! You should see a therapist after so much JavaScript lol - B:
Impossible! You should see a therapist after so much JavaScript lol - C:
possible! You shouldn't see a therapist after so much JavaScript lol - D:
Impossible! You shouldn't see a therapist after so much JavaScript lol
Jawaban
[] 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);- A:
falsenull[] - B:
null""true - C:
{}""[] - D:
nullnulltrue
Jawaban
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 past 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();- A:
I have resolved!,secondandI have resolved!,second - B:
second,I have resolved!andsecond,I have resolved! - C:
I have resolved!,secondandsecond,I have resolved! - D:
second,I have resolved!andI have resolved!,second
Jawaban
With 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 keyword 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 befoer 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);
}- A:
3,NaN,NaN - B:
3,7,NaN - C:
3,Lydia2,[object Object]2 - D:
"12",Lydia2,[object Object]2
Jawaban
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);- A:
5 - B:
Promise {<pending>: 5} - C:
Promise {<fulfilled>: 5} - D:
Error
Jawaban
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);- A:
Not the same! - B:
They are the same! - C:
ReferenceError - D:
SyntaxError
Jawaban
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]);- A:
true - B:
false - C:
undefined - D:
TypeError
Jawaban
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 proprety 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('❤️' === '❤️');- A:
true - B:
false
Jawaban
Di belakang layar, emoji adalah sebuah unicode. Unicode untuk emoji hati adalah "U+2764 U+FE0F". Keduanya akan selalu sama untuk emoji yang sama, jadi sebetulnya kita telah membandingkan dua string yang sama satu sama lain, yang mana akan menghasilkan 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, "✨");- A:
All of them - B:
mapreduceslicesplice - C:
mapslicesplice - D:
splice
Jawaban
Metode splice, akan memodifikasi array aslinya dengan cara menghapus, mengganti atau menambahkan elemen. Dalam kasus ini, kami menghapus 2 item dari indeks 1 (kami menghapus '🥑' dan' 😍') dan menambahkan emoji ✨ sebagai penggantinya.
map, filter dan slice akan mengembalikan array baru, find akan mengembalikan elemen yang dicari, dan reduce akan mengembalikan nilai yang telah dikurangi.
const food = ['🍕', '🍫', '🥑', '🍔'];
const info = { favoriteFood: food[0] };
info.favoriteFood = '🍝';
console.log(food);- A:
['🍕', '🍫', '🥑', '🍔'] - B:
['🍝', '🍫', '🥑', '🍔'] - C:
['🍝', '🍕', '🍫', '🥑', '🍔'] - D:
ReferenceError
Jawaban
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 act 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();- A: Parses JSON to a JavaScript value
- B: Parses a JavaScript object to JSON
- C: Parses any JavaScript value to JSON
- D: Parses JSON to a JavaScript object only
Jawaban
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();- A: Lydia
- B: Sarah
- C:
undefined - D:
ReferenceError
Jawaban
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(); // Lydiafunction* 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:
aanda - B:
aandundefined - C:
['a', 'b', 'c']anda - D:
aand['a', 'b', 'c']
Jawaban
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); // undefinedIn 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); // undefinedconsole.log(`${(x => x)('I love')} to program`);- A:
I love to program - B:
undefined to program - C:
${(x => x)('I love') to program - D:
TypeError
Jawaban
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;- A: The
setIntervalcallback won't be invoked - B: The
setIntervalcallback gets invoked once - C: The
setIntervalcallback will still be called every second - D: We never invoked
config.alert(), config isnull
Jawaban
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 it's not garbage collected, the setInterval callback function will still get invoked every 1000ms (1s).
const myMap = new Map();
const myFunc = () => 'greeting';
myMap.set(myFunc, 'Hello world!');
//1
myMap.get('greeting');
//2
myMap.get(myFunc);
//3
myMap.get(() => 'greeting');- A: 1
- B: 2
- C: 2 and 3
- D: All of them
Jawaban
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 interact 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);- A:
{name: "Sarah", age: 22} - B:
{name: "Sarah", age: 23} - C:
{name: "Lydia", age: 22} - D:
{name: "Lydia", age: 23}
Jawaban
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 }.
function sumValues(x, y, z) {
return x + y + z;
}- A:
sumValues([...1, 2, 3]) - B:
sumValues([...[1, 2, 3]]) - C:
sumValues(...[1, 2, 3]) - D:
sumValues([1, 2, 3])
Jawaban
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)]);- A:
🤠 - B:
🥰 - C:
SyntaxError - D:
ReferenceError
Jawaban
With the += operand, 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?.());- A:
undefinedundefinedundefinedundefined - B:
MaraundefinedLydia Hallieundefined - C:
MaranullLydia Hallienull - D:
nullReferenceErrornullReferenceError
Jawaban
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?.(): member is not defined: member.getLastName() is nullish. The expression returns undefined.
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!`);
}- A: We have to buy bananas!
- B: We don't have to buy bananas
- C:
undefined - D:
1
Jawaban
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);- A:
function language(lang) { this.languages.push(lang } - B:
0 - C:
[] - D:
undefined
Jawaban
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');- A:
falsetrue - B:
truefalse - C:
falsefalse - D:
truetrue
Jawaban
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 returnfalse.
(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);- A:
456 - B:
654 - C:
4functionfunction - D:
undefinedundefined6
Jawaban
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);
}
})();- A:
Promise {1}Promise {2}Promise {3} - B:
Promise {<pending>}Promise {<pending>}Promise {<pending>} - C:
123 - D:
undefinedundefinedundefined
Jawaban
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 promsie, 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);- A:
123 - B:
{1: 1}{2: 2}{3: 3} - C:
{ 1: undefined }undefinedundefined - D:
undefinedundefinedundefined
Jawaban
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))- A: The driver drove 130 and has to pay 300
- B: The driver drove 130 mph and has to pay $300.00
- C: The driver drove undefined and has to pay undefined
- D: The driver drove 130.00 and has to pay 300.00
Jawaban
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 currentcy in USD results in $300.00.
const spookyItems = ['👻', '🎃', '🕸'];
({ item: spookyItems[3] } = { item: '💀' });
console.log(spookyItems);- A:
["👻", "🎃", "🕸"] - B:
["👻", "🎃", "🕸", "💀"] - C:
["👻", "🎃", "🕸", { item: "💀" }] - D:
["👻", "🎃", "🕸", "[object Object]"]
Jawaban
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));- A:
truefalsetruefalse - B:
truefalsefalsefalse - C:
falsefalsetruefalse - D:
falsetruefalsetrue
Jawaban
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();- A:
"number" - B:
"string" - C:
undefined - D:
ReferenceError
Jawaban
Variables declared with the const keyword are not referencable 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!');
}
})();- A:
Woah some cool data - B:
Oh finally! - C:
Woah some cool dataOh finally! - D:
Oops didn't workOh finally!
Jawaban
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));- A:
['🥑', ['✨', '✨', ['🍕', '🍕']]] - B:
['🥑', '✨', '✨', ['🍕', '🍕']] - C:
['🥑', ['✨', '✨', '🍕', '🍕']] - D:
['🥑', '✨', '✨', '🍕', '🍕']
Jawaban
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);- A:
0 - B:
1 - C:
2 - D:
3
Jawaban
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 the counterTwo.increment(), which sets the count to 3. Then, we log the count on counterOne, which logs 3.
const myPromise = Promise.resolve(Promise.resolve('Promise!'));
function funcOne() {
myPromise.then(res => res).then(res => console.log(res));
setTimeout(() => console.log('Timeout!', 0));
console.log('Last line!');
}
async function funcTwo() {
const res = await myPromise;
console.log(await res);
setTimeout(() => console.log('Timeout!', 0));
console.log('Last line!');
}
funcOne();
funcTwo();- A:
Promise! Last line! Promise! Last line! Last line! Promise! - B:
Last line! Timeout! Promise! Last line! Timeout! Promise! - C:
Promise! Last line! Last line! Promise! Timeout! Timeout! - D:
Last line! Promise! Promise! Last line! Timeout! Timeout!
Jawaban
First, we invoke funcOne. On the first line of funcOne, we call the myPromise promise, which is an asynchronous operation. While the engine is busy completing the promise, it keeps on running the function funcOne. The next line is the asynchronous setTimeout function, from which the callback is sent to the Web API. (see my article on the event loop here.)
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! gets logged first, since this is not an asynchonous operation. This is the last line of funcOne, the promise resolved, and Promise! gets logged. However, since we're invoking funcTwo(), the call stack isn't empty, and the callback of the setTimeout function cannot get added to the callstack yet.
In funcTwo we're, first awaiting the myPromise promise. With the await keyword, we pause the execution of the function until the promise has resolved (or rejected). Then, we log the awaited value of res (since the promise itself returns a promise). This logs Promise!.
The next line is the asynchronous setTimeout function, from which the callback is sent to the Web API.
We get to the last line of funcTwo, which logs Last line! to the console. Now, since funcTwo popped off the call stack, the call stack is empty. The callbacks waiting in the queue (() => console.log("Timeout!") from funcOne, and () => console.log("Timeout!") from funcTwo) get added to the call stack one by one. The first callback logs Timeout!, and gets popped off the stack. Then, the second callback logs Timeout!, and gets popped off the stack. This logs Last line! Promise! Promise! Last line! Timeout! Timeout!
// sum.js
export default function sum(x) {
return x + x;
}
// index.js
import * as sum from './sum';- A:
sum(4) - B:
sum.sum(4) - C:
sum.default(4) - D: Default aren't imported with
*, only named exports
Jawaban
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;- A:
Added a new property! - B:
Accessed a property! - C:
Added a new property!Accessed a property! - D: Nothing gets logged
Jawaban
With a Proxy object, we can add custom behavior to an object that we pass to it as the second argument. In tis case, we pass the handler object which contained to properties: set and get. set gets invoked whenever we set property values, 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, the get property on the handler object got invoked. "Accessed a property!" gets logged.
const person = { name: 'Lydia Hallie' };
Object.seal(person);- A:
person.name = "Evan Bacon" - B:
person.age = 21 - C:
delete person.name - D:
Object.assign(person, { age: 21 })
Jawaban
With Object.seal we can prevent new properies from being added, or existing properties to be removed.
However, you can still modify the value of existing properties.
const person = {
name: 'Lydia Hallie',
address: {
street: '100 Main St',
},
};
Object.freeze(person);- A:
person.name = "Evan Bacon" - B:
delete person.address - C:
person.address.street = "101 Main St" - D:
person.pet = { name: "Mara" }
Jawaban
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 person = {
name: 'Lydia Hallie',
address: {
street: '100 Main St',
},
};
Object.freeze(person);- A:
person.name = "Evan Bacon" - B:
delete person.address - C:
person.address.street = "101 Main St" - D:
person.pet = { name: "Mara" }
Jawaban
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);- A:
24dan36 - B:
2NaNdan3NaN - C:
2Errordan36 - D:
24dan3Error
Jawaban
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 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)- A:
10 - B:
11 - C:
undefined - D:
SyntaxError
Jawaban
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 acccess 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 }- A:
yield getMembers(teams[i].members) - B:
yield* getMembers(teams[i].members) - C:
return getMembers(teams[i].members) - D:
return yield getMembers(teams[i].members)
Jawaban
Untuk melakukan pengulangan pada members dalam setiap elemen array tim, kita perlu melemparkan tim[i].members ke fungsi generator getMembers. Fungsi generator akan mengembalikan objek hasil generator. Untuk mengulang setiap elemen dalam objek generator ini, kita perlu menggunakan yield*.
Jika kita telah menulis yield, return yield, atau return, maka seluruh fungsi generator akan dikembalikan saat pertama kali kita memanggil metode next.
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);- A:
["coding"] - B:
["coding", "dancing"] - C:
["coding", "dancing", "baking"] - D:
["coding", "running", "dancing", "baking"]
Jawaban
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 "bdaking" 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();- A:
I'm pink. 🌸 - B:
I'm pink. 🌸I'm a bird. 🦢 - C:
I'm a bird. 🦢I'm pink. 🌸 - D: Nothing, we didn't call any method
Jawaban
Kita membuat variabel pet yang merupakan turunan dari class Flamingo. Saat kita membuat turunan, constructor pada Flamingo dipanggil. Pertama, "I'm pink. 🌸" ditampilkan, setelah itu kita memanggil super(). super() memanggil konstruktor class induk, Bird. Constructor pada Bird dipanggil, dan menampilkan "I'm a bird. 🦢".
const emojis = ['🎄', '🎅🏼', '🎁', '⭐'];
/* 1 */ emojis.push('🦌');
/* 2 */ emojis.splice(0, 2);
/* 3 */ emojis = [...emojis, '🥂'];
/* 4 */ emojis.length = 0;- A: 1
- B: 1 dan 2
- C: 3 dan 4
- D: 3
Jawaban
Deklarasi const pada dasarnya berarti tidak dapat mengubah nilai dari variable tersebut, karena bersifat read-only (tidak dapat diubah). Bagaimanapun, nilainya tidak mutlak. Seperti array pada variable emojis dimana nilainya bisa diubah, contohnya untuk menambah nilai array baru, menghilangkan, atau mengubah properti length dari array menjadi 0.
145. Apa yang harus kita tambahkan ke objek person untuk mendapatkan ["Lydia Hallie", 21] sebagai output dari [...person]?
const person = {
name: "Lydia Hallie",
age: 21
}
[...person] // ["Lydia Hallie", 21]- A: Tidak ada, objek adalah iterable secara default
- B:
*[Symbol.iterator]() { for (let x in this) yield* this[x] } - C:
*[Symbol.iterator]() { for (let x in this) yield* Object.values(this) } - D:
*[Symbol.iterator]() { for (let x in this) yield this }
Jawaban
Objek tidak dapat diulang secara default. Sebuah iterable adalah sebuah iterable jika protokol iterator ada. Kita dapat menambahkan ini secara manual dengan menambahkan simbol iterator
[Symbol.iterator], dimana harus mengembalikan objek generator, sebagai contoh dengan membuat fungsi generator *[Symbol.iterator]() {}. Fungsi generator ini harus menghasilkan Object.values dari objek person jika kita mau mengembalikan 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)- A: 1
- B: 2
- C: 3
- D: 4
Jawaban
Pernyataan if didalam perulangan forEach akan mengecek apakah nilai dari num benar atau salah. Sejak nilai pertama dari array nums adalah 0, yang merupakan nilai salah, pernyataan if tidak akan dieksekusi. maka count yang mendapat increment hanya untuk 3 nomor yang lain di array nums, 1, 2 dan 3. sejak count mendapat increment 1 3 kali, maka nilai dari count adalah 3.
class Calc {
constructor() {
this.count = 0
}
increase() {
this.count++
}
}
const calc = new Calc()
new Calc().increase()
console.log(calc.count)- A:
0 - B:
1 - C:
undefined - D:
ReferenceError
Jawaban
Kami mengatur variabel calc sama dengan instance baru dari class Calc. Kemudian, kami membuat instance baru dari Calc, dan memanggil metode increase pada contoh ini. Karena properti count berada dalam konstruktor dari class Calc, properti count tidak dibagikan pada prototipe Calc. Ini berarti bahwa nilai hitungan belum diperbarui untuk contoh yang ditunjukkan kalk, hitung masih 0.
const user = {
email: "e@mail.com",
password: "12345"
}
const updateUser = ({ email, password }) => {
if (email) {
Object.assign(user, { email })
}
if (password) {
user.password = password
}
return user
}
const updatedUser = updateUser({ email: "new@email.com" })
console.log(updatedUser === user)- A:
false - B:
true - C:
TypeError - D:
ReferenceError
Jawaban
Fungsi updateUser memperbarui nilai properti email dan password pada pengguna, jika nilainya diteruskan ke fungsi, setelah itu fungsi mengembalikan objek user. Nilai yang dikembalikan dari fungsi updateUser adalah objek user, yang berarti bahwa nilai updatedUser adalah referensi ke objek user yang sama dengan yang ditunjuk oleh user. updatedUser === user sama dengan true.
const fruit = ['🍌', '🍊', '🍎']
fruit.slice(0, 1)
fruit.splice(0, 1)
fruit.unshift('🍇')- A:
['🍌', '🍊', '🍎'] - B:
['🍊', '🍎'] - C:
['🍇', '🍊', '🍎'] - D:
['🍇', '🍌', '🍊', '🍎']
Jawaban
Pertama, kita memanggil metode slice pada array fruit. Metode slice tidak mengubah array asli, tetapi mengembalikan nilai yang dipotongnya dari array: banana emoji.
Kemudian, kita memanggil metode splice pada array fruit. Metode splice memang mengubah array asli, yang berarti array fruit sekarang terdiri dari ['🍊', '🍎'].
Akhirnya, kita memanggil metode unshift pada array fruit, yang memodifikasi array asli dengan menambahkan nilai yang diberikan, ‘🍇’ dalam hal ini, sebagai elemen pertama dalam array. Susunan fruit sekarang terdiri dari ['🍇', '🍊', '🍎'].
const animals = {};
let dog = { emoji: '🐶' }
let cat = { emoji: '🐈' }
animals[dog] = { ...dog, name: "Mara" }
animals[cat] = { ...cat, name: "Sara" }
console.log(animals[dog])- A:
{ emoji: "🐶", name: "Mara" } - B:
{ emoji: "🐈", name: "Sara" } - C:
undefined - D:
ReferenceError
Jawaban
Kunci objek diubah menjadi string.
Karena nilai dog adalah sebuah objek, animals[dog]sebenarnya berarti kita membuat properti baru bernama "object Object"yang sama dengan objek baru. animals["object Object"] sekarang sama dengan { emoji: "🐶", name: "Mara"}.
cat juga merupakan objek, yang berarti bahwa animals[cat] sebenarnya berarti bahwa kami menimpa nilai animals[``"``object Object``"``] dengan properti cat yang baru.
Mencatat animals[dog], atau sebenarnya animals["object Object"] karena mengonversi objek dog menjadi string menghasilkan "object Object", mengembalikan {emoji: "🐈", nama: "Sara"}.
const user = {
email: "my@email.com",
updateEmail: (email) => {
this.email = email;
},
};
user.updateEmail("new@email.com");
console.log(user.email);- A:
my@email.com - B:
new@email.com - C:
undefined - D:
ReferenceError
Jawaban
Fungsi updateEmail adalah fungsi panah, dan tidak terikat ke objek user. Artinya, kata kunci this tidak merujuk ke objek user, tetapi merujuk pada cakupan global dalam kasus ini. Nilai email dalam objek user tidak diperbarui. Saat memasukkan nilai user.email, nilai asli my@email.com akan dikembalikan.
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))- A:
[['First', 'Second'], ['Fourth']] - B:
[['First', 'Second'], ['Third', 'Fourth']] - C:
[['First', 'Second']] - D:
'Third'
Jawaban
Metode Promise.all menjalankan promise yang diberikan secara paralel. Jika satu promise gagal, metode Promise.all dengan nilai promise yang ditolak. Dalam kasus ini, promise3 ditolak dengan nilai "Third". Kami menangkap nilai yang ditolak dalam metode catch yang dirantai pada pemanggilan runPromises untuk menangkap setiap kesalahan dalam fungsi runPromises. Hanya "Third" yang dicatat, karena promise3 ditolak dengan nilai ini.
const keys = ["name", "age"];
const values = ["Lydia", 22];
const method =
/* ?? */
Object[method](
keys.map((_, i) => {
return [keys[i], values[i]];
})
); // { name: "Lydia", age: 22 }- A:
entries - B:
values - C:
fromEntries - D:
forEach
Jawaban
Metode fromEntries mengubah array 2d menjadi objek. Elemen pertama di setiap subarray akan menjadi kuncinya, dan elemen kedua di setiap subarray akan menjadi nilainya. Dalam hal ini, kami memetakan di atas array keys, yang mengembalikan array yang elemen pertamanya adalah item pada array kunci pada indeks saat ini, dan elemen kedua adalah item dari array nilai pada indeks saat ini.
Ini membuat array subarray yang berisi kunci dan nilai yang benar, yang menghasilkan {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: "my@email.com" })
console.log(member)- A:
{ email: "my@email.com", address: null } - B:
{ email: "my@email.com" } - C:
{ email: "my@email.com", address: {} } - D:
{ email: "my@email.com", address: undefined }
Jawaban
Nilai default dari address adalah objek kosong {}. Saat kita menyetel variabel member sama dengan objek yang dikembalikan oleh fungsi createMember, kita tidak meneruskan nilai untuk address, yang berarti bahwa nilai address adalah objek kosong default {}.Objek kosong adalah nilai sebenarnya, yang berarti kondisi address ? address: null mengembalikan true. Nilai address adalah objek kosong {}.
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!")
}- A:
It's not a string! - B:
Yay it's a string! - C:
TypeError - D:
undefined
Jawaban
Kondisi dalam pernyataan if memeriksa apakah nilai dari !typeof randomValue sama dengan "string". Operator ! Mengonversi nilai menjadi nilai boolean. Jika nilainya benar, nilai yang dikembalikan akan menjadi false, jika nilainya salah, nilai yang dikembalikan akan menjadi true. Dalam kasus ini, nilai yang dikembalikan dari typeof randomValue adalah nilai sebenarnya "string", artinya nilai !typeof randomValue adalah nilai boolean false.
!typeof randomValue === "string" selalu mengembalikan false, karena kita sebenarnya memeriksa false === "string ". Karena kondisi mengembalikan false, blok kode dari pernyataan else dijalankan, dan Yay it's a string! Akan dicatat.