javascript-questions - (高度な) JavaScript の質問とその説明の長いリスト✨

(A long list of (advanced) JavaScript questions, and their explanations :sparkles: )

Created at: 2019-06-12 16:26:27
Language:
License: MIT

JavaScript に関する質問


私は複数選択式の JavaScript の質問をInstagram のストーリーに投稿しています。これもここに投稿します。最終更新日: 6 月 12 日

基本から上級まで: JavaScript の知識をテストしたり、知識を少し更新したり、コーディング面接の準備をしたりできます。💪 🚀このレポを定期的に更新して、新しい質問を追加します。質問の下の折りたたまれたセクションに回答を追加しました。クリックするだけで展開できます。それはただの楽しみです、頑張ってください!❤️

お気軽にお問い合わせください!😊
||インスタグラム|| ||ツイッター|| リンクトイン|| ブログ

プロジェクトで自由に使用してください!😃 このレポへの参照を本当に感謝します。質問と説明を作成します (はい、悲しいです笑)。コミュニティは、それを維持および改善するのに非常に役立ちます! 💪🏼 ありがとう、そして楽しんでください!

18の利用可能な翻訳を見る🇸🇦🇪🇬🇧🇦🇩🇪🇪🇸🇫🇷🇮🇩🇯🇵🇰🇷🇳🇱🇧🇷🇷🇺🇹🇭🇹🇷🇺🇦🇻🇳🇨🇳🇹🇼


1. アウトプットは?
function sayHi() {
  console.log(name);
  console.log(age);
  var name = 'Lydia';
  let age = 21;
}

sayHi();
  • A:
    Lydia
    undefined
  • B:
    Lydia
    ReferenceError
  • C:
    ReferenceError
    21
  • D:
    undefined
    ReferenceError
答え

答え:D

関数内では、最初にキーワードで

name
変数を宣言します。これは、実際に変数を定義する行に到達するまで
var
、デフォルト値の で変数が巻き上げられることを意味します (メモリ空間は作成フェーズ中に設定されます) 。
undefined
変数をログに記録しようとする行ではまだ変数を定義していない
name
ため、値はまだ保持されています
undefined

let
キーワード (and )を持つ変数
const
は巻き上げられますが、 とは異なり、初期化
var
されません。それらは、宣言 (初期化) する行より前ではアクセスできません。これを「一時的なデッド ゾーン」と呼びます。変数が宣言される前に変数にアクセスしようとすると、JavaScript は.
ReferenceError


2. アウトプットは?
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 2
    0 1 2
  • B:
    0 1 2
    3 3 3
  • C:
    3 3 3
    0 1 2
答え

答え:C

JavaScript のイベント キューにより、ループが実行された

setTimeout
にコールバック関数が呼び出されます。最初のループの変数はキーワードを使用して宣言されているため、この値はグローバルです。ループ中、単項演算子 を使用して、毎回byの値をインクリメントしました。コールバック関数が呼び出されるまでには、最初の例と同じでした。
i
var
i
1
++
setTimeout
i
3

2 番目のループでは、変数はキーワード

i
を使用して宣言されました。 (and ) キーワードで宣言された変数は、ブロック スコープです (ブロックは の間のすべてです)。各反復中に新しい値があり、各値はループ内でスコープされます。
let
let
const
{ }
i


3. 出力は何ですか?
const shape = {
  radius: 10,
  diameter() {
    return this.radius * 2;
  },
  perimeter: () => 2 * Math.PI * this.radius,
};

console.log(shape.diameter());
console.log(shape.perimeter());
  • A:
    20
    62.83185307179586
  • B:
    20
    NaN
  • C:
    20
    63
  • D:
    NaN
    63
答え

答え: B

diameter
の値は通常の関数であるのに対し、 の値
perimeter
はアロー関数であることに注意してください。

アロー関数では、

this
キーワードは通常の関数とは異なり、現在の周囲のスコープを参照します! これは、 を呼び出すときに
perimeter
、形状オブジェクトではなく、その周囲のスコープ (たとえばウィンドウ) を参照することを意味します。

radius
そのオブジェクトには値がなく、 が返されます
NaN


4. 出力は何ですか?
+true;
!'Lydia';
  • A:
    1
    false
  • B:
    false
    NaN
  • C:
    false
    false
答え

答え: A

単項プラスは、オペランドを数値に変換しようとします。

true
です
1
、そして
false
です
0

文字列

'Lydia'
は真の値です。私たちが実際に求めているのは、「この真の値は偽ですか?」ということです。これは を返します
false


5. 正しいのはどれ?
const bird = {
  size: 'small',
};

const mouse = {
  name: 'Mickey',
  small: true,
};
  • A:
    mouse.bird.size
    無効です
  • B:
    mouse[bird.size]
    無効です
  • C:
    mouse[bird["size"]]
    無効です
  • D: すべて有効です
答え

答え: A

JavaScript では、すべてのオブジェクト キーは文字列です (シンボルでない限り)。文字列として入力しない場合でも、内部で常に文字列に変換されます。

JavaScript はステートメントを解釈 (またはアンボックス) します。ブラケット表記を使用すると、最初の開始ブラケット

[
が検出され、終了ブラケットが見つかるまで続行され
]
ます。その場合にのみ、ステートメントが評価されます。

mouse[bird.size]
: まず、 を評価します。
bird.size
これは
"small"
です。
mouse["small"]
戻り値
true

ただし、ドット表記では、これは起こりません。

mouse
は というキーを持っていません。
bird
つまり、
mouse.bird
です
undefined
。次に、
size
ドット表記を使用して尋ねます
mouse.bird.size
。ですので、実際に
mouse.bird
undefined
を求めています
undefined.size
。これは無効で、次のようなエラーがスローされ
Cannot read property "size" of undefined
ます。


6. 出力は何ですか?
let c = { greeting: 'Hey!' };
let d;

d = c;
c.greeting = 'Hello';
console.log(d.greeting);
  • A:
    Hello
  • B:
    Hey!
  • 子:
    undefined
  • D:
    ReferenceError
  • E:
    TypeError
答え

答え: A

JavaScript では、すべてのオブジェクトが互いに等しく設定されている場合、すべてのオブジェクトは参照によって相互作用します。

まず、変数

c
はオブジェクトに値を保持します。
d
後で、オブジェクトへの参照と同じ参照を割り当て
c
ます。

1 つのオブジェクトを変更すると、それらすべてが変更されます。


7. 出力は何ですか?
let a = 3;
let b = new Number(3);
let c = 3;

console.log(a == b);
console.log(a === b);
console.log(b === c);
  • A:
    true
    false
    true
  • B:
    false
    false
    true
  • 子:
    true
    false
    false
  • D:
    false
    true
    true
答え

答え:C

new Number()
組み込み関数コンストラクターです。数字のように見えますが、実際には数字ではありません。多くの追加機能があり、オブジェクトです。

演算子を使用すると、

==
が同じかどうかのみがチェックされます。どちらも の値を持っているので、 を返します。
3
true

ただし、

===
演​​算子を使用する場合、値型の両方が同じである必要があります。ではない:
new Number()
は数値ではなく、オブジェクトです。両方とも戻る
false.


8. 出力は何ですか?
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
  • 子:
    green
  • D:
    TypeError
答え

答え:D

colorChange
関数は静的です。静的メソッドは、それらが作成されたコンストラクターでのみ存在するように設計されており、子に渡されたり、クラス インスタンスで呼び出されたりすることはできません。はクラス Chameleon のインスタンスであるため
freddie
、関数を呼び出すことはできません。A
TypeError
が投げられます。


9. 出力は何ですか?
let greeting;
greetign = {}; // Typo!
console.log(greetign);
  • A:
    {}
  • B:
    ReferenceError: greetign is not defined
  • 子:
    undefined
答え

答え: A

グローバル オブジェクトに空のオブジェクトを作成したので、オブジェクトをログに記録します。と誤入力

greeting
する
greetign
と、JS インタープリターは実際にこれを
global.greetign = {}
(または
window.greetign = {}
ブラウザーで) と認識しました。

これを回避するために、 を使用できます

"use strict"
。これにより、変数を何かに等しく設定する前に変数を宣言したことが保証されます。


10. これを行うとどうなりますか?
function bark() {
  console.log('Woof!');
}

bark.animal = 'dog';
  • A: 何もありません。これで問題ありません。
  • B:
    SyntaxError
    . この方法で関数にプロパティを追加することはできません。
  • C:
    "Woof"
    ログに記録されます。
  • D:
    ReferenceError
答え

答え: A

関数はオブジェクトであるため、これは JavaScript で可能です。(プリミティブ型以外はすべてオブジェクトです)

関数は特別なタイプのオブジェクトです。自分で書いたコードは実際の関数ではありません。関数はプロパティを持つオブジェクトです。このプロパティは呼び出し可能です。


11. 出力は何ですか?
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
  • 子:
    Lydia Hallie
  • D:
    undefined
    undefined
答え

答え: A

JavaScript では、関数はオブジェクトであるため、メソッド

getFullName
はコンストラクター関数オブジェクト自体に追加されます。そのため、 を呼び出すことはできます
Person.getFullName()
が、を
member.getFullName
スローし
TypeError
ます。

メソッドをすべてのオブジェクト インスタンスで使用できるようにする場合は、それをプロトタイプ プロパティに追加する必要があります。

Person.prototype.getFullName = function() {
  return `${this.firstName} ${this.lastName}`;
};

12. 出力は何ですか?
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"}
    undefined
  • B:
    Person {firstName: "Lydia", lastName: "Hallie"}
    Person {firstName: "Sarah", lastName: "Smith"}
  • C:
    Person {firstName: "Lydia", lastName: "Hallie"}
    {}
  • D:
    Person {firstName: "Lydia", lastName: "Hallie"}
    ReferenceError
答え

答え: A

については、キーワード

sarah
を使用しませんでした。
new
を使用する場合
new
this
作成する新しい空のオブジェクトを参照します。ただし、 を追加しない場合は、グローバル オブジェクト
new
this
参照します。

this.firstName
equals
"Sarah"
this.lastName
equalsと言いました
"Smith"
global.firstName = 'Sarah'
実際に行ったことは、との定義
global.lastName = 'Smith'
です。関数から値を返さないため、
sarah
それ自体は leftです。
undefined
Person


13. イベント伝播の 3 つのフェーズは何ですか?
  • A: ターゲット > キャプチャ > バブリング
  • B: バブリング > ターゲット > キャプチャ
  • C: ターゲット > バブリング > キャプチャ
  • D: キャプチャ > ターゲット > バブリング
答え

答え:D

キャプチャ段階では、イベントは祖先要素を通過してターゲット要素に到達します。その後、ターゲット要素に到達し、バブリングが始まります。


14. すべてのオブジェクトにはプロトタイプがあります。
  • B: 偽
答え

答え: B

基本オブジェクトを除いて、すべてのオブジェクトにはプロトタイプがあります。基本オブジェクトは、ユーザーが作成したオブジェクト、または

new
キーワードを使用して作成されたオブジェクトです。ベース オブジェクトは、 などのいくつかのメソッドとプロパティにアクセスできます
.toString
。これが、組み込みの JavaScript メソッドを使用できる理由です。このようなメソッドはすべて、プロトタイプで利用できます。JavaScript はオブジェクト上で直接それを見つけることはできませんが、プロトタイプ チェーンをたどってそこで見つけ、アクセスできるようにします。


15. 出力は何ですか?
function sum(a, b) {
  return a + b;
}

sum(1, '2');
  • A:
    NaN
  • B:
    TypeError
  • 子:
    "12"
  • D:
    3
答え

答え:C

JavaScript は動的に型付けされる言語です。特定の変数の型を指定しません。暗黙の型強制と呼ばれる、知らないうちに値が自動的に別の型に変換される可能性があります。強制は、ある型から別の型への変換です。

この例で

1
は、関数が意味を成して値を返すようにするために、JavaScript は数値を文字列に変換します。数値型 (
1
) と文字列型 (
'2'
) の加算では、数値は文字列として扱われます。のように文字列を連結できる
"Hello" + "World"
ので、ここで起こっているのはどちらが
"1" + "2"
を返すかということ
"12"
です。


16. 出力は何ですか?
let number = 0;
console.log(number++);
console.log(++number);
console.log(number);
  • A:
    1
    1
    2
  • B:
    1
    2
    2
  • 子:
    0
    2
    2
  • D:
    0
    1
    2
答え

答え:C

置単項演算子

++
:

  1. 値を返します (これは を返します
    0
    )
  2. 値を増やします (数値は現在
    1
    )

置単項演算子

++
:

  1. 値を増やします (数値は現在
    2
    )
  2. 値を返します (これは を返します
    2
    )

これは を返します

0 2 2


17. 出力は何ですか?
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
  • 子:
    "Lydia"
    ["", " is ", " years old"]
    21
答え

答え: B

タグ付きのテンプレート リテラルを使用する場合、最初の引数の値は常に文字列値の配列になります。残りの引数は、渡された式の値を取得します!


18. 出力は何ですか?
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.
  • 子:
    Hmm.. You don't have an age I guess
答え

答え:C

等価性をテストする場合、プリミティブはによって比較され、オブジェクトは参照によって比較されます。JavaScript は、オブジェクトがメモリ内の同じ場所への参照を持っているかどうかをチェックします。

比較している 2 つのオブジェクトにはそれがありません。パラメーターとして渡したオブジェクトは、同等性をチェックするために使用したオブジェクトとは異なるメモリ内の場所を参照しています。

{ age: 18 } === { age: 18 }
これが、 と の両方がを
{ age: 18 } == { age: 18 }
返す理由
false
です。


19. 出力は何ですか?
function getAge(...args) {
  console.log(typeof args);
}

getAge(21);
  • A:
    "number"
  • B:
    "array"
  • 子:
    "object"
  • D:
    "NaN"
答え

答え:C

残りのパラメーター (

...args
) を使用すると、残りのすべての引数を配列に「収集」できます。配列はオブジェクトなので、
typeof args
戻ります
"object"


20. 出力は何ですか?
function getAge() {
  'use strict';
  age = 21;
  console.log(age);
}

getAge();
  • A:
    21
  • B:
    undefined
  • 子:
    ReferenceError
  • D:
    TypeError
答え

答え:C

を使用

"use strict"
すると、誤ってグローバル変数を宣言しないようにすることができます。変数を宣言したことがなく
age
、 を使用
"use strict"
しているため、参照エラーがスローされます。を使用しなければ
"use strict"
、プロパティ
age
がグローバル オブジェクトに追加されるため、機能していたはずです。


21. の値は
sum
?
const sum = eval('10*10+5');
  • A:
    105
  • B:
    "105"
  • 子:
    TypeError
  • D:
    "10*10+5"
答え

答え: A

eval
文字列として渡されたコードを評価します。この場合のように式の場合、式を評価します。式は
10 * 10 + 5
. これは数値を返します
105


22. cool_secret にアクセスできる期間はどれくらいですか?
sessionStorage.setItem('cool_secret', 123);
  • A: 永久に、データが失われることはありません。
  • B: ユーザーがタブを閉じたとき。
  • C: ユーザーがタブだけでなくブラウザ全体を閉じたとき。
  • D: ユーザーがコンピューターの電源を切ったとき。
答え

答え: B

に保存されたデータは、タブ

sessionStorage
を閉じると削除されます。

を使用した場合、たとえばが呼び出され

localStorage
ない限り、データは永遠にそこにありました。
localStorage.clear()


23. 出力は何ですか?
var num = 8;
var num = 10;

console.log(num);
  • A:
    8
  • B:
    10
  • 子:
    SyntaxError
  • D:
    ReferenceError
答え

答え: B

キーワードを使用

var
すると、同じ名前の複数の変数を宣言できます。その後、変数は最新の値を保持します。

let
または
const
ブロックスコープであるため、これを行うことはできません。


24. 出力は何ですか?
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:
    false
    true
    false
    true
  • B:
    false
    true
    true
    true
  • 子:
    true
    true
    false
    true
  • D:
    true
    true
    true
    true
答え

答え:C

すべてのオブジェクト キー (シンボルを除く) は、文字列として入力しなくても、内部では文字列です。

obj.hasOwnProperty('1')
これがtrue を返す理由です。

セットではそうはいかない。私たちのセットにはありません

'1'
:
set.has('1')
return
false
。数値型を持ち
1
、 を
set.has(1)
返します
true


25. 出力は何ですか?
const obj = { a: 'one', b: 'two', a: 'three' };
console.log(obj);
  • A:
    { a: "one", b: "two" }
  • B:
    { b: "two", a: "three" }
  • 子:
    { a: "three", b: "two" }
  • D:
    SyntaxError
答え

答え:C

同じ名前のキーが 2 つある場合は、キーが置き換えられます。最初の位置に残りますが、最後に指定された値になります。


26. JavaScript グローバル実行コンテキストは、グローバル オブジェクトと「this」キーワードの 2 つを作成します。
  • B: 偽
  • C:場合による
答え

答え: A

基本実行コンテキストはグローバル実行コンテキストです。これは、コードのどこからでもアクセスできるものです。


27. 出力は何ですか?
for (let i = 1; i < 5; i++) {
  if (i === 3) continue;
  console.log(i);
}
  • A:
    1
    2
  • B:
    1
    2
    3
  • 子:
    1
    2
    4
  • D:
    1
    3
    4
答え

答え:C

特定の

continue
条件が返される場合、ステートメントは反復をスキップします
true


28. 出力は何ですか?
String.prototype.giveLydiaPizza = () => {
  return 'Just give Lydia pizza already!';
};

const name = 'Lydia';

name.giveLydiaPizza();
  • A:
    "Just give Lydia pizza already!"
  • B:
    TypeError: not a function
  • 子:
    SyntaxError
  • D:
    undefined
答え

答え: A

String
プロパティを追加できる組み込みのコンストラクターです。プロトタイプにメソッドを追加しました。プリミティブ文字列は、文字列プロトタイプ関数によって生成される文字列オブジェクトに自動的に変換されます。したがって、すべての文字列 (文字列オブジェクト) がそのメソッドにアクセスできます!


29.アウトプットは何ですか?
const a = {};
const b = { key: 'b' };
const c = { key: 'c' };

a[b] = 123;
a[c] = 456;

console.log(a[b]);
  • A:
    123
  • B:
    456
  • 子:
    undefined
  • D:
    ReferenceError
答え

答え: B

オブジェクト キーは自動的に文字列に変換されます。

a
の値を持つオブジェクトをオブジェクトのキーとして設定しようとしています
123

ただし、オブジェクトを文字列化すると、 になり

"[object Object]"
ます。つまり、ここで言っているのは、ということ
a["[object Object]"] = 123
です。その後、もう一度同じことを試みることができます。
c
暗黙的に文字列化する別のオブジェクトです。それでは、
a["[object Object]"] = 456
.

次に、ログに記録します

a[b]
が、これは実際には
a["[object Object]"]
です。これを に設定しただけ
456
なので、 が返されます
456


30. 出力は何ですか?
const foo = () => console.log('First');
const bar = () => setTimeout(() => console.log('Second'));
const baz = () => console.log('Third');

bar();
foo();
baz();
  • A:
    First
    Second
    Third
  • B:
    First
    Third
    Second
  • 子:
    Second
    First
    Third
  • D:
    Second
    Third
    First
答え

答え: B

関数が

setTimeout
あり、最初に呼び出しました。それでも、それは最後に記録されました。

This is because in browsers, we don't just have the runtime engine, we also have something called a

WebAPI
. The
WebAPI
gives us the
setTimeout
function to start with, and for example the DOM.

After the callback is pushed to the WebAPI, the

setTimeout
function itself (but not the callback!) is popped off the stack.

Now,

foo
gets invoked, and
"First"
is being logged.

foo
is popped off the stack, and
baz
gets invoked.
"Third"
gets logged.

The WebAPI can't just add stuff to the stack whenever it's ready. Instead, it pushes the callback function to something called the queue.

ここで、イベント ループが機能し始めます。イベント ループは、スタックとタスク キューを調べます。スタックが空の場合、キューの最初のものを取得してスタックにプッシュします。

bar
呼び出され、
"Second"
ログに記録され、スタックからポップされます。


31. ボタンをクリックしたときの event.target は?
<div onclick="console.log('first div')">
  <div onclick="console.log('second div')">
    <button onclick="console.log('button')">
      Click!
    </button>
  </div>
</div>
  • A:アウター
    div
  • B:インナー
    div
  • 子:
    button
  • D: ネストされたすべての要素の配列。
答え

答え:C

イベントの原因となった最も深くネストされた要素がイベントのターゲットです。泡立ちを止めることができます

event.stopPropagation


32. 段落をクリックすると、ログに記録される出力は何ですか?
<div onclick="console.log('div')">
  <p onclick="console.log('p')">
    Click here!
  </p>
</div>
  • A:
    p
    div
  • B:
    div
    p
  • 子:
    p
  • D:
    div
答え

答え: A

をクリックすると、と

p
の 2 つのログが表示されます。イベントの伝播には、キャプチャ、ターゲット、バブリングの 3 つのフェーズがあります。デフォルトでは、イベント ハンドラーはバブリング フェーズで実行されます ( に設定しない限り)。ネストされた最も深い要素から外側に移動します。
p
div
useCapture
true


33.出力は何ですか?
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 21
    Lydia is 21
  • B:
    function
    function
  • 子:
    Lydia is 21
    Lydia is 21
  • D:
    Lydia is 21
    function
答え

答え:D

this
両方とも、キーワードが参照するオブジェクトを渡すことができます。ただし、
.call
すぐに実行されます !

.bind.
関数のコピーを返しますが、コンテキストがバインドされています! すぐには実行されません。


34. 出力は何ですか?
function sayHi() {
  return (() => 0)();
}

console.log(typeof sayHi());
  • A:
    "object"
  • B:
    "number"
  • 子:
    "function"
  • D:
    "undefined"
答え

答え: B

この

sayHi
関数は、すぐに呼び出された関数式 (IIFE) の戻り値を返します。この関数
0
は type を返し
"number"
ました。

参考までに、組み込み型は

null
undefined
boolean
number
string
object
の7 つだけ
symbol
です。
"function"
関数はオブジェクトであるため、 type ではありません
"object"


35.これらの値のうち、誤っているのはどれですか?
0;
new Number(0);
('');
(' ');
new Boolean(false);
undefined;
  • A:
    0
    ''
    undefined
  • B:
    0
    ,
    new Number(0)
    ,
    ''
    ,
    new Boolean(false)
    ,
    undefined
  • 子:
    0
    ,
    ''
    ,
    new Boolean(false)
    ,
    undefined
  • D:全部嘘です
答え

答え: A

8 つの偽値があります。

  • undefined
  • null
  • NaN
  • false
  • ''
    (空文字列)
  • 0
  • -0
  • 0n
    (BigInt(0))

関数コンストラクターは、like

new Number
および
new Boolean
truey です。


36. 出力は何ですか?
console.log(typeof typeof 1);
  • A:
    "number"
  • B:
    "string"
  • 子:
    "object"
  • D:
    "undefined"
答え

答え: B

typeof 1
戻ります
"number"
typeof "number"
戻り値
"string"


37. 出力は何ですか?
const numbers = [1, 2, 3];
numbers[10] = 11;
console.log(numbers);
  • A:
    [1, 2, 3, 7 x null, 11]
  • B:
    [1, 2, 3, 11]
  • 子:
    [1, 2, 3, 7 x empty, 11]
  • D:
    SyntaxError
答え

答え:C

配列の長さを超える値を配列内の要素に設定すると、JavaScript は「空のスロット」と呼ばれるものを作成します。これらには実際には の値があり

undefined
ますが、次のように表示されます。

[1, 2, 3, 7 x empty, 11]

実行する場所によって異なります (ブラウザ、ノードなどごとに異なります)。


38.出力は何ですか?
(() => {
  let x, y;
  try {
    throw new Error();
  } catch (x) {
    (x = 1), (y = 2);
    console.log(x);
  }
  console.log(x);
  console.log(y);
})();
  • A:
    1
    undefined
    2
  • B:
    undefined
    undefined
    undefined
  • 子:
    1
    1
    2
  • D:
    1
    undefined
    undefined
答え

答え: A

catch
ブロックは引数 を受け取ります
x
。これは、
x
引数を渡すときの変数と同じではありません。この変数
x
はブロックスコープです。

後で、このブロック スコープの変数を に等しく

1
設定し、変数の値を設定します
y
。ここで、ブロック スコープの変数 をログに記録します。
x
これは に等しくなり
1
ます。

catch
ブロックの外側では、
x
は静止
undefined
しており、
y
2
です。ブロック
console.log(x)
の外に出たいときは を返し、 を返します。
catch
undefined
y
2


39. JavaScript のすべては...
  • A: プリミティブまたはオブジェクト
  • B: 関数またはオブジェクト
  • C:ひっかけ問題!オブジェクトのみ
  • D: 数値またはオブジェクト
答え

答え: A

JavaScript にはプリミティブ型とオブジェクトしかありません。

プリミティブ型は

boolean
null
undefined
bigint
number
string
および
symbol
です。

プリミティブとオブジェクトの違いは、プリミティブにはプロパティやメソッドがないことです。

'foo'.toUpperCase()
ただし、 は に評価され
'FOO'
、 にはならないことに注意してください
TypeError
。これは、文字列などのプリミティブのプロパティまたはメソッドにアクセスしようとすると、JavaScript がラッパー クラスの 1 つを使用してプリミティブ型を暗黙的にラップし
String
、式の評価後すぐにラッパーを破棄するためです。
null
およびを除くすべてのプリミティブ
undefined
は、この動作を示します。


40. 出力は何ですか?
[[0, 1], [2, 3]].reduce(
  (acc, cur) => {
    return acc.concat(cur);
  },
  [1, 2],
);
  • A:
    [0, 1, 2, 3, 1, 2]
  • B:
    [6, 1, 2]
  • 子:
    [1, 2, 0, 1, 2, 3]
  • D:
    [1, 2, 6]
答え

答え:C

[1, 2]
は当社の初期値です。これが最初の値であり、最初の の値です
acc
。第 1 ラウンドでは、
acc
[1,2]
、および
cur
[0, 1]
です。それらを連結すると、 になります
[1, 2, 0, 1]

次に、

[1, 2, 0, 1]
とです。それらを連結して取得します
acc
[2, 3]
cur
[1, 2, 0, 1, 2, 3]


41.出力は何ですか?
!!null;
!!'';
!!1;
  • A:
    false
    true
    false
  • B:
    false
    false
    true
  • 子:
    false
    true
    true
  • D:
    true
    true
    false
答え

答え: B

null
は誤りです。
!null
戻ります
true
!true
戻ります
false

""
は誤りです。
!""
戻ります
true
!true
戻ります
false

1
真実です。
!1
戻ります
false
!false
戻ります
true


42.
setInterval
メソッドはブラウザに何を返しますか?
setInterval(() => console.log('Hi'), 1000);
  • A: 一意の ID
  • B: 指定されたミリ秒数
  • C: 渡された関数
  • D:
    undefined
答え

答え: A

一意の ID を返します。この ID を使用して、

clearInterval()
関数でその間隔をクリアできます。


43.これは何を返しますか?
[...'Lydia'];
  • A:
    ["L", "y", "d", "i", "a"]
  • B:
    ["Lydia"]
  • 子:
    [[], "Lydia"]
  • D:
    [["L", "y", "d", "i", "a"]]
答え

答え: A

文字列はイテラブルです。スプレッド演算子は、イテラブルのすべての文字を 1 つの要素にマップします。


44.出力は何ですか?
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
  • 子:
    10, 20
  • D:
    0, 10 and 10, 20
答え

答え:C

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.

次に、

next()
メソッドを使用して関数を再度呼び出します。前に停止したところから続行を開始しますが、それでも に
i
等しくなり
10
ます。
yield
ここで、次のキーワードに遭遇し、 yield
i * 2
.
i
は に等しい
10
ので、 を返します。
10 * 2
これは
20
です。これにより、 が得られ
10, 20
ます。


45.これは何を返しますか?
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"
  • 子:
    "two" "one"
  • D:
    "one" "two"
答え

答え: B

Promise.race
複数の promise をメソッドに渡すと、解決/拒否する最初のpromise が解決/拒否されます。
setTimeout
メソッドにタイマーを渡します。最初のプロミス ( ) は 500 ミリ秒
firstPromise
、2 番目のプロミス (
secondPromise
) は 100 ミリ秒です。これは、 が
secondPromise
最初に の値で解決されることを意味します
'two'
res
の値を保持するよう
'two'
になり、ログに記録されます。


46.出力は何ですか?
let person = { name: 'Lydia' };
const members = [person];
person = null;

console.log(members);
  • A:
    null
  • B:
    [null]
  • 子:
    [{}]
  • D:
    [{ name: "Lydia" }]
答え

答え:D

まず、プロパティ

person
を持つオブジェクトの値を持つ変数を宣言し
name
ます。

次に、 という変数を宣言します

members
person
その配列の最初の要素を変数の値に等しく設定します。オブジェクトを互いに等しく設定すると、オブジェクトは参照によって相互作用します。ある変数から別の変数への参照を割り当てると、その参照のコピーが作成されます。(同じリファレンスを持っていないことに注意してください!)

次に、変数を に

person
等しく設定します
null

person
配列の最初の要素ではなく、変数の値のみを変更します。これは、その要素がオブジェクトへの別の (コピーされた) 参照を持っているためです。の最初の要素は
members
、元のオブジェクトへの参照を保持しています。配列をログに記録する
members
と、最初の要素にはまだオブジェクトの値が保持され、ログに記録されます。


47.出力は何ですか?
const person = {
  name: 'Lydia',
  age: 21,
};

for (const item in person) {
  console.log(item);
}
  • A:
    { name: "Lydia" }, { age: 21 }
  • B:
    "name", "age"
  • 子:
    "Lydia", 21
  • D:
    ["name", "Lydia"], ["age", 21]
答え

答え: B

ループを使用

for-in
すると、オブジェクト キー (この場合は
name
と) を反復処理できます
age
。内部的には、オブジェクト キーは文字列です (シンボルでない場合)。すべてのループで、
item
反復処理中の現在のキーに等しい値を設定します。まず、
item
は に等しく
name
、ログに記録されます。次に、
item
is equal to
age
であり、ログに記録されます。


48.出力は何ですか?
console.log(3 + 4 + '5');
  • A:
    "345"
  • B:
    "75"
  • 子:
    12
  • D:
    "12"
答え

答え: B

演算子の結合性は、コンパイラが式を評価する順序 (左から右または右から左) です。これは、すべての演算子の優先順位が同じ場合にのみ発生します。演算子のタイプは

+
. さらに、結合は左から右です。

3 + 4
最初に評価されます。これにより、数値が得られ
7
ます。

7 + '5'
"75"
強要による結果となります。JavaScript は数値
7
を文字列に変換します。質問 15 を参照してください
+
。演算子を使用して 2 つの文字列を連結できます。
"7" + "5"
になります
"75"


49. の値は
num
?
const num = parseInt('7*6', 10);
  • A:
    42
  • B:
    "42"
  • 子:
    7
  • D:
    NaN
答え

答え:C

文字列の最初の数字のみが返されます。基数(解析する数値の種類を指定するための 2 番目の引数: 基数 10、16 進数、8 進数、2 進数など) に基づいて

parseInt
、文字列内の文字が有効かどうかをチェックします。基数に有効な数値ではない文字が検出されると、解析を停止し、次の文字を無視します。

*
は有効な数値ではありません。
"7"
10 進数にのみ解析されます
7
num
の値を保持するようになりました
7


50.出力は何ですか?
[1, 2, 3].map(num => {
  if (typeof num === 'number') return;
  return num * 2;
});
  • A:
    []
  • B:
    [null, null, null]
  • 子:
    [undefined, undefined, undefined]
  • D:
    [ 3 x empty ]
答え

答え:C

配列をマッピングする場合、値は

num
現在ループしている要素と同じです。この場合、要素は数値なので、if ステートメントの条件は を
typeof num === "number"
返します
true
。map 関数は新しい配列を作成し、関数から返された値を挿入します。

ただし、値は返しません。関数から値を返さない場合、関数は を返します

undefined
。配列内のすべての要素に対して関数ブロックが呼び出されるため、各要素に対して
undefined
.


51.出力は何ですか?
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"
  • 子:
    { name: "Lydia" }, "1998"
  • D:
    { name: "Sarah" }, "1997"
答え

答え: A

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"
.

の値

person
はオブジェクトです。引数には、同じオブジェクト
member
への (コピーされた) 参照があります。オブジェクトのプロパティを変更すると、両方が同じオブジェクトへの参照を持っているため、 の値も変更されます。のプロパティは値と等しくなりました
member
person
person
name
"Lydia"


52.出力は何ですか?
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
  • 子:
    SyntaxError: can only throw Error objects
  • D:
    Oh no an error: Hello world!
答え

答え:D

この

throw
ステートメントを使用して、カスタム エラーを作成できます。このステートメントを使用すると、例外をスローできます。例外は、文字列数値ブール値、またはオブジェクトです。この場合、例外は string
'Hello world!'
です。

このステートメントを使用して、ブロック

catch
で例外がスローされた場合の対処方法を指定できます。
try
例外がスローされます: string
'Hello world!'
.
e
は、ログに記録されたその文字列と等しくなりました。これにより、 が得られ
'Oh an error: Hello world!'
ます。


53.出力は何ですか?
function Car() {
  this.make = 'Lamborghini';
  return { make: 'Maserati' };
}

const myCar = new Car();
console.log(myCar.make);
  • A:
    "Lamborghini"
  • B:
    "Maserati"
  • 子:
    ReferenceError
  • D:
    TypeError
答え

答え: B

プロパティを返す場合、プロパティの値は、コンストラクター関数で設定された値ではなく、返された値と等しくなります。文字列 を返す

"Maserati"
ので、
myCar.make
は と等しくなり
"Maserati"
ます。


54.出力は何ですか?
(() => {
  let x = (y = 10);
})();

console.log(typeof x);
console.log(typeof y);
  • A:
    "undefined", "number"
  • B:
    "number", "number"
  • 子:
    "object", "number"
  • D:
    "number", "undefined"
答え

答え: A

let x = (y = 10);
実際には次の省略形です。

y = 10;
let x = y;

y
equalを設定すると、実際にグローバル オブジェクトに
10
プロパティが追加されます (ブラウザ内、ノード内)。ブラウザでは、 は と等しくなります。
y
window
global
window.y
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 expression (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"
.

y
ただし、に設定する
y
と、グローバル変数が作成されました
10
。この値は、コードのどこからでもアクセスできます。
y
が定義され、 type の値を保持します
"number"
console.log(typeof y)
戻ります
"number"


55.出力は何ですか?
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"
  • 子:
    "Woof I am Mara"
    ,
    undefined
  • D:
    TypeError
    TypeError
答え

答え: A

delete
プロトタイプでも、キーワードを使用してオブジェクトからプロパティを削除できます。プロトタイプのプロパティを削除すると、プロトタイプ チェーンで使用できなくなります。この場合、
bark
関数は の後にプロトタイプで使用できなくなりますが
delete Dog.prototype.bark
、それでもアクセスしようとします。

関数ではないものを呼び出そうとすると、 a

TypeError
がスローされます。この場合
TypeError: pet.bark is not a function
、ので
pet.bark
です
undefined


56.出力は何ですか?
const set = new Set([1, 1, 2, 3, 4]);

console.log(set);
  • A:
    [1, 1, 2, 3, 4]
  • B:
    [1, 2, 3, 4]
  • 子:
    {1, 1, 2, 3, 4}
  • D:
    {1, 2, 3, 4}
答え

答え:D

Set
オブジェクトは一意の値のコレクションです。値はセット内で 1 回しか発生しません。

[1, 1, 2, 3, 4]
重複した値でiterable を渡しました
1
。セット内に同じ値を 2 つ持つことはできないため、そのうちの 1 つを削除します。これにより、 が得られ
{1, 2, 3, 4}
ます。


57.出力は何ですか?
// counter.js
let counter = 10;
export default counter;
// index.js
import myCounter from './counter';

myCounter += 1;

console.log(myCounter);
  • A:
    10
  • B:
    11
  • 子:
    Error
  • D:
    NaN
答え

答え:C

インポートされたモジュールは読み取り専用です。インポートされたモジュールを変更することはできません。それらをエクスポートするモジュールのみがその値を変更できます。

の値をインクリメントしようとすると

myCounter
、エラーがスローされます:
myCounter
is read-only and cannot be modified.


58.出力は何ですか?
const name = 'Lydia';
age = 21;

console.log(delete name);
console.log(delete age);
  • A:
    false
    true
  • B:
    "Lydia"
    21
  • 子:
    true
    ,
    true
  • D:
    undefined
    undefined
答え

答え: A

delete
演算子はブール値を返します。
true
削除が成功した場合、それ以外の場合は を返し
false
ます。ただし、、またはキーワードで宣言された変数は
var
const
演算子を
let
使用して削除することはできません。
delete

name
変数はキーワードで宣言されているため
const
、その削除は成功しません:
false
が返されます。
age
equal をに設定すると、グローバル オブジェクトに
21
呼び出されるプロパティが実際に追加されます。
age
この方法でオブジェクトからプロパティを正常に削除でき、グローバル オブジェクトも削除できるため、 が
delete age
返されます
true


59.出力は何ですか?
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]
  • 子:
    1
  • D:
    [1]
答え

答え:C

配列から値をアンパックしたり、オブジェクトからプロパティをアンパックしたりできます。例えば:

[a, b] = [1, 2];

の値

a
は now
1
、の値
b
は now
2
です。質問で実際に行ったことは次のとおりです。

[y] = [1, 2, 3, 4, 5];

これは、 の値が

y
配列の最初の値である number と等しいことを意味します
1
。をログに記録する
y
と、
1
が返されます。


60.出力は何ですか?
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 }
  • 子:
    { admin: true, user: ["Lydia", 21] }
  • D:
    { admin: true }
答え

答え: B

スプレッド演算子を使用してオブジェクトを組み合わせることができます

...
。あるオブジェクトのキーと値のペアのコピーを作成し、それらを別のオブジェクトに追加できます。この場合、オブジェクトのコピーを作成し、
user
それらをオブジェクトに追加し
admin
ます。
admin
オブジェクトには、コピーされたキーと値のペアが含まれるようになり、
{ admin: true, name: "Lydia", age: 21 }
.


61.出力は何ですか?
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"]
  • 子:
    { name: "Lydia"}
    ,
    ["name", "age"]
  • D:
    { name: "Lydia"}
    ["age"]
答え

答え: B

メソッドを使用

defineProperty
すると、オブジェクトに新しいプロパティを追加したり、既存のプロパティを変更したりできます。メソッドを使用してオブジェクトにプロパティを追加する場合
defineProperty
、デフォルトではそれらはenumerable ではありません
Object.keys
メソッドはすべての列挙可能なものを返します、オブジェクトから
"name"
プロパティ名を返します。この場合は.

メソッドを使用して追加されたプロパティ

defineProperty
は、デフォルトでは不変です。
writable
configurable
および
enumerable
プロパティを使用して、この動作をオーバーライドできます。このように、
defineProperty
メソッドを使用すると、オブジェクトに追加するプロパティをより詳細に制御できます。


62.出力は何ですか?
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"}"
  • 子:
    "["level", "health"]"
  • D:
    "{"username": "lydiahallie", "level":19, "health":90}"
答え

答え: A

の 2 番目の引数

JSON.stringify
置換子です. The replacer can either be a function or an array, and lets you control what and how the values should be stringified.

replacer がarrayの場合、配列に含まれるプロパティ名のみが JSON 文字列に追加されます。この場合、含まれる名前

"level"
のプロパティのみが除外されます。は に等しくなりました。
"health"
"username"
data
"{"level":19, "health":90}"

replacer がfunctionの場合、この関数は、文字列化するオブジェクトのすべてのプロパティで呼び出されます。この関数から返される値は、JSON 文字列に追加されたときのプロパティの値になります。値が の場合

undefined
、このプロパティは JSON 文字列から除外されます。


63.出力は何ですか?
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
  • 子:
    11
    ,
    11
  • D:
    11
    12
答え

答え: A

単項演算子は、

++
最初にオペランドの値を返し次にオペランドの値をインクリメントします。関数は最初に の値を返すため、 の値はであり
num1
、その後は の値をインクリメントするだけです。
10
increaseNumber
num
10
num

num2
10
渡し
num1
たので、
increasePassedNumber
です。
number
と等しい
10
( の値
num1
。繰り返しますが、単項演算子
++
は最初にオペランドの値を返し次にオペランドの値をインクリメントします。 の値
number
10
であるため、
num2
と等しくなり
10
ます。


64.出力は何ですか?
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
  • 子:
    20
    ,
    20
    ,
    20
    ,
    40
  • D:
    NaN
    NaN
    20
    40
答え

答え:C

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
.

3回目にmultiplyを呼び出すときは、引数を渡します: と呼ばれるオブジェクト

value
です。この
*=
演算子は、実際には の省略形です
x.number = x.number * 2
。 の値を変更し
x.number
、乗算した値をログに記録します
20

value
4 回目は、オブジェクトを再度渡します。
x.number
は以前に に変更された
20
ため、
x.number *= 2
ログに記録され
40
ます。


65.出力は何ですか?
[1, 2, 3, 4].reduce((x, y) => console.log(x, y));
  • A:
    1
    2
    そして
    3
    3
    そして
    6
    4
  • B:
    1
    2
    そして
    2
    3
    そして
    3
    4
  • C :
    1
    undefined
    とととと
    2
    undefined
    _
    3
    undefined
    4
    undefined
  • D:
    1
    2
    そして
    undefined
    3
    そして
    undefined
    4
答え

答え:D

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.

最初の呼び出しでは、アキュムレータ (

x
) は
1
であり、現在の値 (
y
) は
2
です。コールバック関数から戻るのではなく、アキュムレータと現在の値をログに記録し、ログ
1
に記録し
2
ます。

関数から値を返さない場合は、 を返します

undefined
。次の呼び出しでは、アキュムレータは
undefined
で、現在の値は
3
です。
undefined
そして
3
ログを取ります。

4 回目の呼び出しでも、コールバック関数から戻りません。アキュムレータは再び

undefined
で、現在の値は
4
です。
undefined
そして
4
ログを取ります。


66. どのコンストラクターを使用すると、
Dog
クラスを正常に拡張できますか?
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;
  }

};
  • あ:1
  • B: 2
  • 子:3
  • D: 4
答え

答え: B

this
派生クラスでは、 を呼び出す前にキーワードにアクセスできません
super
。それを行おうとすると、ReferenceError がスローされます。1 と 4 は参照エラーをスローします。

super
キーワードを使用して、指定された引数でその親クラスのコンストラクターを呼び出します。親のコンストラクターが
name
引数を受け取るので、 に渡す必要があり
name
ます
super

このクラスは、 を拡張するため、およびクラスの追加プロパティとして

Labrador
2 つの引数を受け取ります。どちらもコンストラクター関数 on に渡す必要があります。これは、コンストラクター 2 を使用して正しく行われます。
name
Dog
size
Labrador
Labrador


67.出力は何ですか?
// 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
  • 子:
    running sum.js
    ,
    3
    ,
    running index.js
  • D:
    running index.js
    undefined
    running sum.js
答え

答え: B

キーワードを使用する

import
と、インポートされたすべてのモジュールが事前解析されます。これは、インポートされたモジュールが最初に実行され、モジュールをインポートするファイル内のコードが実行された後に実行されることを意味します。

require()
これは、 CommonJS と
import
!の違いです。を使用
require()
すると、コードの実行中に必要に応じて依存関係を読み込むことができます。, ,
require
の代わりに使用した場合、コンソールにログが記録されます。
import
running index.js
running sum.js
3


68.出力は何ですか?
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
  • 子:
    true
    ,
    false
    ,
    true
  • D:
    true
    true
    true
答え

答え: A

すべてのシンボルは完全にユニークです。Symbol に渡される引数の目的は、Symbol に説明を与えることです。Symbol の値は、渡された引数に依存しません。

Symbol('foo')
等価性をテストするとき、最初の と 2 番目の という2 つのまったく新しいシンボルを作成してい
Symbol('foo')
ます。これら 2 つの値は一意であり、互いに等しくないため、
Symbol('foo') === Symbol('foo')
が返されます
false


69.出力は何ですか?
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"
    )
  • 子:
    " Lydia Hallie"
    ,
    "Lydia Hallie"
    (
    "[1x whitespace]Lydia Hallie"
    ,
    "Lydia Hallie"
    )
  • D:
    "Lydia Hallie"
    "Lyd"
答え

答え:C

メソッドを使用

padStart
すると、文字列の先頭にパディングを追加できます。このメソッドに渡される値は、文字列とパディングの合計の長さです。文字列
"Lydia Hallie"
の長さは
12
です。
name.padStart(13)
12 + 1 は 13 であるため、文字列の先頭に 1 つのスペースを挿入します。

メソッドに渡された引数が

padStart
配列の長さよりも小さい場合、パディングは追加されません。


70.出力は何ですか?
console.log('🥑' + '💻');
  • A:
    "🥑💻"
  • B:
    257548
  • C: コード ポイントを含む文字列
  • D: エラー
答え

答え: A

演算子を使用すると

+
、文字列を連結できます。この場合、文字列
"🥑"
と文字列を連結し
"💻"
、結果は になり
"🥑💻"
ます。


71. console.log ステートメントの後にコメントアウトされた値をどのようにログに記録できますか?
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").value
    game.next().value
  • B:
    game.next.value("Yes")
    game.next.value()
  • C:
    game.next().value
    game.next("Yes").value
  • D:
    game.next.value()
    game.next.value("Yes")
答え

答え:C

ジェネレーター関数は、

yield
キーワードを検出すると実行を「一時停止」します。まず、関数に文字列 "Do you love JavaScript?" を生成させる必要があります。これは、 を呼び出すことで実行できます
game.next().value

yield
最初のキーワードが見つかるまで、すべての行が実行されます。
yield
関数内の最初の行にキーワードがあります: 実行は最初の yield で停止します! これは、変数
answer
がまだ定義されていないことを意味します。

を呼び出すと、この場合

game.next("Yes").value
、前の値は関数に
yield
渡されたパラメーターの値に置き換えられます。変数の値は に等しくなりました。if ステートメントの条件が返され、ログに記録されます。
next()
"Yes"
answer
"Yes"
false
JavaScript loves you back ❤️


72.出力は何ですか?
console.log(String.raw`Hello\nworld`);
  • A:
    Hello world!
  • B:
    Hello

         
    world
  • 子:
    Hello\nworld
  • D:
    Hello\n

         
    world
答え

答え:C

String.raw
エスケープ ( 、 など) が無視される文字列を
\n
返し
\v
ます
\t
! 次のような結果になる可能性があるため、バックスラッシュが問題になる可能性があります。

const path = `C:\Documents\Projects\table.html`

その結果、次のようになります。

"C:DocumentsProjects able.html"

を使用

String.raw
すると、エスケープを無視して次のように出力します。

C:\Documents\Projects\table.html

この場合、文字列は

Hello\nworld
であり、ログに記録されます。


73.出力は何ですか?
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!"}
  • 子:
    Promise {<pending>}
  • D:
    undefined
答え

答え:C

非同期関数は常に promise を返します。

await
プロミスが解決するまでまだ待たなければなりません: 保留中のプロミスは、それと等しい値を設定するために呼び出すと返されます
getData()
data

解決された value にアクセスしたい場合は、メソッド on

"I made it"
を使用できます。
.then()
data

data.then(res => console.log(res))

これはログに記録されます

"I made it!"


74.出力は何ですか?
function addToList(item, list) {
  return list.push(item);
}

const result = addToList('apple', ['banana']);
console.log(result);
  • A:
    ['apple', 'banana']
  • B:
    2
  • 子:
    true
  • D:
    undefined
答え

答え: B

この

.push()
メソッドは、新しい配列の長さを返します! 以前は、配列には 1 つの要素 ( string
"banana"
) が含まれ、長さは でし
1
た。文字列を配列に追加する
"apple"
と、配列には 2 つの要素が含まれ、長さは になり
2
ます。これは
addToList
関数から返されます。

この

push
メソッドは元の配列を変更します。配列の長さではなく、関数から配列を返したい場合は、プッシュしてから返す必要があります。
list
item


75.出力は何ですか?
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 }
  • 子:
    { x: 100 }
  • D:
    ReferenceError
答え

答え: B

Object.freeze
オブジェクトのプロパティを追加、削除、または変更することを不可能にします (プロパティの値が別のオブジェクトでない限り)。

変数を作成し、凍結されたオブジェクトと

shape
等しくなるように設定すると、凍結されたオブジェクトも参照されます。を使用して、オブジェクトが凍結されているかどうかを確認できます。この場合、変数には凍結されたオブジェクトへの参照があるため、true を返します。
box
shape
Object.isFrozen
Object.isFrozen(shape)
shape

shape
は凍結されており、 の値はオブジェクト
x
ではないため、プロパティを変更することはできません
x
x
は依然として に等しく
10
{ x: 10, y: 20 }
ログに記録されます。


76.出力は何ですか?
const { name: myName } = { name: 'Lydia' };

console.log(name);
  • A:
    "Lydia"
  • B:
    "myName"
  • 子:
    undefined
  • D:
    ReferenceError
答え

答え:C

name
右側のオブジェクトからプロパティをアンパックすると、その値
"Lydia"
が という名前の変数に割り当てられます
myName

を使用して、右側のプロパティの値で

{ name: myName }
呼び出される新しい変数を作成することを JavaScript に伝えます。
myName
name

をログに記録しようとして

name
いるため、定義されていない変数が
undefined
左側の代入で返されます。後で、
Lydia
破壊代入によって の値が格納されます。


77. これは純関数ですか?
function sum(a, b) {
  return a + b;
}
  • A: はい
  • B: いいえ
答え

答え: A

純粋な関数は、同じ引数が渡された場合、常に同じ結果を返す関数です。

関数は

sum
常に同じ結果を返します。と を渡す
1
2
常に
3
副作用なしで返されます。と を渡す
5
10
常に が返さ
15
れます。これが純関数の定義です。


78.アウトプットは何ですか?
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! 20
    Calculated! 20
    Calculated! 20
  • B:
    Calculated! 20
    From cache! 20
    Calculated! 20
  • 子:
    Calculated! 20
    From cache! 20
    From cache! 20
  • D:
    Calculated! 20
    From cache! 20
    Error
答え

答え:C

add
関数はメモ化された関数です。メモ化を使用すると、関数の実行を高速化するために関数の結果をキャッシュできます。この場合、
cache
以前に返された値を格納するオブジェクトを作成します。

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 }
.

2 回目では、

cache
オブジェクトには に対して返される値が含まれます
10
。if ステートメントの条件が
num in cache
返され
true
'From cache! 20'
ログに記録されます。

5 * 2
3 回目は、に評価される関数に渡し
10
ます。
cache
オブジェクトには、 に対して返される値が含まれています
10
。if ステートメントの条件が
num in cache
返され
true
'From cache! 20'
ログに記録されます。


79.アウトプットは何ですか?
const myLifeSummedUp = ['☕', '💻', '🍷', '🍫'];

for (let item in myLifeSummedUp) {
  console.log(item);
}

for (let item of myLifeSummedUp) {
  console.log(item);
}
  • A:
    0
    1
    2
    3
    "☕"
    "💻"
    "🍷"
    "🍫"
  • B:
    "☕"
    "💻"
    "🍷"
    "🍫"
    "☕"
    "💻"
    "🍷"
    "🍫"
  • C:
    "☕"
    "💻"
    "🍷"
    "🍫"
    0
    1
    2
    3
  • D:
    0
    1
    2
    3
    {0: "☕", 1: "💻", 2: "🍷", 3: "🍫"}
答え

答え: A

for-inループを使用すると、列挙可能なプロパティを反復処理できます。配列では、列挙可能なプロパティは配列要素の「キー」であり、実際にはそのインデックスです。配列は次のように表示できます。

{0: "☕", 1: "💻", 2: "🍷", 3: "🍫"}

キーは列挙可能なプロパティです。

0
1
2
3
ログを取得します。

for-ofループを使用すると、iterablesを反復処理できます。配列はイテラブルです。配列を反復処理すると、変数「item」は現在反復処理中の要素と等しくなり、

"☕"
"💻"
"🍷"
"🍫"
ログに記録されます。


80.アウトプットは何ですか?
const list = [1 + 2, 1 * 2, 1 / 2];
console.log(list);
  • A:
    ["1 + 2", "1 * 2", "1 / 2"]
  • B:
    ["12", 2, 0.5]
  • 子:
    [3, 2, 0.5]
  • D:
    [1, 1, 1]
答え

答え:C

配列要素は、任意の値を保持できます。数値、文字列、オブジェクト、その他の配列、null、ブール値、未定義、および日付、関数、計算などのその他の式。

要素は戻り値と等しくなります。

1 + 2
リターン
3
1 * 2
リターン
2
、および
1 / 2
リターン
0.5


81.アウトプットは何ですか?
function sayHi(name) {
  return `Hi there, ${name}`;
}

console.log(sayHi());
  • A:
    Hi there,
  • B:
    Hi there, undefined
  • 子:
    Hi there, null
  • D:
    ReferenceError
答え

答え: B

By default, arguments have the value of

undefined
, unless a value has been passed to the function. In this case, we didn't pass a value for the
name
argument.
name
is equal to
undefined
which gets logged.

In ES6, we can overwrite this default

undefined
value with default parameters. For example:

function sayHi(name = "Lydia") { ... }

In this case, if we didn't pass a value or if we passed

undefined
,
name
would always be equal to the string
Lydia


82. What is the output?
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
    "😎"
Answer

Answer: B

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.


83. What is the output?
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"
Answer

Answer: A

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.


84. What is the output?
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
Answer

Answer: C

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.


85. What kind of information would get logged?
fetch('https://www.website.com/api/user/1')
  .then(res => res.json())
  .then(res => console.log(res));
  • A: The result of the
    fetch
    method.
  • B: The result of the second invocation of the
    fetch
    method.
  • C: The result of the callback in the previous
    .then()
    .
  • D: It would always be undefined.
Answer

Answer: C

The value of

res
in the second
.then
is equal to the returned value of the previous
.then
. You can keep chaining
.then
s like this, where the value is passed to the next handler.


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
Answer

Answer: A

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
.


87. What's the output?
console.log('I want pizza'[0]);
  • A:
    """
  • B:
    "I"
  • C:
    SyntaxError
  • D:
    undefined
Answer

Answer: B

In order to get a character at a specific index of a string, you can use bracket notation. The first character in the string has index 0, and so on. In this case, we want to get the element with index 0, the character

"I'
, which gets logged.

Note that this method is not supported in IE7 and below. In that case, use

.charAt()
.


88. What's the output?
function sum(num1, num2 = num1) {
  console.log(num1 + num2);
}

sum(10);
  • A:
    NaN
  • B:
    20
  • C:
    ReferenceError
  • D:
    undefined
Answer

Answer: B

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.


89. What's the output?
// 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
Answer

Answer: A

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.


90. What's the output?
class Person {
  constructor(name) {
    this.name = name;
  }
}

const member = new Person('John');
console.log(typeof member);
  • A:
    "class"
  • B:
    "function"
  • C:
    "object"
  • D:
    "string"
Answer

Answer: C

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"
.


91. What's the output?
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
Answer

Answer: D

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.


92. What's the output?
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
Answer

Answer: D

関数などの通常の関数

giveLydiaPizza
には、
prototype
プロパティを持つオブジェクト (プロトタイプ オブジェクト) である
constructor
プロパティがあります。ただし、関数などの矢印関数には、このプロパティ
giveLydiaChocolate
がありません。を使用してプロパティにアクセスしようとすると、 が返されます。
prototype
undefined
prototype
giveLydiaChocolate.prototype


93.出力は何ですか?
const person = {
  name: 'Lydia',
  age: 21,
};

for (const [x, y] of Object.entries(person)) {
  console.log(x, y);
}
  • A:
    name
    Lydia
    age
    21
  • B:
    ["name", "Lydia"]
    ["age", 21]
  • C:
    ["name", "age"]
    undefined
  • D:
    Error
答え

答え: A

Object.entries(person)
キーとオブジェクトを含むネストされた配列の配列を返します。

[ [ 'name', 'Lydia' ], [ 'age', 21 ] ]

ループを使用して

for-of
、配列内の各要素 (この場合は部分配列) を反復処理できます。を使用して、for-of ループで部分配列を即座に分解できます
const [x, y]
x
はサブ配列の最初の要素と
y
等しく、サブ配列の 2 番目の要素と等しくなります。

最初の部分配列はであり

[ "name", "Lydia" ]
、 と
x
等しい
"name"
、および と
y
等しい
"Lydia"
であり、ログに記録されます。2 番目の部分配列は
[ "age", 21 ]
、 と
x
等しい
"age"
、および と
y
等しい
21
であり、ログに記録されます。


94.出力は何ですか?
function getItems(fruitList, ...args, favoriteFruit) {
  return [...fruitList, ...args, favoriteFruit]
}

getItems(["banana", "apple"], "pear", "orange")
  • A:
    ["banana", "apple", "pear", "orange"]
  • B:
    [["banana", "apple"], "pear", "orange"]
  • 子:
    ["banana", "apple", ["pear"], "orange"]
  • D:
    SyntaxError
答え

答え:D

...args
残りのパラメータです。残りのパラメータの値は、残りのすべての引数を含む配列であり、最後のパラメータのみにすることができます! この例では、rest パラメーターが 2 番目のパラメーターでした。これは不可能であり、構文エラーがスローされます。

function getItems(fruitList, favoriteFruit, ...args) {
  return [...fruitList, ...args, favoriteFruit];
}

getItems(['banana', 'apple'], 'pear', 'orange');

上記の例は機能します。これは配列を返します

[ 'banana', 'apple', 'orange', 'pear' ]


95.出力は何ですか?
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
    6
    および
    b is bigger
    3
  • B:
    a is bigger
    undefined
    および
    b is bigger
    undefined
  • C:
    undefined
    undefined
  • D:
    SyntaxError
答え

答え: B

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;

これは、関数がキーワード

a + b
の後に​​実行を停止するため、決して到達しないことを意味します。
return
ここのように値が返されない場合、関数は を返します
undefined
if/else
ステートメントの後に自動挿入がないことに注意してください!


96.出力は何ですか?
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"
  • 子:
    Error: cannot redeclare Person
  • D:
    SyntaxError
答え

答え: B

クラスを他のクラス/関数コンストラクターと同等に設定できます。この場合、 に

Person
等しく設定し
AnotherPerson
ます。このコンストラクタの名前はであるため、新しいインスタンス
Sarah
の name プロパティは です。
Person
member
"Sarah"


97.出力は何ですか?
const info = {
  [Symbol('a')]: 'b',
};

console.log(info);
console.log(Object.keys(info));
  • A:
    {Symbol('a'): 'b'}
    ["{Symbol('a')"]
  • B:
    {}
    []
  • C:
    { a: "b" }
    ["a"]
  • D:
    {Symbol('a'): 'b'}
    []
答え

答え:D

A Symbol is not enumerable. The Object.keys method returns all enumerable key properties on an object. The Symbol won't be visible, and an empty array is returned. When logging the entire object, all properties will be visible, even non-enumerable ones.

This is one of the many qualities of a symbol: besides representing an entirely unique value (which prevents accidental name collision on objects, for example when working with 2 libraries that want to add properties to the same object), you can also "hide" properties on objects this way (although not entirely. You can still access symbols using the

Object.getOwnPropertySymbols()
method).


98. What's the output?
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]]
    and
    SyntaxError
  • B:
    [1, [2, 3, 4]]
    and
    { name: "Lydia", age: 21 }
  • C:
    [1, 2, 3, 4]
    and
    { name: "Lydia", age: 21 }
  • D:
    Error
    and
    { name: "Lydia", age: 21 }
Answer

Answer: A

The

getList
function receives an array as its argument. Between the parentheses of the
getList
function, we destructure this array right away. You could see this as:

[x, ...y] = [1, 2, 3, 4]

With the rest parameter

...y
, we put all "remaining" arguments in an array. The remaining arguments are
2
,
3
and
4
in this case. The value of
y
is an array, containing all the rest parameters. The value of
x
is equal to
1
in this case, so when we log
[x, y]
,
[1, [2, 3, 4]]
gets logged.

The

getUser
function receives an object. With arrow functions, we don't have to write curly brackets if we just return one value. However, if you want to instantly return an object from an arrow function, you have to write it between parentheses, otherwise everything between the two braces will be interpreted as a block statement. In this case the code between the braces is not a valid JavaScript code, so a
SyntaxError
gets thrown.

The following function would have returned an object:

const getUser = user => ({ name: user.name, age: user.age })


99. What's the output?
const name = 'Lydia';

console.log(name());
  • A:
    SyntaxError
  • B:
    ReferenceError
  • C:
    TypeError
  • D:
    undefined
Answer

Answer: C

The variable

name
holds the value of a string, which is not a function, thus cannot invoke.

TypeErrors get thrown when a value is not of the expected type. JavaScript expected

name
to be a function since we're trying to invoke it. It was a string however, so a TypeError gets thrown: name is not a function!

SyntaxErrors get thrown when you've written something that isn't valid JavaScript, for example when you've written the word

return
as
retrun
. ReferenceErrors get thrown when JavaScript isn't able to find a reference to a value that you're trying to access.


100. What's the value of output?
// 🎉✨ 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
Answer

Answer: B

[]
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.


101. What's the value of output?
const one = false || {} || null;
const two = null || false || '';
const three = [] || 0 || true;

console.log(one, two, three);
  • A:
    false
    null
    []
  • B:
    null
    ""
    true
  • C:
    {}
    ""
    []
  • D:
    null
    null
    true
Answer

Answer: C

With the

||
operator, we can return the first truthy operand. If all values are falsy, the last operand gets returned.

(false || {} || null)
: the empty object
{}
is a truthy value. This is the first (and only) truthy value, which gets returned.
one
is equal to
{}
.

(null || false || "")
: all operands are falsy values. This means that the last operand,
""
gets returned.
two
is equal to
""
.

([] || 0 || "")
: the empty array
[]
is a truthy value. This is the first truthy value, which gets returned.
three
is equal to
[]
.


102. What's the value of output?
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!
    ,
    second
    and
    I have resolved!
    ,
    second
  • B:
    second
    ,
    I have resolved!
    and
    second
    ,
    I have resolved!
  • C:
    I have resolved!
    ,
    second
    and
    second
    ,
    I have resolved!
  • D:
    second
    ,
    I have resolved!
    and
    I have resolved!
    ,
    second
Answer

Answer: D

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 before moving to the next line.

This means that it waited for the

myPromise
to resolve with the value
I have resolved
, and only once that happened, we moved to the next line:
second
got logged.


103. What's the value of output?
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
Answer

Answer: C

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"
.


104. What's its value?
Promise.resolve(5);
  • A:
    5
  • B:
    Promise {<pending>: 5}
  • C:
    Promise {<fulfilled>: 5}
  • D:
    Error
Answer

Answer: C

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
.


105. What's its value?
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
Answer

Answer: B

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.


106. What's its value?
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
Answer

Answer: D

In JavaScript, we have two ways to access properties on an object: bracket notation, or dot notation. In this example, we use dot notation (

colorConfig.colors
) instead of bracket notation (
colorConfig["colors"]
).

With dot notation, JavaScript tries to find the property on the object with that exact name. In this example, JavaScript tries to find a property called

colors
on the
colorConfig
object. There is no property called
colors
, so this returns
undefined
. Then, we try to access the value of the first element by using
[1]
. We cannot do this on a value that's
undefined
, so it throws a
TypeError
:
Cannot read property '1' of undefined
.

JavaScript interprets (or unboxes) statements. When we use bracket notation, it sees the first opening bracket

[
and keeps going until it finds the closing bracket
]
. Only then, it will evaluate the statement. If we would've used
colorConfig[colors[1]]
, it would have returned the value of the
red
property on the
colorConfig
object.


107. What's its value?
console.log('❤️' === '❤️');
  • A:
    true
  • B:
    false
Answer

Answer: A

Under the hood, emojis are unicodes. The unicodes for the heart emoji is

"U+2764 U+FE0F"
. These are always the same for the same emojis, so we're comparing two equal strings to each other, which returns true.


108. Which of these methods modifies the original array?
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:
    map
    reduce
    slice
    splice
  • C:
    map
    slice
    splice
  • D:
    splice
Answer

Answer: D

With

splice
method, we modify the original array by deleting, replacing or adding elements. In this case, we removed 2 items from index 1 (we removed
'🥑'
and
'😍'
) and added the emoji instead.

map
,
filter
and
slice
return a new array,
find
returns an element, and
reduce
returns a reduced value.


109. What's the output?
const food = ['🍕', '🍫', '🥑', '🍔'];
const info = { favoriteFood: food[0] };

info.favoriteFood = '🍝';

console.log(food);
  • A:
    ['🍕', '🍫', '🥑', '🍔']
  • B:
    ['🍝', '🍫', '🥑', '🍔']
  • C:
    ['🍝', '🍕', '🍫', '🥑', '🍔']
  • D:
    ReferenceError
Answer

Answer: A

We set the value of the

favoriteFood
property on the
info
object equal to the string with the pizza emoji,
'🍕'
. A string is a primitive data type. In JavaScript, primitive data types don't interact by reference.

In JavaScript, primitive data types (everything that's not an object) interact by value. In this case, we set the value of the

favoriteFood
property on the
info
object equal to the value of the first element in the
food
array, the string with the pizza emoji in this case (
'🍕'
). A string is a primitive data type, and interact by value (see my blogpost if you're interested in learning more)

Then, we change the value of the

favoriteFood
property on the
info
object. The
food
array hasn't changed, since the value of
favoriteFood
was merely a copy of the value of the first element in the array, and doesn't have a reference to the same spot in memory as the element on
food[0]
. When we log food, it's still the original array,
['🍕', '🍫', '🥑', '🍔']
.


110. What does this method do?
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
Answer

Answer: A

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' }

111. What's the output?
let name = 'Lydia';

function getName() {
  console.log(name);
  let name = 'Sarah';
}

getName();
  • A: Lydia
  • B: Sarah
  • C:
    undefined
  • D:
    ReferenceError
Answer

Answer: D

Each function has its own execution context (or scope). The

getName
function first looks within its own context (scope) to see if it contains the variable
name
we're trying to access. In this case, the
getName
function contains its own
name
variable: we declare the variable
name
with the
let
keyword, and with the value of
'Sarah'
.

Variables with the

let
keyword (and
const
) are hoisted, but unlike
var
, don't get initialized. They are not accessible before the line we declare (initialize) them. This is called the "temporal dead zone". When we try to access the variables before they are declared, JavaScript throws a
ReferenceError
.

If we wouldn't have declared the

name
variable within the
getName
function, the javascript engine would've looked down the scope chain. The outer scope has a variable called
name
with the value of
Lydia
. In that case, it would've logged
Lydia
.

let name = 'Lydia';

function getName() {
  console.log(name);
}

getName(); // Lydia

112. What's the output?
function* generatorOne() {
  yield ['a', 'b', 'c'];
}

function* generatorTwo() {
  yield* ['a', 'b', 'c'];
}

const one = generatorOne();
const two = generatorTwo();

console.log(one.next().value);
console.log(two.next().value);
  • A:
    a
    and
    a
  • B:
    a
    and
    undefined
  • C:
    ['a', 'b', 'c']
    and
    a
  • D:
    a
    and
    ['a', 'b', 'c']
Answer

Answer: C

With the

yield
keyword, we
yield
values in a generator function. With the
yield*
keyword, we can yield values from another generator function, or iterable object (for example an array).

In

generatorOne
, we yield the entire array
['a', 'b', 'c']
using the
yield
keyword. The value of
value
property on the object returned by the
next
method on
one
(
one.next().value
) is equal to the entire array
['a', 'b', 'c']
.

console.log(one.next().value); // ['a', 'b', 'c']
console.log(one.next().value); // undefined

In

generatorTwo
, we use the
yield*
keyword. This means that the first yielded value of
two
, is equal to the first yielded value in the iterator. The iterator is the array
['a', 'b', 'c']
. The first yielded value is
a
, so the first time we call
two.next().value
,
a
is returned.

console.log(two.next().value); // 'a'
console.log(two.next().value); // 'b'
console.log(two.next().value); // 'c'
console.log(two.next().value); // undefined

113. What's the output?
console.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
Answer

Answer: A

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
.


114. What will happen?
let config = {
  alert: setInterval(() => {
    console.log('Alert!');
  }, 1000),
};

config = null;
  • A: The
    setInterval
    callback won't be invoked
  • B: The
    setInterval
    callback gets invoked once
  • C: The
    setInterval
    callback will still be called every second
  • D: We never invoked
    config.alert()
    , config is
    null
Answer

Answer: C

Normally when we set objects equal to

null
, those objects get garbage collected as there is no reference anymore to that object. However, since the callback function within
setInterval
is an arrow function (thus bound to the
config
object), the callback function still holds a reference to the
config
object. As long as there is a reference, the object won't get garbage collected. Since this is an interval, setting
config
to
null
or
delete
-ing
config.alert
won't garbage-collect the interval, so the interval will still be called. It should be cleared with
clearInterval(config.alert)
to remove it from memory. Since it was not cleared, the
setInterval
callback function will still get invoked every 1000ms (1s).


115. Which method(s) will return the value
'Hello world!'
?
const myMap = new Map();
const myFunc = () => 'greeting';

myMap.set(myFunc, 'Hello world!');

//1
myMap.get('greeting');
//2
myMap.get(myFunc);
//3
myMap.get(() => 'greeting');
  • A: 1
  • B: 2
  • C: 2 and 3
  • D: All of them
Answer

Answer: B

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.


116. What's the output?
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}
Answer

Answer: C

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 }
.


117. Which of the following options will return
6
?
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])
Answer

Answer: C

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.


118. What's the output?
let num = 1;
const list = ['🥳', '🤠', '🥰', '🤪'];

console.log(list[(num += 1)]);
  • A:
    🤠
  • B:
    🥰
  • C:
    SyntaxError
  • D:
    ReferenceError
Answer

Answer: B

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 🥰.


119. What's the output?
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:
    undefined
    undefined
    undefined
    undefined
  • B:
    Mara
    undefined
    Lydia Hallie
    ReferenceError
  • C:
    Mara
    null
    Lydia Hallie
    null
  • D:
    null
    ReferenceError
    null
    ReferenceError
Answer

Answer: B

With the optional chaining operator

?.
, we no longer have to explicitly check whether the deeper nested values are valid or not. If we're trying to access a property on an
undefined
or
null
value (nullish), the expression short-circuits and returns
undefined
.

person.pet?.name
:
person
has a property named
pet
:
person.pet
is not nullish. It has a property called
name
, and returns
Mara
.
person.pet?.family?.name
:
person
has a property named
pet
:
person.pet
is not nullish.
pet
does not have a property called
family
,
person.pet.family
is nullish. The expression returns
undefined
.
person.getFullName?.()
:
person
has a property named
getFullName
:
person.getFullName()
is not nullish and can get invoked, which returns
Lydia Hallie
.
member.getLastName?.()
: variable
member
is non existent therefore a
ReferenceError
gets thrown!


120. What's the output?
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
Answer

Answer: B

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.


121. What's the output?
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
Answer

Answer: D

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.


122. What's the output?
const name = 'Lydia Hallie';

console.log(!typeof name === 'object');
console.log(!typeof name === 'string');
  • A:
    false
    true
  • B:
    true
    false
  • C:
    false
    false
  • D:
    true
    true
Answer

Answer: C

typeof name
returns
"string"
. The string
"string"
is a truthy value, so
!typeof name
returns the boolean value
false
.
false === "object"
and
false === "string"
both return
false
.

(If we wanted to check whether the type was (un)equal to a certain type, we should've written

!==
instead of
!typeof
)


123. What's the output?
const add = x => y => z => {
  console.log(x, y, z);
  return x + y + z;
};

add(4)(5)(6);
  • A:
    4
    5
    6
  • B:
    6
    5
    4
  • C:
    4
    function
    function
  • D:
    undefined
    undefined
    6
Answer

Answer: A

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
.


124. What's the output?
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:
    1
    2
    3
  • D:
    undefined
    undefined
    undefined
Answer

Answer: C

The generator function

range
returns an async object with promises for each item in the range we pass:
Promise{1}
,
Promise{2}
,
Promise{3}
. We set the variable
gen
equal to the async object, after which we loop over it using a
for await ... of
loop. We set the variable
item
equal to the returned Promise values: first
Promise{1}
, then
Promise{2}
, then
Promise{3}
. Since we're awaiting the value of
item
, the resolved promise, the resolved values of the promises get returned:
1
,
2
, then
3
.


125. What's the output?
const myFunc = ({ x, y, z }) => {
  console.log(x, y, z);
};

myFunc(1, 2, 3);
  • A:
    1
    2
    3
  • B:
    {1: 1}
    {2: 2}
    {3: 3}
  • C:
    { 1: undefined }
    undefined
    undefined
  • D:
    undefined
    undefined
    undefined
Answer

Answer: D

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
.


126. What's the output?
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
Answer

Answer: B

With the

Intl.NumberFormat
method, we can format numeric values to any locale. We format the numeric value
130
to the
en-US
locale as a
unit
in
mile-per-hour
, which results in
130 mph
. The numeric value
300
to the
en-US
locale as a
currency
in
USD
results in
$300.00
.


127. What's the output?
const spookyItems = ['👻', '🎃', '🕸'];
({ item: spookyItems[3] } = { item: '💀' });

console.log(spookyItems);
  • A:
    ["👻", "🎃", "🕸"]
  • B:
    ["👻", "🎃", "🕸", "💀"]
  • C:
    ["👻", "🎃", "🕸", { item: "💀" }]
  • D:
    ["👻", "🎃", "🕸", "[object Object]"]
Answer

Answer: B

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.


128. What's the output?
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:
    true
    false
    true
    false
  • B:
    true
    false
    false
    false
  • C:
    false
    false
    true
    false
  • D:
    false
    true
    false
    true
Answer

Answer: C

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
.


129. What's the output?
const randomValue = 21;

function getInfo() {
  console.log(typeof randomValue);
  const randomValue = 'Lydia Hallie';
}

getInfo();
  • A:
    "number"
  • B:
    "string"
  • C:
    undefined
  • D:
    ReferenceError
Answer

Answer: D

Variables declared with the

const
keyword are not referenceable before their initialization: this is called the temporal dead zone. In the
getInfo
function, the variable
randomValue
is scoped in the functional scope of
getInfo
. On the line where we want to log the value of
typeof randomValue
, the variable
randomValue
isn't initialized yet: a
ReferenceError
gets thrown! The engine didn't go down the scope chain since we declared the variable
randomValue
in the
getInfo
function.


130. What's the output?
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 data
    Oh finally!
  • D:
    Oops didn't work
    Oh finally!
Answer

Answer: C

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.


131. What's the output?
const emojis = ['🥑', ['✨', '✨', ['🍕', '🍕']]];

console.log(emojis.flat(1));
  • A:
    ['🥑', ['✨', '✨', ['🍕', '🍕']]]
  • B:
    ['🥑', '✨', '✨', ['🍕', '🍕']]
  • C:
    ['🥑', ['✨', '✨', '🍕', '🍕']]
  • D:
    ['🥑', '✨', '✨', '🍕', '🍕']
Answer

Answer: B

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
['🥑', '✨', '✨', ['🍕', '🍕']]
.


132. What's the output?
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
Answer

Answer: D

counterOne
is an instance of the
Counter
class. The counter class contains a
count
property on its constructor, and an
increment
method. First, we invoked the
increment
method twice by calling
counterOne.increment()
. Currently,
counterOne.count
is
2
.

Then, we create a new variable

counterTwo
, and set it equal to
counterOne
. Since objects interact by reference, we're just creating a new reference to the same spot in memory that
counterOne
points to. Since it has the same spot in memory, any changes made to the object that
counterTwo
has a reference to, also apply to
counterOne
. Currently,
counterTwo.count
is
2
.

We invoke

counterTwo.increment()
, which sets
count
to
3
. Then, we log the count on
counterOne
, which logs
3
.


133. What's the output?
const myPromise = Promise.resolve(Promise.resolve('Promise'));

function funcOne() {
  setTimeout(() => console.log('Timeout 1!'), 0);
  myPromise.then(res => res).then(res => console.log(`${res} 1!`));
  console.log('Last line 1!');
}

async function funcTwo() {
  const res = await myPromise;
  console.log(`${res} 2!`)
  setTimeout(() => console.log('Timeout 2!'), 0);
  console.log('Last line 2!');
}

funcOne();
funcTwo();
  • A:
    Promise 1! Last line 1! Promise 2! Last line 2! Timeout 1! Timeout 2!
  • B:
    Last line 1! Timeout 1! Promise 1! Last line 2! Promise2! Timeout 2! 
  • C:
    Last line 1! Promise 2! Last line 2! Promise 1! Timeout 1! Timeout 2!
  • D:
    Timeout 1! Promise 1! Last line 1! Promise 2! Timeout 2! Last line 2!
Answer

Answer: C

First, we invoke

funcOne
. On the first line of
funcOne
, we call the asynchronous
setTimeout
function, from which the callback is sent to the Web API. (see my article on the event loop here.)

Then we call the

myPromise
promise, which is an asynchronous operation.

Both the promise and the timeout are asynchronous operations, the function keeps on running while it's busy completing the promise and handling the

setTimeout
callback. This means that
Last line 1!
gets logged first, since this is not an asynchonous operation.

Since the callstack is not empty yet, the

setTimeout
function and promise in
funcOne
cannot get added to the callstack yet.

In

funcTwo
, the variable
res
gets
Promise
because
Promise.resolve(Promise.resolve('Promise'))
is equivalent to
Promise.resolve('Promise')
since resolving a promise just resolves it's value. The
await
in this line stops the execution of the function until it receives the resolution of the promise and then keeps on running synchronously until completion, so
Promise 2!
and then
Last line 2!
are logged and the
setTimeout
is sent to the Web API.

Then the call stack is empty. Promises are microtasks so they are resolved first when the call stack is empty so

Promise 1!
gets to be logged.

Now, since

funcTwo
popped off the call stack, the call stack is empty. The callbacks waiting in the queue (
() => console.log("Timeout 1!")
from
funcOne
, and
() => console.log("Timeout 2!")
from
funcTwo
) get added to the call stack one by one. The first callback logs
Timeout 1!
, and gets popped off the stack. Then, the second callback logs
Timeout 2!
, and gets popped off the stack.


134. How can we invoke
sum
in
sum.js
from
index.js?
// 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
Answer

Answer: C

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


135. What's the output?
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
Answer

Answer: C

With a Proxy object, we can add custom behavior to an object that we pass to it as the second argument. In this case, we pass the

handler
object which contained two 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.


136. Which of the following will modify the
person
object?
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 })
Answer

Answer: A

With

Object.seal
we can prevent new properties from being added, or existing properties to be removed.

However, you can still modify the value of existing properties.


137. Which of the following will modify the
person
object?
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" }
Answer

Answer: C

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.


138. What's the output?
const add = x => x + x;

function myFunc(num = 2, value = add(num)) {
  console.log(num, value);
}

myFunc();
myFunc(3);
  • A:
    2
    4
    and
    3
    6
  • B:
    2
    NaN
    and
    3
    NaN
  • C:
    2
    Error
    and
    3
    6
  • D:
    2
    4
    and
    3
    Error
Answer

Answer: A

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
.


139. What's the output?
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
Answer

Answer: D

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!


140. What's missing?
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)
Answer

Answer: B

In order to iterate over the

members
in each element in the
teams
array, we need to pass
teams[i].members
to the
getMembers
generator function. The generator function returns a generator object. In order to iterate over each element in this generator object, we need to use
yield*
.

If we would've written

yield
,
return yield
, or
return
, the entire generator function would've gotten returned the first time we called the
next
method.


141. What's the output?
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"]
Answer

Answer: C

The

addHobby
function receives two arguments,
hobby
and
hobbies
with the default value of the
hobbies
array on the
person
object.

First, we invoke the

addHobby
function, and pass
"running"
as the value for
hobby
and an empty array as the value for
hobbies
. Since we pass an empty array as the value for
hobbies
,
"running"
gets added to this empty array.

Then, we invoke the

addHobby
function, and pass
"dancing"
as the value for
hobby
. We didn't pass a value for
hobbies
, so it gets the default value, the
hobbies
property on the
person
object. We push the hobby
dancing
to the
person.hobbies
array.

Last, we invoke the

addHobby
function, and pass
"baking"
as the value for
hobby
, and the
person.hobbies
array as the value for
hobbies
. We push the hobby
baking
to the
person.hobbies
array.

After pushing

dancing
and
baking
, the value of
person.hobbies
is
["coding", "dancing", "baking"]


142. What's the output?
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
Answer

Answer: B

We create the variable

pet
which is an instance of the
Flamingo
class. When we instantiate this instance, the
constructor
on
Flamingo
gets called. First,
"I'm pink. 🌸"
gets logged, after which we call
super()
.
super()
calls the constructor of the parent class,
Bird
. The constructor in
Bird
gets called, and logs
"I'm a bird. 🦢"
.


143. Which of the options result(s) in an error?
const emojis = ['🎄', '🎅🏼', '🎁', '⭐'];

/* 1 */ emojis.push('🦌');
/* 2 */ emojis.splice(0, 2);
/* 3 */ emojis = [...emojis, '🥂'];
/* 4 */ emojis.length = 0;
  • A: 1
  • B: 1 and 2
  • C: 3 and 4
  • D: 3
Answer

Answer: D

The

const
keyword simply means we cannot redeclare the value of that variable, it's read-only. However, the value itself isn't immutable. The properties on the
emojis
array can be modified, for example by pushing new values, splicing them, or setting the length of the array to 0.


144. What do we need to add to the
person
object to get
["Lydia Hallie", 21]
as the output of
[...person]
?
const person = {
  name: "Lydia Hallie",
  age: 21
}

[...person] // ["Lydia Hallie", 21]
  • A: Nothing, object are iterable by default
  • B:
    *[Symbol.iterator]() { for (let x in this) yield* this[x] }
  • C:
    *[Symbol.iterator]() { yield* Object.values(this) }
  • D:
    *[Symbol.iterator]() { for (let x in this) yield this }
Answer

Answer: C

デフォルトでは、オブジェクトは反復可能ではありません。イテレータプロトコルが存在する場合、イテラブルはイテラブルです。イテレータ シンボルを追加することで、これを手動で追加できます。

[Symbol.iterator]
たとえば、ジェネレータ関数にすることで、ジェネレータ オブジェクトを返す必要があります
*[Symbol.iterator]() {}
。このジェネレーター関数は、配列を返したい場合
Object.values
、オブジェクトの を生成する必要があります。
person
["Lydia Hallie", 21]
yield* Object.values(this)


145.出力は何ですか?
let count = 0;
const nums = [0, 1, 2, 3];

nums.forEach(num => {
	if (num) count += 1
})

console.log(count)
  • あ:1
  • B: 2
  • 子:3
  • D: 4
答え

答え:C

ループ内の

if
条件は、 の値が真か偽かをチェックします。配列の最初の数値は偽の値であるため、ステートメントのコード ブロックは実行されません。は、配列内の他の 3 つの数値 、、およびに対してのみインクリメントされます。は3 回インクリメントされるため、 の値はです。
forEach
num
nums
0
if
count
nums
1
2
3
count
1
count
3


146.出力は何ですか?
function getFruit(fruits) {
	console.log(fruits?.[1]?.[1])
}

getFruit([['🍊', '🍌'], ['🍍']])
getFruit()
getFruit([['🍍'], ['🍊', '🍌']])
  • A:
    null
    undefined
    🍌
  • B:
    []
    null
    🍌
  • 子:
    []
    ,
    []
    ,🍌
  • D:
    undefined
    undefined
    🍌
答え

答え:D

The

?
allows us to optionally access deeper nested properties within objects. We're trying to log the item on index
1
within the subarray that's on index
1
of the
fruits
array. If the subarray on index
1
in the
fruits
array doesn't exist, it'll simply return
undefined
. If the subarray on index
1
in the
fruits
array exists, but this subarray doesn't have an item on its
1
index, it'll also return
undefined
.

First, we're trying to log the second item in the

['🍍']
subarray of
[['🍊', '🍌'], ['🍍']]
. This subarray only contains one item, which means there is no item on index
1
, and returns
undefined
.

次に、値を引数として渡さずに関数を呼び出しています。

getFruits
つまり、デフォルト
fruits
で の値が
undefined
設定されています。のインデックスのアイテムを条件付きでチェーンしているため、インデックス
1
のこのアイテムが存在しないため
fruits
、返されます。
undefined
1

['🍊', '🍌']
最後に、 の部分配列の2 番目の項目を記録しようとしています
['🍍'], ['🍊', '🍌']
1
この部分配列内の index の項目は
🍌
で、ログに記録されます。


147.出力は何ですか?
class Calc {
	constructor() {
		this.count = 0 
	}

	increase() {
		this.count ++
	}
}

const calc = new Calc()
new Calc().increase()

console.log(calc.count)
  • A:
    0
  • B:
    1
  • 子:
    undefined
  • D:
    ReferenceError
答え

答え: A

変数をクラス

calc
の新しいインスタンスに等しく設定します。
Calc
次に、 の新しいインスタンスをインスタンス化し、このインスタンス
Calc
でメソッドを呼び出し
increase
ます。
Calc
count プロパティはクラスのコンストラクター内にあるため、 count プロパティはのプロトタイプで共有されません
Calc
。これは、 calc が指すインスタンスの count の値が更新されていないことを意味します。 count はまだ
0
です。


148.出力は何ですか?
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
  • 子:
    TypeError
  • D:
    ReferenceError
答え

答え: B

関数は、値が関数に渡された場合、ユーザーのおよびプロパティの

updateUser
値を更新し、その後、関数はオブジェクトを返します。関数の戻り値はオブジェクトです。つまり、updatedUser の値は、指している同じオブジェクトへの参照です。に等しい。
email
password
user
updateUser
user
user
user
updatedUser === user
true


149.出力は何ですか?
const fruit = ['🍌', '🍊', '🍎']

fruit.slice(0, 1)
fruit.splice(0, 1)
fruit.unshift('🍇')

console.log(fruit)
  • A:
    ['🍌', '🍊', '🍎']
  • B:
    ['🍊', '🍎']
  • 子:
    ['🍇', '🍊', '🍎']
  • D:
    ['🍇', '🍌', '🍊', '🍎']
答え

答え:C

First, we invoke the

slice
method on the fruit array. The slice method does not modify the original array, but returns the value that it sliced off the array: the banana emoji. Then, we invoke the
splice
method on the fruit array. The splice method does modify the original array, which means that the fruit array now consists of
['🍊', '🍎']
. At last, we invoke the
unshift
method on the
fruit
array, which modifies the original array by adding the provided value, ‘🍇’ in this case, as the first element in the array. The fruit array now consists of
['🍇', '🍊', '🍎']
.


150. What's the output?
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
Answer

Answer: B

Object keys are converted to strings.

Since the value of

dog
is an object,
animals[dog]
actually means that we’re creating a new property called
"object Object"
equal to the new object.
animals["object Object"]
is now equal to
{ emoji: "🐶", name: "Mara"}
.

cat
もオブジェクトです。これは、
animals[cat]
実際には の値を
animals["object Object"]
新しい cat プロパティで上書きしていることを意味します。

ロギング

animals[dog]
、または実際にはオブジェクトを文字列結果に
animals["object Object"]
変換してから、.
dog
"object Object"
{ emoji: "🐈", name: "Sara" }


151.出力は何ですか?
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
  • 子:
    undefined
  • D:
    ReferenceError
答え

答え: A

updateEmail
関数はアロー関数であり、オブジェクトにバインドされていません
user
。これは、
this
キーワードが
user
オブジェクトを参照しているのではなく、この場合はグローバル スコープを参照していることを意味します。
email
オブジェクト内の値は
user
更新されません。の値をログに記録すると
user.email
、 の元の値
my@email.com
が返されます。


152.出力は何ですか?
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']]
  • 子:
    [['First', 'Second']]
  • D:
    'Third'
答え

答え:D

この

Promise.all
メソッドは、渡された promise を並行して実行します。1 つの promise が失敗した場合、
Promise.all
メソッドは拒否された promise の値で拒否します。この場合、
promise3
値で拒否されました
"Third"
。関数内のエラーをキャッチするため
catch
に、呼び出し時にチェーンされたメソッドで拒否された値をキャッチしています。この値で拒否されたため、ログに記録されるだけです。
runPromises
runPromises
"Third"
promise3


153.
method
logの値は
{ name: "Lydia", age: 22 }
?
const keys = ["name", "age"]
const values = ["Lydia", 22]

const method = /* ?? */
Object[method](keys.map((_, i) => {
	return [keys[i], values[i]]
})) // { name: "Lydia", age: 22 }
  • A:
    entries
  • B:
    values
  • 子:
    fromEntries
  • D:
    forEach
答え

答え:C

この

fromEntries
メソッドは、2 次元配列をオブジェクトに変換します。各サブ配列の最初の要素がキーになり、各サブ配列の 2 番目の要素が値になります。この場合、配列をマッピングして
keys
います。これは、最初の要素が現在のインデックスのキー配列のアイテムであり、2 番目の要素が現在のインデックスの値配列のアイテムである配列を返します。

これにより、正しいキーと値を含むサブ配列の配列が作成されます。

{ name: "Lydia", age: 22 }


154.出力は何ですか?
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" }
  • 子:
    { email: "my@email.com", address: {} }
  • D:
    { email: "my@email.com", address: undefined }
答え

答え:C

のデフォルト値

address
は空のオブジェクト
{}
です。
member
関数によって返されたオブジェクトと等しい変数を設定したとき
createMember
、アドレスの値を渡していませんでした。これは、アドレスの値がデフォルトの空のオブジェクトであることを意味します
{}
。空のオブジェクトは真の値です。これは、条件の
address ? address : null
条件が を返すことを意味します
true
。address の値は空のオブジェクト
{}
です。


155.出力は何ですか?
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!
  • 子:
    TypeError
  • D:
    undefined
答え

答え: B

The condition within the

if
statement checks whether the value of
!typeof randomValue
is equal to
"string"
. The
!
operator converts the value to a boolean value. If the value is truthy, the returned value will be
false
, if the value is falsy, the returned value will be
true
. In this case, the returned value of
typeof randomValue
is the truthy value
"number"
, meaning that the value of
!typeof randomValue
is the boolean value
false
.

!typeof randomValue === "string"
always returns false, since we're actually checking
false === "string"
. Since the condition returned
false
, the code block of the
else
statement gets run, and
Yay it's a string!
gets logged.