Array & Object cơ bản trong JavaScript: Toàn tập dành cho Web Developer

Khi bắt đầu hành trình trở thành web developer, một trong những điều quan trọng nhất bạn phải nắm vững chính là Array & Object cơ bản trong JavaScript. Đây là hai cấu trúc dữ liệu xuất hiện trong mọi ứng dụng — từ một trang web đơn giản đến hệ thống backend phức tạp. Không hiểu rõ chúng đồng nghĩa với việc bạn sẽ rất dễ gặp bug, viết code không tối ưu và khó làm việc với thư viện hoặc framework lớn như React, Vue, Node.js hay Next.js.

Trong bài viết này, chúng ta sẽ đi sâu vào:

Array là gì, cách hoạt động và những thao tác quan trọng
Object là gì, dùng khi nào
Các thao tác nâng cao giúp bạn viết code rõ ràng hơn
Ví dụ thực tế trong phát triển web
Những best practices dành cho developer

Nội dung được viết tự nhiên, dễ hiểu, tối ưu SEO theo từ khóa “Array & Object cơ bản”.

1. Array & Object cơ bản là gì?

Trong JavaScript, Array và Object là hai kiểu dữ liệu quan trọng thuộc nhóm non-primitive (phức tạp). Chúng có khả năng chứa nhiều giá trị và hỗ trợ tổ chức dữ liệu theo cấu trúc linh hoạt.

Array là gì?

Array là danh sách có thứ tự, nơi mỗi phần tử được đánh chỉ số từ 0.

Ví dụ:

const numbers = [10, 20, 30, 40];

Object là gì?

Object là tập hợp các cặp key-value, thường dùng để mô tả một thực thể.

const user = {
  name: "Nam",
  age: 22,
  isAdmin: false
};

Cả Array và Object đều là xương sống của mọi kiểu dữ liệu phức tạp mà bạn sẽ gặp trong dự án.

2. Array cơ bản: Cách khai báo và sử dụng

Array có thể chứa bất kỳ kiểu dữ liệu nào: number, string, boolean, object thậm chí là function.

Khai báo Array

const fruits = ["apple", "banana", "orange"];

Hoặc:

const mixed = [1, "hello", true, { x: 10 }];

Truy cập phần tử

console.log(fruits[0]); // apple
console.log(fruits[2]); // orange

Thay đổi giá trị

fruits[1] = "mango";

Lấy độ dài Array

console.log(fruits.length);

3. Các phương thức Array thường dùng nhất

Dưới đây là danh sách các method mà mọi web developer cần biết:

3.1. push() – Thêm phần tử vào cuối

fruits.push("grape");

3.2. pop() – Xóa phần tử cuối

fruits.pop();

3.3. shift() – Xóa phần tử đầu

fruits.shift();

3.4. unshift() – Thêm phần tử đầu

fruits.unshift("kiwi");

3.5. map() – Tạo array mới từ array cũ

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // [2, 4, 6]

3.6. filter() – Lọc phần tử

const evens = numbers.filter(n => n % 2 === 0);

3.7. reduce() – Tính toán giá trị cuối cùng

const total = numbers.reduce((sum, n) => sum + n, 0);

4. Object cơ bản: Cách khai báo và thao tác

Khai báo Object

const user = {
  name: "Nam",
  age: 22
};

Truy cập thuộc tính

console.log(user.name);
console.log(user["age"]);

Thêm thuộc tính

user.email = "nam@example.com";

Xóa thuộc tính

delete user.age;

Duyệt Object với for…in

for (let key in user) {
  console.log(key, user[key]);
}

5. Destructuring – Cách rút gọn code hiệu quả

Destructuring giúp bạn “tách” dữ liệu ra khỏi Array hoặc Object một cách ngắn gọn.

Với Array

const [a, b] = [10, 20];

Với Object

const { name, email } = user;

Rất hữu ích trong React:

function Profile({ name, age }) {
  return <div>{name} - {age}</div>;
}

6. Spread & Rest – Công cụ mạnh mẽ khi xử lý dữ liệu

Spread (…)

Dùng để “trải” dữ liệu ra:

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];

Object:

const user2 = { ...user, age: 23 };

Rest (…)

Dùng để gom dữ liệu lại:

const [first, ...others] = [1, 2, 3, 4];