Tạo bởi Trần Văn Điêp|
ReactJS

[Share Code] Ôn tập Object & Function in Javascript

Trong thế giới lập trình web, JavaScript được xem là “trái tim” của mọi ứng dụng front-end hiện đại. Dù bạn đang học để trở thành Front-end Developer, Full-stack Developer hay đơn giản chỉ muốn hiểu cách các trang web hoạt động, việc nắm vững Object và Function trong JavaScript là điều không thể bỏ qua. Hai khái niệm này là nền tảng giúp bạn hiểu sâu hơn về cách JavaScript quản lý dữ liệu, tổ chức mã nguồn và tái sử dụng logic hiệu quả.

Đặc biệt, Object (đối tượng) chính là linh hồn của JavaScript – bởi hầu hết mọi thứ trong ngôn ngữ này đều là object, từ mảng, hàm, đến thậm chí cả chuỗi. Còn Function (hàm) giúp chúng ta xử lý logic, giảm lặp lại mã và tăng tính tái sử dụng.
Nếu bạn từng tự hỏi: “Làm sao để lưu trữ thông tin sinh viên và hiển thị ra màn hình?” hay “Làm sao để viết chương trình gọn gàng, dễ bảo trì hơn?”, thì bài viết này chính là dành cho bạn.

Hãy cùng ôn tập và củng cố kiến thức về Object và Function trong JavaScript, thông qua những ví dụ thực tế, rõ ràng và dễ hiểu – giúp bạn không chỉ hiểu mà còn ứng dụng ngay vào dự án thực tế.

Khái niệm Object trong JavaScript

Trong JavaScript, Object là một cấu trúc dữ liệu dùng để lưu trữ các cặp key – value. Nó cho phép bạn nhóm các thuộc tính và hành vi của một thực thể (ví dụ: sinh viên, sản phẩm, xe hơi, v.v.) vào cùng một nơi.

Ví dụ cơ bản về Object

let student = {
  name: "Nguyen Van A",
  age: 20,
  address: "Ha Noi",
  email: "vana@example.com",
  phone: "0123456789"
};

Ở đây, student là một object chứa các thuộc tính mô tả thông tin của sinh viên.

Bạn có thể truy cập dữ liệu bằng hai cách:

console.log(student.name);      // Cách 1: dot notation
console.log(student["email"]);  // Cách 2: bracket notation

Đặc điểm của Object

  • Lưu trữ nhiều giá trị trong một biến duy nhất.

  • Mỗi thuộc tính có thể chứa bất kỳ kiểu dữ liệu nào (chuỗi, số, mảng, hàm, object khác...).

  • Có thể thêm, sửa, xóa thuộc tính dễ dàng.

Ví dụ:

student.age = 21; // cập nhật
student.gender = "Nam"; // thêm thuộc tính mới
delete student.phone; // xóa thuộc tính

Objects là nền tảng cho lập trình hướng đối tượng trong JavaScript — giúp mã dễ bảo trì, mở rộng và tổ chức tốt hơn.

Function trong JavaScript – Linh hồn của logic

Function là một khối mã (block of code) được định nghĩa một lần nhưng có thể được sử dụng nhiều lần. Nó giúp chương trình trở nên gọn gàng, dễ hiểu và có khả năng tái sử dụng.

Cú pháp cơ bản

function sayHello() {
  console.log("Xin chào bạn!");
}

sayHello(); // Gọi hàm

Function có tham số và trả về giá trị

function sum(a, b) {
  return a + b;
}

let result = sum(5, 10);
console.log("Tổng là:", result);

Các loại function phổ biến

  1. Hàm thông thường (Function Declaration)

    function greet(name) {
  console.log("Hello " + name);
}

  2. Hàm biểu thức (Function Expression)

    const greet = function(name) {
  console.log("Hello " + name);
};

  3. Arrow Function (ES6)

    const greet = (name) => console.log(`Hello ${name}`);

Hàm là “công cụ tư duy” giúp bạn xử lý dữ liệu, kết hợp với object để tạo nên các mô hình phức tạp hơn.

Kết hợp Object và Function – Sức mạnh thực sự

Khi Object chứa các function bên trong, ta gọi đó là phương thức (method). Điều này giúp object có thể hành động chứ không chỉ mô tả.

Ví dụ:

let student = {
  name: "Nguyen Van A",
  age: 20,
  showInfo: function() {
    console.log(`Tên: ${this.name}, Tuổi: ${this.age}`);
  }
};

student.showInfo();

Ở đây, showInfo() là một method của object student. Từ khóa this đại diện cho chính object đang được gọi.

Tạo Class Object trong JavaScript (ES6)

Từ phiên bản ECMAScript 6 (ES6), JavaScript giới thiệu Class – cú pháp mới giúp việc lập trình hướng đối tượng trở nên dễ đọc và gần gũi hơn.
Một class có thể chứa:

  • Thuộc tính (property): mô tả đặc điểm.

  • Phương thức (method): mô tả hành vi.

Ví dụ: Tạo class Student

class Student {
  constructor(name, age, address, email, phone) {
    this.name = name;
    this.age = age;
    this.address = address;
    this.email = email;
    this.phone = phone;
  }

  nhap() {
    this.name = prompt("Nhập tên sinh viên:");
    this.age = prompt("Nhập tuổi:");
    this.address = prompt("Nhập địa chỉ:");
    this.email = prompt("Nhập email:");
    this.phone = prompt("Nhập số điện thoại:");
  }

  hienthi() {
    console.log(`--- Thông tin sinh viên ---`);
    console.log(`Tên: ${this.name}`);
    console.log(`Tuổi: ${this.age}`);
    console.log(`Địa chỉ: ${this.address}`);
    console.log(`Email: ${this.email}`);
    console.log(`Số điện thoại: ${this.phone}`);
  }
}

// Tạo hai đối tượng sinh viên
let stdA = new Student();
let stdB = new Student();

// Nhập và hiển thị thông tin
stdA.nhap();
stdA.hienthi();

stdB.nhap();
stdB.hienthi();

Phân tích ví dụ

  • constructor() là hàm khởi tạo, được gọi tự động khi tạo object mới.

  • nhap() cho phép người dùng nhập thông tin qua prompt().

  • hienthi() in thông tin ra console.

  • Cách viết này giúp mã gọn gàng, dễ hiểu, dễ mở rộng – đúng tinh thần OOP.

Một số lời khuyên khi làm việc với Object & Function

  1. Sử dụng từ khóa this đúng cách
    this đại diện cho object hiện tại. Nếu gọi hàm mà không có ngữ cảnh object, this có thể trở thành undefined hoặc trỏ đến window.

  2. Tạo object bằng class thay vì literal khi cần nhiều bản sao
    Nếu bạn phải tạo nhiều sinh viên, việc dùng class sẽ tối ưu hơn việc khai báo object thủ công.

  3. Luôn tách logic thành các hàm nhỏ
    Việc này giúp mã dễ đọc, dễ test và dễ bảo trì.

  4. Sử dụng Arrow Function khi cần ngữ cảnh “this” của cấp trên
    Arrow function không tạo phạm vi this riêng, rất hữu ích khi làm việc với callback hoặc trong event handler.

  5. Comment rõ ràng, đặt tên biến và hàm có ý nghĩa
    Một hàm calculateTotalPrice() rõ ràng hơn nhiều so với calc().

Ứng dụng thực tế: Quản lý danh sách sinh viên

Giả sử bạn cần quản lý nhiều sinh viên cùng lúc, có thể tạo một mảng chứa các object:

let students = [];

function addStudent() {
  let s = new Student();
  s.nhap();
  students.push(s);
}

function showAll() {
  students.forEach((s, index) => {
    console.log(`\n--- Sinh viên ${index + 1} ---`);
    s.hienthi();
  });
}

addStudent();
addStudent();
showAll();

Ưu điểm:

  • Dễ dàng thêm mới, hiển thị hoặc chỉnh sửa sinh viên.

  • Có thể mở rộng thêm phương thức như findStudentByEmail() hay deleteStudent().

Từ Object đến OOP – Hướng phát triển chuyên nghiệp

Việc hiểu và thành thạo Object & Function giúp bạn tiến gần hơn đến Lập trình hướng đối tượng (OOP) – một trong những nền tảng quan trọng của mọi ngôn ngữ lập trình hiện đại.

Các khái niệm OOP chính:

  • Encapsulation (Đóng gói): Giữ dữ liệu và hành vi liên quan trong cùng một class.

  • Inheritance (Kế thừa): Class con kế thừa thuộc tính và phương thức của class cha.

  • Polymorphism (Đa hình): Cho phép ghi đè phương thức để hành vi linh hoạt hơn.

Ví dụ kế thừa:

class StudentVip extends Student {
  constructor(name, age, address, email, phone, level) {
    super(name, age, address, email, phone);
    this.level = level;
  }

  hienthi() {
    super.hienthi();
    console.log(`Cấp độ: ${this.level}`);
  }
}

Kết luận

Qua bài viết này, bạn đã hiểu rõ bản chất của Object và Function trong JavaScript, từ cách tạo, truy cập, thao tác cho đến việc ứng dụng trong mô hình lập trình hướng đối tượng. Hai khái niệm này không chỉ giúp bạn viết mã hiệu quả mà còn mở ra cánh cửa để tiến tới các kỹ thuật nâng cao như OOP, Asynchronous JavaScript, hay Module Pattern.

Hãy bắt đầu bằng việc tự tạo class Student, thêm phương thức mới như updateEmail() hoặc getAge(). Khi bạn thực hành nhiều, bạn sẽ nhận ra JavaScript không hề khó – mà cực kỳ linh hoạt và mạnh mẽ.

Nếu bạn đang trên hành trình trở thành developer chuyên nghiệp, hãy dành thời gian ôn tập và rèn luyện kỹ năng này mỗi ngày.
👉 Bắt đầu ngay hôm nay – code là cách học nhanh nhất!

Phản hồi từ học viên

5

Tổng 0 đánh giá

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó