【Interview Essentials】Common JavaScript Interview Questions

1. What are the data types in JavaScript?

• Primitive Types:
1. string
2. number
3. boolean
4. null
5. undefined
6. symbol
7. bigint

• Reference Type:
8. object (includes arrays, functions, etc.)

2. What is the difference between null and undefined?

• null: A special object representing "no value." It is often explicitly assigned to a variable to indicate that it currently does not reference any object.

• undefined: Indicates a variable has not been assigned a value, or is uninitialized. It's the default value of a declared but unassigned variable.

• Different types: typeof null is "object", while typeof undefined is "undefined".

• Semantic difference: null is used as an intentional placeholder for "no value," while undefined means the variable hasn't been initialized.

3. What is the difference between call, apply, and bind?

The this Keyword

call Method

• Usage: function.call(thisArg, arg1, arg2, ...)

• Functionality: Invokes a function, explicitly setting this and passing arguments individually.

• Features:
• Invokes the function immediately.
• The first argument is the this value, followed by individual arguments.

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const person = { name: 'Alice' };

greet.call(person, 'Hello', '!');  // Output: Hello, Alice!

apply Method

• Usage: function.apply(thisArg, [argsArray])

• Functionality: Invokes a function, explicitly setting this and passing arguments as an array.

• Features:
• Invokes the function immediately.
• The second argument is an array of arguments for the function.

greet.apply(person, ['Hi', '?']);  // Output: Hi, Alice?

bind Method

• Usage: function.bind(thisArg, arg1, arg2, ...)

• Functionality: Returns a new function with this bound to the specified value, and allows pre-setting some arguments.

• Features:
• Does not invoke the function immediately.
• Returns a new function that can be called later.

const greetAlice = greet.bind(person, 'Hey');
greetAlice('!');  // Output: Hey, Alice!

4. Differences between let, var, and const

5. Closures

• Lexical Scope: A function's scope is determined when it is defined, not when it is executed.

• Function Nesting: Inner functions have access to the outer function's variables.

• Variable Lifetime: Normally, variables inside a function are destroyed after the function completes. However, closures allow these variables to persist.

Example of a closure:

function outerFunction() {
  let outerVariable = 'I am outside!';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

const closure = outerFunction();
closure();  // Output: I am outside!

6. Prototype Chain

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log('Hello, ' + this.name);
};

const john = new Person('John');
john.sayHello();  // Output: Hello, John

7. Event Loop

• Call Stack: Executes synchronous code.

• Task Queue: Holds asynchronous tasks to be executed after the stack is empty.

• Microtasks: Higher priority tasks like Promise callbacks.

• Macrotasks: Lower priority tasks like setTimeout.

8. JavaScript Performance Optimization

• Reduce HTTP Requests: Combine files (CSS, JavaScript) to lower the number of HTTP requests.

• Use Content Delivery Networks (CDNs): Serve static assets from multiple server nodes to reduce load times.

• Compress and Minify: Use Gzip, Brotli for compression, and minify code to remove unnecessary characters.

• Image Optimization: Use modern formats like WebP for smaller file sizes.