Khi đọc qua phần config Wepback mặc định của template Create React App tôi tìm thấy phần code như sau:

1const loaders = [
2  isEnvDevelopent && require.resolve("style-loader"),
3  isEnvProduction && {
4    loader: MiniCssExtractPlugin.loader,
5    options: shouldUseRelativeAssetPath ? { publicPath: "../../" } : {},
6  },
7  // ...
8].filter(Boolean);

Vậy rốt cuộc filter(Boolean) có ý nghĩa gì?

Phân tích

Ta có loaders khai báo và định nghĩa với kiểu Array, sử dụng prototype.Array.filter nhận callback function là Boolean.

Boolean

Là kiểu giá trị có hai giá trị true hoặc false. Ngoài ra bạn có thể dùng Boolean như một function, có tác dụng ép kiểu input truyền vào thành giá trị Boolean (truthy value => true hoặc falsy value => false).

Filter

Từ mảng Array đã cho sẽ tạo ra một mảng mới với các phần tử i thỏa mãn điều kiện của callbackFunc(i) trả về true.

Cách hoạt động

• Duyệt từng phần tử trong mảng loaders và truyền nó vào callback function là Boolean của loaders.filter.
• Với từng phần tử Boolean() sẽ trả về giá trị true nếu là truthy value và false nếu là falsy value.
• loader.filter lọc bỏ đi những phần tử được trả về false.

Ứng dụng

• Có thể sử dụng trick này để loại bỏ những phần tử mang tính falsy value như undefined hay null, giảm bớt thao tác kiểm tra điều kiện falsy value đối với từng phần tử.

Tham khảo

Array.prototype.filter()

Boolean

Truthy value và falsy value trong Javascript