Bước vào thế giới của lập trình JavaScript không chỉ đòi hỏi kiến thức vững vàng mà còn đòi hỏi khả năng sáng tạo và linh hoạt trong việc áp dụng các kỹ thuật và mẹo vặt. Trong bài viết này, hãy cùng VietnamWorks inTECH khám phá 30 mẹo và thủ thuật JavaScript đỉnh cao, giúp bạn không chỉ viết code một cách hiệu quả mà còn nâng cao trình độ chuyên môn của mình. 

1. Sử dụng !! để chuyển đổi sang Boolean

Nhanh chóng chuyển đổi bất kỳ giá trị nào thành boolean bằng cách sử dụng !!.

let truthyValue = !!1; // true

let falsyValue = !!0; // false

2. Tham số mặc định cho hàm (Default Function Parameters)

Đặt giá trị mặc định cho các tham số hàm để tránh các lỗi không xác định.

function greet(name = "Guest") {
return `Hello, ${name}!`;
}

3. Toán tử bậc ba cho If-Else ngắn

Một cách viết tắt cho if-else

let price = 100;
let message = price > 50 ? "Expensive" : "Cheap";

4. Biểu thức mẫu cho chuỗi động

Sử dụng các biểu mẫu để nhúng biểu thức vào chuỗi.

let item = "coffee";
let price = 15;
console.log(`One ${item} costs $${price}.`);

5. Destructuring Assignment

Dễ dàng trích xuất các thuộc tính từ các đối tượng hoặc mảng.

let [x, y] = [1, 2];
let {name, age} = {name: "Alice", age: 30};

6. Toán tử trải rộng để nhân bản mảng và đối tượng

Sao chép mảng hoặc đối tượng mà không tham chiếu bản gốc.

let originalArray = [1, 2, 3];
let clonedArray = [...originalArray];

7. Short-Circuit Evaluation

Sử dụng các toán tử logic để thực thi điều kiện

let isValid = true;
isValid && console.log("Valid!");

8. Optional Chaining (?.)

Truy cập an toàn vào các thuộc tính của đối tượng lồng nhau mà không gây lỗi nếu một tham chiếu là nullish.

let user = {name: "John", address: {city: "New York"}};
console.log(user?.address?.city); // "New York"

9. Toán tử hợp nhất Nullish (??)

Sử dụng ?? để cung cấp giá trị mặc định cho null hoặc undefined.

let username = null;
console.log(username ?? "Guest"); // "Guest"

10. Sử dụng map, filter, và reduce để thao tác mảng

Những cách tinh tế để xử lý mảng mà không cần vòng lặp truyền thống.

// Map
let numbers = [1, 2, 3, 4];
let doubled = numbers.map(x => x * 2);

// Filter
const evens = numbers.filter(x => x % 2 === 0);

// Reduce
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

11. Tagged Template Literals

Lệnh gọi hàm sử dụng các ký tự mẫu để xử lý chuỗi tùy chỉnh.

function highlight(strings, ...values) {
return strings.reduce((prev, current, i) => `${prev}${current}${values[i] || ''}`, '');
}
let price = 10;
console.log(highlight`The price is ${price} dollars.`);

12. Sử dụng Object.entries() và Object.fromEntries()

Chuyển đổi các đối tượng thành mảng và ngược lại để thao tác dễ dàng hơn.

let person = {name: "Alice", age: 25};
let entries = Object.entries(person);
let newPerson = Object.fromEntries(entries);

13. Đặt đối tượng cho các phần tử duy nhất

Sử dụng Set để lưu trữ các giá trị duy nhất thuộc bất kỳ loại nào.

let numbers = [1, 1, 2, 3, 4, 4];
let uniqueNumbers = [...new Set(numbers)];

14. Dynamic Property Names trong Objects

Sử dụng dấu ngoặc vuông trong cú pháp của đối tượng để tạo tên thuộc tính động.

let dynamicKey = 'name';
let person = {[dynamicKey]: "Alice"};

15. Tinh chỉnh hàm bằng cách sử dụng bind()

Khi sử dụng bind(), ta có thể tạo ra một phiên bản mới của hàm với một số tham số đã được cố định, từ đó tạo ra một hàm mới chỉ chấp nhận số lượng tham số còn lại.

function multiply(a, b) {
return a * b;
}
let double = multiply.bind(null, 2);
console.log(double(5)); // 10

16. Sử dụng Array.from() để tạo mảng từ các đối tượng giống mảng

Điều này cho phép bạn dễ dàng chuyển đổi các đối tượng như chuỗi, nodeList hoặc đối tượng có thuộc tính length thành một mảng thực sự.

let nodeList = document.querySelectorAll('div');
let nodeArray = Array.from(nodeList);

17. Vòng lặp for…of cho các đối tượng có thể lặp lại

Lặp lại trực tiếp các đối tượng có thể lặp lại (bao gồm mảng, bản đồ, v.v.).

for (let value of ['a', 'b', 'c']) {
console.log(value);
}

18. Sử dụng Promise.all() cho các Promise đồng thời

Promise.all() là một phương thức trong JavaScript được sử dụng để chờ đợi tất cả các Promise trong một mảng Promise cụ thể hoàn thành, và sau đó trả về một Promise mới. Promise này sẽ được giải quyết khi tất cả các Promise trong mảng đã được giải quyết hoặc bị từ chối.

let promises = [fetch(url1), fetch(url2)];
Promise.all(promises)
.then(responses => console.log('All done'));

19. Tham số nghỉ cho đối số hàm

Đây là một tính năng trong JavaScript cho phép bạn định nghĩa một số lượng tham số không xác định trong một hàm, thông qua việc sử dụng dấu ba chấm ("..."). Điều này cho phép hàm nhận số lượng đối số biến đổi và truy cập chúng thông qua một mảng trong thân hàm.

function sum(...nums) {
return nums.reduce((acc, current) => acc + current, 0);
}

20. Ghi nhớ kết quả để tối ưu hiệu suất

Đây là một kỹ thuật trong lập trình để lưu kết quả của các phép toán đã tính trước đó và tái sử dụng chúng khi cần thiết thay vì tính toán lại từ đầu. Điều này giúp giảm thiểu thời gian và tài nguyên máy tính cần thiết để thực hiện các phép toán, từ đó tăng cường hiệu suất của ứng dụng.

        const memoize = (fn) => {
            const cache = {};
            return (...args) => {
                let n = args[0];  // assuming single argument for simplicity
                if (n in cache) {
                    console.log('Fetching from cache');
                    return cache[n];
                }
                else {
                    console.log('Calculating result');
                    let result = fn(n);
                    cache[n] = result;
                    return result;
                }
            };
        };

21. Sử dụng ^ để hoán đổi giá trị

Hoán đổi giá trị của hai biến mà không có biến tạm thời bằng toán tử XOR bitwise.

let a = 1, b = 2;
a ^= b; b ^= a; a ^= b; // a = 2, b = 1

22. Làm phẳng mảng với phương thức flat()

Đây là một phương thức trong JavaScript được sử dụng để làm phẳng một mảng nhiều chiều thành một mảng một chiều. Điều này có nghĩa là tất cả các phần tử của mảng đều được đưa vào một mảng duy nhất, giúp đơn giản hóa việc xử lý và truy cập dữ liệu trong mảng.

let nestedArray = [1, [2, [3, [4]]]];
let flatArray = nestedArray.flat(Infinity);

23. Chuyển đổi sang số bằng Unary Plus

Chuyển đổi nhanh chóng các chuỗi hoặc các giá trị khác thành số bằng toán tử cộng đơn.

let str = "123";
let num = +str; // 123 as a number

24. Chuỗi Mẫu cho Các Fragment HTML

Đây là một tính năng trong JavaScript cho phép bạn tạo chuỗi có thể chứa các biểu thức JavaScript hoặc các biến, bằng cách sử dụng dấu backtick (`) để bao quanh chuỗi. Khi kết hợp với các biểu thức JavaScript, chuỗi mẫu cung cấp một cách tiện lợi để tạo ra các fragment HTML động trong mã JavaScript.

let items = ['apple', 'orange', 'banana'];
let html = `<ul>${items.map(item => `<li>${item}</li>`).join('')}</ul>`;

25. Sử dụng Object.assign() để hợp nhất các đối tượng

Phương thức này sao chép tất cả các thuộc tính có thể liệt kê từ một hoặc nhiều đối tượng nguồn vào một đối tượng đích và trả về đối tượng đích đó.

let obj1 = { a: 1 }, obj2 = { b: 2 };
let merged = Object.assign({}, obj1, obj2);

26. Short-circuiting cho các Giá trị Mặc định

Khi kết hợp với các giá trị mặc định, short-circuiting có thể được sử dụng để cung cấp giá trị mặc định cho một biến nếu giá trị của nó là null hoặc undefined.

let options = userOptions || defaultOptions;

27. Truy cập Động vào Các Thuộc Tính của Đối Tượng bằng Notation Ngoặc Vuông

Trong JavaScript, bạn có thể sử dụng cú pháp ngoặc vuông để truy cập động vào các thuộc tính của đối tượng dựa trên giá trị của biến hoặc biểu thức. Điều này cho phép bạn truy cập các thuộc tính của đối tượng một cách linh hoạt và đa dạng, thường được sử dụng trong các tình huống khi tên thuộc tính là biến hoặc được sinh ra động.

let property = "name";
let value = person[property]; // Equivalent to person.name

28. Sử dụng Array.includes() để kiểm tra sự hiện diện

Trong JavaScript, phương thức includes() được sử dụng để kiểm tra xem một giá trị cụ thể có tồn tại trong một mảng hay không. Kết quả trả về là true nếu giá trị được tìm thấy trong mảng, và false nếu không tìm thấy.

        if (myArray.includes("value")) {
            // Do something
        }

29. Sức mạnh của Function.prototype.bind()

Function này cho phép bạn tạo ra một hàm mới được ràng buộc vĩnh viễn với một đối tượng cụ thể, đảm bảo rằng giá trị này luôn nhất quán bất kể làm thế nào hoặc ở đâu hàm được gọi.

        const greet = function(greeting, punctuation) {
            return `${greeting}, ${this.name}${punctuation}`;
        };
        const greetJohn = greet.bind({name: 'John'}, 'Hello');
        console.log(greetJohn('!')); // "Hello, John!"

30. Ngăn chặn Sửa đổi Đối tượng

Trong ngữ cảnh của lập trình, điều này thường đề cập đến việc ngăn chặn sự thay đổi của đối tượng trong JavaScript bằng cách áp dụng các hàm hoặc phương thức có sẵn trong JavaScript như Object.freeze(), Object.seal(), hoặc Object.preventExtensions(). Các phương thức này có thể được sử dụng để đóng băng (freeze), kín đáo (seal), hoặc ngăn chặn mở rộng (prevent extensions) của một đối tượng, từ đó đảm bảo rằng không thể thêm, xóa hoặc sửa đổi các thuộc tính của đối tượng đó sau khi nó đã được khóa.

let obj = { name: "Immutable" };
Object.freeze(obj);
obj.name = "Mutable"; // Fails silently in non-strict mode

Lời kết

Trong bài viết này, chúng ta đã đi sâu vào 30 mẹo và thủ thuật JavaScript để giúp bạn nâng cao trình độ viết code. VietnamWorks inTECH hy vọng rằng qua bài viết này, bạn đã có thêm nhiều kiến thức và kỹ năng mới để áp dụng vào dự án của mình.

VietnamWorks inTECH