Interview questions #1

JavaScript

1. What's the difference between null and undefined?

• null - it means that is an intentional absence of value
• undefined - it means that the variable has been declared but it doesn't have an assigned value yet
• Tricky part:

1typeof undefined // "undefined"
2typeof null // "object" !
3

2. How does hoisting work in JavaScript, and what are the differences between var, let, and const?

Hoisting means that variables and function declarations are moved to the top of their scope (global or function) during the compilation phase, before code execution. However, only the declarations are hoisted, not the initialization.

Function hoisting

• function declarations - fully hoisted (declaration + definition), so they can be called before they appear in code

1greet(); // "Hello"
2function greet() {
3  console.log("Hello");
4}
5

• function expressions - are not hoisted in a usable way:

1greet(); // TypeError: greet is not a function
2const greet = function () {
3  console.log("Hello");
4};
5

Variable hoisting

🔹Temporal Dead Zone

It's the time between a variable (let/const) is hoisted and its initialization. Accessing the variable during this time results in a ReferenceError.

1{
2   console.log(z); //ReferenceError: Cannot access 'c' before initialization
3   let z;
4}
5

3. What is closure?

A closure is formed when a function "remembers" the variables from its lexical scope even after that scope has exited. In other words, inner functions retain access to variables defined in their outer functions, even after the outer function has finished executing.

1function Printer() {
2   let sheetsLeft = 100;
3   
4   function print() {
5      sheetsLeft -= 1;
6      console.log(`Printing... ${sheetsLeft} sheets left`);
7   }
8}
9
10const printer = Printer();
11print(); // Printing... 99 sheets left <- The inner function "remembers" the variable from the outer function
12

🔹Real world example:

• Private variables in classes
• Memoization
• Callbacks and event handlers

4. What is the difference between .call(), .apply(), and .bind()?

All of them are used to set the value of this.

• call(thisArg, arg1, arg2, ...) - it takes this as the first arg and then all other as a separate arg. The function is invoke immediately.
• apply(thisArg, [args]) - the same as call but the other args are passed as an array
• bind(thisArg) - it returns a new function with passed this bounded

5. What are some techniques for optimizing JavaScript performance in React apps?

• Debounce/throttle for events
• Lazy loading (components/data)
• Memoization (useMemo, React.memo)
• Reducing unnecessary re-renders
• Using efficient data structures (e.g. Map instead of array lookups)