Frontend Interview Questions Flashcards
What’s the difference between const, let and var?
Const is not immutable, but you can’t point a const to a different pointer, but you can add items to the array.
Let, you can change the pointer but it’s going to be scoped to whatever the closure is.
Var, is hoisted to the top. Var will throw undefined if accessed before, but const and let will throw reference error.
Explain prototypical inheritance.
JavaScript has a baseline prototype, which is the object. Everything inherits from the object.
Everything in JavaScript has a prototype and a baseline object that it inherits from. When you create a new object based on that object, you either have the choice to inherit or override the prototype’s properties.
What does “this” mean in JavaScript?
“This” is the global context of everything that is available to access to all the objects available to you that are not locally defined.
In most cases, the value of this is determined by how a function is called (runtime binding). It can’t be set by assignment during execution, and it may be different each time the function is called. ES5 introduced the bind() method to set the value of a function’s this regardless of how it’s called, and ES2015 introduced arrow functions which don’t provide their own this binding (it retains the this value of the enclosing lexical context).
What’s the data structure of the DOM?
A tree
How can you tell if image element is loaded on the page?
There’s an onload callback for image. If it’s loaded, it will fire that callback.
What are call and apply?
They are ways to change the scope when calling a function. Call is a series of elements and apply is an array.
What is event delegation?
Event listeners are really expensive memory-wise on a page, so event delegation is a way of improving performance by placing a listener on an parent element so that the actions performed on children elements will bubble up.
Another advantage is we don’t have to unbind listener for removed elements.
What is a worker?
Worked is something you would use in a browser to offload computationally expensive work to a different thread, since JavaScript is single-threaded. This way you don’t block the thread of the UI.
What’s a callback?
A callback is a function that is passed to another function and intended to be called at a later time. The most common use of callbacks is when executing asynchronous requests such as getting user input or requesting data over a network.
What is a closure?
A closure is the combination of a function and the lexical environment within which that function was declared.
Closures are functions that have access to their enclosing function’s variables scope even after the outer function has returned.
“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.
Use cases: partial applications or currying.
Explain the execution context, including lexical scope.
The execution context is the environment / scope that the current code is being evaluated in.
5 main aspects:
- Single threaded.
- Synchronous execution.
- 1 Global context.
- Infinite function contexts.
- Each function call creates a new execution context, even a call to itself.
Think about lexical scope in terms of the physical location of the code where it is first written. The function or code will have access to the data in the original location it was declared.
What is hoisting?
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";
Function expressions vs declarations.
Expression: var foo = function() {}. Only declaration is hoisted, not body
Function: function foo() {} body is hoistedWhat’s the difference between bind, call and apply?
Bind returns a new function bound to the context given as an argument. Call and apply invoke the function with the applicable context. Apply takes and array and call takes a series of elements as arguments.
What are object constructor properties and functions?
The constructor property returns a reference to the Object constructor function that created the instance object. Note that the value of this property is a reference to the function itself, not a string containing the function’s name.
Constructor functions are functions that serve as a “blueprint” for creating multiple instances of a given type of object.
