Object Là Gì? Object Trong Javascript - KungFu Tech

Như mình đã nói trong bài các kiểu dữ liệu trong JavaScript, JavaScript có 7 kiểu dữ liệu nguyên thủy và 1 kiểu dữ liệu dạng tham chiếu. Đó là object trong JavaScript.

Để hiểu object (đối tượng) là gì, mình sẽ đưa ra một ví dụ về máy tính. Cụ thể, máy tính của mình có những đặc điểm sau:

• Loại: laptop
• Hãng: Sony
• Hệ điều hành: Windows 7
• Card đồ hoạ: NVIDIA
• ...

Ở đây, máy tính của mình: chính là một JavaScript object. Đối tượng này có các thuộc tính (properties): loại, hãng, hệ điều hành, card đồ hoạ với các giá trị tương ứng là laptop, Sony, Windows 7, NVIDIA.

Vậy object trong JavaScript là gì?

Object trong JavaScript là một khái niệm trừu tượng dùng để biểu diễn một vật thể (cụ thể). Trong đó, các thuộc tính dùng để miêu tả đặc điểm, tính chất của đối tượng.

Về bản chất, object là tập hợp của các key và value. Với key gọi là thuộc tính, còn value là giá trị tương ứng của thuộc tính.

Lưu ý

• Object có thể không chứa thuộc tính nào, được gọi là object rỗng.
• Object phải là một danh từ riêng, không phải danh từ chung. Trong ví dụ trên, nếu chỉ nói máy tính thì đó không phải đối tượng, mà phải là máy tính của mình.

Biểu diễn object trong JavaScript

JavaScript object sử dụng cặp dấu ngoặc {} để biểu diễn:

js Copy { key1: value1, key2: value2, key3: value3, ... }

Trong đó:

• key1, key2, key3,...: là tên thuộc tính, có kiểu dữ liệu là string hoặc symbol.
• value1, value2, value3,...: là giá trị tương ứng của các thuộc tính. Value có thể thuộc bất kỳ kiểu dữ liệu nào (kể cả object).
• Các cặp key-value ngăn cách nhau bởi dấu phẩy ,.

Áp dụng cho ví dụ trên:

js Copy let myComputer = { type: "laptop", brand: "Sony", os: "Windows 7", graphicCard: "NVIDIA", };

💡 Chú ý: Cặp key-value cuối cùng không nhất thiết phải có dấu phẩy ,. Nhưng để đảm bảo tính đồng nhất thì bạn nên thêm vào dấu phẩy graphicCard: "NVIDIA",.

Đặc điểm này được gọi là trailing comma hay "dấu phẩy đuôi".

Ngoài ra, để khai báo object rỗng bạn có thể sử dụng một trong hai cách sau:

js Copy // Objec rỗng không có thuộc tính nào let myComputer = {}; // Hoặc sử dụng hàm khởi tạo object let yourComputer = new Object();

Trong đó, new Object() là cú pháp hàm khởi tạo của object. Cách này ít sử dụng hơn cách đầu tiên.

Cách sử dụng object trong JavaScript

Khi đã khởi tạo được object rồi thì vấn đề tiếp theo là làm sao sử dụng được object. Cụ thể là cách thức để truy cập vào thuộc tính của object.

Có 2 cách để lấy ra giá trị của một thuộc tính trong object:

• Sử dụng toán tử chấm . theo sau là tên thuộc tính.
• Sử dụng toán tử ngoặc vuông [], bên trong là tên thuộc tính.

Ví dụ mô tả cách truy cập thuộc tính object:

js Copy let myComputer = { type: "laptop", brand: "Sony", os: "Windows 7", graphicCard: "NVIDIA", }; console.log(myComputer.type); // laptop console.log(myComputer.brand); // Sony console.log(myComputer.os); // Windows 7 console.log(myComputer.graphicCard); // NVIDIA console.log(myComputer["type"]); // => laptop console.log(myComputer["brand"]); // => Sony console.log(myComputer["os"]); // => Windows 7 console.log(myComputer["graphicCard"]); // => NVIDIA

Đặc biệt, toán tử . chỉ dùng được trong trường hợp tên thuộc tính không có kí tự đặc biệt (ngoại trừ kí tự _ và $).

Khi key chứa dấu cách, hoặc các ký tự đặc biệt khác thì bạn bắt buộc phải sử dụng toán tử [].

Ví dụ:

js Copy let myComputer = { _type: "laptop", $brand: "Sony", "operating system": "Windows 7", "graphic card": "NVIDIA", }; console.log(myComputer._type); // laptop console.log(myComputer.$brand); // Sony console.log(myComputer["operating system"]); // Windows 7 console.log(myComputer.operating system); // ERROR -> lỗi cú pháp

📝 Khi key chứa dấu cách hoặc các ký tự đặc biệt (khác _ và $), bạn cần phải để key bên trong cặp dấu nháy kép "" hoặc nháy đơn ''.