Thẻ học JavaScript mẫu từ ứng dụng của chúng tôi

Tải xuống ứng dụng của chúng tôi từ App Store hoặc Google Play để nhận thêm flashcard miễn phí hoặc đăng ký để truy cập vào tất cả flashcard.

Phạm vi từ vựng trong JavaScript là gì?

Phạm vi từ vựng trong JavaScript là một nguyên tác nơi phạm vi hiển thị của một biến được xác định bởi vị trí của nó trong mã. Điều này có nghĩa là các biến có thể truy cập được bên trong khối nơi chúng được định rõ, cũng như trong bất kỳ khối lồng nào. Điều này cho phép tạo ra closures và kiểm soát truy cập biến. Ví dụ về việc sử dụng phạm vi từ vựng trong mã JavaScript:

function outerFunction() {
  let outerVariable = `I'm outside!`;

  function innerFunction() {
    console.log(outerVariable); // Có quyền truy cập vào 'outerVariable'
  }

  innerFunction();
}
outerFunction(); // Hiển thị `I'm outside!`

Phạm vi từ vựng cho phép một hàm bên trong truy cập vào các biến được định rõ trong một hàm bên ngoài, ngay cả sau khi hàm bên ngoài đã hoàn tất. Đây là một yếu tố chính trong việc tạo closures trong JavaScript, cho phép quản lý trạng thái linh hoạt hơn trong các ứng dụng.

Hoisting là gì?

Hoisting là một cơ chế trong ngôn ngữ JavaScript nơi các biến và hàm được di chuyển lên đầu phạm vi của chúng trước khi mã được thực thi. Trên thực tế, điều này có nghĩa là chúng ta có thể sử dụng các hàm hoặc biến trước khi chúng thực sự được khai báo.

Tuy nhiên, cần lưu ý rằng hoisting hoạt động hơi khác nhau cho biến và hàm.

Đối với các biến được khai báo bằng từ khóa var, chỉ có phần khai báo được hoisted, không phải là khởi tạo. Biến được khởi tạo trước khi khai báo sẽ được trả về là undefined.

Ví dụ về mã hoisting cho biến:

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

Đối với hàm, hoisting di chuyển cả khai báo và định nghĩa của hàm lên đầu, cho phép sử dụng hàm trước khi nó được khai báo.

Ví dụ về mã hoisting cho hàm:

console.log(myFunction()); // "Hello World"

function myFunction() {
  return "Hello World";
}

Hoisting không xảy ra đối với biến được khai báo bằng let và const.

Hàm mũi tên là gì và những lợi ích của nó là gì?

Hàm mũi tên, còn được biết đến như hàm arrow function, là loại hàm được giới thiệu trong ECMAScript 6 (ES6). Chúng được gọi là hàm mũi tên vì chúng sử dụng cú pháp đặc biệt với một mũi tên ( => ) để định nghĩa hàm.

So sánh, một hàm truyền thống có thể nhìn như thế này:

function sum(a, b) {
  return a + b;
}

Tương đương của nó như một hàm mũi tên là:

const sum = (a, b) => a + b;

Lợi ích chính của một hàm mũi tên là nó không tạo ra ngữ cảnh thực thi riêng của mình (ràng buộc với this), điều này thường là nguồn gốc của lỗi trong JavaScript. Trong các hàm mũi tên, this được kế thừa từ ngữ cảnh xung quanh. Một ưu điểm khác là sự ngắn gọn của cú pháp, đặc biệt hữu ích khi hàm được sử dụng như đối số cho các hàm khác, ví dụ như trong các hàm bậc cao.

Ngược lại, do thiếu this riêng của mình, hàm mũi tên không phù hợp để định nghĩa các đối tượng tạo (sáng tạo) hoặc để tạo ra các phương thức trong các đối tượng nguyên mẫu.

Đối tượng Promise là gì và nó được sử dụng như thế nào?

Đối tượng Promise trong JavaScript được sử dụng để xử lý các hoạt động không đồng bộ. Promise đại diện cho một giá trị có thể không sẵn có tại thời điểm Promise được tạo, nhưng có thể sẵn có trong tương lai, hoặc có thể chẳng bao giờ có.

Đối tượng Promise có thể ở trong một trong ba trạng thái:
1. Đang chờ - hoạt động vẫn đang tiếp diễn, chưa hoàn thành thành công hoặc với lỗi.
2. Đã thực hiện - hoạt động đã hoàn thành thành công, Promise đã trả về một giá trị.
3. Bị từ chối - hoạt động đã hoàn thành với một lỗi, Promise đã trả về lý do cho lỗi.

Promise đã được thực hiện hoặc bị từ chối được coi là "đã giải quyết" và trạng thái của nó không bao giờ thay đổi.

Tạo đối tượng Promise:

const promise = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve('Operation successful.');
  } else {
    reject('Operation failed.');
  }
});

Sử dụng đối tượng Promise:

promise
  .then(result => {
    console.log(result); // Sẽ in: 'Operation successful.'
  })
  .catch(error => {
    console.log(error);
  });

Phương thức .then() được thực thi khi Promise được thực hiện, và .catch() khi nó bị từ chối. Trong cả hai trường hợp, kết quả của hoạt động hoặc lý do để từ chối Promise được chuyển như một đối số.

Callback là gì?

Callback, còn được gọi là hàm callback, là một hàm được truyền như một đối số cho một hàm khác và sau đó được thực thi (được gọi lại) sau khi hoàn thành hàm đó. Các hàm callback thường được sử dụng trong JavaScript, đặc biệt là trong các hoạt động không đồng bộ như yêu cầu AJAX hoặc xử lý sự kiện.

Các hàm callback thường nhận kết quả của một hoạt động nhất định dưới dạng đối số, vì vậy chúng có thể được sử dụng để xử lý hoặc phân tích những kết quả đó.

Cách sử dụng một hàm như vậy trong thực tế có thể nhìn như sau:

function executeAfterTimeout(callback, timeout) {
  setTimeout(() => {
    console.log('Time passed!');
    callback();
  }, timeout);
}

executeAfterTimeout(() => {
  console.log('This is a callback!');
}, 2000);

Trong trường hợp này, hàm `executeAfterTimeout` nhận một hàm `callback` như một tham số, sẽ được thực thi sau một khoảng thời gian đã xác định. Các hàm callback rất hữu ích để quản lý luồng kiểm soát không đồng bộ trong JavaScript.

Toán tử gộp nullish là gì và nó hoạt động như thế nào?

Toán tử Nullish Coalescing (??) là một toán tử logic trả về phía bên phải của phép toán khi phía bên trái là null hoặc undefined. Nói cách khác, khi một biến trống, toán tử nullish coalescing trả về giá trị đã định nghĩa như là kết quả.

Cú pháp cơ bản là:

let value = null ?? 'giá trị mặc định';

Trong trường hợp này, vì phía bên trái (giá trị) là null, kết quả là 'giá trị mặc định'. Hơn nữa, toán tử này khác với toán tử OR (||), vì chức năng OR trả về bên phải khi bên trái là sai (false, 0, '', null, undefined, NaN), trong khi toán tử nullish coalescing chỉ trả về bên phải khi bên trái là null hoặc undefined.

Ví dụ với OR:

let value1 = 0 || 'mặc định';
console.log(value1); // kết quả: 'mặc định' vì 0 là giá trị false

Ví dụ với nullish coalescing:

let value2 = 0 ?? 'mặc định';
console.log(value2); // kết quả: 0 vì 0 không phải là null hoặc undefined

Vì vậy, không giống như OR, toán tử nullish coalescing không coi 0, '' và NaN là giá trị "trống".

Symbol là gì và nên sử dụng khi nào?

Biểu tượng trong JavaScript là một loại dữ liệu duy nhất và không thể thay đổi thường được sử dụng để xác định các thuộc tính duy nhất của đối tượng.

Bạn có thể tạo một Biểu tượng bằng cách gọi hàm tạo Symbol(), lần nào gọi đều tạo ra một biểu tượng duy nhất. Ngay cả khi chúng ta gọi hàm tạo Symbol() với cùng một đối số, mỗi biểu tượng được tạo ra sẽ khác nhau.

const symbol1 = Symbol('mySymbol');
const symbol2 = Symbol('mySymbol');
console.log(symbol1 === symbol2); // trả về false

Biểu tượng thường được sử dụng để xác định các thuộc tính (duy nhất) của đối tượng, đặc biệt là khi chúng ta muốn thuộc tính này bị ẩn hoặc riêng tư. Nó cũng bao gồm các thuộc tính không được xem xét khi lặp lại đối tượng bằng for...in hoặc for...of và không được trả về bởi phương thức Object.keys(). Hơn nữa, biểu tượng cho phép tạo ra các thuộc tính "giả" riêng tư.

let obj = {};
let privateProperty = Symbol('private');

obj[privateProperty] = 'Đây là thông tin riêng tư';

console.log(obj[privateProperty]); // 'Đây là thông tin riêng tư'
console.log(Object.keys(obj)); // []

Không có quy tắc cụ thể nào về khi nào phải sử dụng Biểu tượng. Chúng thường được sử dụng khi chúng ta muốn tạo một thuộc tính duy nhất trên một đối tượng mà không thể dễ dàng nhìn thấy hoặc thay đổi, hoặc chúng ta muốn xác định các phương thức ảnh hưởng đến hành vi của các đối tượng ở mức thấp.

WeakMap và WeakSet là gì?

WeakMap và WeakSet là phiên bản đặc biệt của đối tượng Map và Set trong JavaScript không ngăn chặn việc giải phóng bộ nhớ tự động bởi Bộ thu gom rác.

WeakMap là một tập hợp các cặp key-value nơi key phải là đối tượng và giá trị có thể là bất cứ thứ gì. Sự khác biệt chính giữa Map và WeakMap là các key trong WeakMap được giữ một cách "yếu đuối", có nghĩa là nếu không có tham chiếu khác tới đối tượng key, nó sẽ được thu gom rác, và mục nhập của nó trong WeakMap sẽ tự động bị xóa.

Dưới đây là ví dụ về việc sử dụng WeakMap:

let john = { name: "John" };

let weakMap = new WeakMap();
weakMap.set(john, "...");

john = null; // ghi đè tham chiếu

// john được gỡ bỏ khỏi bộ nhớ!

WeakSet tương tự như WeakMap so với Map. Nó là một tập hợp các đối tượng, nhưng nó không ngăn chặn việc thu gom rác nếu đối tượng không hiển thị ở bất kỳ đâu khác. Nó thiếu các phương thức Set thông thường như `size` và `clear`, và phương thức `add` chỉ có thể nhận đối tượng.

Ví dụ về việc sử dụng WeakSet:

let john = { name: "John" };

let weakSet = new WeakSet();
weakSet.add(john);

john = null; // ghi đè tham chiếu

// john được gỡ bỏ khỏi bộ nhớ!

Cả WeakMap và WeakSet đều chủ yếu được sử dụng trong các tình huống khi chúng ta muốn lưu trữ thông tin bổ sung về các đối tượng nên bị xóa khi đối tượng đó bị xóa.

Thẻ học JavaScript