DEV Community

Cover image for 20 Important JavaScript Concepts for Your Next Interview πŸš€
Jagroop Singh
Jagroop Singh

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Follow me on github:

Jagroop2001 (Jagroop) Β· GitHub

πŸ‘¨β€πŸ’» Full Stack Developer | πŸ€– Machine Learning Developer | 🀝 Dev Relations Pro – πŸ’Ό Available for Hire - Jagroop2001

favicon 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.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

16. Template Literals πŸ’¬

Template literals allow multi-line strings and interpolation.

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

17. Type Coercion πŸ”„

JavaScript can implicitly convert types, sometimes unpredictably.

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

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");
}
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (24)

Collapse
 
john12 profile image
john

I found Debouncing & Throttling a bit complicated for me. Is it even used in real world application or not ?
Also, I found closures interesting concept.

Collapse
 
jagroop2001 profile image
Jagroop Singh

@john12 ,
Yes, debouncing and throttling are widely used in real-world applications, especially in front-end development where performance optimization is key.

1. Debouncing

  • What it does: Debouncing delays the execution of a function until a certain period of inactivity has passed.
  • Real-world example: E-commerce sites often use debounced input on search fields to avoid overwhelming the server with queries and provide a smoother experience.

2. Throttling

  • What it does: Throttling, on the other hand, limits the number of times a function is executed over a set period, regardless of how often the event occurs.
  • Real-world example: Social media feeds or infinite scroll features often use throttling to ensure that loading more content or tracking scroll position doesn’t slow down the page.

Together, these techniques prevent β€œovercalling” functions, which can lead to performance issues, especially on mobile devices or slower networks.

Also,
Closures are indeed fascinating! They allow functions to retain access to their original scope, even after that scope has finished executing.

Let me know if you’d like more examples or a breakdown of any particular concept in order to unserstand it better!

Collapse
 
hraifi profile image
sewiko

Wow nice and detailed explanation

Thread Thread
 
jagroop2001 profile image
Jagroop Singh

Thanks @hraifi

Collapse
 
john12 profile image
john

wow, you have just published another blog in the comments. Is it for real or it's GPT generated.
Well it's well explained , now I understand the whole concept of Debouncing and Throttling

Thread Thread
 
jagroop2001 profile image
Jagroop Singh

Thank you! Also, this response isn't generated by GPT. I personally invested time in crafting it to ensure that users can gain a better understanding of the concept.

Thread Thread
 
john12 profile image
john

Thank you for the efforts !!

Collapse
 
msegmx profile image
msegmx

AI much? πŸ™„

Collapse
 
jagroop2001 profile image
Jagroop Singh

Thanks @john12

Collapse
 
freya_9b0b8bdffed2180337e profile image
Freya • Edited

That's a perfect analogy for explaining JavaScript Promises!

Here's how it breaks down:

Pending: Just like waiting for your pizza, a Promise starts in a pending state. You don’t have the result yet; it’s just a promise that something will happen, similar to how platforms like Mobcup queue content for processing.

Fulfilled: If everything goes smoothly β€” the pizza arrives on time β€” you receive what you ordered, and the Promise is fulfilled. In JavaScript, this means the Promise returns the expected result.

Rejected: Sometimes things go wrong, like a broken oven at the pizza shop. If the promise can’t be kept, it moves to a rejected state, returning an error.

Using this story, with Mobcup as a reference, makes it easy to remember: a Promise is just JavaScript’s way of saying, "I'll try to get this to you, but I’ll let you know if there’s an issue along the way."

Collapse
 
jagroop2001 profile image
Jagroop Singh

Thanks for sharing detailed explanation.

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

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

Unfortunately, this is not correct.

Collapse
 
jagroop2001 profile image
Jagroop Singh

Thanks for sharing and clearing misconception @jonrandy

Collapse
 
hraifi profile image
sewiko

I didn't understand the concept of Promises ??

Collapse
 
jagroop2001 profile image
Jagroop Singh

okay let me explain this with a short story,
Imagine you order a pizza. The pizza shop promises it’ll arrive soon. Right now, your order is pending. After some time, either:

  1. The pizza arrives on time, making you happy β€” this is the fulfilled state, and you enjoy your pizza.
  2. Something goes wrong (like the oven breaks), so they cancel the order β€” this is the rejected state, leaving you without pizza.

In JavaScript, a Promise works the same way! It’s like saying, β€œI promise to do something later,” and based on what happens, you either get a result (fulfilled) or an error (rejected).

Collapse
 
jagroop2001 profile image
Jagroop Singh

Thanks for this nice explanation with story.

Collapse
 
jagroop2001 profile image
Jagroop Singh

Wow !!
That look's promising !!

Collapse
 
tomasdevs profile image
Tomas Stveracek

Great overview of key JavaScript concepts! πŸš€ The examples make things easy to understand, especially closures and hoisting. Thanks for sharing this! πŸ™Œ

Collapse
 
jagroop2001 profile image
Jagroop Singh

You're very welcome! 😊 I'm thrilled to hear that.

Collapse
 
philip_zhang_854092d88473 profile image
Philip

Thanks for the effort! I’d like to share that EchoAPI is perfect for testing JavaScript APIs, making it easy to manage requests and responses seamlessly.

Collapse
 
jagroop2001 profile image
Jagroop Singh

Thanks for suggestion @philip_zhang_854092d88473

Collapse
 
emely_day_8b3186918b7c739 profile image
Emely Day

Thanks for sharing, you also have to try majesta.

Collapse
 
shahin_466_9667 profile image
Şahin Quliyev

Very πŸ‘

Collapse
 
paxnw profile image
caga

Async await and promises difference and similarity is asked in my previous interview.Aslo currying is important question.

All the important aspects are covered in this blog.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.