JavaScript Flashcards
What is the difference between a promise and a callback?
Callbacks and Promises both handle asynchronous operations, but they work differently.
Callback: A function passed as an argument to another function, executed after an async operation.
Can lead to callback hell (deep nesting).
function fetchData(callback) {
setTimeout(() => callback("Data loaded"), 1000);
}
fetchData(data => console.log(data)); // "Data loaded"
Promise: An object that represents a future value, handling success (.then()) and failure (.catch()).
More readable, avoids callback hell, and provides better error handling.
const fetchData = new Promise((resolve) => {
setTimeout(() => resolve("Data loaded"), 1000);
});
fetchData.then(console.log); // "Data loaded"
Explain event delegation
Event delegation is a technique involving adding event listeners to a parent element instead of adding them to the descendant elements. The listener will fire whenever the event is triggered on the descendant elements due to event bubbling up the DOM. The benefits of this technique are:
- Memory footprint goes down because only one single handler is needed on the parent element, rather than having to attach event handlers on each descendant.
- There is no need to unbind the handler from elements that are removed and to bind the event for new elements.
Explain how this works in JavaScript
The value of this depends on how the function is called.
The following rules are applied:
1. If the new keyword is used when calling the function, this inside the function is a brand new object.
2. If apply, call, or bind are used to call/create a function, this inside the function is the object that is passed in as the argument.
3. If a function is called as a method, such as obj.method() — this is the object that the function is a property of.
4. If a function is invoked as a free function invocation, meaning it was invoked without any of the conditions present above, this is the global object. In a browser, it is the window object. If in strict mode ('use strict'), this will be undefined instead of the global object.
5. If multiple of the above rules apply, the rule that is higher wins and will set the this value.
6. If the function is an ES2015 arrow function, it ignores all the rules above and receives the this value of its surrounding scope at the time it is created.
Give an example of one of the ways that working with this has changed in ES6?
ES6 allows you to use arrow functions which uses the enclosing lexical scope. This is usually convenient, but does prevent the caller from controlling context via .call or .apply—the consequences being that a library such as jQuery will not properly bind this in your event handler functions. Thus, it’s important to keep this in mind when refactoring large legacy applications.
Explain how prototypal inheritance works
All JavaScript objects have a __proto__ property with the exception of objects created with Object.create(null), that is a reference to another object, which is called the object’s “prototype”.
When a property is accessed on an object and if the property is not found on that object, the JavaScript engine looks at the object’s __proto__, and the __proto__’s __proto__ and so on, until it finds the property defined on one of the __proto__s or until it reaches the end of the prototype chain. This behavior simulates classical inheritance, but it is really more of delegation than inheritance.
What’s the difference between a variable that is: null, undefined or undeclared? How would you go about checking for any of these states?
Undeclared variables are created when you assign a value to an identifier that is not previously created using var, let or const.
- Undeclared variables will be defined globally, outside of the current scope.
- In strict mode, a ReferenceError will be thrown when you try to assign to an undeclared variable.
- - Undeclared variables are bad just like how global variables are bad. Avoid them at all cost! To check for them, wrap its usage in a try/catch block.
Example:
function foo() {
x = 1; // Throws a ReferenceError in strict mode
}
foo();
console.log(x); // 1
-
undefinedvariable is a variable that has been declared, but not assigned a value. - It is of type
undefined. - If a function does not return any value as the result of executing it is assigned to a variable, the variable also has the value of
undefined. - To check for it, compare using the strict equality
(===)operator ortypeofwhich will give the'undefined'string.
Note: you should not be using the abstract equality operator to check, as it will also return true if the value is null.
Example:
var foo;
console.log(foo); // undefined
console.log(foo === undefined); // true
console.log(typeof foo === 'undefined'); // true
console.log(foo == null); // true. Wrong, don't use this to check!
function bar() {}
var baz = bar();
console.log(baz); // undefined
-
nullvariable will have been explicitly assigned to the null value. - It represents no value and is different from undefined in the sense that it has been explicitly assigned.
- To check for null, simply compare using the strict equality operator.
Example:
var foo = null; console.log(foo === null); // true console.log(typeof foo === 'object'); // true console.log(foo == undefined); // true. Wrong, don't use this to check!
As a personal habit, I never leave my variables undeclared or unassigned. I will explicitly assign null to them after declaring if I don’t intend to use it yet. If you use a linter in your workflow, it will usually also be able to check that you are not referencing undeclared variables.
What is a closure, and how/why would you use one?
A closure is the combination of a function and the lexical environment within which that function was declared.
The word “lexical” refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available.
Closures are functions that have access to the outer (enclosing) function’s variables—scope chain even after the outer function has returned.
Explain the main difference between .forEach loop and a .map() loop. Why pick one over the other?
forEach:
- Iterates through the elements in an array.
- Executes a callback for each element.
- Does not return a value.
.map()
- Iterates through the elements in an array.
- “Maps” each element to a new element by calling the function on each element, creating a new array as a result.
The main difference between .forEach and .map() is that .map() returns a new array.
If you need the result, but do not wish to mutate the original array, .map() is the clear choice.
If you simply need to iterate over an array, forEach is a fine choice.
Explain hoisting
Hoisting is a term used to explain the behavior of variable declarations in your code. Variables declared or initialized with the var keyword will have their declaration “moved” up to the top of their module/function-level scope, which we refer to as hoisting. However, only the declaration is hoisted, the assignment (if there is one), will stay where it is.
Note that the declaration is not actually moved - the JavaScript engine parses the declarations during compilation and becomes aware of declarations and their scopes. It is just easier to understand this behavior by visualizing the declarations as being hoisted to the top of their scope. Let’s explain with a few examples.
console.log(foo); // undefined var foo = 1; console.log(foo); // 1
Function declarations have the body hoisted while the function expressions (written in the form of variable declarations) only has the variable declaration hoisted.
// Function Declaration
console.log(foo); // [Function: foo]
foo(); // 'FOOOOO'
function foo() {
console.log('FOOOOO');
}
console.log(foo); // [Function: foo]
// Function Expression
console.log(bar); // undefined
bar(); // Uncaught TypeError: bar is not a function
var bar = function () {
console.log('BARRRR');
};
console.log(bar); // [Function: bar]
Variables declared via let and const are hoisted as well. However, unlike var and function, they are not initialized and accessing them before the declaration will result in a ReferenceError exception. The variable is in a “temporal dead zone” from the start of the block until the declaration is processed.
x; // undefined y; // Reference error: y is not defined var x = 'local'; let y = 'local';
Describe event bubbling
When an event triggers on a DOM element, it will attempt to handle the event if there is a listener attached, then the event is bubbled up to its parent and the same thing happens. This bubbling occurs up the element’s ancestors all the way to the document. Event bubbling is the mechanism behind event delegation.
What’s the difference between an “attribute” and a “property”?
Attributes are defined on the HTML markup but properties are defined on the DOM. To illustrate the difference, imagine we have this text field in our HTML: <input></input>.
const input = document.querySelector('input');
console.log(input.getAttribute('value')); // Hello
console.log(input.value); // Hello
But after you change the value of the text field by adding “World!” to it, this becomes:
console.log(input.getAttribute('value')); // Hello
console.log(input.value); // Hello World!
What is the difference between == and ===?
== is the abstract equality operator while === is the strict equality operator. The == operator will compare for equality after doing any necessary type conversions. The === operator will not do type conversion, so if two values are not the same type === will simply return false. When using ==, funky things can happen, such as:
1 == '1'; // true 1 == [1]; // true 1 == true; // true 0 == ''; // true 0 == '0'; // true 0 == false; // true
My advice is never to use the == operator, except for convenience when comparing against null or undefined, where a == null will return true if a is null or undefined.
var a = null; console.log(a == null); // true console.log(a == undefined); // true
Why is it called a Ternary expression, what does the word “Ternary” indicate?
“Ternary” indicates three, and a ternary expression accepts three operands, the test condition, the “then” expression and the “else” expression. Ternary expressions are not specific to JavaScript and I’m not sure why it is even in this list.
What tools and techniques do you use for debugging JavaScript code?
React and Redux:
- React Devtools
- Redux Devtools
JavaScript
- Chrome Devtools
- debugger statement
- Good old console.log debugging
Explain the difference between mutable and immutable objects.
Immutability is a core principle in functional programming, and has lots to offer to object-oriented programs as well. A mutable object is an object whose state can be modified after it is created. An immutable object is an object whose state cannot be modified after it is created.
Explain the difference between synchronous and asynchronous functions.
Synchronous functions are blocking while asynchronous functions are not. In synchronous functions, statements complete before the next statement is run. In this case, the program is evaluated exactly in order of the statements and execution of the program is paused if one of the statements take a very long time.
Asynchronous functions usually accept a callback as a parameter and execution continue on the next line immediately after the asynchronous function is invoked. The callback is only invoked when the asynchronous operation is complete and the call stack is empty. Heavy duty operations such as loading data from a web server or querying a database should be done asynchronously so that the main thread can continue executing other operations instead of blocking until that long operation to complete (in the case of browsers, the UI will freeze).
What is event loop? What is the difference between call stack and task queue?
The event loop is a single-threaded loop that monitors the call stack and checks if there is any work to be done in the task queue. If the call stack is empty and there are callback functions in the task queue, a function is dequeued and pushed onto the call stack to be executed.
What is the definition of a higher-order function?
A higher-order function is any function that takes one or more functions as arguments, which it uses to operate on some data, and/or returns a function as a result. Higher-order functions are meant to abstract some operation that is performed repeatedly. The classic example of this is map, which takes an array and a function as arguments. map then uses this function to transform each item in the array, returning a new array with the transformed data. Other popular examples in JavaScript are forEach, filter, and reduce. A higher-order function doesn’t just need to be manipulating arrays as there are many use cases for returning a function from another function. Function.prototype.bind is one such example in JavaScript.
