Series về ES6: Let, const và hơn thế nữa

Dưn -

ES6 là gì?

ES6 là phiên bản mới nhất của chuẩn ECMAScript. ECMAScript do hiệp hội các nhà sản xuất Châu Âu đề xuất làm tiêu chuẩn của ngôn ngữ javascript.

ES6 được phát triển vào năm 2015 , còn được gọi là ES2015.  ES6 được phát triển với nhiều tính năng mới với mục đích hướng javascript trở thành ngôn ngữ lập trình hướng đối tượng.

Trong series này, chúng ta sẽ đi tìm hiểu về các chức năng mới trong ES6:

  • Const và Let
  • Default Parameter Value
  • Arrow functions
  • Modules( export, import)
  • Template Literals

Sau đây chúng ta cùng đi vào sâu hơn các chức năng của ES6.

  1. Const và Let

Trong phiên bản ES5 chúng ta có cách khai báo duy nhất đó là dùng var, tuy nhiên khi ES6 được phát triển thì chúng ta có thêm 2 cách: const và let.

const NAME = "Haposoft" // giá trị của biến là hằng số
let age = 20 // giá trị của biến có thể thay đổi
  • let sử dụng để thay thế var trong việc xử lý scope của biến. Trong khi var khi được khai báo có scope là global scope khi định nghĩa bên ngoài hàm thì let khi được khai báo có dạng block scope.
  • Khi khai báo let thì chúng ta có thể cập nhật giá trị của biến đó và chúng ta không thể khai báo lại biến đó.
let name = "Truyen";
if (true) {
   let name = "Hi Truyen";
   console.log(name); // "Hi Truyen"
}
console.log(name); // "Truyen"
  • const giống như let khi được khai báo cũng có dạng block scope.
  • Khi sử dụng const để khai báo thì các giá trị đó không thể thay đổi được. Tuy nhiên với trường hợp khi khai báo kiểu reference thì không thể tái tạo lại biến nhưng lại có thể cập nhật các giá trị ở trong đó
const name = "Truyen"
const name = "Haposoft" // error

//kiểu reference
const person = {
    name: "Truyen",
    age: 22
}
person.name = "Haposoft"
console.log(person) // { name:"Haposoft", age: 22 }

2. Default Parameter Value

Khi viết một function và trong trường hợp không truyền vào giá trị tham số trong function đó:

function getName(name) {
    console.log(name);
}
getName() //undefined

Khi không truyền đối số nào vào trong getName() thì giá trị trả ra là undefined. Để tránh xảy ra điều đó thì ES6 cho phép đặt các giá trị mặc định cho tham số đó.

function getName(name = "Haposoft") {
    return name;
}
getName() //Haposoft
getName("Hello") // Hello

3. Arrow functions

Arrow function là một annonymous function, hỗ trợ cho việc viết function một cách nhanh chóng hơn.

Một function bình thường trong Javascript dạng như sau:

function content() {
   //nội dung function
}

Với Arrow function có dạng:

const content = () => {
    //nội dung content
}

Ưu thế khi sử dụng arrow function :

  • Có thể rút ngắn gọn code so với function
  • Nếu trả về một dòng code thì có thể bỏ dấu {} và từ khoá return.
  • Được sử dụng nhiều trong các hàm: map, filter,...
  • Arrow function không có bind
  • Arrow function không phù hợp làm method của object

4. Modules( export, import)

Khi khối lượng code quá nhiều gây khó khăn khi quản lý ES6 hỗ trợ người dùng chia nhỏ code thành nhiều file khác nhau.

Ví dụ có file infomation.js:

const person = {
    name: "Haposoft"
}
export default person;

Và một file khác export nhiều hàm khác nhau:

export const ID = "23423425435";
export const sum = (numberA, numberB) => numberA + numberB;

Sau khi đã export thì ta có thể import những thứ trên vào file chung để sử dụng.

import person from './information.js';
// hoặc có thể đổi tên person thành bất kỳ tên gì bạn muốn. Vì nó là: export default
import per from './information.js';

// Sử dụng {} để chọn những thứ cụ thể từ file khác
import { ID, sum } from './calculation.js';

// Chỉ định một tên khác với tên đã chọn làm từ khóa từ trước
import { ID as anotherNameID, sum as anotherNameSum } from './calculation.js';

// Nếu chúng ta export nhiều thứ trong 1 file, mà lại muốn import tất cả chúng,
// Chúng ta sử dụng dấu *  và sau đó chỉ định một tên khác
import * as bundled from './calculation.js'

5. Template Literals

Với các phiên bản trước ES6, nếu như muốn nối một chuỗi lại với nhau, ta phải sử dụng toán tử + hoặc sử dụng phương thức concat của string. Nó vẫn sẽ ổn khi nối ít chuỗi nhưng khi nối nhiều chuỗi thì sẽ gây khó khăn, rắc rối.

const firstName1 = 'Hapo', lastName1 = 'soft';
const message1 = 'My first name is ' + firstName1 + 'My last name is ' + lastName1;
console.log(message1);

Vì thế Template Literals sẽ giải quyết vấn đề trên. Template Literals là một chuỗi ký tự bao gồm các câu lệnh được nhúng vào bên trong, có thể bỏ được dẫu trích dẫn dài dòng cùng với những câu lệnh nối chuỗi.

const firstName = 'Hapo', lastName = 'soft';
const message1 = `My first name is ${firstName}.\n\n My last name is ${lastName}`;
console.log(message);

Tiếp theo có thể viết gọn những dòng code trên với tính năng Multiline strings mà Template Literals mang lại:

const firstName = 'Hapo', lastName = 'soft';
const message = `My first name is ${firstName}
My last name is ${lastName}`;
console.log(message);

6. Tổng kết

Hy vọng những thứ mình chia sẻ trên sẽ giúp ích nhiều cho các bạn mới bắt đầu học Javascript và ES6. Trong phần tiếp theo thì chúng ta sẽ tìm hiểu về Rest params, Destructuring and For...of.

Nguồn tham khảo:

https://dev.to/this_mkhy_dev/do-you-know-es6---part-1-387m

https://javascripttutorial.net/es6

http://es6-features.org/#ParameterContextMatching

https://viblo.asia/p/es6-tu-co-ban-toi-nang-cao-phan-1-OeVKB8jJlkW

Xem tiếp phần tiếp theo của series tại đây.