10 Must-Know JavaScript Concepts for Acing Your Coding Interview

1. What is the difference between “undefined” and “null” in JavaScript?

undefined is a variable that has been declared but not assigned a value. null is a value that represents no value or an empty value. In other words, undefined means a variable has been declared but not assigned a value, while null means that a variable has been assigned a value of "nothing".

let x; // variable declared but not assigned, x is undefined
let y = null; // y is assigned a value of null
console.log(x); // undefined
console.log(y); // null

2. What is “hoisting” in JavaScript and how does it work?

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their respective scopes during compilation, which means they can be used before they are declared. This only applies to variables declared with the “var” keyword and function declarations, not variables declared with “let” or “const”.

console.log(x); // undefined
var x = 1;

3. What is the difference between “var”, “let”, and “const” in JavaScript?

var is used to declare variables that are globally scoped or function scoped, while let and const are used to declare variables that are block-scoped. let variables can be reassigned, while const variables cannot be reassigned after they are declared.

var a = 1;
let b = 2;
const c = 3;

a = 4; // valid
b = 5; // valid
c = 6; // error: Assignment to constant variable.

4. Explain the concept of “closures” in JavaScript.

A closure is a function that has access to variables in its outer (enclosing) scope, even after the outer function has returned. This allows for private variables and methods in JavaScript and enables functions to “remember” the environment in which they were created.

function outer() {
  const x = 1;
  function inner() {
    console.log(x);
  }
  return inner;
}

const closure = outer();
closure(); // logs 1

5. What is the difference between “==” and “===” in JavaScript?

== is a loose equality comparison operator, meaning it compares the values of the operands after attempting to convert them to a common type. === is a strict equality comparison operator, meaning it compares the values and types of the operands without any type conversion.

console.log(1 == '1'); // true
console.log(1 === '1'); // false

6. What is event bubbling in JavaScript and how does it work?

Event bubbling is a mechanism in which an event triggered on a child element is propagated up the DOM tree to its parent elements. This means that events triggered on child elements are also triggered on their parent elements.

document.addEventListener('click', function(event) {
  console.log('clicked:', event.target);
});

7. Explain how “this” works in JavaScript.

this refers to the object that a function is a method of or the object that it is bound to. The value of this depends on how a function is called, and it can be explicitly set using methods like bind(), call(), and apply().

const person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.greet(); // logs "Hello, my name is John."

8. What are “promises” in JavaScript and how do they work?

Promises are a way to handle asynchronous operations in JavaScript. They represent a value that may not be available yet, but will be resolved or rejected in the future. Promises have three states: pending, resolved, and rejected. When a promise is resolved or rejected, it calls the corresponding callback functions that were passed to it.

function getData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('Data received');
    }, 1000);
  });
}

getData().then(function(data) {
  console.log(data); // logs "Data received" after

9. What is the “spread operator” in JavaScript and how is it used?

The spread operator is denoted by three dots (...) and is used to spread the contents of an array or object into another array or object. This allows for easy copying or merging of arrays and objects without needing to manually loop through and add each element.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const concatenatedArray = [...arr1, ...arr2];
console.log(concatenatedArray); // [1, 2, 3, 4, 5, 6]

10. Explain the difference between “callback”, “promise”, and “async/await” in JavaScript.

Callbacks are functions that are passed as arguments to other functions and are called after the completion of an asynchronous operation. Promises are objects that represent a value that may not be available yet, but will be resolved or rejected in the future. Async/await is a syntax for working with promises that makes asynchronous code look more like synchronous code.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully');
    }, 2000);
  });
}

fetchData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });