Viết code Javascript ngắn gọn với Array Distinct và Short-Circuit Evaluation

Link Source: Viết code Javascript ngắn gọn với Array Distinct và Short-Circuit Evaluation
Thể loại: Javascript, Lập trình
Tags: Học hành, Lập trình

Mẹo viết code Javascript ngắn gọn hơn

Dưới đây là một số cách xử lí vấn đề dùng cách viết javascript thật ngắn ngọn, súc tích. Nếu bạn đọc giả có cách viết hay hơn hãy bổ sung ở phía bình luận cuối trang nhá.

JavaScript Array Distinct

Set type object đã được ra mắt trong ES6, cùng với spread operator(…), chúng ta có thể dùng nó để tạo 1 array mới chỉ gồm các giá trị duy nhất (unique values).

Ví dụ:

• Distinct elements of an array of primitive values


• Distinct property values of an array of objects

const array = [2, 2, 3, 5, 8, 5, 8]
const distinctArray = [...new Set(array)]; // Result: [2, 3, 5, 8]

// Distinct property values of an array of objects
const array = [
 "name":"Nam", "age": 20,
 "name":"Truong", "age": 10,
 "name":"Linh", "age": 10,
];
const distinctAges = [...new Set(array.map(e=>e.age))]; // [20,10] 

Short-Circuit Evaluation

Ternary operator là 1 cách nhanh gọn để viết các statement điều kiện đơn giản (và đôi khi phải lồng vào nhau), ví dụ như là:

x > 10 ? 'Above 10' : 'Below 10';
x > 10 ? (x > 20 ? 'Above 20' : 'Between 10 and 20') : 'Below 10';

Bạn thấy dòng 2 phía trên áp dụng ternary operator nhưng cũng phức tạp hơn mức cần thiết. Thay vào đó, chúng ta có thể dùng logical operators ‘and’ && và ‘or’ || để đánh giá các expression nhất định 1 cách còn ngắn gọn hơn.

Cách làm việc của nó

Giả sử ta muốn return chỉ 1 trong 2 hay nhiều option.

And &&

Sử dụng && (And chỉ đúng nếu tất cả toán hạng đều đúng, return về giá trị của toán hạng cuối cùng) bằng không sẽ return khi gặp giá trị “falsy” đầu tiên.

Ghi chú: Giá trị “falsy” gồm: “”(empty string), 0, null, undefined, NaN, false.

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0

Or ||

Dùng || sẽ return true khi gặp giá trị “truthy” đầu tiên. Nếu mỗi toán hạng đánh giá tới false, evaluated expression cuối cùng sẽ được return.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1

console.log(0 || null); // Result: null

Ví dụ 1: Chúng ta muốn return length của 1 variable, nhưng ta lại không biết variable type.

Chúng ta có thể dùng statement if/else để kiểm tra xem type của foo có được chấp nhận không, nhưng việc này có thể hơi dài dòng. Thay vào đó short circuit evaluation cho phép chúng ta có thể làm như thế này:

return (foo || []).length;

Nếu variable của foo là truthy, nó sẽ được return. Nếu không thì, length của array trống sẽ được return: 0 .

Ví dụ 2:

Đã bao giờ bạn gặp vấn đề truy cập 1 nested object property? Bạn sẽ không biết rằng liệu object hay 1 trong các sub-property có tồn tại, và điều này có thể gây ra các lỗi khó chịu.

Giả dụ chúng ta muốn truy cập vào 1 property có tên data bên trong this.state, nhưng data lại không được xác định cho tới khi chương trình của ta return thành công 1 fetch request.

Thông thường ta sẽ viết 1 lệnh điều kiện:

if (this.state.data) 
  return this.state.data;
 else 
  return 'Fetching Data';

Nhưng điều đó cũng có vẻ hơi lặp đi lặp lại. ‘or’ operator có thể giải quyết nó nhanh gọn hơn:

return (this.state.data || 'Fetching Data');

Chuỗi tùy chọn – Optional Chaining

const name = this.state.data?.name

Cú pháp ?. đặt sau data, tức là ta đang kiểm tra xem data đó có tồn tại hay không? Hoặc trong nhiều trường hợp data có giá trị null hoặc undefined thì sao? Lúc này Optional Chaining sẽ không return về error mà nó chỉ trả về undefined. Vì thế, name sẽ có giá trị undefined. Khi javascript tìm thấy null hoặc undefined, nó sẽ short circuit và ngừng đi sâu hơn.

Optional Chaining còn áp dụng được cho cả hàm:

Nếu data tồn tại và getAge tồn tại thì gọi hàm getAge()

const age = this.state.data?.getAge?.()

Dynamic properties

Nếu data tồn tại thì lấy giá trị của data[1]

const data = this.state.data?.[1]

Default values

Cú pháp Nullish coalescing operator biểu diễn dưới dạng ?? Nó cũng khá dễ đọc. Nếu bên vế trái có giá trị undefined, khi đó data sẽ có giá trị bên phải ?? tức là ‘Default name’

const data = this.state.data?.name ?? 'Default name'

Please follow and like us:

Link Source: Viết code Javascript ngắn gọn với Array Distinct và Short-Circuit Evaluation