5 JavaScript Questions and Answers to Test Your Skills
Tags: javascript, node, programming, typescript
Published: 2020-06-10 15:02:17

---
title: 5 JavaScript Questions and Answers to Test Your Skills
published: true
date: 2020-06-10 08:51:01 UTC
cover_image: https://livecodestream.dev/post/2020-06-10-5-javascript-questions-and-answers-to-test-your-skills/featured.jpg
tags: ["Javascript", "NodeJS", "Programming", "Typescript"]
canonical_url: http://livecodestream.dev/post/2020-06-10-5-javascript-questions-and-answers-to-test-your-skills/
---

Today we are going to continue learning our beloved JavaScript language, in this edition, we are going to test our skills by answering some JavaScript mini-challenges.

Even though I'll be giving the answer with an explanation at the end of each question, try to figure it out by yourself first, and then validate your answer against mine.

## Question #1: Array Sort Comparison
Consider the following arrays and conditions, what do you think would be the result?

```javascript
const arr1 = ['a', 'b', 'c']
const arr2 = ['c', 'b', 'a']

console.log(
    arr1.sort() === arr1,
    arr2 === arr2.sort(),
    arr1.sort() === arr2.sort()
)
```

### Answer

```javascript
true true false
```

Now that we know the result, let's explain why. For the first 2 outputs the explanation is rather simple, the `sort()` method sorts the original array and returns a reference to the same object, so `arr1.sort()` is actually a reference to the same object as `arr1`.

For the third output, `arr1.sort() === arr2.sort()`, even though the elements on each one of the arrays are the same, the `===` operator will not test the elements of the array but the reference of each object, which in this case is different, and thus returning `false`.

If you want to know more about array comparisons, check my article [Stranger Things, JavaScript Edition](https://livecodestream.dev/post/2020-06-03-stranger-things-javascript-edition/), and read **Scenario #5: Array equality** where I explain with more samples some weird array comparisons with explanations.

---

## Question #2: Object Mutability
For this scenario, I'd like to simulate an object which represents an author, and information about his website. We will then use the method `Object.freeze()` so it can't be changed, and we will put it to the test. What do you think will be the result?

```javascript
const author = {
  name: 'Juan',
  website: {
    type: 'blog',
    url: 'https://livecodestream.dev',
  }
}

Object.freeze(author)

author.website.type = 'test'

console.log(author.website.type)
```

### Answer

```javascript
test
```

If you got it right congrats! if not, don't worry, I was there too. Let's explain what happened.

When we called the method `Object.freeze()` we **froze** the object, meaning that the object cannot longer be changed; freezing an object prevents new properties from being added to it, existing properties from being removed or changed.

But then why were we able to change the object? Actually we didn't, and that's the trick. For all purposes in the variable `author` website is a reference to an object, and that reference remains the same throughout the code. We did change one attribute inside the `website` object, but that doesn't change the reference to the object itself.

If you are wondering what would happen if we try to change a direct property of the `author` object, there are 2 possible answers. Let's start with the first:

```javascript
author.name = 'Laura'
console.log(author.name)

---------
Output
---------
"Juan"
```

In this first scenario, even though we change the property `name` nothing really changed, we got no error, no warning, is like that line of code would have never been executed. The second option is in strict mode

```javascript
"use strict"; author.name = 'Laura'
Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Object>'
    at <anonymous>:1:27
```

In strict mode, if we try to modify a frozen object we get a `TypeError`. Much better than before.

---

## Question #3: Recursion
Given the following recursive function, what do you think the result would be when we call it with "blog" as a parameter?

```javascript
const recursive = str => {
  if (str.length > 1) {
      return recursive(str.slice(1))
  }

  return str
}

console.log(recursive('blog'))
```

### Answer

```javascript
g
```

For this question there is no trick, is just a basic use of a recursive function, which will continue calling itself until there's only one element in the string `str`, thus printing the last character of the original string, in this case `g`.
Recursive functions are important and can resolve problems in very interesting ways, and it's important that we understand them.

---

## Question #4: Scopes
What do you think the output to the console would be and why?

```javascript
(function(){
  const a = b = 3
})()

console.log("a defined? " + (typeof a !== 'undefined'))
console.log("b defined? " + (typeof b !== 'undefined'))
```

### Answer

```javascript
a defined? false
b defined? true
```

Weird alert! Since both `a` and `b` are defined within the enclosing scope of the function, you would expect that both `a` and `b` are actually `undefined`.

However, that is not the case. The issue here is the common misunderstanding that `const a = b = 3` is a shorthand for: `const a = 3; const b = 3;` but in fact, it's a shorthand for 

```javascript
b = 3;
const a = b;
```

But how can `b` be defined **outside** of the scope of the enclosing function? The trick is that `b` ends up being a global variable (as is not preceded by `let`, `const` or `var`). But `a` remains under the enclosing of the function.

Note that, in strict mode, this will generate a `ReferenceError: b is not defined`.

---

## Question #5: More on closures
The following snippet is an actual popular interview question, the question is, what do you think the output would be?

```javascript
for (var i = 0; i < 5; i++) {
  setTimeout(function() { console.log(i); }, i * 1000 );
}
```

### Answer

```javascript
5
5
5
5
5
```

Not exactly what you expected? The reason for this is that each function executed within the loop will be executed after the entire loop has completed and all will, therefore, reference the last value stored in `i`, which was `5`.

Closures can be used to prevent this problem by creating a unique scope for each iteration, storing each unique value of the variable within its scope, as follows:

```javascript
for (var i = 0; i < 5; i++) {
    (function(x) {
        setTimeout(function() { console.log(x); }, x * 1000 );
    })(i);
}
```

Another option available from ES2015 is to use `let` instead of `var`:

```javascript
for (let i = 0; i < 5; i++) {
	setTimeout(function() { console.log(i); }, i * 1000 );
}
```

---

## Conclusion

I hope you had fun and learn with it as much as I did, it has been a particularly fun article to write, and I may do more like this in the future. 

Please let me know in the comments if you have some other questions you want to have answered, or simply if you enjoyed the article or not.

Thanks so much for reading!

----

If you like the story, please don't forget to subscribe to our newsletter so we can stay connected: https://livecodestream.dev/subscribe