20 Important JavaScript Concepts for Your Next Interview 🚀

When it comes to JavaScript interviews, employers are looking for practical knowledge as much as theoretical. So, here’s a list of 20 core JavaScript concepts explained with concise examples to get you interview-ready! 🎉

1. Closures 🔒

A closure is a function that remembers its outer variables even after the outer function has finished executing.

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2

2. Hoisting 🎣

In JavaScript, variable and function declarations are "hoisted" to the top of their scope.

console.log(greet()); // Hello!

function greet() {
  return "Hello!";
}

console.log(num); // undefined
var num = 5;

3. Event Loop & Callbacks 🔄

JavaScript is single-threaded, and the event loop allows asynchronous operations using callbacks.

console.log("Start");
setTimeout(() => console.log("Async operation"), 1000);
console.log("End");

// Output: Start, End, Async operation

4. Promises 🤞

Promises handle async operations, with states: pending, fulfilled, and rejected.

let fetchData = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Data received!"), 1000);
});

fetchData.then(data => console.log(data)); // Data received!

5. Async/Await ⏳

async/await simplifies promise handling.

async function fetchData() {
  let data = await new Promise(resolve => setTimeout(() => resolve("Data"), 1000));
  console.log(data);
}

fetchData(); // Data

6. Arrow Functions ➡️

Arrow functions provide a concise syntax and don't have their own this.

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

7. Destructuring 🛠️

Destructuring allows you to unpack values from arrays or properties from objects.

const person = { name: "Alice", age: 25 };
const { name, age } = person;

console.log(name); // Alice
console.log(age); // 25

8. Spread & Rest Operators ✨

Spread ... expands elements, and Rest collects them into an array.

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // Spread

function sum(...nums) { // Rest
  return nums.reduce((a, b) => a + b);
}
console.log(sum(1, 2, 3, 4)); // 10

9. Prototypes 🧬

Prototypes allow objects to inherit properties and methods.

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

Car.prototype.getName = function() {
  return this.name;
};

const myCar = new Car("Tesla");
console.log(myCar.getName()); // Tesla

10. This Keyword 👈

this refers to the context in which a function is called.

const person = {
  name: "John",
  sayName() {
    console.log(this.name);
  },
};

person.sayName(); // John

Follow me on github:

Jagroop2001 (Jagroop) · GitHub

👨‍💻 Full Stack Developer | 🤖 Machine Learning Developer | 🤝 Dev Relations Pro – 💼 Available for Hire - Jagroop2001

github.com

11. Classes 📚

ES6 classes provide a cleaner syntax for object-oriented programming.

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return `${this.name} makes a sound.`;
  }
}

const dog = new Animal("Dog");
console.log(dog.speak()); // Dog makes a sound.

12. Modules 📦

Modules let you split your code across multiple files.

// add.js
export const add = (a, b) => a + b;

// main.js
import { add } from "./add.js";
console.log(add(2, 3)); // 5

13. Map and Filter 📊

map and filter are array methods for transforming and filtering arrays.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8]
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]

14. Reduce ➖

reduce accumulates values from an array.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10

15. SetTimeout and SetInterval ⏱️

setTimeout delays execution, while setInterval repeats it.

setTimeout(() => console.log("After 1 second"), 1000);

let count = 0;
const intervalId = setInterval(() => {
  console.log("Count:", ++count);
  if (count === 3) clearInterval(intervalId);
}, 1000);

16. Template Literals 💬

Template literals allow multi-line strings and interpolation.

const name = "World";
console.log(`Hello, ${name}!`); // Hello, World!

17. Type Coercion 🔄

JavaScript can implicitly convert types, sometimes unpredictably.

console.log("5" + 5); // 55 (string)
console.log("5" - 2); // 3 (number)

18. Truthy and Falsy Values ✅❌

Values like 0, "", null, undefined, NaN are falsy.

if ("") {
  console.log("This won't run");
} else {
  console.log("Falsy value");
}

19. Debouncing & Throttling ⏳

Debouncing and throttling are techniques to control function execution frequency, often in response to events.

Debounce (delay execution):

function debounce(func, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

window.addEventListener("resize", debounce(() => console.log("Resized!"), 500));

Throttle (limit execution):

function throttle(func, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

window.addEventListener("scroll", throttle(() => console.log("Scrolling!"), 200));

20. Currying 🧑‍🍳

Currying transforms a function with multiple arguments into a series of functions with a single argument.

function multiply(a) {
  return function (b) {
    return a * b;
  };
}

const double = multiply(2);
console.log(double(5)); // 10

Wrapping Up 🎉

These concepts provide a solid foundation for handling JavaScript questions during an interview. Practice writing your own examples to gain fluency with each concept.

Jagroop Singh @jagroop2001