Code JavaScript sạch hơn 80% bằng cách sử dụng Optional Chaining và Nullish Coalescing

Ảnh của Curology trên Unsplash

Kể từ ES2015, còn được gọi là ES6, JavaScript đã chuyển từ cách tiếp cận kiểu thác nước nơi vô số tính năng được phát hành cùng một lúc trong một phiên bản chính, sang một cách tiếp cận nhanh nhẹn hơn, nơi các tính năng mới được phát hành hàng năm khi thông số kỹ thuật được hoàn thành. Điều này đã cho phép các tính năng ngôn ngữ mới được thêm vào hàng năm kể từ đó. Những tính năng này có thể lớn và nhỏ, nhưng tất cả chúng đều có xu hướng được kiểm tra kỹ lưỡng thông qua việc sử dụng chuyển tiếp và polyfills trước khi phát hành chính thức. Trên thực tế, khi chúng thực sự trở thành 'chính thức' thì điều đó thực sự khá ấn tượng vì cộng đồng đã sử dụng chúng được một thời gian.

Hai trong số những tính năng đó đã chuyển sang giai đoạn 4 cách đây chín tháng và được phát hành trong thông số kỹ thuật ES2020. Cả hai tính năng này đều giúp các nhà phát triển làm việc với các giá trị Null và undefined một cách rõ ràng hơn và khi được sử dụng cùng nhau, tạo ra một số mã rất ngắn gọn nhưng mạnh mẽ. Hai tính năng này là Optional Chaining và Nullish Coalescing.

Optional Chaining

Các thuộc tính trên các đối tượng JavaScript, giống như nhiều ngôn ngữ, thường được truy cập bằng cách sử dụng ký hiệu dấu chấm. Khi bạn sử dụng ký hiệu dấu chấm, người ta truy cập các thuộc tính của đối tượng bằng cách thêm một dấu chấm và sau đó là tên của thuộc tính, như sau:

const book = {
   title:"My Favorite JS Functions"
}

book.title // My Favorite JS Functions

Điều này có nghĩa là nếu một trong các thuộc tính là một đối tượng khác, chúng ta có thể tiếp tục 'chuỗi' các tên thuộc tính chỉ bằng cách thêm một dấu chấm khác, như sau:

const book = {
   title:"My Favorite JS Functions",
   author:{
     firstName:"Travis",
     lastName:"Waith-Mair"
   }
}

book.author.firstName //Travis

Tất cả đều tốt, nhưng điều gì sẽ xảy ra nếu sách của chúng tôi đến từ một API sách không đảm bảo có thông tin về tác giả và nếu có, nó vẫn không đảm bảo rằng chúng có cả thông tin đầu tiên và / hoặc cuối cùng Tên của tác giả. Điều này có thể làm cho việc viết mã đơn giản như sau: book.author.firstname rất khó đoán và nguy hiểm.

Trước đây, chúng ta sẽ phải viết các trình bảo vệ kiểm tra các giá trị. Đây là những gì các vệ sĩ của chúng tôi có thể trông như thế này:

const authorName = book.author && book.author.firstName
                    ? book.author.firstName
                    : 'Unknown'

Điều này hoạt động, nhưng điều này phụ thuộc vào việc kiểm tra truthyness của các giá trị, điều này có thể phản tác dụng nếu giá trị là một giá trị hợp lệ falsy, chẳng hạn như một chuỗi trống. Một cách an toàn hơn để viết những điều trên sẽ là:

const authorName = book.author !== undefined
                   && book.author.firstName !== undefined
                     ? book.author.firstName
                     : 'Unknown'

Nhìn vào tất cả những gì chúng ta phải làm chỉ để gán một trong hai chuỗi có thể. May mắn thay với chuỗi tùy chọn, chúng ta có thể thêm dấu ? Trước dấu chấm và điều này sẽ cố gắng truy xuất giá trị. Nếu không có giá trị, thì nó sẽ trả về undefined. Điều này có nghĩa là chúng ta có thể viết lại phần trên như thế này:

const authorName = book?.author?.firstName !== undefined
                     ? book.author.firstName
                     : 'Unknown'

Điều này rất dễ đọc hơn. Nó có thể được làm sạch mặc dù. Để làm được điều đó, chúng ta cần tìm hiểu về một tính năng quan trọng khác: Nullish Coalescing.

Nullish Coalescing

Nhu cầu phổ biến khi lập trình bằng JavaScript, hoặc bất kỳ ngôn ngữ nào, là có một dự phòng an toàn khi một giá trị kết thúc là trống hoặc không tồn tại. Trong JavaScript, có hai cách định nghĩa trống hoặc không tồn tại. Nó có thể là undefined hoặc null. Vì cả undefined và null đều bị coi là falsy trong JavaScript, một trong những thủ thuật để cung cấp dự phòng là sử dụng || Toán tử này sẽ trả về giá trị trung thực đầu tiên. Nó có thể trông giống như sau:

let maybeValue = "I exist"
let safeValue = maybeValue || "value"

console.log(safeValue) // I exist

Khi câu trên được đánh giá, maybeValue là 'Tôi tồn tại' là sự thật. Nếu maybeValue là một giá trị sai, thì safeValue sẽ trở về "value". Vấn đề là một chuỗi rỗng là một giá trị hợp lệ, nhưng được đánh giá là sai. Vì vậy, nó sẽ trở lại giá trị của chúng ta mặc dù chúng ta không muốn.

Đây là lúc toán tử kết hợp nullish xuất hiện. Tất cả những gì bạn cần làm là thay thế || Với ?? Và nó hoạt động chính xác như dự định. Điều mà toán tử kết hợp nullish sẽ làm là đánh giá giá trị đầu tiên và chỉ khi nó là 'nullish', hay nói cách khác là null hoặc undefined, mới thực sự sử dụng dự phòng. Vì vậy, chúng tôi có thể viết lại ở trên như thế này:

let maybeValue = ""
let safeValue = maybeValue ?? "value"

console.log(safeValue) // ""

maybeValue = null

let safeValue = maybeValue ?? "value"

console.log(safeValue) // "value"

Đặt chúng lại với nhau

Hãy nhớ câu nói dài của chúng tôi từ phần trên cùng của bài báo. Sử dụng Chuỗi tùy chọn, chúng tôi đã cải thiện nó rất nhiều. Với nhà điều hành Nullish Coalescing của chúng tôi, chúng tôi có thể loại bỏ toàn bộ nhu cầu sử dụng một phép toán ba ngôi. Vì chuỗi tùy chọn sẽ đánh giá là undefined nếu thiếu bất kỳ giá trị nào, chúng tôi có thể ghép nối chuỗi đó với toán tử kết hợp nullish của chúng tôi để cung cấp một bản tóm tắt đơn giản tốt đẹp, như sau:

const authorName = book?.author?.firstName ?? 'Unknown'

Chúng tôi đã đi từ một số dòng và một số kiểm tra các giá trị không xác định đến một dòng mã sẽ cung cấp tên của tác giả nếu có sẵn, nếu không nó sẽ trở lại một giá trị có thể chấp nhận được. Đây là nhiều sạch hơn và dễ dàng hơn để hiểu những gì đang xảy ra và do đó, dễ dàng hơn để duy trì.

Khi JavaScript tiếp tục được cải thiện, nhiều tính năng như hai tính năng trên sẽ được phát hành và sẽ cải thiện đáng kể cách chúng ta viết JavaScript. Điều này sẽ làm cho việc viết mã sạch và dễ bảo trì dễ dàng hơn nhiều.

Bài viết gốc tại đây.

Hiện tại khóa học Web Frontend tại Techmaster Vietnam vẫn liên tục tuyển sinh các lớp tiếp theo. Và trong tình hình dịch bệnh phức tạp, lớp sẽ chuyển sang học hình thức trực tuyến có tương tác, thời lượng và chất lượng không đổi, vẫn đảm bảo việc làm cho học viên tốt nghiệp.

Chi tiết khóa học: https://frontend.techmaster.vn/.

Liên hệ tư vấn: Mr Thịnh - 0987273764 (zalo).