JS thần công quyển 2 - Destructuring,Spread Syntax trong Javascript

Thiên hạ đồn rằng khi xưa các thánh DEV vừa nhai CẦN vừa chơi JAVA mới cho ra JS, cho nên JS có rất nhiều điều thú zị !!! Với kiểu dữ liệu Object thì JS cũng có thể gán nhiều biến được bằng cách

myObject = { id: 1, name: "Kien Dinh" };
myObject.name = "Kiên Kute";
console.log(myObject);
// Kết quả:
// {id: 1, name: "Kiên Kute"}

Nếu muốn lấy 1 giá trị nào của object đó ra thì sao?

var name = myObject.name;

Destructuring cho ta 1 câu cú ngon hơn:

var { name } = myObject;
// Lấy cả 2:
var { id, name } = myObject;

Hay phết đúng không?

Thế DESTRUCTURING LÀ GÌ ?

DESTRUCTURING là một cú pháp cho phép chúng ta tách nhỏ (phá hủy cấu trúc - nghĩa đen) của Object (Array). Ngoài việc dùng để rút gọn câu cú khai báo biến, ta cũng có thể áp dụng nó với tham số:

myObject = { id: 1, name: "Kien Dinh", age: 20 };
function hello({ name, age }) {
  console.log("Helo " + name + " " + age + " years old");
}
hello(myObject);

Hay ho chưa nào, với kiểu này thì đôi khi muốn sử dụng thêm tham số các bạn chỉ cần gõ thêm thuộc tính cần dùng trên signature của function mà thôi.

Làm việc với mảng các object

Dùng mảng data type thuần thì mình hiếm khi dùng, nhưng với mảng chứa các object chả hạn như mảng các học sinh, mảng giáo viên bla bla thì rất hay đụng tới. Giả dụ trường hợp Backend cho ta 1 mảng như này

var arrayStudent = [];
arrayStudent.push({ id: 1, name: "Kiên Đinh", gender: 0 });
arrayStudent.push({ id: 1, name: "Cô bé xinh xẻo", gender: 1 });

OK bây giờ mình muốn lấy 1 mảng khác hiển thị nếu như prop gender là 0 thì sẽ hiển thị là Nam, còn 1 là Nữ. Một cách stupid code sẽ như sau:

var newStudent = [];
for (var i in arrayStudent) {
  let obj = arrayStudent[i];
  if (obj.gender === 0) {
    obj.gender = "Nam";
  } else {
    obj.gender = "Nữ";
  }
  newStudent.push(obj);
}
console.log(newStudent);

Với Spread syntax "..." của JS ta có cách hay hơn:

var newStudent = arrayStudent.map((item) => {
  return { ...item, gender: item.gender === 0 ? "Nam" : "Nữ" };
});
console.log(newStudent);

Hay chưa ? Vũ trụ JS còn bao la rộng lớn và cũng khá điên điên, rảnh thì các bạn có thể lên MDN đọc cho vui :3