Làm thế nào bỏ qua giá trị khi destructuring trong JS

Vào thẳng vấn đề làm thế nào để bỏ qua giá trị nào đó khi destructuring mảng trong JS? Nếu bạn đọc bài này vì sự tò mò chứ chưa hiểu cái tiêu đề lắm thì mình đưa ra ví dụ như sau:

Giả sử bạn có mảng ['one', 'two', 'three', 'four'] bạn chỉ muốn lấy chữ "one" với "three" thôi thì sao? Dễ ợt tưởng gì.

const arr = ['one', 'two', 'three', 'four'];

// bad code
const one = arr[0];
const three = arr[2];

Code trên tuy lấy được, đã bỏ qua giá trị "two", nhưng nó thuộc dạng bad code (đọc thấy chán vler :v), không hề áp dụng destructuring vào. Code nên viết lại như sau.

const arr = ['one', 'two', 'three', 'four'];

// ok code
const [one, , three] = arr;

// ok code
const [one, _, three] = arr;

// ok code
const [one, __, three] = arr;

// bad code
// because you only want `one` and `three`, never used `two`
// it makes you teammate ask you, why we need this variable.
// It's not used, can I remove it?
const [one, two, three] = arr;

// but this maybe ok
// I will explain in below why it's maybe ok
const [one, _two, three] = arr;

Chúng ta sẽ áp dụng dấu underscope (_) vào chỗ muốn bỏ qua hoặc đơn giản là để trống.
Thực ra điều này có tác dụng gì, tại sao không làm như cái đầu tiên arr[0] cho nhanh, mà dùng underscope hoặc bỏ trống. Điều này thực ra liên quan nhiều tới teamwork. Bởi vì làm việc team, code như vậy là tuân theo quy ước, giúp các thành viên đọc hiểu review nhau dễ dàng hơn. Theo quy ước trong giới code thuật JS, thêm prefix _ ngầm hiểu là biến này không quan trọng, chỉ để ra vậy thôi, méo xài.

Thêm nữa, JS giới thiệu destructuring không phải để làm cảnh :))). React áp dụng cái này vào convention khi sử dụng useState() của họ. Destructuring giúp code của bạn gọn và đẹp đẽ hơn, giúp người khác đọc dễ hiểu thích làm việc với bạn hơn và giúp bạn thể hiện trình độ code thuật của mình phần nào :)))

Vậy câu hỏi đặt ra, như cần destructuring nhiều nhiều và rất nhiều biến, và thứ tự chúng loạn xạ cả lên, há chẳng phải ta phải ghi nhớ vị trí chúng sao? và nhưng lệch vị trí thì chẳng phải phải trợn mắt lên dò lại à. Giải pháp là ta thêm comment vào.

Thêm comment vào destructuring

Thực ra điều này chính là dùng dấu trắng (blank space) như trên để xài thôi, chúng ta thêm comment vào để dễ nhớ.

const arr = ['avocado', 'papaya', 'rambutan', 'passion fruit', 'pomegranate', 'plum'];

// giả sử mình chỉnh muốn ăn rambutan và pomegranate thôi thì sao?
// làm như trên thôi, cơ mà lần này thêm comment vào để khỏi quên mình đã bỏ qua trái chi nha

const [
  // avocado
  , // papaya
  , rambutan
  , // passion fruit
  , pomegranate
] = arr;

Nhìn cũng ổn ha, giờ thì nhớ bỏ qua trái nào ròi, nhưng vấn đề là coding convention team không cho để phẩy đằng trước thì sao (do team ghét style của Microsoft :v). Sửa lại thôi

const [
  /*avocado*/,
  /*papaya*/,
  rambutan,
  /*passion fruit*/,
  pomegranate,
] = arr;

Áp dụng với object.

const obj = {
  avocado: 'trái bơ',
  papaya: 'đu đủ',
  rambutan: 'chôm chôm',
  passionFruit: 'trái thanh long',
  pomegranate: 'trái lựu',
  plum: 'mận Hà Nội :v',
};

// bad code
const rambutan = obj.rambutan;
cosnt pomegranate = obj.pomegranate;

// ok code
const { rambutan, pomegranate } = obj;

// troll bạn đấy
// object thì dễ quá rồi ha, bỏ qua dễ ợt
// object thì dùng cái này thì chỉ việc khai báo ra thôi, không như array

Thực ra còn một cách nữa để làm, nhưng mình thấy tạm thời nó cũng chưa cần thiết, với lại cá nhân mình thấy nó cũng hơi ngố ngố nên thôi. Hẹn dịp khác mình show nó ra.

Nói chút về dấu underscope

Dấu underscope đại diện cho thư viện nổi tiếng Underscope.js á nhen, mình thì đang không đề cập tới thư viện này.
Có thể bạn đã thấy dấu này được dùng trong arrow function như đoạn code sau:

1
2
3

const handleFinally = _ => {
  // TODO something
}

Thực ra nó giống với

1
2
3

const handleFinally = () => {
  // TODO something
}

Cách code trên ý bảo rằng trong arrow function này không xài parameter nào cả. Hoặc có thể như vầy.

1
2
3

const handleFinally = (one, _unusedParam, three) => {
  // TODO something
}

Parameter _unusedParam có dấu _, ý bảo sẽ không xài param này, nó để tượng trưng thôi.

Tóm lại

Cá nhân mình thấy, khi destructuring mảng và muốn bỏ qua biến nào đó, thì nên xài blank space, chứ đừng xài dấu underscope. Tương tự với arrow function thì nên () hơn là _. Bởi vì nhỡ bạn có xài thư viện underscope thì sao, thế là bị confict rồi còn gì :))).
Cơ mà nói chung do style và quy ước của team thôi. Code học mà, bạn ở ban phái nào thì theo gia quy của ban phái ấy.