for...of và for...in khác nhau như thế nào?

for...in duyệt key, for...of duyệt value.

javascript

const arr = ['a', 'b', 'c']

for (const i of arr) console.log(i)   // 'a' 'b' 'c' — giá trị
for (const i in arr) console.log(i)  // '0' '1' '2' — chỉ số, KIỂU CHUỖI

	`for...in`	`for...of`
Duyệt	key enumerable	value của iterable
Đi lên prototype chain	có	không
Dùng với	object thường	Array, String, Map, Set, NodeList, generator
Object thường	được	TypeError — không iterable

Hai lý do không nên dùng for...in với mảng:

javascript

Array.prototype.custom = 1        // một thư viện cũ thêm vào
for (const k in arr) console.log(k)   // '0' '1' '2' 'custom'  ← lọt cả kế thừa

for (const k in arr) console.log(k + 1)   // '01' '11' '21' 'custom1' — key là chuỗi (và vẫn lọt key kế thừa)

Duyệt object đúng cách ở code hiện đại:

javascript

for (const [key, value] of Object.entries(obj)) { }
Object.keys(obj).forEach((k) => { })

// nếu buộc dùng for...in thì lọc lại
for (const k in obj) {
  if (!Object.hasOwn(obj, k)) continue
}

Chốt: mảng và mọi thứ iterable → for...of.

Object → Object.entries(). for...in chỉ còn hợp lý khi thật sự cần cả thuộc tính kế thừa, trường hợp rất hiếm.

Xem toàn bộ JavaScript cùng filter theo level & chủ đề con.

Mở danh sách JavaScript

for...in duyệt key, for...of duyệt value.

javascript

const arr = ['a', 'b', 'c']

for (const i of arr) console.log(i)   // 'a' 'b' 'c' — giá trị
for (const i in arr) console.log(i)  // '0' '1' '2' — chỉ số, KIỂU CHUỖI

	`for...in`	`for...of`
Duyệt	key enumerable	value của iterable
Đi lên prototype chain	có	không
Dùng với	object thường	Array, String, Map, Set, NodeList, generator
Object thường	được	TypeError — không iterable

Hai lý do không nên dùng for...in với mảng:

javascript

Array.prototype.custom = 1        // một thư viện cũ thêm vào
for (const k in arr) console.log(k)   // '0' '1' '2' 'custom'  ← lọt cả kế thừa

for (const k in arr) console.log(k + 1)   // '01' '11' '21' 'custom1' — key là chuỗi (và vẫn lọt key kế thừa)

Duyệt object đúng cách ở code hiện đại:

javascript

for (const [key, value] of Object.entries(obj)) { }
Object.keys(obj).forEach((k) => { })

// nếu buộc dùng for...in thì lọc lại
for (const k in obj) {
  if (!Object.hasOwn(obj, k)) continue
}

Chốt: mảng và mọi thứ iterable → for...of.

Object → Object.entries(). for...in chỉ còn hợp lý khi thật sự cần cả thuộc tính kế thừa, trường hợp rất hiếm.