JavaScript Arrow Functions

அம்புக்குறி செயல்பாடுகள் ES6 இல் அறிமுகப்படுத்தப்பட்டன மற்றும் நவீன ஜாவாஸ்கிரிப்ட்டில் பொதுவாகப் பயன்படுத்தப்படுகின்றன.

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

நீங்கள் function முக்கிய சொல், return முக்கிய சொல் மற்றும் சுருள் அடைப்புக்குறிகளைத் தவிர்க்கலாம்:

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

let myFunction = (a, b) => a * b;

🎯 அம்புக்குறி செயல்பாடுகளின் நன்மைகள்:

குறுகிய தொடரியல்: குறைவான குறியீடு, அதிக தெளிவு
மறைமுக திரும்புகை: ஒரு வரி செயல்பாடுகளுக்கு return தேவையில்லை
this பிணைப்பு: சுற்றுப்புற this மதிப்பைக் கைப்பற்றுகிறது
நவீன தொடரியல்: ES6 மற்றும் பிற நவீன ஜாவாஸ்கிரிப்ட் அம்சங்களுடன் சிறப்பாக ஒருங்கிணைகிறது

அம்புக்குறி செயல்பாட்டு தொடரியல்

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

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

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

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

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

🔤 அடிப்படை தொடரியல்:

// அடிப்படை வடிவம்
const functionName = (parameters) => {
    // செயல்பாட்டு உடல்
    return result;
};

// மறைமுக திரும்புகை (ஒரு வரி)
const functionName = (parameters) => result;

// ஒரு அளவுரு (அடைப்புக்குறிகள் விருப்பமானது)
const functionName = parameter => result;

// அளவுருக்கள் இல்லை (அடைப்புக்குறிகள் தேவை)
const functionName = () => result;

குறுகிய தொடரியல்

செயல்பாட்டு உடலில் ஒரே ஒரு அறிக்கை மட்டும் இருந்தால்:

நீங்கள் function என்ற சொல், சுருள் அடைப்புக்குறிகள் மற்றும் return முக்கிய சொல்லை அகற்றலாம்.

அம்புக்குறிக்கு முன்	அம்புக்குறியுடன்
`let add = function(a, b) {return a * b}`	`let add = (a, b) => a * b;`
`let hello = function() {return "Hello World!";}`	`let hello = () => "Hello World!";`
`let square = function(x) {return x * x;}`	`let square = x => x * x;`
`let greet = function(name) {return "Hello " + name;}`	`let greet = name => "Hello " + name;`

📝 தொடரியல் மாற்ற விதிகள்:

function முக்கிய சொல்லை அகற்றவும்
அளவுருக்களுக்குப் பிறகு => சேர்ப்பது
ஒரே வரி உடலுக்கு, {} மற்றும் return ஐ அகற்றவும்
பல வரி உடலுக்கு, {} மற்றும் return ஐ வைத்திருங்கள்

ஒரு அளவுரு கொண்ட அம்புக்குறி செயல்பாடுகள்

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

அடைப்புக்குறிகளுடன்

let square = (x) => x * x;

let hello = (val) => "Hello " + val;

let double = (num) => num * 2;

அடைப்புக்குறிகள் இல்லாமல்

let square = x => x * x;

let hello = val => "Hello " + val;

let double = num => num * 2;

💡 அடைப்புக்குறி விதி:

0 அளவுருக்கள்: அடைப்புக்குறிகள் தேவை (() =>)
1 அளவுரு: அடைப்புக்குறிகள் விருப்பமானது (x => அல்லது (x) =>)
2+ அளவுருக்கள்: அடைப்புக்குறிகள் தேவை ((x, y) =>)

பரிந்துரை: நிலைத்தன்மைக்காக எப்போதும் அடைப்புக்குறிகளைப் பயன்படுத்தவும்.

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

செயல்பாட்டில் ஒரு மதிப்பைத் திருப்பித் தரும் ஒரே ஒரு அறிக்கை இருந்தால்:

நீங்கள் அடைப்புக்குறிகள் மற்றும் return முக்கிய சொல்லை அகற்றலாம்:

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

let hello = () => "Hello World!";

let square = x => x * x;

let fullName = (firstName, lastName) => firstName + " " + lastName;

⚠️ குறிப்பு:

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

பல அறிக்கைகள் இருந்தால், நீங்கள் சுருள் அடைப்புக்குறிகள் மற்றும் return ஐப் பயன்படுத்த வேண்டும்:

// ஒரு வரி - மறைமுக திரும்புகை
let add = (a, b) => a + b;

// பல வரிகள் - வெளிப்படையான திரும்புகை
let calculate = (a, b) => {
    let sum = a + b;
    let product = a * b;
    return { sum, product };
};

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

அளவுருக்கள் இல்லை என்றால், அடைப்புக்குறிகள் தேவை.

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

let hello = () => "Hello World!";

let getRandom = () => Math.random();

let getCurrentTime = () => new Date().toLocaleTimeString();

⚠️ பொதுவான தவறுகள்:

// இது வேலை செய்யாது - return முக்கிய சொல் மறைமுக திரும்புகையில் அனுமதிக்கப்படாது
let myFunction = (x, y) => return x * y;

// இது வேலை செய்யாது - சுருள் அடைப்புக்குறிகள் மறைமுக திரும்புகையைத் தடுக்கின்றன
let myFunction = (x, y) => { x * y };

// இது மட்டுமே வேலை செய்யும் - வெளிப்படையான திரும்புகை
let myFunction = (x, y) => { return x * y };

// அல்லது இது (மறைமுக திரும்புகை)
let myFunction = (x, y) => x * y;

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

// தெளிவான வெளிப்படையான திரும்புகை
let myFunction = (x, y) => {
    return x * y;
};

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

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

அவை வரையறுக்கப்படுவதற்கு முன்பே பயன்படுத்த முடியாது.

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

// தவறு - முன்கூட்டியே அழைத்தல்
hello(); // ReferenceError

let hello = () => "Hello";

// சரி - வரையறுக்கப்பட்ட பிறகு அழைத்தல்
let hello = () => "Hello";
hello(); // "Hello"

ℹ️ குறிப்பு:

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

அம்புக்குறி செயல்பாடுகள் செயல்பாட்டு வெளிப்பாடுகள் என்பதால், அவை தலைக்கு மேலே உயர்த்தப்படாது (hoisted).

தலைக்கு மேலே உயர்த்துதலின் ஒப்பீடு:

// செயல்பாடு அறிவிப்பு - தூக்கப்பட்டது
console.log(greet("John"));  // "Hello John"

function greet(name) {
    return "Hello " + name;
}

// அம்புக்குறி செயல்பாடு - தூக்கப்படவில்லை
console.log(greetArrow("John"));  // ReferenceError

const greetArrow = (name) => "Hello " + name;

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

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

அவை சுற்றுப்புற குறியீட்டிலிருந்து this ஐப் பெறுகின்றன.

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

const person = {
    name: "John",
    greet: function() {
        return "Hello, " + this.name;
    }
};

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

எடுத்துக்காட்டு: அம்புக்குறி செயல்பாடு

const person = {
    name: "John",
    greet: () => {
        return "Hello, " + this.name;
    }
};

console.log(person.greet());  // "Hello, undefined" (அல்லது "Hello, ")

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

⚠️ this பிணைப்பு:

இந்த வழக்கில், this person பொருளைக் குறிக்காது. அம்புக்குறி செயல்பாடுகள் this ஐ "லெக்சிக்கல் ஸ்கோப்" (அவை வரையறுக்கப்பட்ட இடம்) இலிருந்து பெறுகின்றன.

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

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

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

ஒரு வரி செயல்பாடுகள், மாற்றிகள் மற்றும் எளிய கணக்கீடுகள்

const square = x => x * x;
const fullName = (f, l) => `${f} ${l}`;
const isAdult = age => age >= 18;

callback கள் மற்றும் வரிசை முறைகளுக்கு

map, filter, reduce, event listeners

numbers.map(n => n * 2);
users.filter(u => u.active);
button.addEventListener('click', () => {
    console.log('Clicked!');
});

உங்கள் சொந்த this தேவையில்லாத போது

மேல்-நிலை செயல்பாடுகள், closures, utilities

const createAdder = x => y => x + y;
const add5 = createAdder(5);
console.log(add5(3));  // 8

எப்போது அம்புக்குறி செயல்பாடுகளைப் பயன்படுத்தக்கூடாது

பொருள் முறைகளாக

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

// தவறு:
const obj = {
    value: 10,
    getValue: () => this.value  // undefined
};

// சரி:
const obj = {
    value: 10,
    getValue: function() {
        return this.value;  // 10
    }
};

உங்கள் சொந்த this தேவைப்படும் போது

கட்டமைப்பாளர் செயல்பாடுகள், event handlers, methods

// தவறு:
function Person(name) {
    this.name = name;
    this.greet = () => {
        console.log(this.name);  // undefined
    };
}

// சரி:
function Person(name) {
    this.name = name;
    this.greet = function() {
        console.log(this.name);  // சரியானது
    };
}

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

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

// தவறு:
const multiply = (a, b) => a * b;
// முன்கூட்டியே அழைக்க முடியாது

// சரி:
function multiply(a, b) {
    return a * b;
}
// எங்கும் அழைக்கலாம்

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

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

பூஜ்ஜிய அல்லது பல அளவுருக்களுக்கு அடைப்புக்குறிகள் தேவை.

// தவறு:
let greet = => "Hello";      // அடைப்புக்குறிகள் இல்லை
let add = a, b => a + b;     // அடைப்புக்குறிகள் இல்லை

// சரி:
let greet = () => "Hello";   // அடைப்புக்குறிகள் உள்ளன
let add = (a, b) => a + b;   // அடைப்புக்குறிகள் உள்ளன

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

அம்புக்குறி செயல்பாடுகள் this ஐப் பிணைக்காது.

// தவறு:
const obj = {
    value: 10,
    getValue: () => this.value  // undefined
};

// சரி:
const obj = {
    value: 10,
    getValue: function() {
        return this.value;  // 10
    }
};

தலைக்கு மேலே உயர்த்தலை எதிர்பார்த்தல்

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

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

const greet = name => "Hello " + name;

// சரி:
const greet = name => "Hello " + name;
console.log(greet("John"));  // "Hello John"

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

நீங்கள் இப்போது ஜாவாஸ்கிரிப்ட் செயல்பாடுகள் பற்றிய மிக முக்கியமான கருத்துகளைக் கற்றுக்கொண்டீர்கள்.

🎓 உங்கள் அறிவை சோதிக்கவும்:

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

ஜாவாஸ்கிரிப்ட் செயல்பாடுகள் வினாடி வினா

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

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

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

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

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

நவீன தொடரியல் மற்றும் மறைமுக திரும்புகை

உலாவி ஆதரவு

அம்புக்குறி செயல்பாடுகள் ஒரு ES6 அம்சம்.

ES6 ஜூன் 2017 முதல் அனைத்து நவீன உலாவிகளிலும் முழுமையாக ஆதரிக்கப்படுகிறது:

உலாவி	பதிப்பு	தேதி
Chrome	51	மே 2016
Edge	15	ஏப்ரல் 2017
Firefox	54	ஜூன் 2017
Safari	10	செப்டம்பர் 2016
Opera	38	ஜூன் 2016

⚠️ பின்தங்கிய இணக்கத்தன்மை:

பழைய உலாவிகளை (Internet Explorer) ஆதரிக்க வேண்டும் என்றால், Babel போன்ற தொகுப்பியைப் பயன்படுத்தி உங்கள் குறியீட்டை ES5 க்கு மாற்றவும்.

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

பின்வருவனவற்றில் எது சரியான ஜாவாஸ்கிரிப்ட் அம்புக்குறி செயல்பாடு?

❓ பின்வருவனவற்றில் எது சரியான ஜாவாஸ்கிரிப்ட் அம்புக்குறி செயல்பாடு?

greeting => 'Hello World!';

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

greeting = return => 'Hello World!';

✗ தவறு! return என்பது அம்புக்குறி செயல்பாட்டில் ஒரு அளவுருவாக இருக்க முடியாது. return என்பது ஒரு முக்கிய சொல் மற்றும் அளவுரு பெயராக பயன்படுத்த முடியாது.

greeting = () => 'Hello World!';

✓ சரி! இது ஒரு சரியான அம்புக்குறி செயல்பாடு:

மாறிக்கு ஒதுக்கப்பட்டது (greeting)
அளவுருக்கள் இல்லாத அடைப்புக்குறிகள் (())
அம்புக்குறி (=>)
மறைமுக திரும்புகை மதிப்பு ('Hello World!')

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

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

// அடிப்படை வடிவம்
const functionName = (parameters) => expression;

// எடுத்துக்காட்டுகள்:
const greet = () => 'Hello World!';
const square = x => x * x;
const add = (a, b) => a + b;

// முழு வடிவம் (பல வரிகள்)
const calculate = (a, b) => {
    const sum = a + b;
    const product = a * b;
    return { sum, product };
};

முக்கிய விதிகள்:

அம்புக்குறி செயல்பாடுகள் எப்போதும் மாறிகளுக்கு ஒதுக்கப்பட வேண்டும்
=> க்கு முன் அளவுருக்கள் அடைப்புக்குறிக்குள் இருக்க வேண்டும்
0 அளவுருக்கள்: அடைப்புக்குறிகள் தேவை (() =>)
1 அளவுரு: அடைப்புக்குறிகள் விருப்பமானது (x => அல்லது (x) =>)
2+ அளவுருக்கள்: அடைப்புக்குறிகள் தேவை ((x, y) =>)
ஒரே வரி உடல்: மறைமுக திரும்புகை (அடைப்புக்குறிகள் அல்லது return தேவையில்லை)
பல வரி உடல்: சுருள் அடைப்புக்குறிகள் மற்றும் return தேவை

greeting = () => 'Hello World!'; என்பது அனைத்து விதிகளுக்கும் இணங்குகிறது:

மாறிக்கு ஒதுக்கப்பட்டது ✓
0 அளவுருக்களுக்கான அடைப்புக்குறிகள் ✓
அம்புக்குறி ✓
ஒரே வரி மறைமுக திரும்புகை ✓