Interview prep Flashcards
Which of the following is not true of JS 1. JS is case sensitive language 2. Semicolons at the end of JS statements are required 3. JS statements can be grouped together in blocks. 4. Javascript is loosely typed
- is false. JS is sensitive to the case of the function name, class name, identifiers, etc. JS is a loosely typed language - meaning you don’t have to specify what type of information will be stored in a variable in advance. For example, we use int, string, etc to initialize a variable but here we can give let, const, etc for initializing.
What should be called before send() in XMLHttpRequest
Open() Example: var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { // Action to be performed when the document is read; } }; xhttp.open(“GET”, “filename”, true); xhttp.send();
(function(){ console.log(1); setTimeOut(()=>{console.log(2)},1000); setTimeOut(()=>{console.log(3)},0); console.log(4) })();
1 4 3 2
Hoisting
Hoisting #
In JavaScript, a variable can be declared after it has been used. This is because variable declarations using var are hoisted to the top of their functional scope at compile time. Hence, a variable can be initialized and used before it has been declared.
Can you offer a use case for the new arrow => function syntax?
- For array manupulation
eg : map, reduce, forEach etc
- Managing async code
ex: resolving promise and using then as chaining
What is lexical scoping.
In JavaScript, arrow functions do not bind their own this, meaning they inherit the one from the parent scope; this is also known as lexical scoping.
What is the result of the below:
<style></style>
button {font-size: 50px; }
.on {background: #ff0000;}
<button>Click me</button>
const button = document.querySelector(‘#pushy’);
button. addEventListener(‘click’, () => {
this. classList.toggle(‘on’);
});
The keyword this does not bind to the element clicked as it is being used inside the arrow function. Due to this, the error, “TypeError, cannot read property, toggle of undefined”, occurs.
call & apply
what does Function.prototype.bind do?
The bind function creates a new function whose this value can be set to the value provided during the function call, enabling the calling of a function with a specified this value (the first parameter to bind function).
What does Function.call do?
The call method allows for a method that was defined for one object to be assigned and called on by another object. This allows for a method to get defined once and then get inherited by other objects without having to re-write it for other objects.
Difference between call and apply
The only difference between the two is that call expects all parameters to be passed individually, whereas apply expects the second argument to be an array of all the parameters.
what are closure and common uses of closure
In JavaScript, a closure is a function that can access the variables from another function’s scope. This is possible by creating nested functions. The enclosing/outer function will, however, not have access to the inner scope.
The inner function having access to the variables in the outer function. It is not a true visa versa
Used for below:
- Data object privacy
- In event handlers
- callback functions
- currying
What are event table, event loop and event queue
Event table & queue #
As you know, the call stack stores all your running JavaScript code. The interpreter reads the code line-by-line, pushes each statement into the call stack one-by-one, and pops them once they execute. However, if the statement is asynchronous, it is removed from the call stack and forwarded to the event table. This table is responsible for moving the asynchronous code to the event queue after a specified time. Here the statement waits for execution.
This brings us to the question. When will the statements from the event queue execute?
The event loop is responsible for keeping check of both the call stack and the event queue. It keeps checking if all the statements from the call stack have finished execution; that is, if the call stack is empty. If so, it pops the statement from the event queue (if present) to the call stack to execute.
Note: All synchronous statements execute first, and only then can the asynchronous ones execute.
What is IIFE
IIFE #
IIFE stands for Immediately Invoked Function Expressions. As the name implies, it is a way to execute the functions as soon as they are created.
- Annonymous
(function() {
//code goes here
})()
What does rest operator do?
What does spread operator do?
Primitive datatypes in JS
primitives (boolean, string, function, number, null, undefined)
What happens when we create object using new?
Usually, this is what new does:
- Creates a new object.
- Points this to the newly created object.
- Sets the prototype of the new object to the constructor function’s prototype.
- Makes the constructor function return this object if it is not returning anything else.
Note: return with an object returns the object. return with a primitive type is ignored, and this is returned instead.
“what is an event loop?
The event loop has the task of checking both the call stack and the task queue continuously. When it sees that the call stack is done executing all the commands and is empty, it pops the commands from the task queue and pushes them into the call stack for execution.
CALL STATCK AND EVENT QUEUE
The purpose of a call stack is to keep track of all the function calls. Whenever we invoke a function, it is pushed into the call stack first. Once it finishes execution, it gets popped. However, if an asynchronous command enters the call stack, it is popped and added into the task queue, also known as the event queue. Such asynchronous commands include Web Apis callbacks. When the call stack encounters them, it pops them and they enter the task queue instead. The call stack processes these commands once all other commands finish execution, and it is empty.
Describe event bubbling in JavaScript.
In event bubbling, the handler first executes on the event attached to the target element, then on all its ancestors. It starts from the bottom (deepest layer) and goes to the top.
Describe event capturing in JavaScript.
In event capturing, when you click the button, the event passes from the parent down to the event target,
Which of the following methods can prevent event bubbling?
event. stopPropagation()
event. cancelBubble
What are native objects.
In JavaScript, native objects are built-in objects. These are pre-defined objects that are always available regardless of the environment as long as JavaScript is running. Some common ones include:
String()
Boolean()
Number()
Array()
Object()
Function()
Date()
RegExp()
Error()
Image()
What are Host objects
Host objects are provided to JavaScript by the execution environment, for instance, the web browser in the form of a document and window.
Ex: .table() and .error()
console is a host object provided to JavaScript. It has the method .log that developers use very often
This
The JavaScript this keyword refers to the object it belongs to.
- The value of this is decided based on how the code is being executed.
- By default, the execution context for execution is global — which means if a code is being executed as part of a simple function call, then this refers to a global object.
- When a function is invoked with the new keyword, then the function is known as a constructor function and returns a new instance. In such cases, the value of this refers to a newly created instance.
- When a function is invoked as an object’s method, then this is the object that the method belong to
- If a function is invoked with call, bind, and apply methods, the value of this refers to the first argument passed.
In ES6 ‘this’ do not get bound to the arrow function. The value of this inside arrow function will be bound to the parent scope.
Difference between classical and Prototypal inheritance
Classical inheritance - with extend keyword
Prototypal inheritance - with Object.create() or new keyword
Prototypal inheritance
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance
Classical Inheritance
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance
Create a wrapper curry function.
For example: multiply(2,3,4) -> 24
mul(2)(3)(4) -> 24
Same origin policy
Feature detection and feature inference and User agent?
User Agent - accesses information of the browser environment you are using.
When you visit a browser, it sends a user-agent string to the host; this string contains information about the browser environment you are navigating.
Can HTML attributes be changed?
Can DOM properties be changed?
HTML attributes that can never be changed.
DOM properties can be modified
difference between using innerHTML and appendChild.
document.getElementById(“list”).innerHTML = ‘
- Names
‘
Here we are adding a list item to another list. innerHTML takes the parent node and removes all its children; it replaces them with the node created by parsing the HTML in the given string
- Names
. Hence it causes a complete rebuild of the content of the parent node.
Append child
var list = document.getElementById(“list”) var elm = document.createElement(‘li’); elm.appendChild(document.createTextNode(‘Names’)); list.appendChild(elm)
While using appendChild we create a new element and insert it as a new node at the end of the target node; hence, it does not cause a complete rebuild of the DOM. It does not require any parsing of any HTML string either.
You can mention to the interviewer the situations in which they should be used — for example, using appendChild for appending elements and innerHTML where you need to replace the content of an element.
The factors based on which you decide the third party library
The factors would be:
1. How active the third party library is. (Number of stars, number of commits, number of open issues)
2. How many contributors are there and how easy it is to contribute to the third party library.
3. Is the library open source and what is its adoption.
The way I would go about this is to lean on the following points.
1. Fit in our business logic.
2. Developer experience.
3. Ease of ramp up and change.
So my decision will be based on above factors. For example, if I am building a UI and we need a UI framework, I will zero in on React because it is time tested,popular and extremely easy to adopt. But if we are looking for calender component that is very specific to what the company does, a third party calender component might not be a correct choice.
Callback
A callback is a function that is passed to another function. When the first function is done, it will run the second function.
The problem with callbacks is it creates something called “Callback Hell.” Basically, you start nesting functions within functions within functions, and it starts to get really hard to read the code.
Promise , Async Await
A promise is an object that may produce a single value sometime in the future: either a resolved value or a reason that it’s not resolved (e.g., a network error occurred). A promise may be in one of 3 possible states: fulfilled, rejected, or pending.
How many datatypes does JS has?
JavaScript has seven data types, Boolean, Null, Undefined, Number, String, Symbol, and Object
