Objects trong JavaScript là gì?

Trong bài viết này, chúng ta sẽ tìm hiểu về Objects trong JavaScript thông qua các ví dụ nhé ^^.

Ở bài viết trước, chúng ta đã tìm hiểu về các kiểu dữ liệu trong JavaScript, trong bài viết này chúng ta sẽ tập trung vào tìm hiểu Object trong Javascript nhé.

object trong JavaScript là một kiểu dữ liệu không nguyên thủy - non-primitive cho phép bạn lưu trữ nhiều giá trị với kiểu dữ liệu khác nhau.

Nếu bạn đã quen với các ngôn ngữ lập trình khác, đối tượng trong JavaScript có một chút khác biệt. Đó là chúng ta không cần phải tạo các class để tạo các đối tượng.

Một ví dụ về đối tượng - object trong JavaScript.

// tạo object có tên student
const student = {
    fullName: 'Nguyen Van A',
    class: 12
};

Ở ví dụ này, student là một object lưu trữ các giá trị có kiểu string và number.

Khai báo object trong JavaScript

Cú pháp để khai báo một object là:

const tenObject = {
   key1: value1,
   key2: value2
}

Ở đây, một object tenObject được định nghĩa. Mỗi thành viên trong object là một cặp key: value được phân tách bằng dấu phẩy và tất cả cặp key: value phải được đặt trong dấu ngoặc nhọn {}.

Ví dụ:

const user = {
  ten: 'Hà',
  tuoi: 20,
  diaChi: 'TP. HCM',
  gioiTinh: false // false là nữ, true là nam
}

// xem kiểu dữ liệu của user
console.log(typeof user); // object

Chúng ta cũng có thể tạo một object trong một dòng duy nhất. Miễn sao code của chúng ta dễ nhìn, dễ đọc là được 😊.

const user = { ten: 'Hà', tuoi: 20, diaChi: 'TP. HCM', gioiTinh: false }

Trong ví dụ trên, tên, tuoi, diaChi, gioiTinh là các khóa - key, còn Hà, 20, TP. HCM, false là các giá trị tương ứng. Bạn có thể hiểu key giống như tên của một đất nước, khi ta gọi đất nước Việt Nam thì ta biết được những thứ liên quan đến Việt Nam.

Object Properties trong JavaScript

Các cặp "key: value" của object được gọi là các thuộc tính - properties. Như ví dụ trên thì ten: 'Hà', tuoi: 20,... được gọi là các thuộc tính của object user.

Accessing Object Properties

Để lấy các giá trị của thuộc tính thì chúng ta có thể sử dụng các cách sau:

1. sử dụng dot Notation

Đây là cú pháp của dot Notation.

tenObject.key

Tiếp tục sử dụng ví dụ trên, để lấy giá trị của ten trong object user thì ta làm như sau:

console.log(user.ten); // Hà

1. sử dụng bracket Notation

Đây là cú pháp của bracket Notation.

tenObject["propertyName"]

Tiếp tục sử dụng ví dụ trên, để lấy giá trị của diaChi trong object user thì ta làm như sau:

console.log(user['diaChi']); // TP. HCM

Nested Objects trong JavaScript

Một object có thể chứa nhiều object khác ^^. object này còn gọi là object lồng nhau - Nested Objects.

Ví dụ:

const user = {
  ten: 'Hà',
  tuoi: 20,
  diaChi: 'TP. HCM',
  gioiTinh: false, // false là nữ, true là nam
  thongTinTaiKhoan: {
    email: 'ha@gmail.com',
    facebook: null,
  }
}

// lấy giá trị tên
console.log(user.ten); // hoặc console.log(user['ten']);
// lấy giá trị thongTinTaiKhoan 
console.log(user.thongTinTaiKhoan); 
// hoặc console.log(user['thongTinTaiKhoan']);

Kết quả ví dụ trên:

Hà
{ email: 'ha@gmail.com', facebook: null }

Khi ta console.log(user.thongTinTaiKhoan) kết quả sẽ trả về một object khác { email: 'ha@gmail.com', facebook: null }. Nếu bạn muốn lấy tiếp giá trị của email thì ta sẽ làm như bình thường ^^.

// lấy email trong thongTinTaiKhoan

console.log(user.thongTinTaiKhoan.email); // ha@gmail.com

// hoặc
const taiKhoan = user.thongTinTaiKhoan;
console.log(taiKhoan.email); // ha@gmail.com

Object Methods trong JavaScript

Như mình đã nói ở trên, chúng ta có thể sử dụng các kiểu dữ liệu khác nhau trong object. Như vậy một object có thể chứa function.

Method JavaScript là một thuộc tính chứa một khai báo hàm.

Ví dụ:

const person = {
    name: 'Minh',
    age: 20,
    // sử dụng function như một value bình thường
    sayHi: function() { console.log('hi 😁') }
}

person.sayHi(); // hi 😁

Ở ví dụ này, một function được sử dụng làm value cho key sayHi. Bây giờ, chúng ta thử console.log(person.sayHi) để xem giá trị của nó là gì:

ƒ () { console.log('hi 😁') }

Như bạn thấy kết quả trả về là một định nghĩa hàm. Đó là lý do tại sao, để hàm được thực thi chúng ta cần sử dụng person.sayHi() thay vì person.sayHi.

Built-In Methods trong JavaScript

Trong JavaScript, có rất nhiều phương thức được tích hợp sẵn - Built-In Methods.

Ví dụ:

let number = '29.02';
let result = parseInt(number);

console.log(result); // 29

Ở đây, method parseInt() của number được sử dụng để chuyển đổi giá trị chuỗi số thành giá trị số nguyên.

Thêm method vào Object

Chúng ta có thể thêm một method trong một object.

Ví dụ:

// tạo một object trống - chưa có thuộc tính
let student = { };

// thêm thuộc tính
student.name = 'Hùng';

// thêm một method
student.sayHi = function() {
    console.log('hi 🤗');
}

// gọi method
student.sayHi(); // hi 🤗

Trong ví dụ trên, một object student trống được tạo. Sau đó, thuộc tính name và method sayhi được thêm vào object. Bằng cách này, chúng ta có thể thêm một method cũng như thuộc tính vào một object.

JavaScript this Keyword

Để truy cập thuộc tính của một object từ bên trong một phương thức của cùng đối tượng, bạn cần sử dụng từ khóa this.

Cùng xem một ví dụ.

const person = {
    name: 'Minh',
    age: 20,

    // lấy giá trị của name = this.name
    sayHi: function() { console.log('Tên mình là: ' + ' ' + this.name); }
};

person.sayHi();

Trong ví dụ trên, một object person được tạo. Nó chứa các thuộc tính name và age và một method sayHi.

Trong phương thức sayHi, khi chúng ta muốn sử dụng giá trị của thuộc tính, chúng ta cần dùng từ khóa this.

Hàm bên trong của một object có thể sử dụng các biến của nó theo cách tương tự một hàm bình thường.

Ví dụ:

const person = {
    name: 'Minh',
    age: 20,

    // lấy giá trị của name = this.name
    sayHi: function() { 
      let icon = '😊'; 
      console.log(`Tên mình là: ${this.name} ${icon}`); 
    }
};

person.sayHi(); // Tên mình là: Minh 😊

Trong JavaScript, từ khóa this khi được sử dụng với method của object sẽ tham chiếu đến object đó.