0
0
Lập trình
Sơn Tùng Lê
Sơn Tùng Lê103931498422911686980

20 Khái Niệm JavaScript Cần Nắm Vững Cho Cuộc Phỏng Vấn

Đăng vào 3 tuần trước

• 5 phút đọc

Chủ đề:

Javascript

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.

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

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

2. 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.

Copy
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).

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

// Kết quả: Start, End, Async operation

4. 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).

Copy
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.

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

fetchData(); // Data

6. 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.

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

7. 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.

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

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

8. 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.

Copy
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 trong JavaScript kế thừa các thuộc tính và phương thức từ các đối tượng khác.

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

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

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

10. Ngữ Cảnh this

this trong JavaScript sử dụng để chỉ ngữ cảnh mà hàm đang được gọi.

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

person.sayName(); // John

11. 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.

Copy
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 Copy
// add.js
export const add = (a, b) => a + b;

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

13. Các Phương Thức mapfilter

mapfilter 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.

Copy
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.

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

15. setTimeoutsetInterval

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.

Copy
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.

Copy
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õ.

Copy
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.

Copy
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

Copy
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

Copy
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.

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

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

Qua 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

Gợi ý câu hỏi phỏng vấn
Không có dữ liệu

Không có dữ liệu

Bài viết được đề xuất
Bài viết cùng tác giả

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào