Key Takeaways
- var still shows up in old YouTube tutorials, but every serious 2026 codebase runs on let and const.
- Arrow functions aren't just shorter - they fix the classic 'this is undefined' bug that used to trip up juniors in interviews.
- Template literals (backticks) replace the old string + variable + string mess, handy for things like UPI receipt messages.
- Destructuring and spread pull data out of objects/arrays and copy them without fifteen lines of boilerplate.
- ES Modules (import/export) are how every React, Node, and Next.js project at Indian IT companies is structured today - no script-tag spaghetti.
Why do 2015 tutorials still teach var, and why should you stop?
Open any 'JavaScript for beginners' video that's been sitting on YouTube since 2015, and the first line almost always reads var x = 5. That's the problem right there. var leaks out of if blocks and for loops the way an auto leaks into every lane in Anna Nagar traffic - it goes wherever it wants.
let and const, on the other hand, stay inside the curly braces where you wrote them. That's block scope, and it's usually the first thing an interviewer checks the moment you open a code editor.
function checkAge(age) {
if (age >= 18) {
let status = "adult";
console.log(status);
}
// console.log(status); -> ReferenceError, status only exists inside the if block
}
checkAge(20);Rule of thumb every senior dev at a Chennai or Bangalore product company will tell you: use const by default. Switch to let only when you know the value will actually change - a counter, a loop index, a running total. var should not appear in anything new you write in 2026.
Arrow functions - just shorter code, or something that fixes real bugs?
Ask any backend dev who's been writing Node since 2016 what used to ruin their evening, and a good chunk will say 'this'. In a normal function, this changes depending on how the function got called. Inside a callback, inside setTimeout, inside an event handler, this quietly turns into undefined, and your app throws 'Cannot read properties of undefined' at the worst possible time.
Arrow functions fix this by simply not having their own this. They borrow this from whatever scope they were written inside. That's the entire trick.
class Cart {
constructor() {
this.items = [];
}
addItem(name) {
// arrow function keeps "this" pointing to the Cart instance
setTimeout(() => {
this.items.push(name);
console.log(this.items);
}, 500);
}
}
const cart = new Cart();
cart.addItem("Jio Recharge");cart.addItem works because the arrow function inside setTimeout never created its own this. Use a plain function() there instead, and this.items blows up, because this inside a regular function called by setTimeout no longer points to your cart object.
Why do seniors keep saying 'use template literals' instead of plus signs?
Old-school JS had you building strings like 'Hi ' + user + ', your order of Rs. ' + amount + ' is confirmed.' One missing plus sign and the whole build breaks on a Friday evening, right before release. Template literals use backticks and ${} instead, and they read like an actual message.
const user = "Karthik";
const amount = 499;
const message = `Hi ${user}, your UPI payment of Rs. ${amount} is successful.`;
console.log(message);It reads like something you'd actually send over WhatsApp, not a maths equation. It also handles multi-line strings without the \n gymnastics older code needed.
Destructuring and spread - what's this {} and ... magic everyone copies?
Say an API hands you back an order object with ten fields, and you only care about two of them. Instead of writing order.city, order.amount, order.whatever on every single line, destructuring lets you pull exactly what you want in one shot.
const order = { id: 101, city: "Chennai", amount: 1200, cod: false };
const { city, amount, ...rest } = order;
console.log(city, amount, rest);
const oldPrices = [999, 1499, 1999];
const newPrices = [...oldPrices, 2499];
console.log(newPrices);The same three dots do two different jobs depending on where you place them. On the right side of an array or object, they spread values out. When collecting leftovers, like ...rest above, they gather whatever's left into a brand new object. Same symbol, context decides the meaning - and that exact line trips up a lot of candidates in interviews.
ES Modules - how do import and export actually wire a real project together?
Every React project, every Node backend, every Next.js app you'll touch at an Indian IT company in 2026 is split into small files, not one 3000-line script.js. That split happens through export and import.
// file: price.js
export const GST_RATE = 0.18;
export function addGST(price) {
return price + price * GST_RATE;
}
// file: app.js
import { addGST, GST_RATE } from "./price.js";
console.log(addGST(1000), GST_RATE);export hands a piece of code out of its file. import pulls it back in somewhere else, using the exact name you gave it. Browsers support this natively now with script type module, and build tools like Vite simply assume you're writing modules from day one.
What mistakes do beginners keep making with all this?
- Mixing let and const randomly instead of defaulting to const - makes code review painful because reviewers can't tell what's meant to change.
- Writing object methods as arrow functions directly inside a class - that breaks this instead of fixing it, since the arrow grabs this from the surrounding file, not the object it's attached to.
- Getting the import path wrong, like forgetting the .js extension or mixing up relative paths - behaviour here depends on your build tool, and it's a classic first-week bug.
- Assuming spread does a 'deep copy'. It only copies one level deep. Nested objects inside the copy still point to the original, so editing a copied cart item can quietly change the original one too.
Where does this actually show up in Indian companies and interviews?
If you're prepping for a frontend or full-stack role at a product company, a fintech, or even a mid-size services firm running React or Angular, this is day-one material, not advanced stuff. Interviewers hiring for React and Node roles routinely ask 'what's the difference between let and var' or 'why use an arrow function here' as a filter question before they even get to algorithms. Teams building dashboards for UPI apps, logistics tracking, or e-commerce order flows pull fields out of API responses with destructuring constantly, and ES modules are simply how the codebase is organised - you can't avoid import and export even in your first week on a real repository.
Your turn - a quick practice task
Before you close this tab, open any JS playground, even your browser console works fine. Build a tiny 'order receipt' function: take an object with name, an items array, and a total. Destructure name and total out of it, use spread on the items array to add one more item without touching the original array, and print the final receipt using a template literal. If you can do that in under ten lines without typing var even once, you're already ahead of plenty of 2015-tutorial grads.




Comments (0)
Be the first to comment!