JAVASCRIPT VÀ NHỮNG ĐIỀU MÌNH KHÔNG BIẾT 🙂 #1 - OPTIONAL CHAINING

Javascript là một ngôn ngữ rất được thông dụng bật nhất hiện tại và được sử dụng rộng rãi trong lĩnh vực công nghệ. Từ làm web, làm game, làm app mobile/desktop, làm trí tuệ nhân tạo...và nhiều ứng dụng thực tiễn khác.

Vậy nên cũng dễ hiểu khi mà có rất nhiều người chọn ngôn ngữ này làm ngôn ngữ kiếm cơm, tuy nhiên cũng có có những cú pháp và function của Javascript mà hầu như không phải ai cũng biết. Vậy nên mình lập ra series này để nói về những điều mà mình cũng chả biết và may mắn là mình được biết nên có thể chia sẻ với các bạn.

Bài viết này mình sẽ nói về khái niệm optional chaining trong Javascript, hi vọng sẽ có ích  với những bạn học ngôn ngữ lập trình này nhé.


Khái niệm optional chaining có vẻ không quá là phổ biến nhưng thật sự rất hữu ích khi các bạn gặp trường hợp cần lấy giá trị của một object nhưng lại gặp lỗi bởi vì giá trị parent của field mà bạn lấy về bị undefined. Để dễ hiểu hơn thì mình có ví dụ như sau

const Person = {
	name: "Tín Chung",
	age: 20,
};
console.log(Person.name); //Trả về là Tín Chung
console.log(Person.nationality.flag); //Throw error

Ở đây mình lấy về giá trị là name của object Person và được trả về giá trị là "Tín Chung". Tuy nhiên với giá trị flag của nationality của object ấy thì terminal báo lỗi

Sỡ dĩ điều này xảy ra là vì vốn dĩ object Person được khởi tạo không hề tồn tại trường nationality nên lúc này Person.nationality sẽ có giá trị là undefined nên khi lấy flag của undefined sẽ throw ra error như trên.

Có nhiều các để tránh trường hợp throw Error như mình vừa trình bày. Có thể kể đến như

CONDITIONAL (TERNARY) OPERATOR🤔

Conditional operator (Toán tử có điều kiện) hay Ternary operator (Toán tử ba ngôi) là một toán tử Javascript nhận vào ba operands (toán hạng). Hiểu nôm na một cách đơn giản thì ternary operator cũng giống như if/else trong Javascript. Toán tử này sẽ nhận vào ba ngôi, ngôi thứ nhất nằm trước dấu chấm hỏi (?) là điều kiện được so sánh, ngôi thứ hai nằm sau dấu chấm hỏi và trước dấu hai chấm (:) là giá trị trả về nếu điều kiện đúng và ngôi cuối cùng nằm sau dấu hai chấm là giá trị trả về nếu điều kiện sai.

const Person = {
	name: "Tín Chung",
	age: 20,
};
console.log(Person.name); // Trả về Tín Chung
console.log(Person.nationality ? Person.nationality.flag : undefined); 
// Trả về undefined
Ví dụ sử dụng ternary operator

Tuy nhiên syntax của cách làm trên có phần hơi loằng ngoằng và chưa phải là cách tối ưu nhất

IF/ELSE STATEMENT 👎

Cú pháp if/else có vẻ đã quá quen thuộc với những người nào học lập trình nên mình sẽ không giải thích hơn nữa. Nhưng nôm na thì ở đây tụi mình sẽ kiểm tra xem nationality có tồn tại trong Object Person không. Nếu có, chương trình sẽ trả về giá trị của flag, không, chương trình sẽ trả về undefined.

const Person = {
	name: "Tín Chung",
	age: 20,
};
console.log(Person.name); // Trả về Tín Chung
if (Person.nationality) {
	// Trả về flag nếu có Person.nationality
	console.log(Person.nationality.flag);
} else {
	// Trả về undefined nếu không có Person.nationality
	console.log(undefined);
}
Ví dụ sử dụng if/else 

Cách này thì khỏi nói rồi. Từ thuở sơ khai ông bà ta đã triển khai câu lệnh này ngàn lần rồi nhé :)). Đùa tí thôi chứ cách này vẫn khá là dài và chưa phải là cách tốt nhất

LOGICAL AND 🤔

Toán tử logic AND trong "x AND y" sẽ trả về y nếu x đúng. Ở đậy, mình sẽ áp dụng logic đó để trả về flag nếu Person.nationality đúng.

const Person = {
	name: "Tín Chung",
	age: 20,
};
console.log(Person.name); // Trả về Tín Chung
console.log(Person.nationality && Person.nationality.flag); // Trả về undefined
Ví dụ sử dụng logical AND

Sử dụng logical AND không hẳn là quá tệ và mình cũng rất thường hay sử dụng trong các ứng dụng React. Tuy nhiên đó chỉ là khi mình chưa biết đến optional chaining trong Javascript thôi.

OPTIONAL CHAINING 😍

Kiểm tra tính hợp lệ của trường

Optional Chaining cho phép đọc dữ liệu của cá thể được khởi tạo sâu trong chuỗi của những trường liên kết với nhau mà không cần phải kiểm tra xem các trường có hợp lệ hay không. Syntax của optional chaining trong Javascript là hỏi chấm 😀 hay (?.)

Nói thì có vẻ hơi khá là khó hiểu nên mình sẽ đi thằng vào ứng dụng luôn nhé

const Person = {
	name: "Tín Chung",
	age: 20,
};
console.log(Person.name); // Trả về Tín Chung
console.log(Person.nationality?.flag); // Trả về undefined
Ví dụ sử dụng optional chaining

Lấy ví dụ ở trên, để không còn bị throw Error như ở trên thì mình sẽ đặt dấu chấm hỏi (?) sau Person.nationality

Person.nationality?.flag

Điều đó tương ứng với ES6 sẽ kiểm tra xem Person.nationality trong chuỗi các trường của object Person có hợp lệ không. Nếu không hợp lệ thì sẽ trả về là undefined.

Gọi hàm

Bên trong object Person mình khởi tạo một hàm gọi là eat(). Hàm eat() này khi được gọi sẽ trả về giá trị là "Tín Chung đang ăn". Bằng cách sử dụng optional chaining, mình sẽ kiểm tra xem object Person có tồn tại hàm eat hay không, nếu có thì mới gọi hàm. Ở đây, object Person không tồn tại hàm run() nên khi mình gọi thì nó chỉ trả về là undefined.

const Person = {
	name: "Tín Chung",
	age: 20,
	eat: () => `${Person.name} đang ăn`,
};

console.log(Person.eat?.()); // Tín Chung đang ăn
console.log(Person.run?.()); // undefined
Call function with optional chaining

Lấy phần tử trong mảng

const Person = {
	name: "Tín Chung",
	age: 20,
	hobbies: ["Viết blog", "Chơi nhạc", "Code", "Chơi game"],
};

console.log(Person.hobbies?.[2]); //Chơi nhạc
Ví dụ lấy phần tử từ Array với optional chaining

Kết hợp với các toán tử khác

const Person = {
	name: "Tín Chung",
	age: 20,
	hobbies: ["Chơi nhạc", "Viết blog"],
};

console.log(Person?.hobbies?.[3] ?? `Chưa có sở thích`);
console.log(Person?.hobbies?.[1] && `Tôi thích ${Person.hobbies[1]}`);
Ví dụ so sánh toán tử kết hợp optional chaining

Vậy đó là về optional chaining trong Javascript. Đây là một cú pháp rất đáng để áp dụng trong quá trình học và làm bằng Javascript. Sử dụng Optional Chaining sẽ khiến cho hệ thống của bạn ngắn gọn, súc tích và dễ đọc hơn.

Hãy đón chờ xem mình còn không biết những cái gì nữa trong những bài sau của series "Javascript và những điều mình không biết 🙂" nữa nhé.

Tham khảo:

Optional chaining (?.)
The ?. operator functions similarly to the. chaining operator, except that instead of causing an error if a reference is nullish (null or undefined), the expression short-circuits with a return value of undefined.
Góc Của Chung

Góc Của Chung