Tổng hợp Object (Đối tượng) trong JavaScript
Trần Thị Vân
- 110
- 25/07/2026
Tổng hợp kiến thức về Object (Đối tượng) trong JavaScript từ cơ bản đến nâng cao: cách tạo Object, truy cập thuộc tính, phương thức, this, Prototype, JSON, Destructuring, Spread, Getter, Setter cùng nhiều ví dụ thực tế dễ hiểu, chi tiết như nào hãy cùng chúng tôi phân tích:
Object (Đối tượng) là một trong những nền tảng quan trọng nhất của JavaScript. Nếu biến dùng để lưu một giá trị đơn lẻ thì Object được tạo ra để lưu nhiều dữ liệu liên quan trong cùng một thực thể. Từ các đối tượng đơn giản như thông tin người dùng cho đến các thành phần phức tạp như DOM, Promise hay Date đều được xây dựng dựa trên Object.
Hiểu rõ Object không chỉ giúp viết mã ngắn gọn, dễ quản lý mà còn là nền tảng để tiếp cận lập trình hướng đối tượng, thao tác dữ liệu JSON, làm việc với API và phát triển các ứng dụng web hiện đại.
Bài viết này tổng hợp đầy đủ kiến thức về Object trong JavaScript từ cơ bản đến nâng cao, đồng thời giải thích theo hướng dễ hiểu, nhiều ví dụ thực tế và tập trung vào bản chất thay vì chỉ ghi nhớ cú pháp.

Object trong JavaScript là gì?
Object là kiểu dữ liệu dùng để lưu trữ tập hợp các cặp key (khóa) và value (giá trị). Mỗi key đại diện cho một thuộc tính hoặc một phương thức của đối tượng.
Ví dụ, một người dùng có thể được biểu diễn bằng một Object gồm tên, tuổi, địa chỉ và số điện thoại thay vì tạo nhiều biến riêng lẻ.
const user = {
name: "An",
age: 25,
city: "Hà Nội"
};
Trong ví dụ trên:
- user là Object.
- name, age, city là các thuộc tính.
- Mỗi thuộc tính đều có một giá trị tương ứng.
Vì sao Object quan trọng?
Object xuất hiện gần như ở mọi nơi trong JavaScript. Bất kỳ ứng dụng web nào cũng sử dụng Object để tổ chức dữ liệu và trao đổi thông tin.
- Quản lý dữ liệu có cấu trúc.
- Đại diện cho đối tượng trong thực tế.
- Dễ mở rộng khi thêm thuộc tính mới.
- Thuận tiện khi truyền dữ liệu giữa các hàm.
- Là nền tảng của JSON.
- Được sử dụng trong hầu hết Framework hiện đại.
Cấu trúc của Object
Một Object gồm nhiều cặp khóa và giá trị.
const product = {
id: 1,
name: "Laptop",
price: 25000000,
stock: 12
};
| Thành phần | Ý nghĩa |
|---|---|
| id | Mã sản phẩm |
| name | Tên sản phẩm |
| price | Giá bán |
| stock | Số lượng còn lại |
Khóa thường là chuỗi, còn giá trị có thể là bất kỳ kiểu dữ liệu nào của JavaScript.
Các cách tạo Object
Sử dụng Object Literal
Đây là cách phổ biến và được khuyến khích sử dụng.
const student = {
name: "Lan",
age: 20
};
Ưu điểm:
- Ngắn gọn.
- Dễ đọc.
- Hiệu quả.
Sử dụng Object Constructor
const student = new Object();
student.name = "Lan";
student.age = 20;
Cách này ít được sử dụng vì dài hơn Object Literal.
Tạo Object bằng Constructor Function
function User(name, age) {
this.name = name;
this.age = age;
}
const user1 = new User("Nam", 28);
Cách này từng rất phổ biến trước khi ES6 xuất hiện.
Tạo Object bằng Class
class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
const user = new User("An", 30);
Class thực chất vẫn hoạt động dựa trên Object và Prototype nhưng cú pháp trực quan hơn.
Những kiểu dữ liệu có thể lưu trong Object
Một ưu điểm lớn của Object trong JavaScript là mỗi thuộc tính có thể chứa bất kỳ kiểu dữ liệu nào. Điều này giúp Object trở thành cấu trúc dữ liệu cực kỳ linh hoạt, phù hợp để mô tả các thực thể trong ứng dụng.
Lưu chuỗi
const user = {
name: "Nguyễn Văn A"
};
Lưu số
const product = {
price: 1999000
};
Lưu giá trị Boolean
const account = {
active: true
};
Lưu mảng
const course = {
lessons: ["HTML", "CSS", "JavaScript"]
};
Mảng thường được dùng khi một thuộc tính cần lưu nhiều giá trị cùng loại.
Lưu Object khác
const employee = {
name: "Minh",
address: {
city: "Đà Nẵng",
district: "Hải Châu"
}
};
Đây được gọi là Object lồng nhau (Nested Object).
Lưu hàm
const person = {
name: "Lan",
sayHello() {
return "Xin chào!";
}
};
Khi một thuộc tính chứa hàm, nó thường được gọi là method (phương thức).
Truy cập thuộc tính của Object
Có hai cách phổ biến để lấy giá trị của một thuộc tính.
Sử dụng dấu chấm
const car = {
brand: "Toyota"
};
console.log(car.brand);
Đây là cách được sử dụng nhiều nhất vì ngắn gọn và dễ đọc.
Sử dụng dấu ngoặc vuông
const car = {
brand: "Toyota"
};
console.log(car["brand"]);
Cách này đặc biệt hữu ích khi tên thuộc tính được lưu trong biến.
const key = "brand";
console.log(car[key]);
Khi nào nên dùng ngoặc vuông?
- Thuộc tính được xác định động.
- Tên thuộc tính chứa khoảng trắng.
- Tên thuộc tính có ký tự đặc biệt.
- Làm việc với dữ liệu từ API.
Thêm thuộc tính mới
JavaScript cho phép bổ sung thuộc tính bất cứ lúc nào sau khi Object được tạo.
const student = {
name: "Hùng"
};
student.age = 21;
Sau khi thêm, Object sẽ có thêm thuộc tính age.
Cũng có thể thêm bằng cú pháp ngoặc vuông.
student["city"] = "Huế";
Cập nhật giá trị thuộc tính
Muốn thay đổi dữ liệu chỉ cần gán lại giá trị mới.
const product = {
price: 500
};
product.price = 650;
Nếu thuộc tính chưa tồn tại thì JavaScript sẽ tự động tạo mới.
Xóa thuộc tính
Để loại bỏ một thuộc tính khỏi Object, sử dụng từ khóa delete.
const book = {
title: "JavaScript",
year: 2024
};
delete book.year;
Sau thao tác này, Object chỉ còn thuộc tính title.
Kiểm tra sự tồn tại của thuộc tính
Sử dụng toán tử in
const user = {
name: "Nam"
};
console.log("name" in user);
Kết quả trả về là true.
Sử dụng hasOwnProperty()
const user = {
name: "Nam"
};
console.log(user.hasOwnProperty("name"));
Phương thức này chỉ kiểm tra các thuộc tính thuộc chính Object đó mà không xét đến Prototype.
Duyệt qua các thuộc tính trong Object
Sử dụng for...in
const user = {
name: "An",
age: 26,
city: "Hồ Chí Minh"
};
for (const key in user) {
console.log(key, user[key]);
}
Vòng lặp sẽ lần lượt lấy từng khóa trong Object.
Kết hợp Object.keys()
const user = {
name: "An",
age: 26
};
Object.keys(user).forEach(function(key) {
console.log(key, user[key]);
});
Object.keys() trả về một mảng chứa toàn bộ tên thuộc tính.
Kết hợp Object.values()
const user = {
name: "An",
age: 26
};
console.log(Object.values(user));
Kết quả là một mảng chỉ gồm các giá trị của Object.
Kết hợp Object.entries()
const user = {
name: "An",
age: 26
};
console.log(Object.entries(user));
Mỗi phần tử trong mảng trả về sẽ gồm một cặp key và value, rất hữu ích khi cần xử lý dữ liệu hoặc chuyển đổi sang định dạng khác.
Phương thức trong Object
Ngoài việc lưu dữ liệu, Object còn có thể chứa các hàm. Khi một hàm được khai báo bên trong Object, nó được gọi là phương thức (Method). Phương thức giúp Object có thể thực hiện các hành động liên quan đến chính dữ liệu mà nó đang quản lý.
Khai báo phương thức theo cách truyền thống
const user = {
name: "Long",
greet: function() {
return "Xin chào!";
}
};
console.log(user.greet());
Khai báo phương thức theo cú pháp rút gọn
Từ ES6, JavaScript cho phép viết ngắn gọn hơn mà vẫn giữ nguyên chức năng.
const user = {
name: "Long",
greet() {
return "Xin chào!";
}
};
Cách viết này được sử dụng phổ biến trong các dự án hiện đại vì ngắn gọn và dễ đọc.
Từ khóa this trong Object
this đại diện cho Object đang gọi phương thức. Đây là một trong những khái niệm quan trọng khi làm việc với Object.
const user = {
name: "Minh",
sayName() {
return this.name;
}
};
console.log(user.sayName());
Trong ví dụ trên, this.name tương đương với user.name.
Ví dụ thực tế
const employee = {
firstName: "Ngọc",
lastName: "Anh",
fullName() {
return this.firstName + " " + this.lastName;
}
};
console.log(employee.fullName());
Việc sử dụng this giúp phương thức luôn hoạt động đúng ngay cả khi Object được gán cho biến khác.
Object lồng nhau (Nested Object)
Trong nhiều trường hợp, dữ liệu cần được tổ chức theo nhiều cấp. Khi đó một thuộc tính của Object sẽ chứa thêm một Object khác.
const company = {
name: "ABC",
address: {
city: "Hà Nội",
district: "Ba Đình",
street: "Kim Mã"
}
};
Để truy cập dữ liệu bên trong Object lồng nhau, chỉ cần nối các thuộc tính bằng dấu chấm.
console.log(company.address.city);
Lồng nhiều cấp
const school = {
classes: {
classA: {
teacher: "Hoa"
}
}
};
console.log(school.classes.classA.teacher);
Mặc dù JavaScript không giới hạn số cấp lồng nhau nhưng không nên thiết kế quá sâu vì sẽ làm mã nguồn khó bảo trì.
Object chứa mảng
Một thuộc tính có thể chứa một mảng để lưu nhiều phần tử cùng loại.
const student = {
name: "An",
subjects: [
"Toán",
"Lý",
"Tin học"
]
};
Truy cập từng phần tử như khi làm việc với mảng thông thường.
console.log(student.subjects[0]);
Mảng chứa Object
Đây là kiểu dữ liệu xuất hiện rất thường xuyên khi nhận dữ liệu từ API hoặc truy vấn cơ sở dữ liệu.
const users = [
{
id: 1,
name: "An"
},
{
id: 2,
name: "Bình"
},
{
id: 3,
name: "Chi"
}
];
Duyệt dữ liệu bằng vòng lặp.
users.forEach(function(user) {
console.log(user.name);
});
Phần lớn dữ liệu JSON trên Internet đều có cấu trúc tương tự.
Sao chép Object
Nhiều lập trình viên mới thường nhầm lẫn giữa việc gán Object và sao chép Object.
Gán trực tiếp
const user1 = {
name: "An"
};
const user2 = user1;
user2.name = "Lan";
console.log(user1.name);
Kết quả sẽ là Lan vì cả hai biến đều tham chiếu đến cùng một Object trong bộ nhớ.
Sử dụng Object.assign()
const user1 = {
name: "An"
};
const user2 = Object.assign({}, user1);
Đây là cách sao chép nông (Shallow Copy).
Sử dụng toán tử Spread
const user1 = {
name: "An",
age: 25
};
const user2 = {
...user1
};
Đây là cách được sử dụng rộng rãi trong JavaScript hiện đại.
Hợp nhất nhiều Object
Khi cần kết hợp dữ liệu từ nhiều Object, có thể sử dụng Object.assign() hoặc Spread.
Sử dụng Object.assign()
const info = {
name: "An"
};
const contact = {
phone: "0123456789"
};
const result = Object.assign({}, info, contact);
Sử dụng Spread
const result = {
...info,
...contact
};
Nếu có nhiều thuộc tính trùng tên thì giá trị của Object phía sau sẽ ghi đè lên Object phía trước.
Object.freeze()
Phương thức này giúp khóa Object để không thể thêm, sửa hoặc xóa thuộc tính.
const config = {
version: "1.0"
};
Object.freeze(config);
config.version = "2.0";
Sau khi bị đóng băng, Object vẫn tồn tại nhưng dữ liệu không còn thay đổi được.
Object.seal()
Khác với Object.freeze(), Object.seal() vẫn cho phép cập nhật giá trị của thuộc tính hiện có nhưng không thể thêm hoặc xóa thuộc tính.
const account = {
username: "admin"
};
Object.seal(account);
account.username = "administrator";
Đây là lựa chọn phù hợp khi muốn giữ nguyên cấu trúc Object nhưng vẫn cho phép cập nhật dữ liệu.
Các phương thức Object tĩnh thường dùng
JavaScript cung cấp nhiều phương thức tĩnh giúp thao tác với Object nhanh chóng mà không cần tự viết các hàm xử lý. Đây là những phương thức được sử dụng rất thường xuyên trong các dự án thực tế.
Object.keys()
Trả về một mảng chứa toàn bộ tên thuộc tính của Object.
const user = {
name: "An",
age: 25,
city: "Hà Nội"
};
const keys = Object.keys(user);
console.log(keys);
Kết quả:
["name", "age", "city"]
Object.values()
Trả về một mảng chỉ chứa các giá trị của Object.
const user = {
name: "An",
age: 25,
city: "Hà Nội"
};
const values = Object.values(user);
console.log(values);
Kết quả:
["An", 25, "Hà Nội"]
Object.entries()
Trả về mảng gồm các cặp key và value.
const user = {
name: "An",
age: 25
};
const entries = Object.entries(user);
console.log(entries);
Kết quả:
[["name", "An"], ["age", 25]]
Phương thức này rất hữu ích khi cần chuyển Object sang mảng để xử lý bằng các phương thức như map(), filter() hoặc reduce().
Object.fromEntries()
Đây là phương thức ngược lại với Object.entries(). Nó chuyển một mảng gồm các cặp key và value thành Object.
const data = [
["name", "An"],
["age", 25]
];
const user = Object.fromEntries(data);
console.log(user);
Object.hasOwn()
Được bổ sung trong các phiên bản JavaScript hiện đại để kiểm tra một thuộc tính có tồn tại trực tiếp trên Object hay không.
const user = {
name: "Lan"
};
console.log(Object.hasOwn(user, "name"));
Phương thức này được xem là lựa chọn hiện đại hơn trong nhiều trường hợp thay cho hasOwnProperty().
Destructuring Object
Destructuring là cú pháp giúp lấy dữ liệu từ Object một cách nhanh gọn mà không cần truy cập từng thuộc tính.
Destructuring cơ bản
const user = {
name: "An",
age: 26
};
const { name, age } = user;
console.log(name);
console.log(age);
Sau khi destructuring, có thể sử dụng trực tiếp biến name và age.
Đổi tên biến
const user = {
name: "An"
};
const { name: fullName } = user;
console.log(fullName);
Đây là cách hữu ích khi muốn tránh trùng tên biến.
Thiết lập giá trị mặc định
const user = {
name: "An"
};
const {
name,
age = 18
} = user;
Nếu thuộc tính không tồn tại thì JavaScript sẽ sử dụng giá trị mặc định.
Spread Operator với Object
Toán tử Spread giúp sao chép hoặc kết hợp Object với cú pháp ngắn gọn.
Sao chép Object
const product = {
id: 1,
name: "Laptop"
};
const clone = {
...product
};
Thêm thuộc tính mới
const product = {
id: 1,
name: "Laptop"
};
const newProduct = {
...product,
price: 25000000
};
Ghi đè thuộc tính
const product = {
id: 1,
price: 200
};
const update = {
...product,
price: 300
};
Thuộc tính xuất hiện sau sẽ ghi đè thuộc tính cùng tên trước đó.
Rest Property trong Object
Rest Property cho phép gom các thuộc tính còn lại thành một Object mới.
const user = {
id: 1,
name: "An",
age: 25,
city: "Hà Nội"
};
const { id, ...info } = user;
console.log(info);
Biến info sẽ chứa toàn bộ các thuộc tính ngoại trừ id.
So sánh Object trong JavaScript
Một điểm dễ gây nhầm lẫn là hai Object có cùng dữ liệu chưa chắc đã bằng nhau.
So sánh bằng toán tử ===
const obj1 = {
name: "An"
};
const obj2 = {
name: "An"
};
console.log(obj1 === obj2);
Kết quả là false.
Lý do là JavaScript so sánh địa chỉ tham chiếu trong bộ nhớ chứ không so sánh nội dung.
Hai biến cùng tham chiếu một Object
const obj1 = {
name: "An"
};
const obj2 = obj1;
console.log(obj1 === obj2);
Kết quả lúc này là true vì cả hai biến đều tham chiếu đến cùng một Object.
Optional Chaining với Object
Optional Chaining giúp truy cập các thuộc tính lồng nhau mà không gây lỗi nếu một thuộc tính nào đó không tồn tại.
const user = {
profile: {
name: "An"
}
};
console.log(user.profile?.name);
Nếu profile không tồn tại, biểu thức sẽ trả về undefined thay vì phát sinh lỗi.
Ví dụ nhiều cấp
const company = {
address: {
city: "Đà Nẵng"
}
};
console.log(company.address?.city);
console.log(company.address?.district);
Đây là cú pháp được sử dụng rất nhiều khi xử lý dữ liệu trả về từ API vì không phải mọi thuộc tính đều luôn tồn tại.
Nullish Coalescing với Object
Toán tử ?? giúp thiết lập giá trị mặc định khi thuộc tính nhận giá trị null hoặc undefined.
const user = {
name: "An"
};
const age = user.age ?? 18;
console.log(age);
Kết quả sẽ là 18 vì thuộc tính age chưa được khai báo.
Khác với toán tử ||, toán tử ?? không coi các giá trị như 0, false hoặc chuỗi rỗng là không hợp lệ.
Object và JSON khác nhau như thế nào?
Nhiều người mới học JavaScript thường nhầm lẫn giữa Object và JSON vì chúng có cấu trúc khá giống nhau. Tuy nhiên, đây là hai khái niệm hoàn toàn khác.
| Tiêu chí | Object | JSON |
|---|---|---|
| Bản chất | Kiểu dữ liệu của JavaScript | Định dạng trao đổi dữ liệu |
| Hỗ trợ hàm | Có | Không |
| Dấu ngoặc kép | Không bắt buộc với key hợp lệ | Bắt buộc với mọi key |
| Có thể chứa undefined | Có | Không |
| Thực thi trực tiếp | Có | Không |
Ví dụ Object
const user = {
name: "An",
age: 25
};
Ví dụ JSON
{
"name": "An",
"age": 25
}
JSON chủ yếu được sử dụng để truyền dữ liệu giữa trình duyệt và máy chủ, còn Object dùng để xử lý dữ liệu trong chương trình JavaScript.
Chuyển đổi giữa Object và JSON
JavaScript cung cấp sẵn hai phương thức giúp chuyển đổi qua lại giữa Object và JSON.
Chuyển Object thành JSON
const user = {
name: "An",
age: 25
};
const json = JSON.stringify(user);
console.log(json);
Kết quả trả về là một chuỗi JSON.
Chuyển JSON thành Object
const json = '{"name":"An","age":25}';
const user = JSON.parse(json);
console.log(user);
Đây là thao tác rất phổ biến khi nhận dữ liệu từ API.
Object Descriptors
Mỗi thuộc tính trong Object không chỉ có giá trị mà còn đi kèm các thuộc tính mô tả (Property Descriptor). Chúng quyết định việc thuộc tính có thể ghi đè, liệt kê hoặc xóa hay không.
Object.defineProperty()
const user = {};
Object.defineProperty(user, "name", {
value: "An",
writable: false,
enumerable: true,
configurable: false
});
Một số thuộc tính quan trọng gồm:
- writable: Cho phép thay đổi giá trị.
- enumerable: Cho phép xuất hiện khi duyệt Object.
- configurable: Cho phép xóa hoặc cấu hình lại thuộc tính.
Xem Property Descriptor
const user = {
name: "An"
};
console.log(Object.getOwnPropertyDescriptor(user, "name"));
Phương thức này rất hữu ích khi cần tìm hiểu cách một thuộc tính được định nghĩa.
Getter và Setter
Getter và Setter cho phép kiểm soát quá trình đọc và ghi dữ liệu của Object mà không cần thay đổi cách truy cập từ bên ngoài.
Sử dụng Getter
const user = {
firstName: "Nguyễn",
lastName: "An",
get fullName() {
return this.firstName + " " + this.lastName;
}
};
console.log(user.fullName);
Getter được truy cập giống như một thuộc tính thay vì gọi như một hàm.
Sử dụng Setter
const user = {
firstName: "",
lastName: "",
set fullName(value) {
const parts = value.split(" ");
this.firstName = parts[0];
this.lastName = parts[1];
}
};
user.fullName = "Nguyễn An";
Setter giúp kiểm tra, chuẩn hóa hoặc xử lý dữ liệu trước khi lưu vào Object.
Prototype của Object
Prototype là cơ chế kế thừa cốt lõi trong JavaScript. Mỗi Object đều liên kết với một Prototype và có thể truy cập các thuộc tính hoặc phương thức từ Prototype đó.
Tạo Object bằng Object.create()
const person = {
greet() {
return "Xin chào";
}
};
const user = Object.create(person);
console.log(user.greet());
Trong ví dụ trên, Object user không có phương thức greet() nhưng vẫn sử dụng được nhờ kế thừa từ Prototype.
Kiểm tra Prototype
const user = {
name: "An"
};
console.log(Object.getPrototypeOf(user));
Việc hiểu Prototype sẽ giúp dễ tiếp cận các chủ đề nâng cao như Class, kế thừa và cơ chế hoạt động của JavaScript.
Một số lỗi thường gặp khi làm việc với Object
Truy cập thuộc tính không tồn tại
const user = {
name: "An"
};
console.log(user.age);
JavaScript sẽ trả về undefined thay vì phát sinh lỗi.
Quên sử dụng this
const user = {
name: "An",
showName() {
return this.name;
}
};
Nếu bỏ từ khóa this, JavaScript sẽ tìm biến trong phạm vi hiện tại thay vì trong Object.
So sánh hai Object bằng ===
Toán tử === chỉ so sánh địa chỉ tham chiếu chứ không so sánh nội dung, vì vậy đây là lỗi mà người mới học rất dễ gặp.
Sao chép Object bằng phép gán
Việc gán trực tiếp chỉ tạo thêm một biến cùng tham chiếu đến Object cũ, không tạo ra một bản sao độc lập.
Thay đổi Object đã được freeze()
Sau khi gọi Object.freeze(), mọi thao tác thêm, sửa hoặc xóa thuộc tính sẽ không có hiệu lực.
Kinh nghiệm sử dụng Object hiệu quả
- Đặt tên thuộc tính ngắn gọn nhưng thể hiện rõ ý nghĩa.
- Không nên tạo Object có quá nhiều cấp lồng nhau.
- Ưu tiên sử dụng cú pháp Object Literal.
- Sử dụng Spread để sao chép hoặc hợp nhất Object.
- Dùng Optional Chaining khi làm việc với dữ liệu từ API.
- Sử dụng Destructuring để mã nguồn ngắn gọn hơn.
- Đặt các phương thức liên quan ngay trong Object để tăng tính tổ chức.
- Chỉ lưu những dữ liệu thực sự liên quan trong cùng một Object.
Kết luận
Object là nền tảng quan trọng nhất của JavaScript và xuất hiện trong gần như mọi chương trình, từ các đoạn mã đơn giản đến những ứng dụng web quy mô lớn. Việc nắm vững cách tạo Object, truy cập thuộc tính, sử dụng phương thức, làm việc với Prototype, Getter, Setter, Destructuring, Spread, JSON và các phương thức tĩnh sẽ giúp bạn viết mã rõ ràng, dễ bảo trì và tối ưu hơn.
Thay vì chỉ ghi nhớ cú pháp, hãy luyện tập bằng cách xây dựng các Object mô phỏng dữ liệu thực tế như người dùng, sản phẩm, đơn hàng hoặc bài viết. Khi hiểu được bản chất của Object, bạn sẽ tiếp cận các kiến thức nâng cao như lập trình hướng đối tượng, thao tác với API, Framework và thư viện JavaScript hiện đại một cách dễ dàng hơn.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *