Javascript empty array – đừng gán [] thêm một lần nào nữa

Bài viết được sự cho phép của tác giả Kiên Nguyễn

Trong quá trình làm việc với Javascript array, tất nhiên sẽ không tránh khỏi trường hợp ta muốn gán array trở thành empty (Javascript empty array).

Có vô vàn cách để làm điều này, nhưng bài viết hôm nay tôi sẽ chỉ cho các ông thấy gán array cho [] tệ tới mức nào!

1. Thường xuyên sử dụng

Nguyên nhân bao gồm nhiều thứ:

• Tạo array, dùng lại.
• Gán array xong muốn empty đi cho đỡ rối.
• Không có nhu cầu truy xuất data nữa.
• …

Tuy nhiên, hãy cẩn thận khi gán [] nhằm empty array. Tại sao?. Câu trả lời có ngay đây:

2. Thử với ví dụ sau đây

Giả sử, qua vô vàn khó khăn vất vả, ta có array sau đây:

let characters = ["A", "B", "C"];

Sau khi cảm thấy không còn dùng nữa, đối với một lập trình viên bình thường, tất nhiên chỉ đơn giản là:

// Gán array với [] - xong
characters = [];

Có vấn đề khi cố gắng Javascript empty array như vậy không?. Tất nhiên là có chứ!. Nếu ta có một array khác được copy từ array này?

// Gán array với [] - xong
let characters = ["A", "B", "C"];
let copyCharacters = characters;

Chà, copy mà kết quả tất nhiên 2 array y hệt nhau.

console.log(characters)
console.log(copyCharacters)

// ["A", "B", "C"]
// ["A", "B", "C"]

Trường hợp thay đổi một item trong array thứ nhất, tất nhiên nó sẽ có ngay ở array hai. Tuyệt cú mèo!

characters[2] = "D";
console.log(characters)
console.log(copyCharacters)

// ["A", "B", "D"]
// ["A", "B", "D"]

3. Cuối cùng thì có gì sai với []

Đây, ngay lúc này empty array thứ nhất. Array thứ 2 có empty cùng luôn không?. Rất tiếc, câu trở lời là không!

characters = [];
// Là phiên bản copy ra, nhưng khi gán [] cho array 1, array 2 lại không refect theo.
console.log(characters)
console.log(copyCharacters)

// []
// ["A", "B", "D"]console.log(characters)

Tại sao?. Nguyên nhân nằm ở việc gán characters = [] thực chất CHỈ TẠO THÊM một instance javascript empty array gán cho characters. Chính vì thế copyCharacters không hề được affected sự empy này.

So when we say, array = [], [] is just a short hand way of allocating some space in memory with no data in it and so array will contain only the reference of the allocated memory space.

Chính vì vậy, khi ta gán array = [], đó là việc ta phân bổ một vùng mermory không có data, do đó mảng thực chất được tham chiếu tới tới không gian bộ nhớ 

Việc sử dụng [] trở nên cực kì nguy hiểm khi có array khác được sao chép ra từ array gốc. Dữ liệu được thao tác nhiều, handle các condition rendering trên screen.

Tìm việc làm Javascript mới nhất cho bạn

4. Làm thế nào để Javascript empty array đúng cách?

Đầu tiên, cách dễ dàng nhất, set length cho array là 1.

// Sử dụng length method là cách không thể dễ dàng hơn.
// Tuy nhìn không nuột như [] nhưng chất lượng thì hơn hẳn?.
characters.length = 0;
console.log(characters)
console.log(copyCharacters)

// []
// []

Cách thứ 2 thì hoa lá cành hơn. Sử dụng method splice của Javascript.

// splice xem ra cũng là một lựa chọn không tồi!
characters.splice(0, characters.length);
console.log(characters)
console.log(copyCharacters)

// []
// []

5. Tham khảo

Chém gió vài hồi vậy thôi chứ đây là con bug tôi đã gặp và fix từ rất lâu.

Mong rằng bài viết này sẽ giúp các ông tránh lạm dùng [] khi muốn empty gì gì đó trong Javascript nhé. Tại sao lại “gì gì”?.

Vì object cũng thế, chả khác gì array cả. Các ông cứ gán null cho nó mà xem! Rảnh thì tham khảo thêm một số bài viết dưới đây nha!

• Top 10 điều hay ho khi làm việc với Javascript Array
• Two ways to empty an array
• Javascript array – Mozilla

Bài viết gốc được đăng tải tại kieblog.vn

Xem thêm Việc làm IT Hà Nội, đà nẵng, hcm hấp dẫn trên TopDev