Javascript Interview Questions Made Simple

It's official: JavaScript is one of the most in-demand programming languages of 2022. When you think about it, this isn't surprising considering that many of the tech giants like Netflix, PayPal, Uber are relying on JavaScript and associated libraries and frameworks to create their software. And with hundreds of postings live on our platform today looking for JavaScript developers, there's no better time than now to capitalise on your skills.

In today’s post, we're going to go over some of the most popular JavaScript interview questions. By all means, this is not an exhaustive list, however, it's a great place to get started after securing your first round of interviews with companies hiring via hackajob. Let's get into it:

1. What is event bubbling?

The best way to explain event bubbling is through an example.

<div class="main-div" onclick="alert('Div was clicked')">
<h1>I am H1</h1>
<p class="para">This is some paragraph</p>
</div>
<script src="script.js" async defer></script>
</body>

The event handler is attached to the div with a black solid border. We have an h1 tag, which is a block element, with a dotted red border, and a p tag, which is also another block element with a solid green border. Now, even if you click on the p element or the h1 element, the onClick handler attached to the outer div is triggered. This is the phenomenon of event bubbling. An event bubbles up towards its ancestors until there are no more. In this case, when the click event is triggered on the h1 or the p element, it bubbles upwards to the parent div element. Since it has an attached handler, it gets triggered.

2. Explain map(), filter(), reduce() methods

These are very popular array functions in JavaScript. Let’s look at each one with an example. The map() function is used to create a new array from an existing one after applying a function to it.

let array1 = [1,2,3,4,5];
let array2 = array1.map(item => item - 1);
console.log(array2);

This function reduces the value of every element in array1 by 1 and stores it in array2. This is very useful when you want to repeat operations on arrays.

Filter uses very similar syntax in comparison to the map() method, but instead of performing the same operation on every element in the array, filter checks if each element passes a certain condition and then adds them to the new array, kind of like this:

let array1 = [1,2,3,4,5];
let array2 = array1.filter(item => item % 2 !== 0);
console.log(array2);

The above filter example checks which of the numbers in the array are odd and pushes them to the new array. The output is [1, 3, 5].

Lastly, we have the reduce() method. This method is used to perform reduction operations on the array. A simple example of reduction is finding the sum of all numbers in the array.

let array1 = [1,2,3,4,5];
let sum = array1.reduce((sum, x) => sum + x);
console.log(sum);

The above example logs 15 to the console. The first argument sum will take the first value in the array and the argument x takes the second value. The function then iterates over each element, going from left to right.

3. Explain the equality operator in JavaScript

This is a very common question during interviews. Unlike other traditional programming languages, the double equals sign does not check for type while comparing two variables. In the example below, the first line outputs true to the console when it is actually not. This is because the first value is an integer and the second one is a string, but the double equals sign simply checks for the value.

console.log(2 == '2');
console.log(2 === '2');
console.log(2 === 2);

The second line shows the triple equals sign that is used for checking the type as well as value. It logs false to the console since the integer 2 and the string ‘2’ are not equal. To rectify this, we need to use the integer value 2 so that it displays true in the console.

4. Explain the difference between undefined and not defined

This may seem like a pretty easy question but it's also something that can easily be overlooked. What do you think will be the output of the following code?

let b;
console.log(b);
console.log(y);

The first line prints undefined and the second line throws a ReferenceError citing that y is not defined. The difference is very simple. Undefined is when you declare a variable but don’t assign a value, whereas not defined is when the variable itself is not in the memory space.

5. What are pure functions?

Pure functions are gaining a lot of traction these days thanks to the move to functional programming. There are two standard principles that surround a pure function. They have the same input for the same output every single time the code is run. The second principle is that they don’t have any side effects. Side effects can be anything like writing to logs, making HTTP calls, or writing to your disk.

const add = (x, y) => x + y;

This is an example of a pure function. For the same input, the result is always predictable. For instance, if the input is 10 and 20, the output will always be 30. The same function becomes an impure function if we add a console.log() statement inside it. Even though the output remains the same for every execution, now, it has a side effect.

6. Give an example of an arrow function and walk through it

An arrow function is more like a syntactic-sugar for the conventional function declaration in JavaScript. We have already seen three arrow functions in one of the earlier questions. The array methods, map(), filter() and reduce() are examples of arrow functions. These, however, are in-built array methods. So, let’s go through an example that you can replace with a traditional function declaration.

function findSum(a, b){
return a + b;
}
let sum = findSum(2, 4);
console.log(sum);

The example above is of a traditional function that finds the sum of 2 numbers and logs it to the console. With arrow functions, you can shorten it much further.

let findSum2 = (a, b) => a + b;
console.log(findSum2(2, 4));

The entire function is shortened to just one line. Since there are two arguments, we need to put them inside parentheses, otherwise, we can remove them as well. The return statement is implied.

With that, we’ve come to the end of this one. Check out some of the resources below to learn more in-depth about JavaScript and ace your next interview. Once you master JavaScript, the possibilities are endless with several frontend libraries and frameworks, or even backend development.

Resources

• https://javascript.info/
• https://www.freecodecamp.org/news/tag/javascript/
• https://www.geeksforgeeks.org/javascript/
• https://www.w3schools.com/js/
  

Like what you've read or want more like this? Let us know! Email us here or DM us: Twitter, LinkedIn, Facebook, we'd love to hear from you.