JavaScript Interview Questions

JavaScript the most popular language on the web, is fully natively supported by browse and nowadays is a very important tool for a front-end web developer.

Tools like React, Vue, Angular are created on top of JavaScript, so if you are looking for a job as a Front End Developer you may know that is very important to have a clear understanding of what is Javascript.

You don't be surprised if interviewer/recruiter do some question about Javascript, it's totally normal...

So let's see some of that's questions...

What is DOM?

When the browser tries to render a HTML document, it creates an object based on the HTML document called DOM (Document Object Mode).

What is a closure?

A closure is a function having access to the parent scope, even after the parent function has closed.

1var foo = (function () {
2    var counter = 0;
3    return function () {
4        counter += 1;
5        return counter;
6    };
7})();
8
9foo();
10foo();
11foo();
12
13// the counter is now 3

Event delegation

Event delegation is a technique in JavaScript where you attach a single event listener to a parent element to manage all the events that happen inside it, instead of attaching individual event listeners to each child element.

1const parentElement = document.getElementById('parent');
2parentElement.addEventListener('click', function(event) {
3    // Handle the event here
4});

Event propagation

Event propagation is a mechanism that defines how events propagate or travel through the DOM tree to arrive at its target and what happens to it afterward.

1<div onClick={() => console.log('outer div')}>
2  <div onClick={() => console.log('middle div')}>
3    <div onClick={() => console.log('innermost div')}>
4      Click me!
5    </div>
6  </div>
7</div>

Event bubbling

During the event propagation process, an event first triggers on the target element and then bubbles up through its ancestors in the DOM tree.

1<div onClick={() => console.log('form')}>
2  <div onClick={() => console.log('div')}>
3    <p onClick={() => console.log('p')}>Click me!</p>
4  </div>
5</div>

"target" vs "currentTarget"

Difference is that target is the actual thing that was clicked and currentTarget is who you attach to the event listener.

Explain IIFE

Immediately Invoked Function Expression, that's mean, I write that function and I run.

1(function foo() {
2    console.log('do something...');
3})();

Explain "hoisting"?

In simple words variable can be used before it has been declared, all variables var are declared at the top of any function scope.

1foo = 'Hey';
2console.log(foo); // outputs: 'Hey'
3var foo;

Function.prototype.bind()

Creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

1const module = {
2    age: 42,
3    getAge: function () {
4        return this.age;
5    },
6};
7
8const unboundGetAge = module.getAge;
9console.log(unboundGetAge()); // expected output: undefined
10
11const boundGetAge = unboundGetAge.bind(module);
12console.log(boundGetAge()); // expected output: 42

const vs let vs var

Before the ES6 version of JavaScript, only the keyword var was used to declare variables.

const: Block-scoped, cannot be reassigned after declaration.
let: Block-scoped, can be reassigned after declaration.
var: Function-scoped, hoisted to the top of its function or global scope, can be reassigned, and not block-scoped.

null vs undefined

The undefined is declared but doesn't have a value and null is a "nothing" value.

1const foo = bar + 1; // ReferenceError: bar is not defined
2
3let baz; // undefined
4
5const qux = null; // null

== vs ===

Difference is that == checks for equality and === checks for equality and type.

1console.log(1 == 1); // true
2console.log(1 == '1'); // true
3console.log(1 === '1'); // false

map vs forEach

The forEach() executes a provided function once for each array element and map() creates a new array with the results of calling a provided function on every element in the calling array.

Example of forEach:

1const arr = [1, 2, 3, 4, 5];
2arr.forEach((num, index) => {
3    return (arr[index] = num * 2);
4});
5
6console.log(arr); // [2, 4, 6, 8, 10]

Example of map:

1const arr = [1, 2, 3, 4, 5];
2const doubled = arr.map((num) => {
3    return num * 2;
4});
5
6console.log(doubled); // [2, 4, 6, 8, 10]

Synchronous vs Asynchronous

The synchronous waits for each operation to complete, after that only it executes the next operation, asynchronous never waits for each operation to complete, rather it executes all operations in the first GO only.

1// Synchronous Code:
2console.log("1");
3console.log("2");
4console.log("3");

In synchronous code, each operation blocks the execution until it's complete.

Output will be in the same order as the code: 1, 2, 3.

1// Asynchronous Code (Using Callbacks)
2console.log("1");
3
4setTimeout(function() {
5    console.log("2");
6}, 1000);
7
8console.log("3");

In asynchronous code with callbacks, the setTimeout function doesn't block the subsequent code.

Output: 1, 3, 2 (after 1 second).

What is a Promise?

A promise is an object which can be returned synchronously from an asynchronous function.

1const wait = (time) => new Promise((resolve) => setTimeout(resolve, time));
2
3wait(3000).then(() => console.log('Hello!')); // after 3s will print 'Hello!'

Higher order function?

Is a function that takes a function as an argument, or returns a function, for example map, filter, reduce...

1const foo = [1, 2, 3];
2const bar = foo.map(function (item) {
3    return item * 2;
4});
5console.log(bar);

Conclusion

In my point of view, I don't care much if the developer knows the theory, but it is very important if he knows what to use and when to use it.

Of course, if we are using a lot of tools like React, many of these things are non-transparent, but it is always good to understand what is done behind all of the magic.