40 JavaScript Shortcuts Mọi Người Nên Biết

// 1. Toán tử ba ngôi - Thay thế if/else đơn giản
const isAdult = age >= 18 ? 'Yes' : 'No'
 
// 2. Tham số mặc định - Tránh lỗi undefined
function greet(name = 'Guest') {
  return `Hello, ${name}`
}
 
// 3. Hàm mũi tên (Arrow Function) - Cú pháp ngắn gọn
const add = (a, b) => a + b
 
// 4. Phân rã đối tượng - Trích xuất thuộc tính nhanh chóng
const { name, age } = person
 
// 5. Phân rã mảng - Gán nhiều biến cùng lúc
const [first, second] = colors
 
// 6. Template literals - Chuỗi động với biến
const message = `Hi, ${user.name}!`
 
// 7. Toán tử spread - Sao chép và mở rộng mảng/object
const newArray = [...oldArray, 4]
 
// 8. Rest parameters - Thu thập tất cả tham số
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b)
}
 
// 9. Optional chaining - Truy cập an toàn thuộc tính lồng nhau
const street = user?.address?.street
 
// 10. Nullish coalescing - Gán giá trị mặc định chỉ khi null/undefined
const username = inputName ?? 'Anonymous'

// 11. Đánh giá ngắn mạch - Điều kiện ngắn gọn
const status = isLoggedIn && 'Welcome!'
 
// 12. Gán với toán tử OR - Chỉ gán khi giá trị falsy
user.name ||= 'Guest'
 
// 13. Gán với toán tử AND - Chỉ gán khi giá trị truthy
settings.debug &&= false
 
// 14. Viết ngắn gọn thuộc tính đối tượng - Tên biến = tên thuộc tính
const age = 30
const person = { name, age }
 
// 15. Thuộc tính tính toán - Tên thuộc tính động
const key = 'level'
const player = { [key]: 42 }
 
// 16. Vòng lặp for-of - Lặp qua giá trị thay vì index
for (const item of items) {
  console.log(item)
}
 
// 17. forEach - Lặp qua mảng với callback
items.forEach((item) => console.log(item))
 
// 18. map - Biến đổi tất cả phần tử
const squared = nums.map((n) => n * n)
 
// 19. filter - Lọc phần tử theo điều kiện
const evens = nums.filter((n) => n % 2 === 0)
 
// 20. reduce - Tích lũy giá trị từ mảng
const total = nums.reduce((a, b) => a + b, 0)

// 21. Kiểm tra phần tử tồn tại với includes
const found = list.includes('apple')
 
// 22. Loại bỏ phần tử trùng lặp bằng Set
const unique = [...new Set(array)]
 
// 23. Object.entries - Chuyển object thành mảng key-value
Object.entries(obj).forEach(([key, value]) => {
  console.log(key, value)
})
 
// 24. Object.values - Lấy tất cả giá trị
const vals = Object.values(obj)
 
// 25. Object.keys - Lấy tất cả khóa
const keys = Object.keys(obj)
 
// 26. Kết hợp nhiều phương thức mảng - Method chaining
const result = data.filter((a) => a.active).map((a) => a.name)
 
// 27. Làm phẳng mảng - Chuyển mảng 2D thành 1D
const flat = arr.flat()
 
// 28. Loại bỏ khoảng trắng - Làm sạch chuỗi
const cleaned = str.trim()
 
// 29. Bổ sung ký tự đầu chuỗi - Format số/chuỗi
const padded = '5'.padStart(2, '0')
 
// 30. Định dạng số theo ngôn ngữ - Hiển thị số đẹp
const price = new Intl.NumberFormat().format(1234567)

// 31. Import động - Load module theo nhu cầu
const module = await import('./module.js')
 
// 32. Promise.all - Chạy nhiều promise song song
await Promise.all([fetchData(), loadUI()])
 
// 33. async/await - Xử lý bất đồng bộ dễ đọc
const fetchData = async () => {
  const res = await fetch(url)
  return res.json()
}
 
// 34. Tham số tùy chọn trong hàm - Linh hoạt trong gọi hàm
function log(message, level = 'info') {
  console[level](message)
}
 
// 35. Ép kiểu chuỗi sang số bằng dấu cộng
const num = +'42'
 
// 36. Ép kiểu về boolean bằng !!
const isTrue = !!value
 
// 37. Đảo giá trị mảng nhanh - Swap values
;[a, b] = [b, a]
 
// 38. Chuyển chuỗi thành mảng ký tự
const chars = [...'hello']
 
// 39. Sao chép nhanh object - Shallow copy
const copy = { ...original }
 
// 40. Debounce function - Chống spam gọi hàm
const debounce = (fn, delay) => {
  let timeout
  return (...args) => {
    clearTimeout(timeout)
    timeout = setTimeout(() => fn(...args), delay)
  }
}