JavaScript · Lesson 23 / 32 · தமிழ்

ES6+ Features

கருத்தைப் புரிந்துகொள்ளுங்கள். Code-ஐ மாற்றி இயக்குங்கள். ஒரு சிறிய பயிற்சியால் கற்றதை உறுதி செய்யுங்கள்.

Detailed notesRunnable JavaScriptPractice + answer

மூலப் பாட விளக்கங்கள் தமிழில் உள்ளன. கூடுதல் concept, practice மற்றும் answer notes ஆங்கிலத்தில் உள்ளன.

01 / Understand

முக்கியக் கருத்து

Modern syntax can make transformations easier to read. Destructuring extracts values, rest collects them, spread expands them, and template literals build text.

Learning goal: Explain what the example does, predict its result, and change it to solve the practice task.

02 / Explore

விரிவான விளக்கங்கள்

Modern JavaScript (ES6 and Beyond)

ES6 (ECMAScript 2015) JavaScript-க்கு ஒரு major update. அதுக்கு பிறகு ஒவ்வொரு வருஷமும் new features வருது. Daily use-க்கு மிகவும் important-ஆனவற்றை பார்ப்போம்.

Destructuring & Spread / Rest

JavaScript reference fragmentCODE

// Array destructuring
const [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a, b, rest); // 1, 2, [3, 4, 5]

// Object destructuring
const { name, age = 25 } = { name: "Alice", city: "NYC" };

// Spread — iterable-ஐ expand பண்ணும்
const merged = [...[1, 2], ...[3, 4]]; // [1, 2, 3, 4]
const combined = { ...{ a: 1 }, ...{ b: 2 } }; // { a: 1, b: 2 }

Optional Chaining & Nullish Coalescing

JavaScript reference fragmentCODE

const user = { profile: { name: "Alice" } };

// Optional chaining (?.) — ES2020
console.log(user?.profile?.name);  // "Alice"
console.log(user?.address?.city);  // undefined (error இல்ல!)

// Nullish coalescing (??) — null/undefined-க்கு மட்டும்
const port = null ?? 3000;   // 3000
const count = 0 ?? 100;      // 0 (0 is not null/undefined)

// Logical assignment — ES2021
let a = null;
a ??= "default"; // a is now "default"

Modules (import / export)

JavaScript reference fragmentCODE

// math.js — Named exports
export const PI = 3.14159;
export function add(a, b) { return a + b; }

// utils.js — Default export
export default function formatDate(date) {
  return date.toLocaleDateString();
}

// main.js — Importing
import formatDate from "./utils.js";
import { PI, add } from "./math.js";
import * as MathUtils from "./math.js";

// Dynamic import (lazy loading)
const module = await import("./heavy-module.js");

03 / Read & predict

முழுமையான உதாரணம்

Run this complete index.js program in the JavaScript console editor below. The earlier reference fragments may need a browser page or other surrounding setup.

index.js · complete exampleCODE

const learner = { name: "Kavi", level: "beginner" };
const { name, level } = learner;
const topics = ["variables", "functions"];
const expanded = [...topics, "arrays"];
console.log(`${name}: ${level}`);
console.log(expanded.join(" → "));

எதிர்பார்க்கும் முடிவைப் பாருங்கள்

Kavi: beginner
variables → functions → arrays

04 / Experiment

மாற்றி இயக்கிப் பாருங்கள்

Load the example, change a value, predict the output, and run it again. Use the console output to check your reasoning.

Open editor ↗

Editor load ஆனதும் code-ஐ ஏற்றி Run அழுத்துங்கள்.

OneCompiler என்ற இலவச வெளிப்புற சேவை code-ஐ இயக்குகிறது. Run செய்யும் code அங்கு அனுப்பப்படும். தனிப்பட்ட தகவல்கள் அல்லது secret keys உள்ளிட வேண்டாம்.

05 / Your turn

சிறிய பயிற்சி

Practice challenge

Add objects to expanded without mutating topics.

விடை மற்றும் விளக்கம்

const next = […expanded, "objects"]; creates a new array. topics still contains two items.

தவிர்க்க வேண்டிய தவறு: Spread makes a shallow copy. It does not recursively clone nested objects.

அடுத்த பாடத்திற்குத் தயாரா?

Explain the example in your own words.
Complete the challenge before revealing its answer.
Describe the common mistake and how to avoid it.