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

JavaScript Functions

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

Detailed notesRunnable JavaScriptPractice + answer

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

01 / Understand

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

A function packages reusable work. Parameters receive inputs and return sends a result to the caller. Logging a value and returning it are different operations.

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

02 / Explore

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

Functions என்னன்னு தெரியுமா?

Functions என்பது ஒரு குறிப்பிட்ட task perform பண்ண எழுதுற reusable code blocks. JavaScript-ல பல function syntax இருக்கு, closures மற்றும் higher-order functions மாதிரி powerful features இருக்கு.

Function Declaration vs Expression

JavaScript reference fragmentCODE

// Function Declaration — hoisted, define பண்றதுக்கு முன்னாடியே call பண்ணலாம்
function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("Alice")); // "Hello, Alice!"

// Function Expression — hoisted இல்ல
const greet2 = function(name) {
  return `Hi, ${name}!`;
};

// Arrow Function (ES6) — concise syntax
const greet3 = (name) => `Hey, ${name}!`;
const double = n => n * 2;   // single param
const add = (a, b) => a + b; // implicit return

Parameters & Default Values

JavaScript reference fragmentCODE

// Default parameters (ES6)
function createUser(name, role = "viewer", active = true) {
  return { name, role, active };
}
console.log(createUser("Bob"));           // { name: 'Bob', role: 'viewer', active: true }
console.log(createUser("Alice", "admin")); // { name: 'Alice', role: 'admin', active: true }

// Rest parameters — remaining args-ஐ array-ல collect பண்ணும்
function sum(...numbers) {
  return numbers.reduce((acc, n) => acc + n, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 15

Closures

Closure என்பது outer scope finish ஆன பிறகும் அந்த scope-ஐ remember பண்றது inner function.

JavaScript reference fragmentCODE

function createCounter() {
  let count = 0; // private variable
  return {
    increment: () => ++count,
    decrement: () => --count,
    value: () => count
  };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.value());     // 2

Higher-Order Functions

JavaScript reference fragmentCODE

const numbers = [1, 2, 3, 4, 5];

// map — ஒவ்வொரு element-ஐயும் transform பண்ணும்
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// filter — condition pass ஆகுறவற்றை மட்டும் வை
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

// reduce — single value-ஆ accumulate பண்ணும்
const total = numbers.reduce((acc, n) => acc + n, 0);
console.log(total); // 15

Arrow functions-க்கு own this இல்ல — enclosing scope-ல இருந்து inherit பண்ணும். Callbacks-க்கு ideal, object methods-க்கு not suitable.

Arrow function-ன் முக்கிய property என்ன?

அது எப்பவும் string return பண்ணும்
அதில் 'this' keyword own scope-ஐ bind பண்ணாது
Hoisting support பண்ணும்
அதை delete பண்ண முடியாது

Reveal answer / விடை

அதில் 'this' keyword own scope-ஐ bind பண்ணாது

Arrow functions-க்கு own 'this' கிடையாது, அவை enclosing scope-ல் இருந்து 'this'-ஐ inherit செய்யும்.

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

function total(price, quantity) {
  return price * quantity;
}
const bill = total(80, 3);
console.log(bill);

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

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

Call total with 50 and 4, then add delivery of 30 outside the function.

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

total(50, 4) + 30 is 230. The function remains focused on the subtotal.

தவிர்க்க வேண்டிய தவறு: Without a return statement, a normal function returns undefined even if it logs a value.

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

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