10 Thủ Thuật JavaScript Đáng Giá Mà Bạn Nên Biết Sớm Hơn (Phần 1)

Là một lập trình viên, bạn chắc hẳn luôn tìm kiếm các cách thức để tối ưu hóa quy trình làm việc của mình, từ đó tiết kiệm được thời gian khi viết mã mỗi ngày. Thay vì phải đối mặt với các đoạn mã dài dòng và phức tạp, có rất nhiều mẹo hữu ích giúp bạn đơn giản hóa công việc.

Trong bài viết này, chúng tôi sẽ chia sẻ 10 thủ thuật JavaScript cực kỳ tiện lợi. Một số thủ thuật đã có sẵn, trong khi một số khác cần tùy chỉnh, nhưng chắc chắn chúng sẽ khiến bạn không khỏi ngạc nhiên. Hãy cùng khám phá nhé!

1. Sử Dụng Chuỗi Tùy Chọn - Tạm Biệt Các Lỗi Dữ Liệu

Vấn Đề:

Khi cố gắng truy cập thuộc tính trong một đối tượng sâu bên trong, bạn có thể không chắc chắn liệu tất cả các thuộc tính trong chuỗi có tồn tại hay không. Điều này có thể dẫn đến những lỗi như "Không thể đọc thuộc tính của undefined".

Giải Pháp Cũ:

Bạn thường phải viết nhiều câu lệnh if lồng nhau để kiểm tra từng thuộc tính trước khi truy cập. Ví dụ:

const user = {
    // address: { street: '123 Main St' }
};

let street = user && user.address && user.address.street;
console.log(street); // undefined

Giải Pháp Mới:

Sử dụng chuỗi tùy chọn với ?.. Nếu bất kỳ thuộc tính nào thiếu, biểu thức sẽ trả về undefined thay vì ném ra lỗi:

let street = user?.address?.street;
console.log(street); // undefined

Ứng Dụng Thực Tế:

Khi lấy dữ liệu từ API với cấu trúc phản hồi có thể thay đổi, chuỗi tùy chọn giúp bạn truy cập dữ liệu một cách rõ ràng và gọn gàng hơn.

2. Sử Dụng Nullish - Cải Thiện Các Giá Trị Mặc Định

Vấn Đề:

Khi muốn gán giá trị mặc định cho một biến nếu biến đó là null hoặc undefined, bạn không muốn vô tình ghi đè các giá trị như 0 hoặc chuỗi rỗng.

Giải Pháp Cũ:

Sử dụng toán tử logic OR || có thể dẫn đến việc ghi đè giá trị không mong muốn:

const user = { name: 0 };
let postCount = user.name || 'No posts yet!';
console.log(postCount); // Outputs 'No posts yet!'

Giải Pháp Tốt Nhất:

Sử dụng toán tử hợp nhất Nullish ?? để chỉ định giá trị mặc định khi toán hạng bên trái là null hoặc undefined:

let postCount = user.name ?? 'No posts yet!';
console.log(postCount); // Outputs 0

Ứng Dụng Thực Tế:

Đối với một hồ sơ người dùng, nếu 0 là đầu vào hợp lệ cho số bài đăng, việc sử dụng ?? giúp bạn bảo quản ý nghĩa thực sự của 0.

3. Sử Dụng Object.freeze() - Đảm Bảo Đối Tượng Không Thay Đổi

Vấn Đề:

Khi có một đối tượng, bạn có thể muốn đảm bảo rằng các thuộc tính không bị thay đổi một cách vô tình sau khi tạo.

Giải Pháp:

Sử dụng hàm Object.freeze() để làm cho đối tượng không thể thay đổi:

const colors = { primary: 'blue', secondary: 'green' };
Object.freeze(colors);
colors.primary = 'red'; // This will silently fail
console.log(colors.primary); // Still outputs 'blue'

Ứng Dụng Thực Tế:

Nếu bạn có một đối tượng cấu hình, sử dụng Object.freeze() để bảo vệ nó khỏi các sửa đổi không mong muốn.

4. Phân Tách Mảng - Giúp Giải Nén Dễ Hơn

Vấn Đề:

Bạn cần trích xuất các giá trị từ một mảng và gán chúng cho các biến riêng lẻ, việc truy cập bằng chỉ số có thể khó khăn khi mảng dài hơn.

Giải Pháp Cũ:

Khi truy cập phần tử theo chỉ số:

const rgb = [255, 128, 0];
const red = rgb[0];
const green = rgb[1];
const blue = rgb[2];

Giải Pháp:

Sử dụng phân tách cấu trúc:

const [red, green, blue] = rgb;

Ứng Dụng Thực Tế:

Dễ dàng trích xuất thông tin người dùng từ một mảng, giúp mã dễ đọc hơn.

5. Tham Số Mặc Định - Không Còn Đau Đầu Về Các Giá Trị Không Xác Định

Vấn Đề:

Khi viết hàm và muốn cung cấp các giá trị mặc định cho các tham số khi không cung cấp.

Giải Pháp Cũ:

Phải kiểm tra tham số trong thân hàm:

function greet(name, message) {
    const userName = name || 'Stranger';
    const greeting = message || 'Hello there!';
}

Giải Pháp Mới:

Sử dụng tham số mặc định trực tiếp trong định nghĩa hàm:

function greet(name = 'Stranger', message = 'Hello there!') {
    console.log(`${message}, ${name}!`);
}

Ứng Dụng Thực Tế:

Đặt các giá trị mặc định cho chiều rộng và chiều cao trong hàm tính diện tích hình chữ nhật để luôn có giá trị trả về hợp lý.

Trên đây là phần 1 trong chuỗi bài viết về các thủ thuật sử dụng JavaScript. Đừng quên theo dõi phần 2 để khám phá thêm nhiều mẹo khủng khác tại đây: Phần 2.
source: viblo