ரியாக்ட் ஜெ எஸ் கற்றுக் கொள்ள தேவையான ES6 பற்றிய அறிவு.

ES6 என்பது என்ன?

ES6 என்பது  ECMAScript 6.-யை குறிக்கின்றது

இது ஜாவாஸ்கிரிப்டை நிலைப் படுத்துவதற்கு என உருவாக்கப்பட்டது. 2015-ல் வெளியிடப்பட்டது மேலும் இது ECMA Script 2015 என அழைக்கப் படுகின்றது.

ES6 –ஐ நாம் என் கற்க வேண்டும்.?                                                                                                

ரியாக்ட் ஆனது ES6 –ஐ பயன்படுத்துகின்றது.ரியாக்ட் கற்றுக் கொள்வதற்கு பின் வரும் புதிய கருத்துகள் பயன்படுகின்றது.

• Classes
• Arrow Functions
• Variables (let, const, var)

---

Classes

ES6 ஆனது Class என்பதை பயன்படுத்துகின்றது.

கிளாஸ் ஃபங்க்சனின் ஒரு வகையாகும். ஆனால் function என்ற கீவேர்டை பயன்படுத்தாமல் class என்ற கீவேர்டை பயன்படுத்துகின்றது. ப்ராப்பர்டிகள் constructor மெத்தட் மூலம் மதிப்பிருத்தப்படுகின்றது.

சான்று.

சாதாரண் கிளாஸ் கன்ஸ்ட்ரக்டர்

class Car {

  constructor(name) {

    this.brand = name;

  }

}

இப்பொழுது car கிளாசிற்க்கு ஆப்ஜெக்ட் உருவாக்கலாம்.

சான்று.

class Car {

  constructor(name) {

    this.brand = name;

  }

}

mycar = new Car("Ford");

ஆப்ஜெக்ட் உருவாக்கும் பொழுது ஆப்ஜெக்ட் தானியங்கி முறையில் அழைக்கப்படுகின்றது.

கிளாசில் மெத்தட்கள்>

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

சான்று

இப்பொழுது present என்று ஒரு மெத்தட் உருவாக்குவோம்

class Car {

  constructor(name) {

    this.brand = name;

  }

 

  present() {

    return 'I have a ' + this.brand;

  }

}

mycar = new Car("Ford");

mycar.present();

ஒரு மெத்தட் ஆனது ஆப்ஜெக்ட் பெயர் டாட் மெத்தட் பெயர் என்பதை தொடர்ந்து பிராக்கெட்டுடன் வருவதைக் கவனியுங்கள்.

கிளாஸ் இன்ஹெரிடன்ஸ்.

இதற்கு extends என்ற கீவேர்டு பயன்படுகின்றது.

ஒரு கிளாஸ் ஆனது மற்ற கிளாசில் உள்ள எல்லா மெத்தட்களையும் இன்ஹெரிட் செய்கின்றது.

சான்று நிரல்.

இங்கு Model என்ற கிளாஸ் Car என்ற கிளாசை இன்ஹெரிட் செய்கின்றது.

class Car {

  constructor(name) {

    this.brand = name;

  }

  present() {

    return 'I have a ' + this.brand;

  }

}

class Model extends Car {

  constructor(name, mod) {

    super(name);

    this.model = mod;

  } 

  show() {

      return this.present() + ', it is a ' + this.model

  }

}

mycar = new Model("Ford", "Mustang");

mycar.show();

 Super() மெத்தட் ஆனது பேரண்ட் கிளாசை ரெஃபெர் செய்கின்றது.

இது பேரண்ட் கிளாசில் உள்ள கன்ஸ்ட்ரக்டர் மெத்தடை அழைக்கின்றது.மேலும் பேரண்ட் கிளாசில் உள்ள பிராப்பர்டிகள் மற்றும் மெத்தட்களை ஆக்சஸ் செய்கின்றது.

ஆரோ(Arrow) ஃபங்க்சன்கள்.

ஆரோ ஃபங்க்சன்கள் ES6 –ல் அறிமுகப்படுத்தப்பட்டது.

இது  ஃபங்க்சன்களை குறுகிய சிண்டாக்ஸ் ஆக பயன்படுத்த உதவுகின்றது.

முன்பு:

hello = function() {

  return "Hello World!";

}

இப்பொழுது

hello = () => {

  return "Hello World!";

}

ஃபங்க்சன் ஆனது ஒரே ஒரு ஸ்டேட்மென்ட்  மற்றும் ஒரு மதிப்பை ரிடர்ன் செய்தால் return கீவேர்டையும் பிராக்கெட்களையும் எடுத்து விடலாம்.

Arrow Functions Return Value by Default:

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

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

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

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

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

hello = val => "Hello " + val;

this கீவேர்டு குறித்து

இந்த கீவேர்டு ஆனது நார்மல்  ஃபங்க்சனுக்கும் ஆரோ ஃபங்க்சனுக்கும் மாறுபடுகின்றது.

சுருக்கமாக சொல்வதென்றால் this ஆனது எந்த பைண்டிங்கையும் ஏற்படுத்துவதில்லை.

ரெகுலர் ஃபங்க்சனில் this கீவேர்டு ஆனது எந்த ஆப்ஜெக்ட் அந்த ஃபங்க்சனை அழைக்கின்றதோ அதை ரெப்ரெசென்ட் செய்தது.

அது விண்டோ ஆகவோ, பட்டன் அல்லது வேறு எதுவாகவோ இருக்கலாம்.

ஆனால் ஆரோ ஃபங்க்சனில் this கீவேர்டு ஆனது எந்த ஆப்ஜெக்ட் அதை டிஃபைன் செய்ததோ அதைக் குறிக்கும்.

இதற்கு இரண்டு சான்று நிரல்களைக் காண்போம்.

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

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

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

சான்று நிரல்-1

class Header {

  constructor() {

    this.color = "Red";

  }

//Regular function:

  changeColor = function() {

    document.getElementById("demo").innerHTML += this;

  }

}

myheader = new Header();

//The window object calls the function:

window.addEventListener("load", myheader.changeColor);

//A button object calls the function:

document.getElementById("btn").addEventListener("click", myheader.changeColor);

சான்று நிரல்-2

class Header {

  constructor() {

    this.color = "Red";

  }

//Arrow function:

  changeColor = () => {

    document.getElementById("demo").innerHTML += this;

  }

}

myheader = new Header();

//The window object calls the function:

window.addEventListener("load", myheader.changeColor);

//A button object calls the function:

document.getElementById("btn").addEventListener("click", myheader.changeColor);

இந்த வித்தியாசங்களை நிணைவில் வத்து ரெகுலர் ஃபங்க்சன் அல்லது ஆரோ ஃபங்க்சங்களை அழைக்கவும்.

வேரியபிள்கள்.

ES6 –ற்கு முன்பு var என்ற கீவேர்டை மட்டும் பயன்படுத்து வேரியபிள்கள் உருவாகப்பட்டன.

ES6-ல் மூன்று வழிகளில் வேரியபிள்கள் உருவாக்கலாம்.

Var, let மற்றும் const.

var

var x = 5.6;

இது  ஒரு ஃபங்க்சனுக்கு வெளியே அறிவிக்கப்பட்டால் global scope எடுத்துக் கொள்ளும்.

ஃபங்க்சனுக்குள் அறிவிக்கப்பட்டால் அந்த ஃப்ங்க்சனில் உட்புறம் மட்டும் அறியப்படும்.

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

அதனால் var என்பது ஃபங்க்ன் ஸ்கோப் கொண்டது ஆனால் அது பிளாக் ஸ்கோப் கொண்டது அல்ல.

let

let x = 5.6;

let என்பது பிளாக் ஸ்கோப் கொண்டது

let என்பது வேர் என்பதின் பிளாக் ஸ்கோப் கொண்ட வெர்சன் ஆகும்

நீங்கள் let என்பதை ஒரு ஃபார் லூப்க்குள் அறிவித்தால் அந்த லூப்புக்குள் மட்டுமே அது அறியப்படும்.

const

const x = 5.6;

const என்பது ஒரு வேரியபிள் ஆனால் ஒரு தடவை மதிப்பிருத்து விட்டால் அதன் மதிப்பை மாற்ற இயலாது.

Const என்பது பிளாக் ஸ்கோப் கொண்டதாகும்.

நன்றி முத்து கார்த்திகேயன் ,மதுரை.