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 :)
1- What is the significance of, and reason for, wrapping the entire content of a JavaScript source file in a function block?
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)
2-What is the significance, and what are the benefits, of including ‘use strict’ at the beginning of a JavaScript source 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.
3-What is NaN? What is its type? How can you reliably test if a value is equal to NaN?
“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 ===.
4-What is a “closure” in JavaScript? Provide an example.
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.
5-How do you clone an object?
I prefer to use the spread operator.
const newObj = {...oldObj}
You can also use Object.assign(newObj, oldObj)
6-How do you add an element at the beginning of an array? How do you add one at the end?
.push() to add an element to the end.
.unshift() to add an element to the start.
7-What is the difference between undefined and not defined in JavaScript?
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.
8-How do you check if an object is an array or not?
You can use the in-built method isArray .
9-What is function hoisting in JavaScript?
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.
10-Explain how `this` works in JavaScript
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.
11-Explain how prototypal inheritance works
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.
12-Explain why the following doesn’t work as an IIFE: “function foo(){ }();”. What needs to be changed to properly make it an IIFE?
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(){})()
13-What’s the difference between a variable that is: null, undefined, or undeclared? How would you go about checking for any of these states?
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.
14-Can you describe the main difference between a .forEach loop and a .map() loop and why you would pick one versus the other?
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.
15-What’s a typical use case for anonymous functions?
I would say the typical use case would be to prevent naming collisions and to be used as callback functions.
16-Difference between: function Person(){}, var person = Person(), and var person = new Person()?
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.
17-What’s the difference between .call and .apply?
apply takes the arguments as an array, while call takes the arguments as comma-separated.
18-Explain Function.prototype.bind.
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.
19-Explain Ajax in as much detail as possible.
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.
20-What’s the difference between an “attribute” and a “property”?
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.
21-What is the difference between == and ===?
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.
22-Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?
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.
23-Explain what a single-page app is and how to make one SEO-friendly.
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.
24-What are the pros and cons of using Promises instead of callbacks?
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.
25-What tools and techniques do you use debugging JavaScript code?
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.
26-What language constructions do you use for iterating over object properties and array items?
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.
27-Explain the difference between mutable and immutable objects.
“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.
28-Explain the difference between synchronous and asynchronous functions.
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.
29-What is an event loop? What is the difference between a call stack and a task queue?
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.
30-What are the differences between variables created using let, var, or const?
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
31-What are the differences between ES6 class and ES5 function constructors?
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
newkeyword 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
newkeyword operator
32-What is the definition of a higher-order function?
A function that takes a callback function as its argument.
33-Can you describe the Document Object Model in JavaScript?
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.
34-What is the difference between function scope and block scope in JavaScript?
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.
35-What will this do and why? var foo = 10 + ‘20’;
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!
