JavaScript interview questions. Answered by me.

Hello :)
I am a graduate student from Microverse, during interview prep, they gave me access to a set of questions in order to practice.

I am sharing some of the questions and answering them myself.

NOTE: If you find any mistake or a potentially wrong answer, please let me know in the comments. Thanks :)

This pattern is called IIFE (Immediately Invoked Function Expression) and it is important because it:

  • Keeps your data private
  • Avoids polluting the global scope with global variables.
  • Avoids overriding an already existing variable (declared in another file)

The benefit of using “use strict” is that it helps you to write clean code and avoid future mistakes and bad syntax by turning warnings into errors.

“NaN” stands for Not a Number, it is a falsey value.

If you run typeof NaN it will return “Number”.

You can test it using isNaN method or triple equality checker ===.

A “closure” by definition in JavaScript means when a function remembers its lexical environment, therefore able to access variables that live there.

A closure is seen most of the time in the picture of an outer function that returns an inner function.

For example, using IIFE to create a module in JavaScript where you choose what kind of data and methods to return or make public.

Also, callbacks is another example of closure because it is a higher-order function that returns a callback function.

I prefer to use the spread operator.

const newObj = {...oldObj}

You can also use Object.assign(newObj, oldObj)

.push() to add an element to the end.

.unshift() to add an element to the start.

undefined means it does exist or it was declared but not assigned a value.

not defined also known as undeclaredwhich means it hasn’t been declared.

You can use the in-built method isArray .

Hoisting is a JavaScript behavior that happens during the compiling process where the JavaScript engine moves all declarations to the top of their scope before it starts executing the code.

This points to the object of the execution scope (where it was executed).

If you don’t bind this to an object, by default, it will point to the global object also known as the window object.

JavaScript is a prototype-oriented language, unlike Java, it doesn’t have inheritance, instead, it has “delegation”.

Objects are linked together through the prototype chain and they delegate methods and data through the chain.

an IIFE is an Immediately Invoked Function Expression.

function expression means thefunction keyword is not the first word on the line:

var func = function sayHello(){}

function declaration means the function keyword is the first word on the line:

function sayHello(){}

Also, an IIFE is self-wrapped inside a parenthesis, so to fix this line we should write: (function foo(){})()

null means nothing or no value, it could be used as a placeholder.

undefined means it was declared but it wasn’t assigned a value.

undeclared means it doesn’t exist or hasn’t been declared yet.

To check if a variable is null or undefined, you can use triple equality.

You can’t check undeclared because it doesn’t exist.

The main difference is that map returns a new array while forEach doesn’t.

Also, map doesn’t mutate the original array instead makes a new modified/updated copy.

I would always pick map because it does allow method chaining.

I would say the typical use case would be to prevent naming collisions and to be used as callback functions.

function Person(){} is a constructor function or a factory function

var person = Person() is a syntax to create a new Object from a factory function

var person = new Person() a new object created by a constructor using the new operator keyword.

apply takes the arguments as an array, while call takes the arguments as comma-separated.

The bind method is a method that lives inside the prototype of the Function.

It binds the function to an object and points this keyword to that object.

AJAX = Asynchronous Javascript And XML.

It is a way to send data and update the webpage in an asynchronous fashion without having to reload the page.

Property is used in JavaScript while an attribute is used in HTML.

In the English language, they are used interchangeably.

An attribute is added to an HTML element as a property of this element.

While a property is a defined/added behavior to an object. for e.g object has methods and values as properties.

The double equal is used to test and compare values, if the two compared instances have different types it might coerce them to the nearest possible type to complete the comparison.

The “strict” triple equal is used to test and compare types and if they are the same then it compares values.

It is very important not to pollute the global scope with variables because they might get changed along the way and this is huge if your application depends on these variables. Another reason is naming collision especially if your application has more than one JS file.

a Single-page Application (SPA) is an application that loads all the content (HTML, CSS, JS) before rendering the website to make the user navigation experience is more dynamic by not having to reload the page every time the user visits a new route/page. For example, in Gmail you don’t have to reload the page when you check a new email or navigate other pages.

To make it SEO-friendly, you must provide URL params to each component you render and provide HTML meta important tags for SEO such as title and description using React-helmet package.

From my own experience, promises are great at error handling because they provide you with methods (then, catch) to handle both states (resolved, rejected) in a clear way that you can understand the code flow unlike how ugly callbacks chain can turn out to be, such as the callback hell.

Also, promises allow chaining so you can have multiple promise handlers executing depending on the returned state(resolve, reject).

Considering the disadvantages, I don’t think I encountered one before.

If I am encountering a bug for the first time, I might use console.log to track the code flow. If this bug is persistent, then I would use Chrom dev tools debugger to see how the code is being executed.

Array prototype has some iterating methods such as forEach, map…etc

And you can use for loops too.

You can’t directly iterate over an object so you might want to consider converting the object into an array that contains key & value pair array of each property.

“mutable” means changeable. If the state of the object can be changed this means it is mutable, if it can’t be changed then it is immutable.

For example, primitive values such as strings and numbers can not be changed after they have been created and added to the memory.

Objects and arrays are mutable objects because they can be modified and changed.

JavaScript has a single thread execution which means it executes functions in order or in a “synchronous” way. It would block the entire application until the function is done executing.

JavaScript is single-threaded because it has only one callstack.

On the other hand, the “asynchronous” way is utilized using web APIs (setTimeout, setInterval…etc) and promises. So, instead of blocking the entire application while waiting for the function to finish executing, the browser places async functions (e.g fetch API, setTimeout) in the task queue and JavaScript engine continue executing other functions and when the response is completed (timer is over, or API response came back) the event loop removes each function in order from the task queue and places them to be executed in the callstack.

thecall stack is a stack data structure (First in, last out) it is used to track the order of functions in the current execution scope/context.

the task queue is a queue data structure (First in, first out) it is used to track the async functions that are ready to be pushed back to the call stack.

the event loop is a mechanism that checks if the call stack is empty and if it is then it starts removing functions from the task queue and pushing them into the call stack to be executed.

var

  • hoisted up to the function scope
  • can be re-assigned a value
  • can be re-declared

let

  • hoisted up to the block scope
  • can be re-assigned
  • can’t be re-declared

const

  • hoisted up the block scope
  • can’t be re-declared or re-assigned

ES6 class:

  • A syntactic sugar that utilizes the power of prototypes in JavaScript
  • It is used to create new objects
  • It allows you to declare prototype methods inside the block of the class to be inherited by new objects down the prototype chain.
  • It binds this to the new object being created.
  • uses the new keyword operator

ES5 constructor:

  • It is used to create new objects
  • It allows you to declare prototype methods but outside the block of the constructor.
  • uses the new keyword operator

32-What is the definition of a higher-order function?

A function that takes a callback function as its argument.

The Document Object Model (DOM) is a tree of nodes constructed by the browser after the process of parsing HTML is done.

It provides JavaScript with the ability to quickly traverse and access nodes (HTML elements) and to manipulate and change them.

In JavaScript, there are two scopes, Any block of code written with a pair of curly braces { } it is a block scope…Unless it is a function!

var is a function scope variable, while const,let are block scope variables.

Special thanks to @Serhii Tyshchenko

var foo = '1020'

In JavaScript, there is a behavior called “Coercion”.

The JavaScript engine knows this is an addition (+) operation also it sees that one of the arguments is a string, it would check the type of what is inside the string and if it is a number, it would coerce (convert) it into a number and complete the operation.

Wooh!

This took me two days to complete, I did google some questions and I had to go back and re-learn some concepts :)

Thank you for reading.

Happy coding!

Front-end web developer and graduate student from Microverse.