10 thủ thuật JavaScript cho người mới bắt đầu
Cải thiện kỹ năng JavaScript của bạn
JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất thế giới. Dưới đây là 10 thủ thuật giúp bạn cải thiện kỹ năng JavaScript của mình nhanh chóng.
1. Hiểu rõ về Scope
Scope xác định phạm vi truy cập của biến. JavaScript có Global scope, Function scope và Block scope (với let và const).
// Global scope
const globalVar = "Tôi là biến toàn cục";
function exampleFunction() {
// Function scope
const functionVar = "Tôi chỉ tồn tại trong hàm này";
if (true) {
// Block scope
let blockVar = "Tôi chỉ tồn tại trong block này";
console.log(blockVar); // Hoạt động
}
// console.log(blockVar); // Lỗi: blockVar không tồn tại ở đây
}2. Sử dụng Arrow Functions
Arrow functions ngắn gọn hơn và không ràng buộc this của riêng nó.
// Function truyền thống
function add(a, b) {
return a + b;
}
// Arrow function
const addArrow = (a, b) => a + b;
// Với nhiều câu lệnh
const process = (x) => {
const result = x * 2;
return result + 10;
};3. Hiểu Truthy và Falsy Values
JavaScript coi một số giá trị là "falsy" và các giá trị khác là "truthy".
// Falsy values: false, 0, '', null, undefined, NaN
// Kiểm tra nhanh một biến có tồn tại hoặc có giá trị
const username = "";
if (username) {
console.log("Username tồn tại và không rỗng");
} else {
console.log("Username không tồn tại hoặc rỗng");
}4. Sử dụng Template Literals
Template literals giúp tạo chuỗi dễ đọc hơn.
const name = "John";
const job = "developer";
// Cách cũ
const message1 = "Xin chào, tôi là " + name + " và tôi là một " + job + ".";
// Với template literals
const message2 = `Xin chào, tôi là ${name} và tôi là một ${job}.`;5. Sử dụng Destructuring
Destructuring giúp trích xuất dữ liệu từ arrays và objects một cách dễ dàng.
// Destructuring objects
const person = { name: "Anna", age: 30, job: "developer" };
const { name, age } = person;
console.log(name); // 'Anna'
console.log(age); // 30
// Destructuring arrays
const colors = ["red", "green", "blue"];
const [firstColor, secondColor] = colors;
console.log(firstColor); // 'red'
console.log(secondColor); // 'green'6. Hiểu Async/Await
Async/await giúp làm việc với code bất đồng bộ dễ dàng hơn.
// Sử dụng promises
fetch("https://api.example.com/data")
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error("Error:", error));
// Sử dụng async/await
async function fetchData() {
try {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
console.log(data);
} catch (error) {
console.error("Error:", error);
}
}7. Sử dụng Array Methods
JavaScript có nhiều phương thức mạnh mẽ để làm việc với arrays.
const numbers = [1, 2, 3, 4, 5];
// map - tạo array mới bằng cách biến đổi từng phần tử
const doubled = numbers.map((x) => x * 2); // [2, 4, 6, 8, 10]
// filter - tạo array mới chỉ với các phần tử thỏa mãn điều kiện
const evens = numbers.filter((x) => x % 2 === 0); // [2, 4]
// reduce - gộp tất cả phần tử thành một giá trị
const sum = numbers.reduce((total, current) => total + current, 0); // 158. Sử dụng Optional Chaining
Optional chaining (?.) giúp truy cập thuộc tính lồng nhau mà không gây lỗi.
const user = {
profile: {
// address không tồn tại
},
};
// Cách cũ - dễ lỗi
let city;
if (user && user.profile && user.profile.address) {
city = user.profile.address.city;
}
// Với optional chaining
const city = user?.profile?.address?.city; // undefined, không lỗi9. Sử dụng Spread Operator
Spread operator (...) giúp làm việc với arrays và objects dễ dàng hơn.
// Sao chép arrays
const originalArray = [1, 2, 3];
const newArray = [...originalArray]; // [1, 2, 3]
// Kết hợp arrays
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combined = [...array1, ...array2]; // [1, 2, 3, 4, 5, 6]
// Sao chép và mở rộng objects
const originalObj = { x: 1, y: 2 };
const newObj = { ...originalObj, z: 3 }; // { x: 1, y: 2, z: 3 }10. Sử dụng Modern Modules
Tổ chức code của bạn bằng ES modules để dễ bảo trì và tái sử dụng.
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
// app.js
import { add, subtract } from "./math.js";
console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2Tiếp theo là gì?
Sau khi nắm vững những thủ thuật cơ bản này, bạn có thể tiếp tục học về:
- Framework JavaScript (React, Vue, Angular)
- TypeScript - JavaScript với kiểu dữ liệu tĩnh
- Testing trong JavaScript
- Thực hành nhiều hơn với các dự án thực tế
Hãy nhớ rằng: cách tốt nhất để học JavaScript là thực hành mỗi ngày!
