20 Khái niệm JavaScript quan trọng cần biết khi đi phỏng vấn

Khi nói đến các buổi phỏng vấn JavaScript, nhà tuyển dụng tìm kiếm cả kiến thức thực tế lẫn lý thuyết. Vì vậy, dưới đây là danh sách 20 khái niệm JavaScript cốt lõi được giải thích bằng các ví dụ ngắn gọn để giúp bạn luôn sẵn sàng cho các cuộc phỏng vấn.

1. Closures

Closure là một hàm ghi nhớ các biến bên ngoài của nó ngay cả sau khi hàm bên ngoài đã hoàn thành việc thực thi.

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2

2. Hoisting

Trong Hoisting, các khai báo biến và hàm trong JavaScript được "nâng" lên đầu phạm vi của chúng.

console.log(greet()); // Hello!

function greet() {
  return "Hello!";
}

console.log(num); // undefined
var num = 5;

3. Event Loop & Callbacks

JavaScript là đơn luồng và vòng lặp sự kiện (Event Loop) cho phép các hoạt động không đồng bộ sử dụng các hàm gọi lại (Callbacks).

console.log("Start");
setTimeout(() => console.log("Async operation"), 1000);
console.log("End");

// Output: Start, End, Async operation

4. Promises

Promises xử lý các hoạt động không đồng bộ, với các trạng thái: pending, fulfilled và rejected.

let fetchData = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Data received!"), 1000);
});

fetchData.then(data => console.log(data)); // Data received!

5. Async/Await

Async/Await đơn giản hóa việc xử lý promise.

async function fetchData() {
  let data = await new Promise(resolve => setTimeout(() => resolve("Data"), 1000));
  console.log(data);
}

fetchData(); // Data

6. Arrow Functions

Arrow Functions cung cấp một cú pháp ngắn gọn và không có this của riêng chúng.

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

7. Destructuring

Destructuring cho phép bạn giải nén các giá trị từ mảng hoặc các thuộc tính từ đối tượng.

const person = { name: "Alice", age: 25 };
const { name, age } = person;

console.log(name); // Alice
console.log(age); // 25

8. Spread & Rest Operators

Spread ... mở rộng các phần tử và Rest thu thập chúng vào một mảng.

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // Spread

function sum(...nums) { // Rest
  return nums.reduce((a, b) => a + b);
}
console.log(sum(1, 2, 3, 4)); // 10

9. Prototypes

Prototypes cho phép các đối tượng kế thừa các thuộc tính và phương thức.

function Car(name) {
  this.name = name;
}

Car.prototype.getName = function() {
  return this.name;
};

const myCar = new Car("Tesla");
console.log(myCar.getName()); // Tesla

10. This

this đề cập đến ngữ cảnh mà một hàm được gọi.

const person = {
  name: "John",
  sayName() {
    console.log(this.name);
  },
};

person.sayName(); // John

11. Classes

Các lớp ES6 cung cấp một cú pháp rõ ràng hơn cho lập trình hướng đối tượng.

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return `${this.name} makes a sound.`;
  }
}

const dog = new Animal("Dog");
console.log(dog.speak()); // Dog makes a sound.

12. Modules

Modules cho phép bạn chia nhỏ mã của mình trên nhiều tệp.

// add.js
export const add = (a, b) => a + b;

// main.js
import { add } from "./add.js";
console.log(add(2, 3)); // 5

13. Map và Filter

map và filter là các phương thức mảng để biến đổi và lọc mảng.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8]
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]

14. Reduce

reduce tích lũy các giá trị từ một mảng.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10

15. SetTimeout và SetInterval

setTimeout trì hoãn việc thực thi, trong khi setInterval lặp lại nó.

setTimeout(() => console.log("After 1 second"), 1000);

let count = 0;
const intervalId = setInterval(() => {
  console.log("Count:", ++count);
  if (count === 3) clearInterval(intervalId);
}, 1000);

16. Template Literals

Template literals cho phép các chuỗi nhiều dòng và nội suy.

const name = "World";
console.log(`Hello, ${name}!`); // Hello, World!

17. Type Coercion

Type Coercion là việc JavaScript có thể chuyển đổi kiểu dữ liệu ngầm định, đôi khi không thể đoán trước.

console.log("5" + 5); // 55 (string)
console.log("5" - 2); // 3 (number)

18. Truthy và Falsy Values

Các giá trị như 0, "", null, undefined, NaN là falsy.

if ("") {
  console.log("This won't run");
} else {
  console.log("Falsy value");
}

19. Debouncing & Throttling

Debouncing và throttling là các kỹ thuật để kiểm soát tần suất thực thi hàm, thường để phản hồi các sự kiện.

Trong đó, Debounce (trì hoãn thực hiện):

function debounce(func, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

window.addEventListener("resize", debounce(() => console.log("Resized!"), 500));

Và Throttle (giới hạn thực hiện):

function throttle(func, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

window.addEventListener("scroll", throttle(() => console.log("Scrolling!"), 200));

20. Currying

Currying biến đổi một hàm với nhiều đối số thành một chuỗi các hàm với một đối số duy nhất.

function multiply(a) {
  return function (b) {
    return a * b;
  };
}

const double = multiply(2);
console.log(double(5)); // 10