Javascript
What does the !! operator do?
The Double NOT operator or !! coerces the value on the right side into a boolean. basically it's a fancy way of converting a value into a boolean.
What's the difference between undefined and null?
undefined is the default value of a variable that has not been assigned a specific value. Or a function that has no explicit return value. Or a property that does not exist in an object.
null is "a value that represents no value".
Why does it return false when comparing two similar objects in JavaScript?
JavaScript compares objects and primitives differently. In primitives, it compares them by value while in objects it compares them by reference or the address in memory where the variable is stored.
What's Event Bubbling?
When an event occurs on a DOM element, that event does not entirely occur on that just one element. In the Bubbling Phase, the event bubbles up or it goes to its parent, to its grandparents, to its grandparent's parent until it reaches all the way to the window.
What is event.target? What is event.currentTarget?
In simplest terms, the event.target is the element on which the event occurred or the element that triggered the event.
The event.currentTarget is the element on which we attach the event handler explicitly.
What does the && operator do?
The && or Logical AND operator finds the first falsy expression in its operands and returns it and if it does not find any falsy expression it returns the last expression.
What are Higher Order Functions?
Higher-Order Function are functions that can return a function or receive argument or arguments which have a value of a function.
What does the || operator do?
Bonus:
Name at least 5 falsy values
The || or Logical OR operator finds the first truthy expression in its operands and returns it. if it does not find any truthy expression it returns the last expression
false, 0, -0, 0n, "", null, undefined, and NaN
What is the difference between Implicit and Explicit Coercion?
Implicit Coercion is a way of converting values to another type without us programmer doing it directly or by hand.
console.log(1 + '6');
While Explicit Coercion is the way of converting values to another type where we (programmers) explicitly do it.
console.log(1 + parseInt('6'));
Why does b in this code become a global variable when you call this function?
function myFunc() {
let a = b = 0;
}
myFunc();
The reason for this is that assignment operator or = has right-to-left associativity or evaluation
First, the expression b = 0 evaluated and in this example b is not declared. So, The JS Engine makes a global variable b outside this function after that the return value of the expression b = 0 would be 0 and it's assigned to the new local variable a with a let keyword.
What is the prototype of an object?
A prototype in simplest terms is a blueprint of an object. It is used as a fallback for properties and methods if it does exist in the current object. It's the way to share properties and functionality between objects. It's the core concept around JavaScript's Prototypal Inheritance.
What's the difference between var, let and const keywords?
Variables declared with var keyword are function scoped. What this means that variables can be accessed across that function even if we declare that variable inside a block.
Variables declared with let and const keyword are block scoped. What this means that variable can only be accessed on that block {} on where we declare it.
What are the new features in ES6 or ECMAScript 2015?
Arrow Functions
Classes
Template Strings
Enhanced Object literals
Object Destructuring
Promises
Generators
Modules
Symbol
Proxies
Sets
Default Function parameters
Rest and Spread
Block Scoping with let and const
What are Template Literals?
Template Literals are a new way of making strings in JavaScript. We can make Template Literal by using the backtick or back-quote symbol.
In Template Literals, we can embed an expression using ${expr} which makes it cleaner than the ES5 version.
What is a Callback function?
A Callback function is a function that is gonna get called at a later point in time.
What is the DOM?
DOM stands for Document Object Model is an interface (API) for HTML and XML documents. When the browser first reads (parses) our HTML document it creates a big object, a really big object based on the HTML document this is the DOM. It is a tree-like structure that is modelled from the HTML document. The DOM is used for interacting and modifying the DOM structure or specific Elements or Nodes.
The document object in JavaScript represents the DOM. It provides us many methods that we can use to selecting elements to update element contents and many more.
What are the ways to deal with Asynchronous Code in JavasScript?
Callbacks
Promises
async/await
Libraries like async.js, bluebird, q, co
What's the difference between Object.seal and Object.freeze methods?
The difference between these two methods is that when we use the Object.freeze method to an object, that object's properties are immutable meaning we can't change or edit the values of those properties. While in the Object.seal method we can change those existing properties but we cannot add new properties to the object.
What's the difference between a function expression and function declaration?
hoistedFunc();
notHoistedFunc();
var notHoistedFunc = function(){
console.log("I will not be hoisted!");
}
function hoistedFunc(){
console.log("I am hoisted");
}
What's the difference between Spread operator and Rest operator?
The Spread operator and Rest paremeters have the same operator ... the difference between is that the Spread operator we give or spread individual data of an array to another data while the Rest parameters is used in a function or an array to get all the arguments or values and put them in an array or extract some pieces of them.
Spread:
const nums = [5, 6];
const sum = add(...nums);
Rest
function add(...rest) {
return rest.reduce((total,current) => total + current);
};
console.log(add(1, 2)); // logs 3
console.log(add(1, 2, 3, 4, 5)); // logs 15
Exact with rest
const [first, ...others] = [1, 2, 3, 4, 5];
console.log(first); //logs 1
console.log(others); //logs [2,3,4,5]
What are Promises?
Promises are one way in handling asynchronous operations in JavaScript.
Promises have 3 different states.
Pending - The initial state of a promise. The promise's outcome has not yet been known because the operation has not been completed yet.
Fulfilled - The async operation is completed and successful with the resulting value.
Rejected - The async operation has failed and has a reason on why it failed.
The Promise constructor has two parameters which are functions resolve and reject respectively.
If the async operation has been completed without errors, call the resolve function to resolve the promise or if an error occurred, call the reject function and pass the error or reason to it.
We can access the result of the fulfilled promise using the .then method and we catch errors in the .catch method. We chain multiple async promise operations in the .then method because the .then method returns a Promise
What are Closures?
Closures is simply the ability of a function at the time of declaration to remember the references of variables and parameters on its current scope, on its parent function scope, on its parent's parent function scope until it reaches the global scope with the help of Scope Chain. Basically, it is the Scope created when the function was declared.
var globalVar = "global";
var outerVar = "outer"
function outerFunc(outerParam) {
function innerFunc(innerParam) { console.log(globalVar, outerParam, innerParam);
}
return innerFunc;
}
const x = outerFunc(outerVar);
outerVar = "outer-2";
globalVar = "guess"
x("inner");
What is async/await and How does it work?
Async/await is the new way of writing asynchronous or non-blocking code in JavaScript's. It is built on top of Promises. It makes writing asynchronous code more readable and cleaner than.
The async keyword before the function declaration makes the function return implicitly a Promise.
async function callApi() {
try {
const resp = await fetch("url/to/api/endpoint");
const data = await resp.json();
//do something with "data"
} catch (e) {
//do something with "err"
}
}
What is Scope?
Scope in JavaScript is the area where we have valid access to variables or functions. JavaScript has three types of Scopes. Global Scope, Function Scope, and Block Scope(ES6).
What is Hoisting?
Hoisting is the term used to describe the moving of variables and functions to the top of their (global or function) scope on where we define that variable or function.
Ok to understand Hoisting, I have to explain the execution context.
The Execution Context is the "environment of code" that is currently executing. The Execution Context has two phases compilation and execution.
Compilation - in this phase it gets all the function declarations and hoists them up to the top of their scope so we can reference them later and gets all variables declaration (declare with the var keyword) and also hoists them up and give them a default value of undefined.
Execution - in this phase it assigns values to the variables hoisted earlier and it executes or invokes functions (methods in objects).