ອັບເກຣດການຂຽນ JavaScript ຂອງທ່ານດ້ວຍ 3 ຟີເຈີຫຼັກຈາກ ES6

ບົດນໍາ

ຖ້າທ່ານເຄີຍຮຽນ JavaScript ມາແດ່ແລ້ວ ຫຼື ເຄີຍເບິ່ງ Tutorial ເກົ່າໆ, ທ່ານອາດຈະຄຸ້ນເຄີຍກັບການໃຊ້ຄໍາສັ່ງ var ເພື່ອສ້າງຕົວປ່ຽນ ຫຼື ການຂຽນ function ແບບຍາວໆ. ແຕ່ຕັ້ງແຕ່ປີ 2015 ເປັນຕົ້ນມາ, ພາສາ JavaScript ໄດ້ມີການອັບເດດຄັ້ງໃຫຍ່ທີ່ເອີ້ນວ່າ ES6 (ECMAScript 2015) ເຊິ່ງໄດ້ປ່ຽນແປງວິທີການຂຽນ Code ຂອງນັກພັດທະນາໄປຕະຫຼອດການ.

ຟີເຈີໃໝ່ໆໃນ ES6 ຖືກອອກແບບມາເພື່ອແກ້ໄຂບັນຫາເກົ່າໆ, ຫຼຸດຜ່ອນຄວາມຊັບຊ້ອນ, ແລະ ເຮັດໃຫ້ Code ຂອງເຮົາອ່ານງ່າຍຂຶ້ນ (Clean Code). ຍິ່ງໄປກວ່ານັ້ນ, ຖ້າທ່ານມີແຜນຈະໄປຕໍ່ໃນສາຍ Web Development ໂດຍການໃຊ້ framework ດັງໆຄື React, Vue ຫຼື Angular, ການເຂົ້າໃຈ ES6 ແມ່ນສິ່ງທີ່ "ຕ້ອງຮູ້". ໃນບົດຄວາມນີ້ ເຮົາຈະມາຮຽນຮູ້ 3 ຟີເຈີທີ່ຖືກນໍາໃຊ້ເລື້ອຍທີ່ສຸດກັນ!

1. ບອກລາ var ແລ້ວຫັນມາໃຊ້ let ແລະ const

ໃນອະດີດ, ເຮົາມີແຕ່ var ໃນການປະກາດຕົວປ່ຽນ ເຊິ່ງມັກຈະສ້າງບັນຫາ "ຕົວປ່ຽນຮົ່ວໄຫຼ" ໄປບ່ອນທີ່ເຮົາບໍ່ຕ້ອງການ (Block Scope issues). ES6 ຈຶ່ງໄດ້ແນະນໍາ 2 ຄໍາສັ່ງໃໝ່ທີ່ປອດໄພກວ່າ:

• let: ໃຊ້ປະກາດຕົວປ່ຽນທີ່ ສາມາດປ່ຽນແປງຄ່າໄດ້ ໃນອະນາຄົດ.
• const (Constant): ໃຊ້ປະກາດຕົວປ່ຽນທີ່ ບໍ່ສາມາດປ່ຽນແປງຄ່າໄດ້ອີກ ຫຼັງຈາກທີ່ກໍານົດໄປແລ້ວ. (ແນະນໍາໃຫ້ໃຊ້ຕົວນີ້ເປັນຫຼັກ)

ຕົວຢ່າງການນໍາໃຊ້:

// ການໃຊ້ let
let age = 20;
age = 21; // ສາມາດປ່ຽນຄ່າໃໝ່ໄດ້
console.log(age); // ຜົນລັບ: 21

// ການໃຊ້ const
const birthYear = 2000;
birthYear = 2005; // ❌ ຈະເກີດ Error ເພາະ const ປ່ຽນຄ່າບໍ່ໄດ້

// ແນະນໍາ: ໃຊ້ const ສະເໝີ ຈົນກວ່າທ່ານຈະຮູ້ແນ່ນອນວ່າຄ່ານັ້ນຕ້ອງຖືກປ່ຽນ ຈຶ່ງໃຊ້ let

2. Arrow Function (ການຂຽນ Function ແບບສັ້ນ)

Arrow Function ເປັນວິທີການຂຽນ function ແບບໃໝ່ທີ່ສັ້ນລົງ, ກະທັດຮັດຂຶ້ນ, ແລະ ຍັງຊ່ວຍແກ້ບັນຫາການອ້າງອີງ this ໃນ JavaScript ໄດ້ດີອີກດ້ວຍ. ໂດຍເຮົາຈະປ່ຽນຈາກການໃຊ້ຄໍາວ່າ function ມາເປັນການໃຊ້ເຄື່ອງໝາຍລູກສອນ => ແທນ.

ຕົວຢ່າງປຽບທຽບ:

// ວິທີເກົ່າ (Traditional Function)
function sayHello(name) {
  return "Hello " + name;
}

// ວິທີໃໝ່ (Arrow Function)
const sayHelloES6 = (name) => {
  return "Hello " + name;
}

// ຖ້າ function ມີການ return ຄ່າພຽງແຖວທໍາອິດ ເຮົາສາມາດຫຍໍ້ໃຫ້ສັ້ນລົງໄປອີກ!
const sayHelloShort = name => "Hello " + name;

console.log(sayHelloShort("LaoCourse")); // ຜົນລັບ: Hello LaoCourse

3. Template Literals (ການຕໍ່ String ທີ່ງ່າຍທີ່ສຸດ)

ເຄີຍເມື່ອຍກັບການເອົາຕົວປ່ຽນມາຕໍ່ກັບຂໍ້ຄວາມດ້ວຍເຄື່ອງໝາຍບວກ (+) ບໍ່? ຖ້າຂໍ້ຄວາມຍາວໆ ມັນຈະເຮັດໃຫ້ Code ເບິ່ງຍາກ ແລະ ມັກລືມຍະຫວ່າງ.

ES6 ມາພ້ອມກັບ Template Literals ເຊິ່ງໃຫ້ເຮົາໃຊ້ເຄື່ອງໝາຍ Backtick (```) (ປຸ່ມດຽວກັບປຸ່ມປ່ຽນພາສາໃນຄີບອດ) ແທນການໃຊ້ Single ຫຼື Double Quotes. ເຮົາສາມາດແຊກຕົວປ່ຽນເຂົ້າໄປໃນຂໍ້ຄວາມໄດ້ໂດຍກົງ ໂດຍການໃຊ້ ${ຕົວປ່ຽນ}.

ຕົວຢ່າງປຽບທຽບ:

const firstName = "John";
const job = "Developer";

// ວິທີເກົ່າ (ຕໍ່ String ດ້ວຍ +)
const oldWay = "My name is " + firstName + " and I am a " + job + ".";

// ວິທີໃໝ່ (Template Literals)
const newWay = `My name is ${firstName} and I am a ${job}.`;

console.log(newWay); 
// ຜົນລັບ: My name is John and I am a Developer.

ນອກຈາກນີ້ Template Literals ຍັງສາມາດຂຽນຂໍ້ຄວາມຫຼາຍແຖວ (Multi-line) ໄດ້ງ່າຍໆ ໂດຍບໍ່ຕ້ອງໃຊ້ \n ອີກດ້ວຍ!

ສະຫຼຸບ

ການອັບເດດມາໃຊ້ ES6 ບໍ່ພຽງແຕ່ເປັນການຮຽນຮູ້ Syntax ໃໝ່ໆ ແຕ່ມັນຄືການຍົກລະດັບວິທີຄິດໃນການຂຽນ Code ຂອງທ່ານ:

1. ໃຊ້ const ແລະ let ເພື່ອໃຫ້ຄວບຄຸມຕົວປ່ຽນໄດ້ປອດໄພຂຶ້ນ.
2. ໃຊ້ Arrow Function ເພື່ອໃຫ້ Code ສັ້ນ ແລະ ອ່ານງ່າຍ.
3. ໃຊ້ Template Literals ເພື່ອຈັດການກັບຂໍ້ຄວາມ (String) ໄດ້ສະດວກກວ່າເກົ່າ.