Đối tượng (Object) trong JavaScript: Hướng dẫn đầy đủ
Trong JavaScript, Object (đối tượng) là một trong những khái niệm cốt lõi nhất. Gần như mọi thứ trong JavaScript đều là object – từ array, function đến DOM element. Hiểu object là chìa khóa để thành thạo JavaScript.
Object trong JavaScript là gì?
Object là cấu trúc dữ liệu lưu trữ cặp key–value (còn gọi là property–value). Mỗi property có thể là dữ liệu hoặc hàm (gọi là method).
// Tạo object bằng Object Literal (cách phổ biến nhất)
const person = {
name: "Nguyễn An",
age: 22,
city: "Hà Nội",
isStudent: true
};
console.log(typeof person); // "object"
console.log(person.name); // "Nguyễn An"
Truy cập và cập nhật thuộc tính
const person = { name: "An", age: 22 };
// Dot notation – ưu tiên dùng
console.log(person.name); // "An"
person.age = 23; // cập nhật
// Bracket notation – dùng khi key là biến hoặc có khoảng trắng
const key = "name";
console.log(person[key]); // "An"
// Thêm thuộc tính mới
person.email = "an@gmail.com";
// Xóa thuộc tính
delete person.email;
Method – Phương thức trong Object
const person = {
name: "An",
age: 22,
// Shorthand method (ES6)
greet() {
console.log(`Xin chào, tôi là ${this.name}`);
},
sayAge() {
console.log(`Tôi ${this.age} tuổi`);
}
};
person.greet(); // "Xin chào, tôi là An"
person.sayAge(); // "Tôi 22 tuổi"
Object Destructuring (ES6)
const person = { name: "An", age: 22, city: "HN" };
// Destructuring
const { name, age } = person;
// Đặt tên biến khác + giá trị mặc định
const { name: fullName, city = "HCM" } = person;
console.log(fullName); // "An"
console.log(city); // "HN" (lấy từ object)
// Trong tham số hàm
function greet({ name, age }) {
console.log(`${name}, ${age} tuổi`);
}
greet(person); // "An, 22 tuổi"
Spread Operator với Object (ES6)
const base = { name: "An", age: 22 };
// Sao chép object
const copy = { ...base };
// Merge hai objects
const extra = { city: "HN", job: "Dev" };
const merged = { ...base, ...extra };
// → { name: "An", age: 22, city: "HN", job: "Dev" }
// Ghi đè giá trị khi merge
const updated = { ...base, age: 23 };
// → { name: "An", age: 23 }
Object.keys(), Object.values(), Object.entries()
const scores = { An: 8, Binh: 6, Cuong: 9 };
console.log(Object.keys(scores)); // ["An", "Binh", "Cuong"]
console.log(Object.values(scores)); // [8, 6, 9]
console.log(Object.entries(scores)); // [["An", 8], ["Binh", 6], ["Cuong", 9]]
// Duyệt qua entries
for (const [name, score] of Object.entries(scores)) {
console.log(`${name}: ${score}`);
}
// Lọc với entries
const highScores = Object.entries(scores)
.filter(([name, score]) => score >= 8)
.map(([name]) => name);
console.log(highScores); // ["An", "Cuong"]
Object và JSON
const person = { name: "An", age: 22 };
// Chuyển sang JSON string (để gửi lên server)
const jsonStr = JSON.stringify(person);
console.log(jsonStr); // '{"name":"An","age":22}'
// Chuyển từ JSON string (khi nhận từ server)
const obj = JSON.parse('{"name":"An","age":22}');
console.log(obj.name); // "An"
Shorthand Property (ES6)
const name = "An";
const age = 22;
// Shorthand – ngắn gọn hơn
const person = { name, age };
// → { name: "An", age: 22 }
