Khi tham gia phỏng vấn JavaScript, nhà tuyển dụng thường tìm kiếm ứng viên không chỉ với kiến thức lý thuyết mà còn phải có kinh nghiệm thực tế. Dưới đây là danh sách 20 khái niệm JavaScript quan trọng mà bạn cần biết, cùng với các ví dụ ngắn gọn để chuẩn bị cho cuộc phỏng vấn thành công.
1. Closure
Closures là các hàm có khả năng ghi nhớ các biến từ phạm vi bên ngoài ngay cả khi hàm bên ngoài đã hoàn thành thực thi.
function outer() {
let count = 0;
return function inner() {
count++;
return count;
};
}
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 22. Hoisting
Hoisting là hiện tượng trong JavaScript mà các khai báo biến và hàm đượ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. Vòng Lặp Sự Kiện & Callbacks
JavaScript là ngôn ngữ đơn luồng. Vòng lặp sự kiện (Event Loop) cho phép xử lý các hoạt động không đồng bộ thông qua các hàm gọi lại (callbacks).
console.log("Start");
setTimeout(() => console.log("Async operation"), 1000);
console.log("End");
// Kết quả: Start, End, Async operation4. Promises
Promises cung cấp một cách hiệu quả để xử lý các hoạt động không đồng bộ, với ba trạng thái: pending (đang chờ), fulfilled (hoàn thành) và rejected (bị từ chối).
let fetchData = new Promise((resolve, reject) => {
setTimeout(() => resolve("Data received!"), 1000);
});
fetchData.then(data => console.log(data)); // Data received!5. Async/Await
Async/Await cung cấp cách tiếp cận đơn giản và dễ đọc hơn trong việc xử lý các promise.
async function fetchData() {
let data = await new Promise(resolve => setTimeout(() => resolve("Data"), 1000));
console.log(data);
}
fetchData(); // Data6. Arrow Functions
Arrow Functions cho phép viết hàm theo cú pháp ngắn gọn hơn và không có ngữ cảnh this riêng.
const add = (a, b) => a + b;
console.log(add(2, 3)); // 57. Destructuring
Destructuring giúp giải nén các giá trị từ mảng hoặc các thuộc tính từ đối tượng một cách dễ dàng hơn.
const person = { name: "Alice", age: 25 };
const { name, age } = person;
console.log(name); // Alice
console.log(age); // 258. Spread & Rest Operators
Spread ... cho phép mở rộng các phần tử và Rest thu thập chúng vào một mảng nhằm đơn giản hóa việc xử lý dữ liệu.
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)); // 109. Prototypes
Prototypes cho phép các đối tượng trong JavaScript kế thừa các thuộc tính và phương thức từ các đối tượng khác.
function Car(name) {
this.name = name;
}
Car.prototype.getName = function() {
return this.name;
};
const myCar = new Car("Tesla");
console.log(myCar.getName()); // Tesla10. Ngữ Cảnh this
this trong JavaScript sử dụng để chỉ ngữ cảnh mà hàm đang được gọi.
const person = {
name: "John",
sayName() {
console.log(this.name);
},
};
person.sayName(); // John11. Classes
ES6 mang đến cách tiếp cận rõ ràng hơn cho lập trình hướng đối tượng qua khái niệm Classes.
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 giúp bạn tổ chức mã nguồn bằng cách chia nhỏ thành nhiều tệp.
javascript
// add.js
export const add = (a, b) => a + b;
// main.js
import { add } from "./add.js";
console.log(add(2, 3)); // 513. Các Phương Thức map và filter
map và filter là hai phương thức quan trọng giúp biến đổi và lọc các phần tử trong mảng dễ dà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. Phương Thức reduce
reduce là phương thức giúp tích lũy các giá trị từ một mảng thành một giá trị duy nhất.
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum); // 1015. setTimeout và setInterval
setTimeout được sử dụng để trì hoãn thực thi một thao tác, trong khi setInterval lặp lại một thao tác theo khoảng thời gian nhất định.
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 khai báo chuỗi nhiều dòng và thực hiện nội suy biến dễ dàng hơn.
const name = "World";
console.log(`Hello, ${name}!`); // Hello, World!17. Type Coercion
Type Coercion trong JavaScript cho phép tự động chuyển đổi kiểu dữ liệu, có thể dẫn đến những kết quả không mong muốn nếu không nắm rõ.
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 và NaN được coi là falsy trong JavaScript.
if ("") {
console.log("This won't run");
} else {
console.log("Falsy value");
}19. Debouncing và Throttling
Debouncing và throttling là hai kỹ thuật để quản lý tốc độ thực thi của hàm, thường được áp dụng khi phản hồi sự kiện.
Debounce
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));Throttle
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 là quá trình biến đổi một hàm với nhiều tham số thành một chuỗi các hàm, mỗi hàm chỉ nhận một tham số duy nhất.
function multiply(a) {
return function (b) {
return a * b;
};
}
const double = multiply(2);
console.log(double(5)); // 10Qua việc nắm rõ những khái niệm này, bạn sẽ tự tin hơn trong các buổi phỏng vấn JavaScript và có cơ hội thể hiện bản thân một cách xuất sắc.
source: viblo
