Khác nhau giữa for...in và for...of JavaScript

Chào các bạn, hôm nay chúng ta sẽ tìm hiểu về sự khác nhau giữa for...in và for...of trong JavaScript nhé 😁.

Khác nhau giữa for...in và for...of JavaScript

Đối với for...in, nó lặp qua tất cả các key của enumerable properties trong một object. Còn for...of sẽ lặp qua các giá trị của đối tượng lặp.

Các bạn có thể xem ví dụ dưới đây để hiểu rõ hơn:

let colors = ['red', 'green', 'blue'];
colors.blog = 'homiedev.com';

for (let i in colors) {
   console.log(i); // "0", "1", "2", "blog"
}

for (let i of colors) {
   console.log(i); // "red", "green", "blue"
}

Ở ví dụ trên, sự khác nhau của hai vòng lặp nằm ở chỗ for...in lặp qua các properties của array colors, còn for...of lặp qua các phần tử của array colors.

Chúng ta cùng xem tiếp một ví dụ sau, trong trường hợp này sử dụng for...of sẽ báo lỗi 👇.

Giả sử chúng ta có object sau:

const rappers = {
  eminem: '1972',
  tupac: '1971'
}

Bây giờ chúng ta sẽ sử dụng for...in để lặp qua object này:

for(i in rappers) {
  console.log(i); // "eminem", "tupac"
  console.log(rappers[i]) // "1972", "1971"
}

Như các bạn có thể thấy, câu lệnh for...in có thể lặp qua object. Nhưng điều này sẽ không thể sử dụng cho for...of.

Khi lặp bằng cách sử dụng for...of sẽ dẫn đến lỗi TypeError:

for (let i of rappers) {
   console.log(i); // Uncaught TypeError: rappers is not iterable
}

Lý do là vì đối tượng sử dụng của for...of là một iterable object. Hay nói cách khác for...of có thể lặp qua các phần tử của bất kỳ tập hợp nào có thuộc tính [Symbol.iterator]. Ở ví dụ trên, chúng ta đã sử dụng một plain object không phải iterable object nên sẽ nhận được lỗi như trên.

Kết luận

Tóm lại, sự khác nhau giữa for...in và for...of trong JavaScript là:

1. for... in lặp qua các key của enumerable properties trong một object.
2. for... of lặp qua các phần tử của một iterable object.