JavaScript Function Expressions

What is a Function Expression?

ஜாவாஸ்கிரிப்ட் செயல்பாடுகள் function முக்கிய சொல்லுடன் வரையறுக்கப்படுகின்றன.

ஒரு ஜாவாஸ்கிரிப்ட் செயல்பாட்டை ஒரு செயல்பாட்டு வெளிப்பாடாக வரையறுக்கலாம்.

ஒரு செயல்பாட்டு வெளிப்பாடு என்பது ஒரு மாறியில் சேமிக்கப்பட்ட ஒரு செயல்பாடு.

எடுத்துக்காட்டு

const x = function (a, b) { return a * b };

ஒரு செயல்பாட்டு வெளிப்பாடு ஒரு மாறியில் சேமிக்கப்பட்ட பிறகு, மாறி ஒரு செயல்பாடாகப் பயன்படுத்தப்படலாம்:

எடுத்துக்காட்டு

const multiply = function (a, b) { return a * b };

let z = multiply(4, 3);
console.log(z);  // 12

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

செயல்பாட்டு வெளிப்பாடுகள் ஜாவாஸ்கிரிப்ட்டில் "முதல்-வகுப்பு குடிமக்கள்" என்ற கருத்தை வெளிப்படுத்துகின்றன. இதன் பொருள்:

செயல்பாடுகளை மாறிகளில் சேமிக்கலாம்
செயல்பாடுகளை மற்ற செயல்பாடுகளுக்கு வாதங்களாக அனுப்பலாம்
செயல்பாடுகளை மற்ற செயல்பாடுகளிலிருந்து திருப்பித் தரலாம்
செயல்பாடுகளை இயக்க நேரத்தில் உருவாக்கலாம்

அநாமதேய செயல்பாடுகள்

மேலே உள்ள செயல்பாடு உண்மையில் ஒரு அநாமதேய செயல்பாடு (பெயர் இல்லாத செயல்பாடு).

மாறிகளில் சேமிக்கப்பட்ட செயல்பாடுகளுக்கு செயல்பாடு பெயர்கள் தேவையில்லை.

எடுத்துக்காட்டு: அநாமதேய செயல்பாடு

const sayHello = function() {
    return "Hello World";
};

console.log(sayHello());  // "Hello World"

மாறி பெயர் செயல்பாட்டை அழைக்கப் பயன்படுத்தப்படுகிறது.

எடுத்துக்காட்டு: பெயரிடப்பட்ட செயல்பாட்டு வெளிப்பாடு

const add = function add(a, b) { 
    return a + b;
};

இது ஒரு பெயரிடப்பட்ட செயல்பாட்டு வெளிப்பாடு. இந்த பெயர் டிபக்கிங்கிற்கு பயனுள்ளதாக இருக்கும்.

ℹ️ குறிப்பு:

செயல்பாட்டு வெளிப்பாடுகள் பொதுவாக அநாமதேய செயல்பாடுகளை உருவாக்கப் பயன்படுத்தப்படுகின்றன.

மேலே உள்ள செயல்பாடு sayHello மாறியில் சேமிக்கப்பட்டுள்ளது.

அதை இயக்க, நீங்கள் sayHello() என்று அழைக்கிறீர்கள்.

செயல்பாட்டு வெளிப்பாடுகள் அரைப்புள்ளிகளைப் பயன்படுத்துகின்றன

ஒரு செயல்பாட்டு வெளிப்பாடு பொதுவாக ஒரு அறிக்கை.

அதனால்தான் இது பொதுவாக ஒரு அரைப்புள்ளியுடன் முடிகிறது.

எடுத்துக்காட்டு

const add = function(a, b) {
    return a + b;
};  // ← அரைப்புள்ளி

📝 அரைப்புள்ளி விதி:

செயல்பாடு வரையறைகள்: பொதுவாக அரைப்புள்ளி தேவையில்லை
செயல்பாட்டு வெளிப்பாடுகள்: பொதுவாக அரைப்புள்ளி தேவை (மாறி ஒதுக்கீட்டு அறிவிப்பு என்பதால்)

// செயல்பாடு வரையறை - அரைப்புள்ளி தேவையில்லை
function add(a, b) {
    return a + b;
}

// செயல்பாட்டு வெளிப்பாடு - அரைப்புள்ளி தேவை
const multiply = function(a, b) {
    return a * b;
};

மாறிகளில் சேமிக்கப்பட்ட செயல்பாடுகள்

ஒரு செயல்பாட்டு வெளிப்பாடு ஒரு மாறியில் சேமிக்கப்படுவதால், அதை ஒரு மதிப்பைப் போலப் பயன்படுத்தலாம்.

இது மற்ற செயல்பாடுகளுக்கு செயல்பாடுகளை அனுப்பும் போது பயனுள்ளதாக இருக்கும் (callback கள்).

எடுத்துக்காட்டு: செயல்பாட்டை வாதமாக அனுப்புதல்

function run(fn) {
    return fn();
}

const sayHello = function() {
    return "Hello";
};

let result = run(sayHello);
console.log(result);  // "Hello"

ஒரு செயல்பாட்டு வெளிப்பாட்டை ஒரு மாறிக்கு ஒதுக்கலாம், மற்றொரு செயல்பாட்டிற்கு ஒரு வாதமாக அனுப்பலாம் அல்லது ஒரு செயல்பாட்டிலிருந்து திருப்பித் தரலாம்.

மேலும் எடுத்துக்காட்டுகள்:

// 1. செயல்பாட்டை மாறிக்கு ஒதுக்குதல்
const greet = function(name) {
    return `Hello, ${name}!`;
};

// 2. செயல்பாட்டை வாதமாக அனுப்புதல்
function processUser(callback) {
    let user = { name: "John", age: 30 };
    return callback(user);
}

const getUserInfo = function(user) {
    return `${user.name} is ${user.age} years old`;
};

console.log(processUser(getUserInfo));  // "John is 30 years old"

// 3. செயல்பாட்டை திருப்பித் தருதல்
function createMultiplier(factor) {
    return function(number) {
        return number * factor;
    };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5));  // 10
console.log(triple(5));  // 15

செயல்பாடுகள் vs செயல்பாட்டு வெளிப்பாடுகள்

ஜாவாஸ்கிரிப்ட் செயல்பாடுகள் function முக்கிய சொல்லுடன் வரையறுக்கப்படுகின்றன.

ஜாவாஸ்கிரிப்ட் செயல்பாடுகளை வெவ்வேறு வழிகளில் வரையறுக்கலாம்.

ஜாவாஸ்கிரிப்ட்டில், செயல்பாடு அறிவிப்புகள் மற்றும் செயல்பாட்டு வெளிப்பாடுகள் செயல்பாடுகளை வரையறுக்கும் வெவ்வேறு வழிகளைக் குறிக்கின்றன, அவற்றின் வெவ்வேறு தொடரியல் மற்றும் அவை எவ்வாறு கையாளப்படுகின்றன:

செயல்பாடு அறிவிப்புகள்	செயல்பாட்டு வெளிப்பாடுகள்
`function add(a, b) {return a + b;}`	`const add = function(a, b) {return a + b;};`
`function` முக்கிய சொல்	`function` முக்கிய சொல்
ஒரு செயல்பாட்டு பெயர் தேவை	செயல்பாட்டு பெயர் தேவையில்லை (அநாமதேய)
அடைப்புக்குறிக்குள் அளவுருக்கள்	அடைப்புக்குறிக்குள் அளவுருக்கள்
குறியீடு தொகுதி அடைப்புக்குறிகள்	குறியீடு தொகுதி அடைப்புக்குறிகள்
அரைப்புள்ளி தேவையில்லை	அரைப்புள்ளி தேவை (மாறி ஒதுக்கீடு என்பதால்)

⚖️ இரண்டும் ஒரே மாதிரியாக வேலை செய்கின்றன:

நீங்கள் அவற்றை அழைக்கும் போது இரண்டும் ஒரே மாதிரியாக வேலை செய்கின்றன. வித்தியாசம் அவை உங்கள் குறியீட்டில் கிடைக்கும் நேரம்.

தலைக்கு மேலே உயர்த்துதல்

செயல்பாடு அறிவிப்புகள்

செயல்பாடு அறிவிப்புகள் அவை வரையறுக்கப்படுவதற்கு முன்பே அழைக்கப்படலாம்.

// இது வேலை செய்யும்
let sum = add(2, 3);  // 5

function add(a, b) {
    return a + b;
}

செயல்பாடு அறிவிப்புகள் அவற்றின் நோக்கத்தின் மேல் "தூக்கி விடப்படுகின்றன". இதன் பொருள் செயல்பாடு குறியீட்டில் வரையறுக்கப்படுவதற்கு முன்பே அழைக்கப்படலாம்.

செயல்பாட்டு வெளிப்பாடுகள்

செயல்பாட்டு வெளிப்பாடுகள் அவை வரையறுக்கப்படுவதற்கு முன்பே அழைக்கப்பட முடியாது.

// இது பிழையை உருவாக்கும்
let sum = add(2, 3);  // ⛔ பிழை!

const add = function(a, b) {
    return a + b;
};

செயல்பாட்டு வெளிப்பாடுகள் செயல்படுத்தல் அவற்றின் வரையறையை அடையும் போது உருவாக்கப்படுகின்றன, மேலும் அந்த கட்டத்திற்கு முன்பே அழைக்க முடியாது.

உண்மையான பிழை எடுத்துக்காட்டு:

// இது பிழையை உருவாக்கும்
console.log(greet("John"));  // ReferenceError

const greet = function(name) {
    return `Hello, ${name}!`;
};

// இது வேலை செய்யும்
console.log(greet("John"));  // "Hello, John!"

const greet = function(name) {
    return `Hello, ${name}!`;
};

முக்கிய வேறுபாடுகள்

விஷயம்	செயல்பாடு அறிவிப்புகள்	செயல்பாட்டு வெளிப்பாடுகள்
தொடரியல்	ஒரு பெயர் தேவை	பெயர் தேவையில்லை (அநாமதேய)
தலைக்கு மேலே உயர்த்துதல்	தூக்கப்பட்டது (அழைப்புக்கு முன் பயன்படுத்தலாம்)	தூக்கப்படவில்லை (வரையறுக்கப்பட்ட பிறகு மட்டுமே பயன்படுத்தலாம்)
நெகிழ்வுத்தன்மை	அவை எவ்வாறு மற்றும் எங்கு பயன்படுத்தப்படுகின்றன என்பதில் அதிக நெகிழ்வுத்தன்மையை வழங்குகின்றன	மாறிகளுக்கு ஒதுக்க மற்றும் சுழல்களில் உருவாக்க அதிக நெகிழ்வுத்தன்மை
அரைப்புள்ளி	தேவையில்லை	தேவை (மாறி ஒதுக்கீடு என்பதால்)
பயன்பாடு	பொது-நோக்கம் செயல்பாடுகள்	callback கள், event handlers, dynamic செயல்பாடுகள்

💡 நினைவில் கொள்ள:

தலைக்கு மேலே உயர்த்துதல்: செயல்பாடு அறிவிப்புகள் மட்டுமே முழுமையாக தூக்கப்படுகின்றன
அநாமதேய செயல்பாடுகள்: செயல்பாட்டு வெளிப்பாடுகள் பொதுவாக அநாமதேயமாக இருக்கும்
மாறி ஒதுக்கீடு: செயல்பாட்டு வெளிப்பாடுகள் எப்போதும் மாறிகளுக்கு ஒதுக்கப்படுகின்றன
காலப்போக்கில் உருவாக்கம்: செயல்பாட்டு வெளிப்பாடுகள் இயக்க நேரத்தில் உருவாக்கப்படலாம்

எப்போது ஒவ்வொன்றையும் பயன்படுத்துவது

பொது-நோக்கம் செயல்பாடுகளுக்கு செயல்பாடு அறிவிப்புகளைப் பயன்படுத்தவும்

முக்கியமான, மீண்டும் பயன்படுத்தக்கூடிய செயல்பாடுகளுக்கு செயல்பாடு அறிவிப்புகளைப் பயன்படுத்தவும்.

// செயல்பாடு அறிவிப்பு
function calculateArea(width, height) {
    return width * height;
}

// எங்கும் பயன்படுத்தலாம்
console.log(calculateArea(10, 5));  // 50

செயல்பாடுகளை மாறிகளுக்கு ஒதுக்கும்போது செயல்பாட்டு வெளிப்பாடுகளைப் பயன்படுத்தவும்

செயல்பாடுகளை மாறிகளில் சேமிக்க வேண்டிய போது செயல்பாட்டு வெளிப்பாடுகளைப் பயன்படுத்தவும்.

// செயல்பாட்டு வெளிப்பாடு
const greetUser = function(name) {
    return `Hello, ${name}!`;
};

// மாறியாகப் பயன்படுத்தவும்
console.log(greetUser("John"));  // "Hello, John!"

callback கள் மற்றும் event handlers இல் செயல்பாட்டு வெளிப்பாடுகளைப் பயன்படுத்தவும்

மற்ற செயல்பாடுகளுக்கு வாதங்களாக அனுப்பும் போது செயல்பாட்டு வெளிப்பாடுகளைப் பயன்படுத்தவும்.

// callback
button.addEventListener('click', function() {
    console.log('Button clicked!');
});

// event handler
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM is ready!');
});

இந்த டுடோரியலில் பின்னர்

செயல்பாட்டு வெளிப்பாடுகள் உயர் நெகிழ்வுத்தன்மையை வழங்குகின்றன மற்றும் பல்வேறு நோக்கங்களுக்காக ஜாவாஸ்கிரிப்ட்டில் பரவலாகப் பயன்படுத்தப்படுகின்றன, மேலும் பின்வரும் அத்தியாயங்களில் நீங்கள் செயல்பாட்டு வெளிப்பாடுகளை மிகவும் அதிகமாகக் காண்பீர்கள்:

Callback கள்

மற்ற செயல்பாடுகளுக்கு செயல்பாடுகளை வாதங்களாக அனுப்புதல், event listeners அல்லது asynchronous செயல்பாடுகள் போன்றவை.

setTimeout(function() {
    console.log('3 seconds passed');
}, 3000);

Closures

செயல்பாட்டு வெளிப்பாடுகள் closures உருவாக்க உதவுகின்றன, இது செயல்பாடுகள் அவற்றின் கொண்ட நோக்கத்திலிருந்து மாறிகளை நினைவில் வைத்துக் கொள்ளவும் அணுகவும் அனுமதிக்கிறது.

function counter() {
    let count = 0;
    return function() {
        return ++count;
    };
}

அம்புக்குறி செயல்பாடுகள்

சுருக்கமான அம்புக்குறி செயல்பாடு தொடரியல் (=>) செயல்பாட்டு வெளிப்பாடுகளை எழுதுவதற்கான ஒரு நவீன வழி.

const add = (a, b) => a + b;

IIFEs

அவை வரையறுக்கப்பட்டவுடன் இயங்கும் செயல்பாடுகள், பொதுவாக தனியார் நோக்கங்களை உருவாக்கவும் உலகளாவிய மாறி மோதல்களைத் தவிர்க்கவும் பயன்படுத்தப்படுகின்றன.

(function() {
    // தனியார் நோக்கம்
})();

பொதுவான தவறுகள்

அரைப்புள்ளியை மறந்துவிடுதல்

செயல்பாட்டு வெளிப்பாடுகள் ஒரு அறிக்கையின் ஒரு பகுதியாகும் மற்றும் பொதுவாக ; உடன் முடிவடையும்.

// தவறு:
const add = function(a, b) {
    return a + b;
}  // அரைப்புள்ளி இல்லை

// சரி:
const add = function(a, b) {
    return a + b;
};  // அரைப்புள்ளி உள்ளது

முன்கூட்டியே அழைத்தல்

ஒரு செயல்பாட்டு வெளிப்பாட்டை அது வரையறுக்கப்படுவதற்கு முன்பே அழைக்க முடியாது.

// தவறு:
console.log(greet("John"));  // ReferenceError

const greet = function(name) {
    return `Hello, ${name}!`;
};

// சரி:
const greet = function(name) {
    return `Hello, ${name}!`;
};

console.log(greet("John"));  // "Hello, John!"

குறிப்பு மற்றும் அழைப்பை குழப்புதல்

sayHello என்பது செயல்பாடு. sayHello() செயல்பாட்டை அழைக்கிறது.

const sayHello = function() {
    return "Hello";
};

// தவறு:
let func = sayHello();  // func = "Hello" (செயல்பாட்டை அழைக்கிறது)
// சரி:
let func = sayHello;    // func = செயல்பாடு (செயல்பாட்டைக் குறிக்கிறது)

செயல்பாட்டு பெயர்கள் மற்றும் மாறிகளை குழப்புதல்

வெளிப்பாடுகளில், மாறி பெயர் செயல்பாட்டுக் குறிப்பு.

// தவறு:
const multiply = function times(a, b) {
    return a * b;
};
console.log(times(2, 3));  // ReferenceError: times is not defined

// சரி:
const multiply = function times(a, b) {
    return a * b;
};
console.log(multiply(2, 3));  // 6 (மாறி பெயர் பயன்படுத்தவும்)

செயல்பாட்டு வெளிப்பாடுகள் பயிற்சி

sayHello மற்றும் sayHello() இடையே உள்ள வேறுபாடு என்ன?

❓ `sayHello` மற்றும் `sayHello()` இடையே உள்ள வேறுபாடு என்ன?

இரண்டும் ஒன்றே, வேறுபாடு இல்லை

✗ தவறு! இது முக்கியமான வேறுபாடு. sayHello செயல்பாட்டை குறிக்கிறது, sayHello() செயல்பாட்டை இயக்குகிறது.

sayHello செயல்பாட்டை இயக்குகிறது, sayHello() செயல்பாட்டை குறிக்கிறது

✗ தவறு! இது தலைகீழாக உள்ளது. sayHello செயல்பாட்டை குறிக்கிறது, sayHello() செயல்பாட்டை இயக்குகிறது.

sayHello செயல்பாட்டை குறிக்கிறது, sayHello() செயல்பாட்டை இயக்குகிறது

✓ சரி! sayHello என்பது செயல்பாட்டின் மேற்கோளாகும் (செயல்பாட்டையே குறிக்கிறது). sayHello() என்பது செயல்பாட்டை அழைத்தல் (அதை இயக்குகிறது மற்றும் முடிவைத் திருப்பி அனுப்புகிறது).

sayHello மாறி, sayHello() செயல்பாடு

✗ தவறு! sayHello ஒரு மாறியாக இருக்கலாம் (செயல்பாட்டு வெளிப்பாட்டில்), ஆனால் அது செயல்பாட்டையும் குறிக்கும். வேறுபாடு அடைப்புக்குறிகளின் முன்னிலையில் உள்ளது.

💡 தீர்வு விளக்கம்:

ஜாவாஸ்கிரிப்ட்டில், ஒரு செயல்பாட்டை குறிப்பிடுவது மற்றும் அதை அழைப்பது ஆகியவற்றுக்கு இடையே ஒரு முக்கியமான வேறுபாடு உள்ளது:

// செயல்பாட்டு வெளிப்பாடு
const sayHello = function() {
    return "Hello World";
};

// குறிப்பிடுதல் - செயல்பாட்டையே திருப்பி அனுப்புகிறது
let funcReference = sayHello;
console.log(funcReference);  // function() { return "Hello World"; }
console.log(typeof funcReference);  // "function"

// அழைத்தல் - செயல்பாட்டை இயக்குகிறது மற்றும் முடிவைத் திருப்பி அனுப்புகிறது
let funcResult = sayHello();
console.log(funcResult);     // "Hello World"
console.log(typeof funcResult);  // "string"

செயல்பாட்டு குறிப்புகள் நினைவகத்தில் செயல்பாட்டை சுட்டிக்காட்டும் மாறிகள். நீங்கள் அடைப்புக்குறிகளைச் சேர்க்கும் வரை அவை செயல்பாட்டை இயக்காது.

செயல்பாட்டு அழைப்புகள் உடனடியாக செயல்பாட்டை இயக்குகின்றன மற்றும் அதன் return மதிப்பை (ஏதேனும் இருந்தால்) திருப்பி அனுப்புகின்றன.

🎯 நடைமுறை பயன்பாடு:

sayHello - callback அளவுருவாக அனுப்பும்போது பயன்படுத்தவும்
sayHello() - நீங்கள் உடனடியாக முடிவை விரும்பும் போது பயன்படுத்தவும்

// Callback: செயல்பாட்டை அனுப்பவும்
button.addEventListener('click', sayHello);

// உடனடி அழைப்பு: முடிவைப் பெறவும்
let greeting = sayHello();

அடுத்த அத்தியாயம்

➡️ JavaScript Arrow Functions

அடுத்த பாடத்தில், அம்புக்குறி செயல்பாடுகள் பற்றி கற்றுக்கொள்வோம் - செயல்பாடுகளை எழுதுவதற்கான நவீன, சுருக்கமான தொடரியல்:

அம்புக்குறி செயல்பாடு தொடரியல்
this க்கான கட்டுப்பாடு
மறைமுகமான திரும்புகை
அம்புக்குறி செயல்பாடுகளின் வரம்புகள்

JavaScript Arrow Functions ஐ தொடர்ந்து படிக்கவும்