⭐️ Interactive JavaScript Quiz #1
Tags: javascript
Published: 2020-02-25 18:16:05

We all know that JavaScript quizzes can be... awful and confusing 😐 The pointless `foo` `bar` `baz` questions ruin all the fun of JavaScript and often just cause even more confusion!

Last year, I made a GitHub Repo with tons of JavaScript questions that aren't questions like "tricky" or `"NaN === NaN"`, but rather focus on more realistic situations. I thought it would be fun to make it into an interactive game series here on Dev.to, with animated explanations wherever possible! 🥳

> {% github lydiahallie/javascript-questions no-readme %} Of course, the examples are still minimal and don't show "the best/most performant way to do it". Sometimes I have to do things a certain way in order to be able to show certain behavior that may happen, and explain it that way 🙂


---

#### 1. What's the output?

{% jsfiddle https://jsfiddle.net/lydiahallie/d9x4zv6L/31/ result height="600" %}

##### Explanation

With the `bind()` and `call()` method, we can decide to which object the `this` keyword should refer. In this example, we're saying that the `this` keyword within the `sayHi` function should refer to the `person` object by calling both `bind` and `call` on the `sayHi` function 🥳

Although the `bind()` and `call()` methods both allow us to specify which object the `this` keyword should refer to, there's a tiny difference: 

- `bind()` only returns a _**copy of the bound function**_ 
- `call()` executes the bound function immediately

First, we log `sayHi.call(person, 21)`. The `call` method executes the (bound) function immediately, which results in `Lydia is 21`. 

Then, we log `sayHi.bind(person, 21)`. The `bind` method returns a _copy_ of the bound function, meaning that we're simply logging a new, copied function 😃

---

#### 2. What's the output?


{% jsfiddle https://jsfiddle.net/lydiahallie/68o1s0uv/10/ result height="600" %}


#### Explanation

Whenever we declare a set a variable equal to an object, we're not actually giving that variable the value of that object. Instead, we're giving it the value of a _reference_ (or actually **pointer**) to that object in memory! ⚡️ 

In this case, we give the `person` variable the value of a reference (pointer) to the object `{ name: "Lydia" }` in memory.

<img src="https://dev-to-uploads.s3.amazonaws.com/i/docd8s1q6w44symo5jv5.gif" width="600" />

Then, we declare a variable called `members`. The value of `members` is a reference to that array in memory! 

The first element in the array that `members` has a reference to, is the object that `person` has a reference to. When we set objects equal to each other, we're actually creating a _copy of the reference_. This means that now `person` and the first element in the `members` array point to the same object in memory! 😃

<img src="https://dev-to-uploads.s3.amazonaws.com/i/drinnucl6rkpe7ywo54y.gif" width="600" />

Then, we set `person` equal to `null`. This means that `person` no longer has the value of the reference to the `{ name: "Lydia" }` object in memory: it now has a reference to `null`! 🎉 Since the first element in the array that `members` has a reference to has its own, copied reference, the change of the value of `person` does not affect the first element in that array! 

<img src="https://dev-to-uploads.s3.amazonaws.com/i/gq589tf2y8yb9uh74v4r.gif" width="600" />

Since the first element in the `members` array still has a reference to the object `{ name: "Lydia" }`, that object gets returned when logging the first element!

---

#### 3. What's the output?

{% jsfiddle https://jsfiddle.net/lydiahallie/5yezmo4c/1/ result height="600" %}

#### Explanation

We have a list of groceries! One item in this list is our favorite item, and one item in this list is our least favorite item.

First, we want to get the value of our favorite item, the grapes! One way of doing this, is by using the `find()` method. The `find` method returns the value of the item in the array that we're trying to find: the string with the grapes in this case `"🍇"`. We assign the variable `favoriteItem` to that returned value. 

<img src="https://dev-to-uploads.s3.amazonaws.com/i/e3zh399f04h4s9qho8em.gif" width="600" />

Since the string `"🍇"` is a primitive data type (it's a string! 🥳), the string gets passed by value. This means that the value of `favoriteItem` is a copy of the item `"🍇"` in the `groceries` array, without containing any references to the `groceries` array.

We no longer want the grapes as our favorite item! Instead, we want to make the avocado `"🥑"` our favorite item. The variable `favoriteItem` gets reassigned with the value `"🥑"`.

<img src="https://dev-to-uploads.s3.amazonaws.com/i/v2yfpee3lr689kqluupm.gif" width="600" />

Then, we want to find the index of our least favorite food: the string with the cheese `"🧀"`! In order to find the index of the cheese, we can use the `indexOf` method. To the `indexOf` method, we pass the value of the element of which we're trying to get the index in the `groceries` array: `"🧀"` in this case.

<img src="https://dev-to-uploads.s3.amazonaws.com/i/dkch0iumrtob02vb3vd0.gif" width="600" />

Perfect! We now have the index of our least favorite item. Time to replace the least favorite item with some good food: a pizza `"🍕"`. By replacing the value of the item on a specific index, we're modifying the `groceries` array. 

<img src="https://dev-to-uploads.s3.amazonaws.com/i/5qsbxx232i3o9cjv0tch.gif" width="600" />

Cool! We just changed the least favorite item in the groceries array. When logging the `groceries` array, `["🍅", "🍇", "🍕"]` got returned.

---

How'd it go? Did you get all 3 right? If yes, awesome! 🎉 If you made some mistakes, no worries at all! 

Hopefully you can learn something from the explanations, and take that new information into consideration the next time you may run into behavior that may seem "unexpected" 🙂

Feel free to reach out to me!

<table>
  <tr>
 <td>✨ <a href="https://www.twitter.com/lydiahallie">Twitter</a></td>
<td>👩🏽‍💻 <a href="https://www.instagram.com/theavocoder">Instagram</a></td>
<td>💻 <a href="https://www.github.com/lydiahallie">GitHub</a></td>
<td>💡 <a href="https://www.linkedin.com/in/lydia-hallie">LinkedIn</a></td>
<td>📷 <a href="https://www.youtube.com/channel/UC4EWKIKdKiDtAscQ9BIXwUw">YouTube</a></td>
<td>💌 <a href=mailto:lydiahallie.dev@gmail.com">Email</a></td>

</tr>
</table>