Học bằng cách đọc theo thứ tự

Object — Đọc và Ghi Property

Học object gom giá trị theo tên: cách tạo, đọc và ghi property, thêm và xóa, lấy toàn bộ nội dung ra.

Xử lý một sản phẩm với tên, giá, và số lượng tồn kho ở các biến riêng, và tên biến bắt đầu đụng nhau ngay khi bạn có sản phẩm thứ 2. Gom chúng vào một mảng thay vào đó, và bạn đang quản lý chúng theo vị trí — người viết code phải nhớ liệu product[1] là giá hay số lượng tồn kho.

Một object (cấu trúc dữ liệu xếp các cặp key-value trong một biến) cho phép bạn đọc và ghi giá trị theo tên thay vào đó, như product.price.

Xây Dựng Cặp Key-Value — Object Literal

Bạn xây một object bằng cách liệt kê các cặp key: value, ngăn cách bởi dấu phẩy, trong {}. Cái này gọi là object literal (viết key và value trực tiếp trong dấu ngoặc nhọn để xây một object).

Mỗi cặp riêng lẻ là một property (cặp key-value một object nắm giữ). length, từ bài 4, cũng là một property — với object, cặp key-value này chính là từ đó đang nói đến.

Key là một chuỗi, và bạn có thể bỏ dấu nháy cho các tên như name hay price. Value có thể là số, chuỗi, hay boolean — hoặc thậm chí là một mảng hay object khác. Viết cùng key hai lần, và chỉ cái viết sau cùng còn giữ lại.

Để đọc một giá trị, viết một dấu chấm sau object rồi đến tên key, như product.price. Đây là dot notation (viết trực tiếp tên key sau một dấu chấm để đọc property).

Thứ tự bạn viết không quan trọng khi đọc, nên không cần nhớ nó.

Đọc một key chưa đăng ký không báo lỗi — nó trả về undefined, giống như đọc một index ngoài phạm vi trên mảng.

Key Kết Nối Với Value Thế Nào
namepricestock"Wireless Mouse"398024product.nameproduct.priceproduct.stock
Mỗi key nối với một value. Để đọc nó, viết tên key sau một dấu chấm.
const product = {
  name: "Wireless Mouse",
  price: 3980,
  stock: 24,
};

console.log(product.name);    // Wireless Mouse
console.log(product.price);   // 3980

// Đọc một key chưa đăng ký không báo lỗi
console.log(product.color);   // undefined

// Ghi đè dùng cú pháp giống một phép gán
product.stock = 23;
console.log(product.stock);   // 23

Gom hồ sơ một thành viên vào một object và lấy ra các trường bạn cần. Các giá trị cần dùng ở trong comment của console.

① Tạo một object với 3 property: name, plan, và points.

② Hiển thị name và plan trên một dòng, định dạng thành "Minh Le / Standard".

③ Hiển thị points.

④ Đọc property email chưa đăng ký và hiển thị nguyên trạng.

(Nếu chạy đúng, phần giải thích sẽ xuất hiện.)

JavaScript / TypeScript Editor

Chạy code để xem đầu ra

Đặt Một Object Bên Trong Một Object

Như dữ liệu đơn hàng trả về từ một API, đôi khi một bản ghi cần chứa cả một nhóm thông tin bên trong nữa. Đặt một object làm value, và nó sẽ lồng vào nhau — bạn có thể nối . để đọc sâu vào bên trong, như order.customer.name.

Cẩn thận khi một key ở giữa chuỗi bị thiếu.

order.shipping.address dùng . trên order.shipping, vốn là undefined, và điều đó dừng lại với TypeError. Cách đọc qua một bước thiếu mà không dừng lại sẽ nói ở bài tiếp theo.

Một Object Lồng Nhau
orderorderId"ORD-1042"customer(một object)total12800name"Grace Lee"email"grace@..."
Value của customer là một object khác. Đọc bên trong nó bằng cách nối dấu chấm.
const order = {
  orderId: "ORD-1042",
  customer: {
    name: "Grace Lee",
    email: "grace@example.com",
  },
  total: 12800,
};

console.log(order.customer.name);    // Grace Lee
console.log(order.customer.email);   // grace@example.com

// Bạn có thể nối tiếp thao tác chuỗi vào một giá trị bạn lấy ra
console.log(order.customer.name.length);   // 9

Chỉ Định Key Bằng Chuỗi hoặc Biến — Bracket Notation

Trên một màn hình mà người dùng chọn trường nào để hiển thị, key nào cần đọc không được quyết định tại thời điểm bạn viết code. Dot notation viết tên key trực tiếp vào code, nên nó không dùng được ở đây.

Viết một chuỗi trong [], như product["price"], và chuỗi đó được đọc như key. Đây là bracket notation (đọc một property dùng chuỗi viết trong dấu ngoặc vuông làm key).

Cái trong [] được tính trước, và kết quả được dùng làm tên key — bạn thậm chí có thể viết thứ như product["item" + "Name"]. Đặt một biến vào đó, và key được quyết định lúc chạy.

Dot notation chỉ hoạt động với tên key không có ký hiệu hay khoảng trắng và không bắt đầu bằng chữ số. Một key như "release-date", có dấu gạch ngang, chỉ có thể đọc bằng bracket notation.

Cú phápKey Được Quyết Định Thế NàoKhi Nào Dùng
product.priceViết trực tiếp trong codeTên key cố định
product["release-date"]Viết dưới dạng chuỗiKey có ký hiệu hoặc khoảng trắng
product[field]Quyết định bởi nội dung một biếnKey thay đổi lúc chạy
const product = {
  name: "Wireless Mouse",
  price: 3980,
  "release-date": "2026-04-01",
};

// Viết tên key trực tiếp dưới dạng chuỗi
console.log(product["price"]);          // 3980

// Tên key sống trong một biến
const field = "name";
console.log(product[field]);            // Wireless Mouse

// Key có ký hiệu chỉ đọc được bằng bracket notation
console.log(product["release-date"]);   // 2026-04-01

// Dot notation sẽ tìm một key tên literal là "field"
console.log(product.field);             // undefined

Đọc một giá trị với key cho bởi một biến, để trường bạn hiển thị có thể chuyển đổi lúc chạy. product đã được khai báo sẵn.

① Thiết lập một biến giữ tên trường, và hiển thị giá bằng cách đọc qua biến đó.

② Đổi cùng biến đó sang tên trường tồn kho, và hiển thị số lượng tồn kho.

③ Hiển thị giá trị của key có dấu gạch ngang.

④ Đọc tên sản phẩm bằng cả dot notation lẫn bracket notation, và hiển thị chúng có bằng nhau không.

JavaScript / TypeScript Editor

Chạy code để xem đầu ra

Thêm, Xóa, và Kiểm Tra Property

Như dữ liệu trên một màn hình cài đặt, một số object có thêm trường theo thời gian, hay mất trường không còn dùng nữa. Bạn có thể thêm hoặc xóa property trên một object ngay cả sau khi nó đã được tạo.

Thêm chỉ là gán một giá trị vào một key chưa tồn tại. Viết settings.notifications = true;, và một property mới xuất hiện ngay đó. Giống như với mảng, bạn có thể thêm hoặc xóa ngay cả trên một object khai báo bằng const.

Để xóa một property, viết delete settings.language;. delete (toán tử xóa một property khỏi một object) xóa hoàn toàn key đó, nên đọc nó sau này trả về undefined.

Kiểm tra một key có tồn tại không với "language" in settings. in (toán tử trả về một key có tồn tại trên object không, dưới dạng true hoặc false) nhận một chuỗi tên key ở bên trái và một object ở bên phải.

Ngay cả một property có value là undefined cũng trả về true, miễn là chính key đó tồn tại.

Điều Gì Xảy Ra Khi Thêm, Xóa, và Kiểm Tra
Thêm quaphép gánXóa quadeleteKiểm trabằng insettings.notifications= truedeletesettings.language"language"in settingsThêm 1 keyKey đãbiến mấtTrả về truehoặc false
Thêm và xóa ghi đè chính object. in chỉ kiểm tra — nó không bao giờ ghi đè gì cả.

Một Tên Key Gõ Nhầm Không Báo Lỗi

Đọc một key không tồn tại, như member.piont, và chương trình không dừng — nó chỉ trả về undefined. Không có lỗi, bạn có thể không nhận ra cho đến khi một hiển thị trống trơn hoặc một phép tính thành NaN. Để kiểm tra một key có tồn tại không, dùng in, như "points" in member.

const settings = {
  theme: "dark",
  language: "en",
};

// Thêm chỉ là một phép gán
settings.notifications = true;
console.log(settings.notifications);   // true

// delete xóa hoàn toàn key
delete settings.language;
console.log(settings.language);        // undefined

// in trả về key có tồn tại không
console.log("language" in settings);   // false
console.log("theme" in settings);      // true

// Ngay cả với value là undefined, vẫn true nếu key tồn tại
settings.theme = undefined;
console.log("theme" in settings);      // true

Thêm và xóa các trường trên object cài đặt của một ứng dụng, và kiểm tra thứ còn lại. settings đã được khai báo sẵn.

① Thêm một trường notifications, cho việc có nhận thông báo hay không, với giá trị true.

② Xóa trường language.

③ Kiểm tra và hiển thị, từng cái một, trường bạn đã thêm và trường bạn đã xóa còn tồn tại không.

④ Hiển thị nội dung object settings nguyên trạng sau các thay đổi.

JavaScript / TypeScript Editor

Chạy code để xem đầu ra

Lấy Ra Key và Value Cùng Nhau — Object.keys / values / entries

Khi bạn muốn đếm có bao nhiêu cài đặt, hay liệt kê mọi trường đã đăng ký, viết từng tên key một không mở rộng được. Chuyển nội dung của một object thành mảng, và mọi thao tác mảng đều dùng được cho bạn.

Object.keys(object) trả về một mảng chỉ chứa key. Object.values(object) trả về một mảng chỉ chứa value, và Object.entries(object) trả về một mảng các cặp [key, value], mỗi cặp là một mảng 2 phần tử.

Không cái nào thay đổi object gốc.

Vì cái trả về là một mảng, bạn có thể đếm các trường bằng length, ghép chúng bằng join, hay tìm kiếm bằng includes. Object.keys(settings).length chính xác là số property của object.

Mảng Mỗi Phương Thức Trả Về
Object.keysObject.valuesObject.entries["name", "price"]["Mouse", 3980][["name", "Mouse"], ["price", 3980]]Mảng chỉchứa keyMảng chỉchứa valueMảng các cặpkey-value
Một ví dụ truyền một object có nameprice. Chỉ entries có một mảng làm phần tử của chính nó.
const order = {
  orderId: "ORD-1042",
  customer: "Grace Lee",
  total: 12800,
};

// Lấy ra chỉ key / chỉ value dưới dạng mảng
console.log(Object.keys(order).join(", "));       // orderId, customer, total
console.log(Object.values(order).join(" / "));    // ORD-1042 / Grace Lee / 12800

// Đếm các trường bằng length của mảng
console.log(Object.keys(order).length);           // 3

// entries trả về mảng các cặp [key, value]
console.log(Object.entries(order)[1].join(": ")); // customer: Grace Lee

Lấy nội dung của một object đơn hàng ra dưới dạng key, value, và cặp, rồi liệt kê chúng. order đã được khai báo sẵn.

① Lấy ra chỉ key, ghép bằng ", ", và hiển thị.

② Hiển thị "Grace Lee" có nằm trong các value không.

③ Hiển thị có bao nhiêu cặp key-value.

④ Định dạng mỗi cặp, từng cái một, thành "key: value", và hiển thị cả 3 dòng.

JavaScript / TypeScript Editor

Chạy code để xem đầu ra
QUIZ

Kiểm tra kiến thức

Hãy trả lời từng câu hỏi một.

Câu 1Với const user = { name: "Sato" };, chuyện gì xảy ra khi bạn đọc user.age?

Câu 2Tên key bạn muốn đọc nằm trong một biến gọi là field. Cú pháp nào lấy ra được giá trị đó?

Câu 3Object.entries(order) trả về gì?