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
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.
Top comments (23)
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.
@john12 ,
Yes, debouncing and throttling are widely used in real-world applications, especially in front-end development where performance optimization is key.
1. Debouncing
2. Throttling
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!
Wow nice and detailed explanation
Thanks @hraifi
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
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.
Thank you for the efforts !!
AI much? π
Thanks @john12
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."
Thanks for sharing detailed explanation.
I didn't understand the concept of Promises ??
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:
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).
Thanks for this nice explanation with story.
Wow !!
That look's promising !!
Unfortunately, this is not correct.
Misconceptions About Closures
Jon Randy ποΈ γ» Sep 27 '23
Thanks for sharing and clearing misconception @jonrandy
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.
Thanks for suggestion @philip_zhang_854092d88473
Great overview of key JavaScript concepts! π The examples make things easy to understand, especially closures and hoisting. Thanks for sharing this! π
You're very welcome! π I'm thrilled to hear that.
Very π
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.