NỘI DUNG BÀI VIẾT
JavaScript hiện đại và 10 tính năng nên sử dụng
Bài viết này chủ yếu hướng về đối tượng bạn đọc mới làm quen với JavaScript, hoặc sử dụng loại công cụ này một cách rời rạc trong khoảng 1 năm. Các tính năng được mô tả trong bài viết này là một vài recommendation khá ổn của JavaScript hiện đại mà mình nghĩ nên được sử dụng hàng ngày, nếu bạn thực sự nghiêm túc về JavaScript.
1. Toán tử spread
Toán tử spread được kí hiệu là ... trước một object hoặc 1 mảng, và đúng như tên gọi, toán tử này chuyển đối tượng từ một cấu trúc thành 1 danh sách được phân cách bằng dấu phẩy. Dưới đây là 1 ví dụ:
let firstHalf = [ 'one', 'two']; //["one", "two"]
let secondHalf = ['three', 'four', ...firstHalf]; //["three", "four", "one", "two"]
Code language: JavaScript (javascript)Kết quả trả về của đoạn code trên tương tự với đoạn code sau đây:
let firstHalf = [ 'one', 'two']; //["one", "two"]
let secondHalf = ['three', 'four']; //['three', 'four']
for(var i=0, i <firstHalf.length; i++ ) {
secondHalf.push(firstHalf[i]);
}
Code language: JavaScript (javascript)Toán tử này cũng được sử dụng đối với object để gộp thuộc tính của chúng:
const hero = {
name: 'Xena - Warrior Princess',
realName: 'Lucy Lawless'
}
hero; //{name: "Xena - Warrior Princess", realName: "Lucy Lawless"}
const heroWithSword = {
...hero,
weapon: 'sword'
}
heroWithSword; //{name: "Xena - Warrior Princess", realName: "Lucy Lawless", weapon: "sword"}
Code language: JavaScript (javascript)2. Rest parameter (tham số phần còn lại)
Rest parameters là cách mà chúng ta thu thập các tham số còn lại vào 1 mảng. JavaScript có khả năng linh hoạt về số lượng tham số đầu vào được cung cấp. Thông thường sẽ có 1 arguments variable để thu thập các tham số này. Hãy cũng xem ví dụ sau:
function add(first, second, ...remaining) {
return first + second;
}
Code language: JavaScript (javascript)Ở ví dụ trên, chúng ta chỉ tổng hợp được 2 tham số là first và second. Điều đó có nghĩa là khi gọi add(1, 2) hay add(1, 2, 3, 4) sẽ trả về cùng 1 kết quả. Để tổng hợp toàn bộ các tham số truyền vào, ta làm như sau:
function add(first, second, ...remaining) {
return first + second + remaining.reduce((acc, curr) => acc + curr, 0);
}
Code language: JavaScript (javascript)3. Thêm vào chuỗi (string interpolation)
Chắc hẳn các bạn sẽ khá quen với đoạn code như sau:
class Product {
constructor(name, description, price) {
this.name = name;
this.description = description;
this.price = price;
}
getDescription() {
return " Full description \n" +
" name: " + this.name +
" description: " + this.description
}
}
Code language: JavaScript (javascript)Thứ mình muốn nói ở đây là phương thức getDescription() dài lê thê và khá khó đọc. Đây cũng là 1 ví dụ thực tế áp dụng với khá nhiều loại ngôn ngữ. Tuy nhiên, ngày nay có rất nhiều ngôn ngữ có các phương thức hỗ trợ string interpolation, và may thay, JavaScript cũng không phải ngoại lệ. Chúng ta có thể tùy biến lại hàm getDescription() như sau:
getDescription() {
return `Full description \n:
name: ${this.name}
description ${this.description}
`;
}
Code language: JavaScript (javascript)Ở đây, chúng ta sử dụng 2 dấu backticks để định nghĩa multi-line string, và dùng tổ hợp kí hiệu ${} để chèn giá trị vào chuỗi.
4. Thuộc tính rút gọn
Có thể cũng nhiều bạn đã sử dụng đến cách viết này rồi. Ở ES5, chúng ta sẽ phải khai báo như sau:
function createCoord(x, y) {
return {
x: x,
y: y
}
}
Code language: JavaScript (javascript)Tuy nhiên đối với ES6 trở đi, bạn có thể bỏ qua những gì ở bên phải dấu : nếu nó có cùng tên, giống như ví dụ sau:
function createCoord(x, y) {
return {
x,
y
}
}
Code language: JavaScript (javascript)5. Thuộc tính là phương thức
Đây là cách thông thường mà chúng ta định nghĩa 1 thuộc tính trỏ tới 1 phương thức. Bên dưới là ví dụ sử dụng ES5:
const math = {
add: function(a,b) { return a + b; },
sub: function(a,b) { return a - b; },
multiply: function(a,b) { return a * b; }
}
Code language: JavaScript (javascript)Từ ES6 trở đi, chúng ta không còn phải thêm cú pháp [tên phương thức]: vào nữa, mà có thể định nghĩa thẳng như sau:
const math = {
add(a,b) { return a + b; },
sub(a,b) { return a - b; },
multiply(a,b) { return a * b; }
}
Code language: JavaScript (javascript)6. Destructuring (phá hủy)
Object destructuring
Xét ví dụ sau:
function handle(req, res) {
const name = req.body.name;
const description = req.body.description;
const url = req.url;
log('url endpoint', url);
// lots of logic happening
dbService.createPerson( name, description )
}
Code language: JavaScript (javascript)Đoạn code trên thực sự không hoàn hảo, nhưng nó tượng trưng cho trường hợp mà ta muốn khai thác dữ liệu từ một đối tượng ở các cấp độ khác nhau. Vấn đề ở đây là, sẽ thế nào nếu ta không cần phải định nghĩa rất nhiều biến và tiết kiệm được rất nhiều tổ hợp phím? Well, chúng ta có thể làm như sau:
function handle(req, res) {
const { body: { name, description }, url }, = req;
log('url endpoint', url);
// lots of logic happening
dbService.createPerson( name, description )
}
Code language: JavaScript (javascript)Voila, đó là cách 3 dòng trở thành 1.
Array destructuring
Hãy xem đoạn code sau:
const array = [1,2,3,4,5,6];
array; //[1, 2, 3, 4, 5, 6]
const a = array[0];
a; //1
const c = array[2];
c; //3
Code language: PHP (php)Đoạn code trên có thể viết lại theo như sau:
const array = [1,2,3,4,5,6];
const [a, ,c, ...remaining] = arr;.
// remaining = [4, 5, 6]
Code language: PHP (php)Chúng ta có thể tách từng giá trị trong mảng bằng cách khớp theo mẫu trên. Nếu muốn skip 1 giá trị, ta hoàn toàn có thể bỏ trống giá trị giữa cặp dấu ,.
Parameter matching
Chúng ta cũng có thể thực hiện việc này trên 1 hàm và các tham số của nó. Đây có thể coi là 1 tiêu chuẩn thực tế để thu thập tất các các tham số của 1 đối tượng, khi mà bạn có nhiều hơn 2, 3 tham số trong 1 function:
function doSomething(config) {
if(config.a) { ... }
if(config.b) { ... }
if(config.c) { ... }
}
Code language: JavaScript (javascript)Cách tốt hơn để viết đoạn code trên:
function doSomething({ a, b, c }) {
if(a) { ... }
if(b) { ... }
if(c) { ... }
}
Code language: JavaScript (javascript)7. Phương thức cho mảng
ES6 cung cấp cho người dùng 1 loạt các phương thức cho mảng có thể sử dụng như:
find(): tìm kiếm và trả về 1 phần tử trong list hoặc nullfindIndex(): tìm kiếm và trả về index của 1 phần tửsome(): nhận định là true cho ít nhất 1 item có trong listincludes(): xác định item có nằm trong list
Đoạn code sau đây minh họa cách sử dụng của các phương thức trên:
const array = [{ id: 1, checked: true }, { id: 2 }];
arr.find(item => item.id === 2) // { id: 2 }
arr.findIndex(item => item.id === 2) // 1
arr.some(item => item.checked) // true
const numberArray = [1,2,3,4];
numberArray.includes(2) // true
Code language: JavaScript (javascript)8. Promises và Async/Await
Đã từng có 1 thời điểm, callbacks như dưới đây là tất cả những gì ta có:
function doSomething(cb) {
setTimeout(() => {
cb('done')
}, 3000)
}
doSomething((arg) => {
console.log('done here', arg);
})
Code language: JavaScript (javascript)Chúng ta từng sử dụng cách viết như trên để xử lý một vài quá trình bất đồng bộ và cần thời gian để thực thi. Và rồi, thư viện promises ra đời và người ta bắt đầu sử dụng nó. Và bây giờ chúng ta có thể xử lý các tiến trình như sau:
function doSomething() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('done')
}, 3000)
})
}
doSomething().then(arg => {
console.log('done here', arg);
})
Code language: JavaScript (javascript)Thậm chí, ta còn có thể chain nhiều promise với nhau:
getUser()
.then(getOrderByUser)
.then(getOrderItemsByOrder)
.then(orderItems => {
// do something with order items
})
Code language: JavaScript (javascript)Async/await
Và rồi, khái niệm async/await. Hãy thử tưởng tượng ví dụ trên với promise trở thành như sau:
async function getItems() {
try {
const user = await getUser();
const order = await getOrderByUser(user);
const items = await getOrderItemsByOrder(order);
return items;
} catch(err) {
// handle error here, the suggestion to return something or rethrow
}
}
getItems().then(items => {
// do something with order items
})
Code language: JavaScript (javascript)Và với cách viết này, chúng ta có 1 đoạn code bất đồng bộ với cú pháp đồng bộ.
9. Modules
Khá nhiều ngôn ngữ lập trình hỗ trợ khái niệm module. Khả năng phân chia code thành nhiều file chứa các đơn vị độc lập được được gọi là module. Hãy xét ví dụ sau:
// math.js
export function add(a,b) { return a + b; }
export function sub(a,b) { return a - b; }
export default (a,b) => a * b;
// main.js
import mult, { add, sub } from './math';
mult(2, 4) // 8
add(1,1) // 2
sub(1,2) // -1
Code language: JavaScript (javascript)Ở trên chúng ta sử dụng từ khóa export để báo hiệu rằng các cấu trúc add và sub có sẵn công khai cho bất kì module nào import các module này. Từ khóa export default là những gì chúng ta có khi mới thực thi việc import. Trong file main.js chúng ta import phương thức mặc định có tên là mult và chúng ta cũng chỉ ra các phương thức đặc thù là add() và sub()
10. Arrow functions và từ khóa this
Arrow functions
Trong bài viết này mình có sử dụng arrow functions xuyên suốt, và thực tế đây chỉ là một cách viết khác cho function. Trong quá khứ chúng ta đã quen với cách khai báo sau:
function printArray(arr) {
// do something
}
Code language: JavaScript (javascript)Và ngày nay chúng ta có thêm cách khai báo sau:
const printArray = (arr) => {
// do something
}
Code language: JavaScript (javascript)Chúng ta còn có thể định nghĩa hàm trên 1 dòng như dưới đây:
const add = (a,b) => a + b
Code language: JavaScript (javascript)Cách viết này mặc định có nghĩa là ta sẽ thực thi các phép toán và trả về kết quả. Chúng ta cũng có thể khai báo tương tự với 1 object, và cú pháp sẽ là:
const create = (a,b) = > ({ x: a, y: b })
Code language: JavaScript (javascript)Từ khóa this
Trong quá khứ, chúng ta từng đối mặt với vấn đề không biết this đang trỏ đến đâu:
let array = [1,2,3];
function sum() {
this.total = 0;
arr.forEach(function(item) {
this.total+= item;
})
return total;
}
Code language: JavaScript (javascript)Trong ví dụ trên, this trỏ tới bên trong forEach. Để giải quyết vấn đề chúng ta có cách viết sau:
function sum() {
this.total = 0;
var self = this;
arr.forEach(function(item) {
self.total+= item; // now we are using `self`, it solves it but feels hacky
})
return total;
}
Code language: PHP (php)Bây giờ, với sự ra đời của arrow functions, chúng ta sẽ không cần dùng đến biến self nữa:
function sum() {
this.total = 0;
arr.forEach((item) => {
this.total+= item; // all is well `this` points to outer function
})
return total;
} Code language: JavaScript (javascript)Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
