JavaScript Topics for Senior Developers (with Simple Examples)
Here's a breakdown of important JavaScript concepts every senior developer should know, explained in simple English with examples.
1. Closures
What? A closure is when a function remembers variables from its outer scope even after that scope is finished.
Example:
function outer() {
let count = 0;
return function inner() {
count++;
console.log(count);
};
}
const counter = outer();
counter(); // 1
counter(); // 2
2. Hoisting
What? JavaScript moves variable and function declarations to the top before executing code.
Example:
console.log(a); // undefined
var a = 5;
3. The Event Loop
What? JavaScript handles tasks using a queue system. It runs synchronous code first, then async tasks from the event loop.
Example:
console.log("Start");
setTimeout(() => console.log("Timeout"), 0);
console.log("End");
Output: Start → End → Timeout
4. Promises and Async/Await
What? They are used to handle asynchronous operations like API calls.
Example:
async function getData() {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
console.log(data);
}
getData();
5. Debounce and Throttle
Debounce: Runs a function after waiting a bit. Throttle: Limits a function to run only once every X milliseconds.
Debounce Example:
function debounce(fn, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
6. Shallow vs Deep Copy
Shallow Copy copies references. Deep Copy copies values recursively.
Example:
let original = { a: 1, b: { c: 2 } };
let shallow = { ...original };
shallow.b.c = 10;
console.log(original.b.c); // 10 (because it's shallow)
7. Prototype and Inheritance
What? Objects in JS can inherit from other objects using prototypes.
The prototype is an internal property of objects that enables them to inherit features such as properties and methods from other objects.
Example:
function Person(name) {
this.name = name;
}
Person.prototype.sayHi = function () {
console.log("Hi, I am " + this.name);
};
const p = new Person("Alice");
p.sayHi();
8. Destructuring and Spread
What? Destructuring lets you unpack values; spread lets you expand objects/arrays.
Example:
let obj = { a: 1, b: 2 };
let { a } = obj;
let newObj = { ...obj, c: 3 };
9. Optional Chaining and Nullish Coalescing
Optional Chaining: ?. avoids errors if something is undefined.
Nullish Coalescing: ?? provides default if value is null or undefined.
Example:
let user = {};
console.log(user?.address?.city); // undefined
console.log(user.name ?? "Guest"); // Guest
10. Map, Set, WeakMap, WeakSet
What? Special objects for storing unique values or key-value pairs.
Example:
let map = new Map();
map.set("a", 1);
console.log(map.get("a"));
let set = new Set([1, 2, 2, 3]);
console.log(set); // Set(3) {1, 2, 3}
11. What is garbage collection?
In JavaScript, garbage collection (GC) is an automatic memory management process
if the objects are no longer in use (unused variables and objects ), Garbage collection automatically frees up memory
that reclaims memory occupied by objects no longer in use. This helps prevent memory leaks and optimizes application performance.
----------------------------------------------------------------------------------------------------------------------
12. What is Interface in TypeScript?
Interface is nothing but blue print of objects
An interface defines a set of properties for an objects.
----------------------------------------------------------------------------------------------------------------------
Example:
If a web application hosted at https://example.com tries to fetch data from https://api.anotherdomain.com, the server at api.anotherdomain.com must include appropriate CORS headers to allow this request.
----------------------------------------------------------------------------------------------------------------------
1. Prop Drilling in React
Definition:
Prop drilling refers to the process of passing data from a parent component through multiple nested child components, even if intermediate components do not need the data. This can lead to components being tightly coupled and harder to maintain.
2. Fallback Component in React
Definition:
A fallback component in React is displayed while a component is waiting to load, such as during lazy loading or data fetching. React's Suspense component allows you to specify a fallback UI to enhance user experience during these asynchronous operations.
A fallback component in React is displayed when an asynchronous operation fails, ensuring a graceful user experience
3. Route Protection in React
Definition:
Route protection is a technique used to restrict access to certain routes in a React application, ensuring that only authorized users can access specific pages. This is commonly implemented using higher-order components or wrapper components that check for authentication before rendering the protected route.