Video học lập trình mỗi ngày

Để mô tả chính xác tình huống để sử dụng javascript operator in thì lúc xưa chúng ta sẽ có gặp những trượng hợp này sau đây khi làm việc với Objects javascript.

Như tiêu đề thì ở bài viết này không nói đến for...in nên đừng nhầm lẫn. Với lại cũng xin nhắc luôn, có một số trường hợp cũng không nên sử dụng for...in cho nên hết sức lưu ý. 

Series - Mẹo viết javascript

Check exist key object JavaScript

Vâng đó chính là kiểm tra xem trong object có thuộc tính đó không? Thì lúc trước chúng ta sẽ có hai cách tiêu biểu và phổ biến nhất. Mà tôi cá giờ đây các lập trình viên lâu đời, họ vẫn còn sử dụng, vì tính ổn định của nó đó là hasOwnProperty và check undefined! Cụ thể như sau: 

## Sử dụng hasOwnProperty() method

const car = { make: 'Honda', model: 'Accord', year: 1998 }

car.hasOwnProperty('make');     // => true
car.hasOwnProperty('name'); // => false

## Comparing with undefined 

Cũng có mẹo này cũng hay đó là dùng kết quả trả về về sau khi check rồi so sánh với undefined. Nếu mà bằng thì property đó không tồn tại và ngược lại.

const car = { make: 'Honda', model: 'Accord', year: 1998 }

car.make;     // => 'Honda'
car.name; // => undefined

Đó là trước kia, còn bây giờ thì có thể bạn sẽ biết thêm một cách nữa đó là sử dụng operator in.

in operator javascript

Theo MDN thì "in operator sẽ return true nếu property tồn tại trong object hoặc là chuỗi nguyên mẫu (prototype chain) của đối tượng". Hãy xem ví dụ thế nào?

const car = { make: 'Honda', model: 'Accord', year: 1998 };

console.log('make' in car);
// expected output: true

delete car.make;
if ('make' in car === false) {
  car.make = 'Suzuki';
}

console.log(car.make);
// expected output: "Suzuki"

Rất tiện đúng không, chỉ cần theo cú pháp như sau:

prop in object

Trong đó: prop là tên một thuộc tính or một symbol của một object or có thể là một index trong Array. Giờ thử xem nhiều ví dụ theo MDN:

// Arrays
let trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']
0 in trees        // returns true
3 in trees        // returns true
6 in trees        // returns false
'bay' in trees    // returns false (you must specify the index number, not the value at that index)
'length' in trees // returns true (length is an Array property)
Symbol.iterator in trees // returns true (arrays are iterable, works only in ES2015+)

// Predefined objects
'PI' in Math          // returns true

// Custom objects
let mycar = {make: 'Honda', model: 'Accord', year: 1998}
'make' in mycar  // returns true
'model' in mycar // returns true

Sự khác biệt giữa in operator và hasOwnProperty

Nếu như việc sử dụng hasOwnProperty có một nhược điểm đó chính là không thể check được prototype chain. Thì sử dụng javascript operator in thì lại rất ok. Ví dụ như sau:

const car = { make: 'Honda', model: 'Accord', year: 1998 };

car.toString; // => function() {...}

console.log('toString' in car);              // => true
console.log(car.hasOwnProperty('toString')); // => false

Còn những ai muốn mở rộng kiến thức hơn thì xem lại khái niệm "prototype chain là gì?"

Tóm lại

Tóm gì nữa, quá rõ ràng rồi. Sử dụng hay không tuỳ thuộc vào bạn, tuỳ vào hoàn cảnh của các bạn nữa. Nhớ like và theo dõi thêm Series - Mẹo viết javascript nhé!