Modern JavaScript Basics 2026: Employers Expect இது தான் (var இல்ல!)

என்ன நடந்தது?#

நீங்க எப்போவாவது YouTube-ல 'JavaScript for Beginners' போட்டு Search பண்ணி பாருங்க. 2015-ல Upload ஆன Video-ன்னு Date பார்க்காம பாத்தா, First Line-லயே var x = 5 ன்னு வரும். அது தான் Problem. var ஒரு If Block-ல Declare பண்ணா கூட, அந்த Block-க்கு வெளிய வந்து Leak ஆகும். அண்ணா நகர் Traffic-ல ஒரு Auto எந்த Lane-லயும் போறதுமாதிரி, var எங்க Define பண்ணினாலும் வேற இடத்துக்கு போயி Confusion பண்ணும்.

let, const அப்படி இல்ல. இவை இரண்டும் நீங்க எழுதின Curly Brace {}-க்கு உள்ளயே Live ஆகி, அதே Block-ல தான் இருக்கும். இத தான் Block Scope சொல்றது. Interview-க்கு போனா, Editor Open பண்ணினதும் முதல் Check பண்றது இது தான்.

let, const-க்கு என்ன வித்தியாசம்?#

எளிமையா சொன்னா - Value மாறாம இருக்குற Variable-க்கு const Use பண்ணுங்க. Counter, Loop Index, மொத்த Total மாதிரி மாறக்கூடிய Value-க்கு மட்டும் let.

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);

Chennai-லயோ Bangalore-லயோ இருக்கிற எந்த Senior Developer-ஆ கேட்டாலும் சொல்வாங்க - Default-ஆ const Use பண்ணுங்க, Value மாற்றணும்னு தெரிஞ்சா மட்டும் let-க்கு மாறுங்க. 2026-ல புதுசா எழுதுற எந்த Code-லயும் var வர வேண்டிய அவசியமே இல்ல.

Arrow Function-ல this எப்படி வேலை செய்யும்?#

2016-ல இருந்து Node.js எழுதுற எந்த Backend Dev-ஆ கேட்டாலும் சொல்வாங்க - Evening-ஐ கெடுத்தது 'this' தான். Normal Function-ல this, அந்த Function எப்படி Call ஆகுதுன்னு இருக்கிற Context-ஐ பொறுத்து மாறும்.

Setup, Callback, Event Handler உள்ள போனா, this அமைதியா Undefined ஆகிடும். அப்புறம் App Crash ஆகும் Error வரும் - 'Cannot read properties of undefined'. Arrow Function இத தான் Fix பண்ணுது, அது Own-ஆ this Create பண்ணாது. எழுதின இடத்துல இருக்குற this-ஐயே அப்படியே Use பண்ணும்.

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 இங்க Work ஆகுது, ஏன்னா setTimeout-க்கு உள்ள Arrow Function Own this Create பண்ணலை. இதே Place-ல Normal function() Use பண்ணி பாருங்க - this.items Error வரும், ஏன்னா Regular Function-ஐ setTimeout Call பண்ணும்போது, அதன் this இனி உங்க Cart Object-ஐ Point பண்ணாது.

Template Literals ஏன் இப்போ Standard ஆயிடுச்சு?#

பழைய Code-ல String-ஐ + வெச்சு Join பண்றது ஞாபகம் இருக்கா? Variable Name Spell Mistake ஆனா, Space Miss ஆனா, Error Track பண்றது Headache. Template Literals Backtick (`) வெச்சு, Variable-ஐ Curly Brace-க்கு உள்ள நேரடியா போடும்போது இந்த Mess எல்லாம் போயிடும்.

const name = "Kumar";
const amount = 499;
const upiId = "kumar@upi";

const receipt = `Hi ${name}, your payment of ₹${amount} to ${upiId} is successful.`;
console.log(receipt);

UPI Receipt Message, Order Confirmation SMS, Chat Bot Reply - இதெல்லாம் Backend-ல இப்படி Dynamic String Generate பண்ணவே Template Literal தான் Standard. Multi-line String கூட நேரடியா Backtick-ல எழுதலாம், Old School \\n தேவையில்ல.

Destructuring, Spread இது என்ன Magic?#

Object-ல இருந்து ஒரு Two, Three Field மட்டும் வேணும்னா, பழைய மாதிரி user.name, user.city ன்னு ஒவ்வொரு Line-ஆ Write பண்ண வேண்டாம். Destructuring ஒரே Line-ல அதையே பிரிச்சு எடுக்கும்.

const user = { name: "Priya", city: "Chennai", age: 24 };
const { name, city } = user;
console.log(name, city); // Priya Chennai

const numbers = [10, 20, 30];
const copy = [...numbers, 40];
console.log(copy); // [10, 20, 30, 40]

const defaultSettings = { theme: "dark", language: "ta" };
const userSettings = { ...defaultSettings, language: "en" };
console.log(userSettings); // { theme: "dark", language: "en" }

Spread Operator (...) Object அல்லது Array-ஐ Copy பண்ணி, அதுக்கு மேல Extra Value Add பண்ண உதவும். React State Update பண்ணும்போது, API Response-ல இருந்து சில Field மட்டும் எடுக்கும்போது இது Daily Use Tool.

ES Modules - import/export எதுக்கு?#

பழைய Website-ல ஒரு <script> Tag Add பண்ணி, இன்னொரு <script> Tag Add பண்ணி, எது Load ஆகுதுன்னு Order Problem வர்றது Common. ES Modules இத தான் தீர்த்து வைக்குது - ஒரு File-ல என்ன Export பண்ணணும்னு Clear-ஆ Define பண்ணி, இன்னொரு File-ல அதையே Import பண்ணலாம்.

// mathUtils.js
export function add(a, b) {
  return a + b;
}

export const PI = 3.14159;

// app.js
import { add, PI } from "./mathUtils.js";

console.log(add(5, 3)); // 8
console.log(PI);

React, Node.js, Next.js - இப்போ எந்த Project-ஐ Open பண்ணினாலும் இந்த import/export Pattern தான் காமிக்கும். Package.json-ல \"type\": \"module\" Set பண்ணினா Node-லயும் இதே Syntax Work ஆகும்.

இதுல தப்பா பண்ணுறது என்ன?#

முதல் Mistake - const-ல Declare பண்ண Array அல்லது Object-ஐ Reassign பண்ண முயற்சி பண்றது. const Value-ஐ Lock பண்ணாது, Variable-ஐ மட்டும் Lock பண்ணும். அதாவது const arr = [1,2,3]; arr.push(4); Perfectly Fine, ஆனா arr = [5,6,7]; Error தரும்.

இரண்டாவது Mistake - Arrow Function-ஐ Object Method-ஆ Define பண்றது. Object Literal-ல Method Define பண்ணும்போது Regular Function Use பண்ணுங்க, இல்லைன்னா this Object-ஐ Point பண்ணாது.

மூன்றாவது Mistake - Template Literal-ல Backtick மறந்து Normal Quote Use பண்ணி, ${name}-ஐ அப்படியே String-ஆ Print பண்றது. Backtick இல்லாம ${} Work ஆகாது.

Indian Companies Interview-ல இது எப்படி கேக்குறாங்க?#

TCS, Infosys, Zoho, Freshworks மாதிரி Companies-ல Frontend/Full Stack Round வந்தா, முதல் Round-லயே ஒரு Live Coding Screen Open பண்ணி, \"இந்த Function-ல this Undefined ஆகுது, எப்படி Fix பண்ணுவீங்க\" ன்னு கேப்பாங்க. Arrow Function Correct-ஆ சொல்றது தான் அந்த Answer. Startups-ல React/Next.js Codebase ஆன Place-ல, Destructuring, Spread, ES Modules Daily Use ஆகும் - அதனால Resume-ல 'JavaScript' போட்டா, இந்த Five Topic-ஆவது Clear-ஆ தெரிஞ்சிருக்கணும்.

நீங்க இப்போ என்ன பண்ணுங்க?#

Browser Console Open பண்ணுங்க (F12), இந்த Small Task Try பண்ணுங்க - ஒரு products Array Create பண்ணுங்க, அதுல ஒவ்வொரு Product-க்கும் { name, price } Object இருக்கணும். Destructuring Use பண்ணி ஒரு Product-ன் name, price-ஐ எடுங்க, Template Literal Use பண்ணி \"Product X costs ₹Y\" ன்னு Print பண்ணுங்க. அப்புறம் அதையே ஒரு Arrow Function-ஆ Convert பண்ணுங்க. இத முழுசா பண்ணிட்டீங்கன்னா, இந்த Article-ல சொன்ன Five Concept-யும் நீங்க Apply பண்ணிட்டீங்க.