Tối Ưu Hóa Code JavaScript Với ES6: 8 Kỹ Thuật Không Thể Bỏ Qua

Trong thế giới phát triển phần mềm không ngừng thay đổi, việc viết code JavaScript đơn giản và hiệu quả trở nên ngày càng quan trọng. Sự ra đời của ES6 đã mang lại nhiều tính năng mới giúp tối ưu hóa quy trình lập trình. Bài viết này sẽ giới thiệu 8 kỹ thuật từ ES6 giúp lập trình viên thay thế các phương pháp lập trình cũ, làm cho mã nguồn trở nên gọn gàng, dễ đọc và bảo trì hơn.

1. Ép Kiểu Boolean

Để chuyển đổi giá trị về kiểu Boolean, cách tiếp cận hiện đại như sau:

const age = Boolean(input.value); // phương pháp cũ
const age = !!input.value; // phương pháp mới

2. Nullish Coalescing

Sử dụng toán tử nullish coalescing giúp trả về giá trị mặc định khi giá trị bên trái là null hoặc undefined:

// phương pháp cũ
const addId = (user, id) => {
    user.id = id !== null && id !== undefined ? id : 'Unknown';
    return user;
};

// phương pháp mới
const addId = (user, id) => {
    user.id = id ?? 'Unknown';
    return user;
};

3. Tham Số Mặc Định

Việc thiết lập tham số mặc định rất hữu ích khi không có dữ liệu đầu vào:

// phương pháp cũ
const createUser = (name, email) => {
    const user = { email, name: name ?? 'Unknown' };
    // tạo user
};

// phương pháp mới
const createUser = (name = 'Unknown', email) => {
    const user = { email, name };
    // tạo user
};

4. Optional Chaining

Optional chaining giúp truy cập thuộc tính lồng nhau mà không cần phải kiểm tra từng bước:

// phương pháp cũ
const hasValidPostcode = u => u && u.address && u.address.postcode && u.address.postcode.valid;

// phương pháp mới
const hasValidPostcode = u => u?.address?.postcode?.valid;

5. Phân Giải Đối Tượng (Destructuring Objects)

Giảm số lượng code bằng cách phân giải thuộc tính từ đối tượng:

// phương pháp cũ
const save = params => {
    saveData(params.name, params.email, params.dob);
};

// phương pháp mới
const save = ({ name, email, dob }) => {
    saveData(name, email, dob);
};

6. Phân Giải Mảng (Destructuring Arrays)

Tương tự như đối tượng, phân giải gọn gàng giá trị từ mảng:

// phương pháp cũ
const data = [ ['axios', 'recharts'], ['flocked', 'flick'] ];
const plugins = data[0], apps = data[1];

// phương pháp mới
const data = [ ['axios', 'recharts'], ['flocked', 'flick'] ];
const [plugins, apps] = data;

7. Toán Tử Spread

Kết hợp các đối tượng một cách trực quan bằng cú pháp gọn:

// phương pháp cũ
const details = { name: 'Man Utd' };
const stats = { games: 7, points: 21 };
const team = Object.assign({}, details, stats);

// phương pháp mới
const details = { name: 'Man Utd' };
const stats = { games: 7, points: 21 };
const team = { ...details, ...stats };

8. Vòng Lặp For (of)

Sử dụng vòng lặp for...of cho hiệu suất cao hơn so với phương pháp forEach:

// phương pháp cũ
const array = [];
const fillArray = items => {
    items.forEach(i => array.push(i));
};

// phương pháp mới
const array = [];
const fillArray = items => {
    for (let i of items) {
        array.push(i);
    }
};

Kết Luận

Tóm lại, việc áp dụng các tính năng của ES6 có thể giúp tối ưu hóa code JavaScript, làm cho nó ngắn gọn, dễ đọc và bảo trì hơn. Việc tích hợp những chiến lược hiện đại này sẽ mang lại mã nguồn sạch sẽ và nâng cao chất lượng phát triển phần mềm. Hãy thử áp dụng những kỹ thuật này vào công việc của bạn để đạt được những kết quả tốt nhất.

Cảm ơn các bạn đã đọc bài viết này. Hy vọng rằng những thông tin chia sẻ sẽ hữu ích với các bạn. Đừng quên theo dõi để nhận thêm nhiều bài viết bổ ích khác nhé!
source: viblo