JavaScriptの基礎を楽しく学べるクイズ -Interactive JavaScript Quiz

JavaScriptの初心者向けに、楽しく学べるクイズを紹介します。
問題は3つ、解説はGIFアニメーションで分かりやすいと思います。

Interactive JavaScript Quiz

⭐️ Interactive JavaScript Quiz #1
by Lydia Hallie

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

JavaScriptのクイズは混乱する可能性があることを誰もが知っています。
無意味なfoo bar bazなどの問題はJavaScriptの面白さを台無しにし、さらに混乱を招くことがあります。

私は昨年GitHubでJavaScript Questionsを公開しました。今回はインタラクティブなゲームにすると面白いのではないかと思い、私は視覚学習者なので、可能な限りGIFアニメーションで解説してみました🥳

callとbindの違い

何が出力されるでしょうか?
下記の4つから選択してください、正解すると紙吹雪が舞います。

解説

bind()とcall()メソッドを使用すると、thisキーワードがどのオブジェクトを参照するかを決めることができます。この例では、sayHi関数でbindとcallの両方を呼び出すことで、sayHi関数内のthisキーワードがpersonオブジェクトを参照するようにしています🥳

bind()とcall()メソッドの両方で、thisキーワードが参照するオブジェクトを指定することができます、この2つにはわずかな違いがあります。

  • bind()は、バインドされた関数のコピーのみを返します。
  • call()は、バインドされた関数をすぐに実行します。

最初に「sayHi.call(person, 21)」をログに出力します。callメソッドは(バインドされた)関数をすぐに実行し、その結果「Lydia is 21」が出力されます。

次に「sayHi.bind(person, 21)」をログに出力します。bindメソッドはバインドされた関数のコピーを返します。つまり、新しくコピーされた関数をログに記録しているだけです 😃

オブジェクトの参照

何が出力されるでしょうか?
下記の4つから選択してください、正解すると紙吹雪が舞います。

解説

オブジェクトと等しい変数のセットを宣言するときはいつでも、その変数にそのオブジェクトの値を実際に与えているわけではありません。その代わりに、メモリ内のそのオブジェクトの参照(または実際にはポインタ)の値を与えます ⚡️

この例では、person変数にメモリ内のオブジェクト「{ name: "Lydia" }」への参照(ポインタ)の値を与えます。

aaaaa

person変数にメモリ内の「name: "Lydia" }」を与えている

そして、membersという変数を宣言します。
membersの値は、メモリ内のその配列への参照です!

membersが参照している配列の最初の要素は、personが参照しているオブジェクトです。オブジェクトをお互いに等しく定義すると、実際には参照のコピーが作成されます。つまり、personとmenbersの配列の最初の要素がメモリ内では同じオブジェクトを指していることになります 😃

personとmenbersの配列の最初の要素が同じオブジェクトを指している

personとmenbersの配列の最初の要素が同じオブジェクトを指している

そして、personをnullに等しく定義します。これは、personがメモリ内で{ name: "Lydia" }オブジェクトへの参照の値を持たなくなったことを意味します。これでnullへの参照を持つようになりました!🎉
membersが参照する配列の最初の要素にはそれ自身のコピーされた参照があるため、personの値を変更してもその配列の最初の要素には影響しません!

personの値を変更してもその配列の最初の要素には影響しない

personの値を変更してもその配列の最初の要素には影響しない

members配列の最初の要素にはまだオブジェクト{ name: "Lydia" }への参照があるため、最初の要素をログに出力する際に、そのオブジェクトが返されます!

配列内のアイテムの置き換え

何が出力されるでしょうか?
下記の4つから選択してください、正解すると紙吹雪が舞います。

解説

食べ物(groceries)のリストがあり、内1つのアイテムはお気に入り(favorite)で、内1つのアイテムは苦手(LeastFavorite)な食べ物です。

まず、お気に入りアイテム(FavoriteItem)のブドウの値を取得したいと思います。これを行うには、find()メソッドを使用します。findメソッドは、見つけようとしている配列内のアイテムの値を返します。ブドウの文字列は「🍇」で、変数FavoriteItemをその戻り値に割り当てます。

変数FavoriteItemをその戻り値に割り当てる

変数FavoriteItemをその戻り値に割り当てる

文字列「🍇」はプリミティブ型(文字列です!🥳)であるため、文字列は値として渡されます。つまり、FavoriteItemの値はgroceries配列内のアイテム「🍇」のコピーであり、groceries配列への参照は一切含まれていないという意味になります。

ブドウをお気に入りアイテムにするのではなく、代わりにアボカド「🥑」をお気に入りアイテムにしてみましょう。
変数favoriteItemには「🥑」という値が代入されます。

「🥑」をお気に入りアイテムにする

「🥑」をお気に入りアイテムにする

次に、苦手なアイテム(「チーズ🧀」です)のインデックスを見つけたいと思います。チーズのインデックスを見つけるためには、indexOfメソッドを使用します。indexOfメソッドにはgroceries配列内でインデックスを取得しようとしている要素の値を渡します。この場合は「🧀」です。

苦手なアイテムを見つける

苦手なアイテムを見つける

パーフェクト! これで苦手なアイテムのインデックスができました。苦手なアイテムを美味しいアイテム(「ピザ🍕」です)に置き換えてみましょう。
アイテムの値を特定のインデックスに置き換えることで、groceries配列を変更します。

「🧀」を「🍕」に置き換える

「🧀」を「🍕」に置き換える

クール! 食べ物のgroceries配列で一番好きな物を変更しました。groceries配列のログをとると「["🍅", "🍇", "🍕"]」が返されます。

いかがでしたか?
3問とも正解しましたか? 正解だったら、おめでとうございます🎉
不正解でも、問題ありません! 説明から学びことができます🙂

sponsors

top of page

©2020 coliss