Những tính năng mới trong ES6+ trong JavaScript

ES6 (ECMAScript 2015) đã mang lại nhiều tính năng mới và cải tiến cho ngôn ngữ lập trình JavaScript. Từ những cú pháp ngắn gọn đến cách quản lý mã code hiệu quả hơn, ES6 đã cung cấp cho nhà phát triển một tập hợp các công cụ mạnh mẽ để xây dựng ứng dụng web phức tạp một cách dễ dàng hơn.

Trong bài viết này, mình sẽ đi qua một số tính năng quan trọng của ES6 và các phiên bản ES mới hơn, cùng với ví dụ minh họa để hiểu rõ hơn về cách sử dụng chúng.

Arrow Functions (Hàm Mũi Tên) trong JavaScript

Arrow functions là một tính năng quan trọng được giới thiệu trong ES6, cung cấp một cú pháp ngắn gọn để định nghĩa hàm trong JavaScript. Arrow functions không chỉ giúp giảm đi số lượng code cần viết mà còn tạo ra cú pháp rõ ràng hơn cho việc định nghĩa hàm.

Cú pháp

const functionName = (parameters) => {
    // function body
};

Ưu điểm:

Bài viết này được đăng tại [free tuts .net]

• Cú pháp ngắn gọn: Arrow functions sử dụng cú pháp ngắn gọn hơn so với hàm truyền thống, giúp giảm thiểu lượng code cần viết.
• Bối cảnh (Context) cố định: Arrow functions không tạo ra một bối cảnh mới (context) cho riêng mình, mà thay vào đó sử dụng bối cảnh của hàm gần nhất.
• Không cần return: Nếu hàm chỉ có một dòng lệnh, bạn có thể viết nó mà không cần return.

Ví dụ:

Hàm không tham số

const greet = () => {
    console.log('Hello!');
};

greet(); // In ra: Hello!

Hàm có một tham số

const double = (num) => {
    return num * 2;
};

console.log(double(5)); // In ra: 10

Hàm có nhiều hơn một tham số

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

console.log(add(3, 5)); // In ra: 8

Hàm không cần return

const square = (num) => num * num;

console.log(square(4)); // In ra: 16

Arrow functions là một phần quan trọng của JavaScript hiện đại và thường được sử dụng rộng rãi trong codebase của các dự án. Tuy nhiên, cũng cần lưu ý rằng không phải mọi tình huống đều phù hợp với việc sử dụng arrow functions, đặc biệt là trong trường hợp cần truy cập vào từ khóa this hoặc trong việc định nghĩa các phương thức của đối tượng.

Template Literals (Chuỗi Ký Tự Mẫu) trong JavaScript

Template literals là một tính năng mạnh mẽ của ES6 cho phép nhúng biểu thức JavaScript vào trong chuỗi ký tự. Điều này giúp tạo ra các chuỗi phức tạp một cách dễ dàng và đọc được hơn so với cách truyền thống sử dụng chuỗi và phép cộng (+).

Cú pháp

`string text ${expression} string text`

Trong đó:

• string text: Phần của chuỗi ký tự không có biểu thức.
• ${expression}: Biểu thức JavaScript sẽ được tính toán và chuyển đổi thành một chuỗi.
• string text: Phần của chuỗi ký tự không có biểu thức.

Ưu điểm:

• Cú pháp rõ ràng: Template literals giúp code trở nên rõ ràng hơn và dễ đọc hơn so với việc sử dụng phép cộng (+) để kết hợp chuỗi.
• Tính linh hoạt: Có thể nhúng bất kỳ biểu thức JavaScript hợp lệ nào vào trong chuỗi ký tự, bao gồm biến, hàm, và thậm chí là các biểu thức toán học.

Ví dụ:

Nhúng biến vào trong chuỗi:

const name = 'John';
const greeting = `Hello, ${name}!`;
console.log(greeting); // Kết quả: Hello, John!

Sử dụng biểu thức toán học:

const a = 5;
const b = 3;
const result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result); // Kết quả: The sum of 5 and 3 is 8.

Gộp nhiều dòng văn bản

const multiLine = `
    This is a
    multi-line
    string.
`;
console.log(multiLine);
/* 
Kết quả:
This is a
multi-line
string.
*/

Template literals cung cấp một cách tiện lợi và mạnh mẽ để xử lý chuỗi ký tự trong JavaScript. Bằng cách sử dụng template literals, bạn có thể tạo ra các chuỗi phức tạp một cách dễ dàng và đọc được, giúp cải thiện sự hiểu và bảo trì của mã của bạn.

Destructuring Assignment (Gán Phân Rã) trong JavaScript

Destructuring assignment là một tính năng trong JavaScript cho phép bạn trích xuất các giá trị từ các đối tượng hoặc mảng và gán chúng cho các biến riêng lẻ một cách dễ dàng.

Destructuring từ Mảng

Trong trường hợp gán phân rã từ một mảng, các giá trị từ mảng sẽ được gán cho các biến theo thứ tự.

Cú pháp:

const [variable1, variable2, ...rest] = array;

Trong đó:

• variable1, variable2, ...: Các biến để nhận giá trị từ mảng.
• array: Mảng cần phân rã.

Ví dụ:

const numbers = [1, 2, 3, 4, 5];
const [first, second] = numbers;
console.log(first); // Kết quả: 1
console.log(second); // Kết quả: 2

Destructuring từ đối tượng

Trong trường hợp gán phân rã từ một đối tượng, các giá trị từ đối tượng sẽ được gán cho các biến tương ứng theo tên.

Cú pháp:

const { property1, property2, ...rest } = object;

Trong đó:

• property1, property2, ...: Các thuộc tính của đối tượng.
• object: Đối tượng cần phân rã.

Ví dụ:

const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30
};
const { firstName, age } = person;
console.log(firstName); // Kết quả: John
console.log(age); // Kết quả: 30

Gán phân rã với giá trị mặc định

Bạn cũng có thể sử dụng giá trị mặc định cho các biến trong trường hợp không có giá trị tương ứng trong mảng hoặc đối tượng.

Cú pháp:

const [variable1 = defaultValue1, variable2 = defaultValue2] = array;

hoặc

const { property1 = defaultValue1, property2 = defaultValue2 } = object;

Ví dụ:

const numbers = [1];
const [first, second = 2] = numbers;
console.log(first); // Kết quả: 1
console.log(second); // Kết quả: 2

Destructuring assignment là một tính năng mạnh mẽ và tiện lợi của JavaScript, giúp rút ngắn mã và làm cho code trở nên dễ đọc hơn. Bằng cách sử dụng destructuring assignment, bạn có thể trích xuất và gán giá trị từ mảng và đối tượng một cách hiệu quả.

Let và Const trong JavaScript

Trước khi ES6 (ECMAScript 2015), trong JavaScript, chúng ta chỉ có thể khai báo biến bằng từ khóa var. Tuy nhiên, với sự ra đời của ES6, chúng ta đã có thêm hai từ khóa mới để khai báo biến: let và const. Điều này mang lại nhiều lợi ích và cải tiến trong việc quản lý biến trong mã JavaScript.

Sự khác biệt giữa let và const

• let: Biến được khai báo bằng từ khóa let có thể được gán lại giá trị mới sau khi đã được khai báo. Điều này có nghĩa là giá trị của biến có thể thay đổi.

• const: Biến được khai báo bằng từ khóa const là hằng số không thể thay đổi giá trị sau khi đã được gán một lần. Một khi bạn gán giá trị cho một biến const, bạn không thể gán giá trị mới cho nó.

Sử dụng let và const

• let: Sử dụng let khi bạn muốn khai báo một biến có thể thay đổi giá trị trong quá trình thực thi của chương trình. Điều này thường được sử dụng cho các biến cần thay đổi giá trị, như biến đếm trong vòng lặp.

• const: Sử dụng const khi bạn muốn khai báo một hằng số không thay đổi giá trị sau khi đã được gán. Điều này giúp giảm thiểu rủi ro lỗi do thay đổi không mong muốn của giá trị.

Ví dụ:

// Sử dụng let
let x = 10;
x = 20; // Hợp lệ, biến x có thể thay đổi giá trị
console.log(x); 

// Sử dụng const
const PI = 3.14;
PI = 3.14159; // Lỗi, không thể gán giá trị mới cho hằng số
console.log(PI);

Trong ví dụ trên, biến x được khai báo bằng let có thể thay đổi giá trị, trong khi hằng số PI được khai báo bằng const không thể thay đổi giá trị sau khi được gán.

Kết bài

ES6 đã mang lại nhiều cải tiến quan trọng cho JavaScript, giúp làm cho ngôn ngữ này trở nên mạnh mẽ và linh hoạt hơn. Tính năng như hàm mũi tên, chuỗi ký tự mẫu, gán phân rã, let và const là chỉ một phần nhỏ của những tính năng mới trong ES6+ mà bạn có thể sử dụng để viết mã JavaScript hiệu quả hơn và dễ đọc hơn. Hãy tiếp tục tìm hiểu và áp dụng những tính năng này vào công việc của bạn để tận dụng tối đa tiềm năng của JavaScript.