AMD (Asynchronous Module Definition)

AMD là một quy chuẩn cho ngôn ngữ lập trình JavaScript, định nghĩa một API cho việc định nghĩa các module mã và các phụ thuộc của chúng, và tải chúng một cách bất đồng bộ nếu muốn. Các triển khai AMD mang lại nhiều lợi ích như cải thiện hiệu suất trang web, giảm lỗi trang do cho phép các nhà phát triển định nghĩa các phụ thuộc cần tải trước khi một module được thực thi. Ngoài ra, AMD cũng cung cấp một số khả năng tương thích với CommonJS, cho phép sử dụng một giao diện exports và require() tương tự trong mã, mặc dù giao diện define() của riêng nó được ưu tiên hơn

CommonJS

CommonJS là cách đóng gói mã JavaScript ban đầu cho Node.js. Node.js cũng hỗ trợ tiêu chuẩn ECMAScript modules được sử dụng bởi trình duyệt và các môi trường JavaScript khác. Trong Node.js, mỗi file được xem như một module riêng biệt. Ví dụ, một file tên là foo.js có thể tải module circle.js nằm trong cùng thư mục với foo.js. CommonJS chủ yếu được sử dụng trong các ứng dụng JS phía server với Node, và mỗi module được xuất thông qua việc gán giá trị mới cho thuộc tính module.exports

Sự Khác Biệt và Tương Thích

• AMD được thiết kế chủ yếu cho trình duyệt, cho phép tải các module và phụ thuộc của chúng một cách bất đồng bộ. Điều này giúp giảm thời gian tải trang và cải thiện trải nghiệm người dùng trên các ứng dụng web phức tạp
• CommonJS, mặt khác, được thiết kế với tâm trí hướng đến môi trường server, nơi tất cả các file và tài nguyên cần thiết đều có sẵn trên server. Điều này dẫn đến việc tải module một cách đồng bộ, phù hợp với môi trường Node.js

Cả hai hệ thống module này đều có ưu và nhược điểm riêng, tùy thuộc vào môi trường và yêu cầu cụ thể của ứng dụng. Trong khi AMD tối ưu cho việc tải bất đồng bộ và phù hợp với các ứng dụng web lớn, CommonJS lại phù hợp với các ứng dụng Node.js phía server với việc tải đồng bộ các module.

Mặc dù có sự khác biệt, cả hai hệ thống này đều hướng tới mục tiêu chung là cung cấp một cách tổ chức và quản lý mã JavaScript một cách hiệu quả, giúp phát triển các ứng dụng lớn và phức tạp trở nên dễ dàng hơn.

  const set = new Set([1, 1, 2, 3, 4]);

  console.log(set);

• A: [1, 1, 2, 3, 4]
• B: [1, 2, 3, 4]
• C: {1, 1, 2, 3, 4}
• D: {1, 2, 3, 4}

Đáp án: D

Set là một tập hơp các giá trị không trùng nhau.

Chúng ta đưa đầu vào là một mảng [1, 1, 2, 3, 4] với giá trị 1 bị trùng. Giá trị trùng đó sẽ bị loại bỏ. Kết quả là {1, 2, 3, 4}.

Hàm anonymous, hay còn gọi là hàm ẩn danh, là một loại hàm không có tên trong JavaScript. Hàm này có thể được sử dụng như một đối số cho các hàm khác, hoặc được gán vào một biến để sử dụng. Hàm anonymous thường được tạo ra và sử dụng ngay tại thời điểm chạy của chương trình

Đặc điểm

• Không có tên: Điểm đặc biệt nhất của hàm anonymous là nó không có tên. Khi khai báo, bạn chỉ cần sử dụng từ khóa function mà không cần đặt tên cho hàm
• Linh hoạt: Hàm anonymous có thể được gán vào một biến, hoặc được sử dụng trực tiếp như một đối số cho hàm khác
• Sử dụng một lần: Thường được sử dụng trong các trường hợp cần một hàm thực thi một tác vụ cụ thể mà không cần tái sử dụng sau này

Khi nào nên sử dụng?

• Callback: Khi một hàm cần một hàm khác làm đối số, hàm anonymous là lựa chọn phù hợp vì nó giúp code trở nên gọn gàng và trực quan hơn
• Event handling: Trong việc xử lý sự kiện, hàm anonymous thường được sử dụng để xử lý các hành động người dùng mà không cần định nghĩa một hàm riêng biệt
• IIFE (Immediately Invoked Function Expression): Hàm anonymous có thể được sử dụng để tạo ra một IIFE, giúp đóng gói và bảo vệ phạm vi của các biến

Ví dụ

// Gán hàm anonymous vào biến
var showMsg = function() {
    console.log("Hello, this is an anonymous function!");
};
showMsg();

// Sử dụng hàm anonymous làm callback
setTimeout(function() {
    console.log("This message is shown after 1 second.");
}, 1000);

// IIFE
(function() {
    console.log("This function runs immediately upon definition.");
})();

Lưu ý

• Hàm anonymous không thể được gọi trực tiếp bằng tên vì nó không có tên. Để sử dụng, bạn cần gán nó vào một biến hoặc sử dụng trực tiếp như một đối số
• Trong một số trường hợp, việc sử dụng quá nhiều hàm anonymous có thể khiến code trở nên khó đọc và khó bảo trì

Hàm anonymous là một công cụ linh hoạt và mạnh mẽ trong JavaScript, giúp lập trình viên có thể viết code một cách gọn gàng và hiệu quả, đặc biệt trong việc xử lý các tác vụ đơn lẻ hoặc tạo ra các IIFE.

use strict là một câu lệnh được sử dụng để bật strict mode cho toàn bộ tập lệnh hoặc các chức năng riêng lẻ. Strict mode là một cách để chọn tham gia một biến thể bị hạn chế (hạn chế một số tính năng) của JavaScript.

Ưu điểm:

• Làm cho nó không thể vô tình tạo ra các biến toàn cục.
• Đẩy ra các exception nếu xóa các thuộc tính không thể bị xóa (trước đó việc xóa đó chỉ đơn giản là không có tác dụng và cũng không có thông báo gì).
• Bắt buộc tên tham số hàm là duy nhất.
• this là undefined trong global context.
• Nó bắt một số blooper mã hóa phổ biến, thảy ra các exceptions.
• Nó vô hiệu hóa các tính năng khó hiểu hoặc không hiệu quả.

Nhược điểm:

• Nhiều tính năng bị thiếu mà một số nhà phát triển có thể đã quen dùng.
• Không còn quyền truy cập vào function.caller và function.arguments.
• Việc kết hợp các tập lệnh được viết ở các strict mode khác nhau có thể gây ra sự cố.

Nhìn chung, tôi nghĩ rằng "use strict" có lợi ích nhiều hơn bất lợi.

Trong JavaScript ES6, cả spread và rest sử dụng cú pháp ba dấu chấm (...), nhưng chúng phục vụ cho các mục đích khác nhau và mang lại những lợi ích riêng biệt.

Spread Operator

• Tạo bản sao của mảng hoặc đối tượng: Spread operator cho phép tạo bản sao của mảng hoặc đối tượng mà không cần dùng đến các phương thức như Object.assign() hoặc Array.slice(), giúp code ngắn gọn và dễ đọc hơn
• Kết hợp mảng: Spread operator có thể dùng để kết hợp nhiều mảng lại với nhau một cách dễ dàng và linh hoạt hơn so với phương thức concat()
• Truyền đối số vào hàm: Khi cần truyền một mảng các giá trị vào hàm dưới dạng đối số riêng lẻ, spread operator giúp giải nén mảng đó thành các đối số, thay thế cho việc sử dụng apply()
• Thêm phần tử vào mảng: Spread operator cho phép chèn các phần tử từ một mảng vào một mảng khác tại bất kỳ vị trí nào
• Chuyển đổi các đối tượng có thể lặp (iterable) thành mảng: Spread operator có thể chuyển đổi các đối tượng như Set hoặc Map thành mảng

Rest Parameters

• Nhóm các đối số thành mảng: Rest parameters cho phép hàm nhận một số lượng không xác định các đối số và nhóm chúng vào một mảng, giúp việc xử lý các đối số trở nên linh hoạt và dễ dàng hơn
• Rõ ràng và dễ đọc: Rest parameters cung cấp một cách rõ ràng để chỉ định các đối số mà không cần dùng đến đối tượng arguments kiểu Array-like, giúp code dễ đọc và dễ hiểu hơn

Tóm lại, spread operator thường được sử dụng để "trải" các giá trị ra, trong khi rest parameters được sử dụng để "nhóm" các giá trị lại. Spread operator mang lại lợi ích trong việc tạo bản sao, kết hợp mảng, và truyền đối số, còn rest parameters giúp xử lý số lượng đối số không xác định trong hàm. Cả hai đều là những cải tiến quan trọng trong ES6, giúp lập trình viên viết code ngắn gọn, hiệu quả và dễ bảo trì hơn.

Lập trình bất đồng bộ trong JavaScript là một mô hình lập trình cho phép việc xử lý các tác vụ mà không cần chờ đợi kết quả của tác vụ trước đó hoàn thành. Điều này giúp cải thiện hiệu suất và thời gian phản hồi của ứng dụng, đặc biệt là khi thực hiện các tác vụ nặng như truy cập mạng hoặc I/O

JavaScript là một ngôn ngữ đơn luồng (single-threaded), nghĩa là nó chỉ có thể xử lý một câu lệnh tại một thời điểm[8]. Để khắc phục vấn đề blocking khi thực hiện các tác vụ nặng, JavaScript sử dụng các WebAPIs do trình duyệt cung cấp để thực thi các tác vụ này một cách bất đồng bộ

Các phương thức xử lý bất đồng bộ phổ biến trong JavaScript bao gồm:

1. Callback: Là hàm được truyền vào như một tham số cho hàm khác và được gọi lại (callback) sau khi một tác vụ bất đồng bộ hoàn thành
2. Promise: Đại diện cho một giá trị có thể không được biết ngay lập tức nhưng sẽ được biết sau khi tác vụ bất đồng bộ hoàn thành. Promise có thể ở một trong ba trạng thái: pending, fulfilled, hoặc rejected
3. Async/Await: Là một cú pháp mới hơn giúp viết mã bất đồng bộ một cách rõ ràng và dễ đọc hơn. async được khai báo trước một hàm để biểu thị rằng hàm đó sẽ trả về một Promise, và await được sử dụng để chờ đợi một Promise hoàn thành

Bất đồng bộ giúp giải quyết vấn đề blocking của đồng bộ, được gọi là non-blocking, nghĩa là khi chạy một tác vụ nặng, những lệnh tiếp theo được phép chạy ngay mà không cần chờ tác vụ kia hoàn thành. Tuy nhiên, lập trình bất đồng bộ cũng đặt ra thách thức trong việc xử lý lỗi và quản lý tài nguyên dùng chung

Trong thực tế, việc sử dụng lập trình bất đồng bộ trong JavaScript là rất phổ biến, đặc biệt là trong các ứng dụng web hiện đại, nơi mà việc tối ưu hiệu suất và trải nghiệm người dùng là rất quan trọng

Trong JavaScript, việc truyền tham số vào hàm tuân theo nguyên tắc "pass-by-value" (truyền theo giá trị). Tuy nhiên, cách thức hoạt động của nguyên tắc này phụ thuộc vào loại dữ liệu của biến được truyền vào hàm: kiểu dữ liệu nguyên thủy (primitive types) hay kiểu dữ liệu tham chiếu (reference types).

Kiểu Dữ Liệu Nguyên Thủy (Primitive Types)

Các kiểu dữ liệu nguyên thủy bao gồm số (number), chuỗi (string), boolean, null, undefined, symbol (ES6), và bigint (ES2020). Khi một biến kiểu nguyên thủy được truyền vào hàm, JavaScript sẽ tạo một bản sao của giá trị đó và truyền bản sao vào hàm. Bất kỳ thay đổi nào đối với tham số trong hàm sẽ không ảnh hưởng đến biến bên ngoài hàm, vì thực chất giá trị được truyền vào hàm là một bản sao

Kiểu Dữ Liệu Tham Chiếu (Reference Types)

Các kiểu dữ liệu tham chiếu bao gồm các đối tượng (objects), mảng (arrays), và hàm (functions). Khi một biến kiểu tham chiếu được truyền vào hàm, JavaScript sẽ truyền địa chỉ tham chiếu của biến đó vào hàm, chứ không phải là một bản sao của giá trị. Do đó, bất kỳ thay đổi nào đối với thuộc tính hoặc phần tử của đối tượng hoặc mảng trong hàm sẽ ảnh hưởng trực tiếp đến biến bên ngoài hàm. Tuy nhiên, nếu bạn thay đổi tham chiếu của biến trong hàm (ví dụ, gán biến đó vào một đối tượng mới), thì tham chiếu bên ngoài hàm sẽ không bị thay đổi

Điều quan trọng cần lưu ý là mặc dù các kiểu dữ liệu tham chiếu được truyền theo địa chỉ tham chiếu, nhưng JavaScript vẫn tuân theo nguyên tắc "pass-by-value" vì địa chỉ tham chiếu đó được truyền dưới dạng một giá trị. Điều này có nghĩa là JavaScript luôn truyền tham số dưới dạng giá trị, nhưng đối với kiểu dữ liệu tham chiếu, giá trị đó là địa chỉ tham chiếu của đối tượng

Tóm lại, JavaScript là một ngôn ngữ "pass-by-value", nhưng cách thức hoạt động của nguyên tắc này khác nhau giữa kiểu dữ liệu nguyên thủy và kiểu dữ liệu tham chiếu.

  function getInfo(member, year) {
    member.name = "Lydia";
    year = "1998";
  }

  const person = { name: "Sarah" };
  const birthYear = "1997";

  getInfo(person, birthYear);

  console.log(person, birthYear);

• A: { name: "Lydia" }, "1997"
• B: { name: "Sarah" }, "1998"
• C: { name: "Lydia" }, "1998"
• D: { name: "Sarah" }, "1997"

Đáp án: A

Đối số sẽ được đưa vào hàm dạng tham trị, trừ phi nó là object, khi đó nó sẽ được đưa vào hàm dạng tham chiếu. birthYear là dạng giá trị, vì nó là string chứ không phải object. Khi chúng ta đưa vào dạng giá trị, một bản sao của giá trị đó sẽ được tạo ra (xem thêm câu 46).

birthYear trỏ đến giá trị là "1997". Đối số year cũng sẽ rỏ đến giá trị "1997", nhưng giá trị này chỉ là một bản sao của giá trị mà birthYear trỏ tới mà thôi, hai giá trị đó hoàn toàn khác nhau. Do đó khi ta thay đổi giá trị year bằng "1998", chúng ta chỉ thay đổi giá trị của year mà thôi. birthYear sẽ vẫn giữ giá trị là "1997".

person là một object. Biến member có một tham chiếu tới cùng object mà person trỏ tới. Khi chúng ta thay đổi một thuộc tính của object mà member trỏ tới, giá trị của person cũng sẽ tự động thay đổi theo, vì chúng có chung tham chiếu. name của person khi này sẽ có giá trị mới là "Lydia".

Sự khác biệt giữa các Host objects và Native objects trong JavaScript chủ yếu nằm ở nguồn gốc và mục đích sử dụng của chúng.

Native Objects

Native objects (Đối tượng nguyên thuỷ) là các đối tượng được định nghĩa bởi đặc tả ECMAScript của ngôn ngữ JavaScript. Chúng là một phần không thể thiếu của ngôn ngữ và được cung cấp sẵn bởi môi trường thực thi JavaScript. Native objects bao gồm các đối tượng như String, Math, RegExp, Object, Function, và nhiều đối tượng khác. Chúng được gọi là built-in objects, pre-defined objects, hoặc global objects và có sẵn cho tất cả người dùng, bất kể máy tính hay môi trường thực thi. Các chức năng của native objects không thay đổi khi thay đổi máy tính hoặc môi trường và có thể được sử dụng như cả constructors (ví dụ: String(), Array(), Object()) và giá trị nguyên thủy (ví dụ: true, 999)

Host Objects

Host objects (Đối tượng máy chủ) là các đối tượng được cung cấp bởi môi trường thời gian chạy, chẳng hạn như trình duyệt web hoặc Node.js. Chúng không được định nghĩa bởi đặc tả ECMAScript mà được cung cấp bởi môi trường thời gian chạy và có thể khác nhau giữa các môi trường. Ví dụ, trong môi trường trình duyệt, các host objects có thể bao gồm window, XMLHttpRequest, và các đối tượng DOM như NodeList. Trong khi đó, một số đối tượng như console được cung cấp bởi cả trình duyệt và máy chủ Node.js. Host objects có thể khác nhau giữa các môi trường và là đặc thù cho từng host (môi trường)

Sự Khác Biệt Chính

• Native Objects: Là các đối tượng tiêu chuẩn toàn cầu, giống nhau và được cung cấp bởi chính JavaScript.
• Host Objects: Là các đối tượng đặc thù cho môi trường (host), khác nhau giữa các môi trường và không được định nghĩa bởi đặc tả ECMAScript.

Sự hiểu biết về sự khác biệt giữa native objects và host objects giúp lập trình viên JavaScript hiểu rõ hơn về cách các đối tượng hoạt động trong các môi trường khác nhau và cách tận dụng chúng một cách hiệu quả trong các ứng dụng của mình

  // counter.js
  let counter = 10;
  export default counter;

// index.js
import myCounter from "./counter";

myCounter += 1;

console.log(myCounter);

• A: 10
• B: 11
• C: Error
• D: NaN

Đáp án: C

Một module khi được import sẽ là read-only: chúng ta sẽ không thể chỉnh sửa module đó, chỉ có bản thân module đó có thể chỉnh sửa giá trị của nó mà thôi.

Khi ta thay đổi giá trị cuả myCounter, nó sẽ throw ra một lỗi: myCounter là read-only và không thể thay đổi.

  const shape = {
    radius: 10,
    diameter() {
      return this.radius * 2;
    },
    perimeter: () => 2 * Math.PI * this.radius,
  };
  shape.diameter();
  shape.perimeter();

• A: 20 and 62.83185307179586
• B: 20 and NaN
• C: 20 and 63
• D: NaN and 63

Đáp án: B

Chú ý rằng giá trị diameter là một hàm thông thường, còn perimeter là một arrow function.

Không giống như hàm thông thường, với arrow function, biếnthis sẽ trỏ tới surrounding scope! Có nghĩa là khi chúng ta gọi perimeter, nó sẽ không được gọi bởi shape object, mà nó được gọi bởi object nào đó tại surrounding scope (ví dụ window chẳng hạn).

Khi không có giá trị radius tại object đó, nó sẽ trả về undefined.

Callback hell trong JavaScript, còn được gọi là "pyramid of doom" hoặc "hadouken", là một tình huống phổ biến trong lập trình bất đồng bộ với JavaScript, nơi mà các hàm callback được lồng vào nhau sâu và rộng, dẫn đến mã nguồn khó đọc, khó bảo trì và dễ gây lỗi. Điều này thường xảy ra khi bạn có nhiều thao tác bất đồng bộ cần phải được thực hiện theo một trình tự nhất định và kết quả của mỗi thao tác phụ thuộc vào thao tác trước đó.

Ví dụ về callback hell:

fs.readdir(source, function (err, files) {
  if (err) {
    console.log('Error finding files: ' + err)
  } else {
    files.forEach(function (filename, fileIndex) {
      // ... thêm nhiều lớp lồng nhau khác ...
    });
  }
});

Trong ví dụ trên, bạn có thể thấy rằng các hàm callback được lồng vào nhau nhiều lần, tạo ra một "hình kim tự tháp" của mã nguồn, và nhiều dấu }) ở cuối, làm cho mã nguồn trở nên rối rắm và khó theo dõi.

Để tránh callback hell, có một số phương pháp và kỹ thuật được khuyến nghị:

1. Chia Nhỏ Code: Tách các hàm callback ra thành các hàm độc lập và đặt tên cho chúng, giúp làm cho mã nguồn dễ đọc và dễ bảo trì hơn
2. Sử Dụng Promises: Promises cung cấp một cách tiếp cận chuỗi hơn và cho phép bạn xử lý các thao tác bất đồng bộ một cách rõ ràng và dễ đọc hơn
3. Async/Await: Tính năng này được giới thiệu trong ES2017 (ES8) và cho phép viết mã bất đồng bộ một cách giống như đồng bộ, làm cho mã nguồn trở nên sạch sẽ và dễ hiểu hơn
4. Thiết Kế Ứng Dụng Theo Dạng Module: Tách biệt logic thành các module nhỏ và tái sử dụng, giúp giảm sự phức tạp của mã nguồn và tránh lặp code
5. Sử Dụng Các Thư Viện Hỗ Trợ: Có các thư viện như async.js giúp quản lý và kiểm soát luồng thực thi của các hàm bất đồng bộ

Tránh callback hell không chỉ giúp cải thiện chất lượng mã nguồn mà còn giúp đảm bảo rằng ứng dụng của bạn có thể mở rộng và bảo trì dễ dàng hơn.

So sánh hai đối tượng trong JavaScript không giống như so sánh các kiểu dữ liệu nguyên thủy (primitive types) như số hoặc chuỗi. Đối với các đối tượng, việc so sánh chúng dựa trên tham chiếu (reference) chứ không phải giá trị. Điều này có nghĩa là ngay cả khi hai đối tượng có cùng cấu trúc và giá trị, chúng vẫn không bằng nhau nếu chúng không tham chiếu đến cùng một vị trí trong bộ nhớ

So sánh bằng tham chiếu

Khi sử dụng toán tử === để so sánh hai đối tượng, JavaScript sẽ kiểm tra xem cả hai có trỏ đến cùng một đối tượng trong bộ nhớ hay không. Nếu hai biến tham chiếu đến cùng một đối tượng, kết quả sẽ là true; nếu không, kết quả sẽ là false

So sánh bằng giá trị

Để so sánh hai đối tượng dựa trên giá trị của chúng, bạn cần sử dụng các phương pháp khác. Dưới đây là một số cách phổ biến:

1. Sử dụng JSON.stringify(): Phương pháp này chuyển đổi đối tượng thành chuỗi JSON và sau đó so sánh hai chuỗi này. Tuy nhiên, phương pháp này có hạn chế là thứ tự của các thuộc tính trong đối tượng phải giống nhau và không xử lý được các đối tượng có tham chiếu tuần hoàn

   javascript

   let a = { name: 'Dionysia', age: 29 };
   let b = { name: 'Dionysia', age: 29 };
   console.log(JSON.stringify(a) === JSON.stringify(b)); // true hoặc false tùy thuộc vào thứ tự của thuộc tính

2. Sử dụng thư viện Lodash: Phương thức _.isEqual() của Lodash thực hiện so sánh sâu (deep comparison) giữa hai đối tượng, bao gồm cả các đối tượng lồng nhau và không quan tâm đến thứ tự của các thuộc tính

   javascript

   let a = { age: 29, name: 'Dionysia' };
   let b = { name: 'Dionysia', age: 29 };
   console.log(_.isEqual(a, b)); // true

3. So sánh sâu tự viết: Bạn có thể tự viết hàm để so sánh sâu giữa hai đối tượng, bằng cách đệ quy kiểm tra từng thuộc tính và giá trị của chúng

   javascript

   function isDeepEqual(object1, object2) {
     const keys1 = Object.keys(object1);
     const keys2 = Object.keys(object2);
     if (keys1.length !== keys2.length) {
       return false;
     }
     for (let key of keys1) {
       const val1 = object1[key];
       const val2 = object2[key];
       const areObjects = isObject(val1) && isObject(val2);
       if (
         (areObjects && !isDeepEqual(val1, val2)) ||
         (!areObjects && val1 !== val2)
       ) {
         return false;
       }
     }
     return true;
   }

Kết luận

Khi so sánh hai đối tượng trong JavaScript, bạn không thể sử dụng toán tử == hoặc === vì chúng chỉ so sánh tham chiếu chứ không phải giá trị. Để so sánh giá trị của hai đối tượng, bạn có thể sử dụng JSON.stringify() cho các trường hợp đơn giản hoặc _.isEqual() từ thư viện Lodash cho một giải pháp mạnh mẽ và đáng tin cậy hơn. Nếu bạn cần một giải pháp tùy chỉnh, việc viết một hàm so sánh sâu tự viết có thể là lựa chọn phù hợp

forEach() và map() là hai phương thức phổ biến trong JavaScript được sử dụng để lặp qua các phần tử của mảng, nhưng chúng có những sự khác biệt quan trọng về cách thức hoạt động và mục đích sử dụng.

Sự Khác Biệt Chính

1. Giá Trị Trả Về:

   • forEach(): Không trả về giá trị nào (undefined). Phương thức này thường được sử dụng để thực hiện một hành động nào đó cho mỗi phần tử của mảng mà không cần tạo ra một mảng mới
   • map(): Trả về một mảng mới, trong đó mỗi phần tử là kết quả của việc áp dụng một hàm đã cho lên từng phần tử của mảng ban đầu. map() thích hợp khi bạn muốn "biến đổi" các phần tử của mảng và tạo ra một mảng mới mà không thay đổi mảng gốc

2. Khả Năng Chaining (Liên Kết Các Phương Thức):

   • forEach(): Không thể chain (liên kết) với các phương thức khác vì nó trả về undefined
   • map(): Có thể được chain với các phương thức khác như reduce(), sort(), filter() vì nó trả về một mảng mới, cho phép thực hiện các thao tác tiếp theo trên mảng đó

3. Tác Động Đến Mảng Ban Đầu:

   • forEach(): Có thể thay đổi mảng ban đầu thông qua các hành động được thực hiện trong callback. Tuy nhiên, việc này không phải là mục đích chính của forEach() và thường được tránh để duy trì tính bất biến của dữ liệu
   • map(): Không thay đổi mảng ban đầu. Mọi thay đổi đều được phản ánh trong mảng mới được trả về, giữ nguyên tính bất biến của mảng gốc

Khi Nào Sử Dụng

• Sử dụng forEach() khi bạn cần thực hiện một hành động cho mỗi phần tử của mảng mà không cần tạo ra một mảng mới hoặc khi bạn không quan tâm đến kết quả trả về từ việc thực hiện hành động đó
• Sử dụng map() khi bạn muốn tạo ra một mảng mới từ việc biến đổi mỗi phần tử của mảng ban đầu, ví dụ như tăng giá trị của mỗi phần tử lên 1, hoặc chuyển đổi dữ liệu từ dạng này sang dạng khác

Tóm lại, lựa chọn giữa forEach() và map() phụ thuộc vào mục đích sử dụng: nếu bạn cần một mảng mới từ việc biến đổi các phần tử, hãy sử dụng map(). Nếu bạn chỉ muốn thực hiện một hành động nào đó mà không cần mảng mới, forEach() sẽ là lựa chọn phù hợp.

Để viết một hàm có tên lucky_sevens nhận một mảng các số nguyên và trả về giá trị true nếu ba phần tử liên tiếp bất kỳ có tổng bằng 7, bạn có thể thực hiện như sau:

function lucky_sevens(arr) {
    // Kiểm tra nếu mảng có ít hơn 3 phần tử thì không thể có 3 phần tử liên tiếp có tổng bằng 7
    if (arr.length < 3) return false;

    // Duyệt qua mảng, bắt đầu từ chỉ số 0 đến chỉ số length - 3
    for (let i = 0; i < arr.length - 2; i++) {
        // Tính tổng của ba phần tử liên tiếp
        let sum = arr[i] + arr[i + 1] + arr[i + 2];
        // Nếu tổng bằng 7, trả về true
        if (sum === 7) return true;
    }

    // Nếu không tìm thấy ba phần tử liên tiếp nào có tổng bằng 7, trả về false
    return false;
}

Giải thích:

• Hàm lucky_sevens nhận vào một mảng arr.
• Đầu tiên, kiểm tra nếu mảng có ít hơn 3 phần tử thì không thể có ba phần tử liên tiếp có tổng bằng 7, do đó trả về false.
• Sử dụng một vòng lặp for để duyệt qua mảng từ phần tử đầu tiên đến phần tử áp chót thứ hai (vì ta cần ba phần tử để tính tổng).
• Trong mỗi lần lặp, tính tổng của ba phần tử liên tiếp bắt đầu từ phần tử thứ i.
• Nếu tổng bằng 7, trả về true.
• Nếu vòng lặp kết thúc mà không tìm thấy ba phần tử liên tiếp nào có tổng bằng 7, trả về false.

Lưu ý: Mã giả định rằng mảng đầu vào chỉ chứa các số nguyên.

Trong JavaScript, không có sự khác biệt đáng kể giữa việc sử dụng throw Error('msg') và throw new Error('msg'). Cả hai cách này đều tạo ra một instance mới của đối tượng Error và ném (throw) nó như một ngoại lệ. Điều này được xác nhận bởi việc gọi hàm Error với hoặc không có từ khóa new đều tạo ra một instance mới của Error

Khi bạn sử dụng throw để ném một ngoại lệ, bạn có thể ném bất kỳ loại giá trị nào, không chỉ là các đối tượng Error. Tuy nhiên, thực hành tốt nhất là ném một instance của Error hoặc một lớp kế thừa từ Error, vì điều này cung cấp thông tin lỗi chi tiết hơn và cho phép xử lý lỗi một cách hiệu quả hơn

Sử dụng Error hoặc new Error để tạo một ngoại lệ cung cấp cho bạn một số lợi ích như:

• Có thể chỉ định thông điệp lỗi (message) để giải thích nguyên nhân của lỗi.
• Có thể sử dụng các thuộc tính khác của đối tượng Error, như stack, để có được thông tin chi tiết về ngăn xếp gọi tại thời điểm lỗi xảy ra, giúp việc debug trở nên dễ dàng hơn.
• Khi ném một đối tượng Error, bạn có thể bắt (catch) nó trong một khối catch và xử lý lỗi một cách linh hoạt.

Ví dụ về việc ném và bắt một lỗi:

try {
  throw new Error('Đây là một lỗi!');
} catch (e) {
  console.log(e.message); // In ra: Đây là một lỗi!
}

Tóm lại, việc sử dụng throw Error('msg') và throw new Error('msg') trong JavaScript đều tạo ra một ngoại lệ mới với thông điệp lỗi được chỉ định. Không có sự khác biệt đáng kể nào giữa hai cách này về mặt kỹ thuật hoặc hành vi

  const settings = {
    username: "lydiahallie",
    level: 19,
    health: 90,
  };

  const data = JSON.stringify(settings, ["level", "health"]);
  console.log(data);

• A: "{"level":19, "health":90}"
• B: "{"username": "lydiahallie"}"
• C: "["level", "health"]"
• D: "{"username": "lydiahallie", "level":19, "health":90}"

Đáp án: A

Đối số thứ hai của JSON.stringify là replacer. Replacer Có thể là một hàm hoặc một mảng, nó sẽ quy định xem giá trị nào sẽ được chuỗi hóa ra sao.

Nếu replacer là một mảng, chỉ có các thuộc tính có tên trong mảng được convert thành chuỗi JSON. Trong trường hợp này, chỉ có các thuộc tính "level" và "health" được đưa vào, "username" bị loại bỏ. data giờ sẽ là "{"level":19, "health":90}".

Nếu replacer là function, hàm này sẽ được gọi trên từng thuộc tính của object được chuỗi hóa. Giá trị trả về sẽ là giá trị được đưa vào chuỗi JSON. Nếu trả về undefined, thuộc tính này sẽ bị loại bỏ khỏi chuỗi.

  const one = false || {} || null;
  const two = null || false || "";
  const three = [] || 0 || true;
  console.log(one, two, three);

• A: false null []
• B: null "" true
• C: {} "" []
• D: null null true

Đáp án: C

Với phép toán ||, ta sẽ trả về giá trị truethy đầu tiên. Nếu tất cả đều là falsy, giá trị cuối cùng sẽ được trả về.

(false || {} || null): object rỗng {} là một giá trị truthy. Nó là giá trị truethy đầu tiên và duy nhất nên sẽ được trả về. Do đó one sẽ là {}.

(null || false || ""): Tất cả toán hạng đều là falsy. Có nghĩa là toán hạng cuối cùng "" sẽ được trả về. Do đó two sẽ là "".

([] || 0 || ""): mảng rỗng [] là một giá trị truthy. Nó là giá trị truthy đầu tiên nên sẽ được trả về. Do đó three sẽ là [].

  console.log(String.raw`Hello
world`);

• A: Hello world!
• B: Hello
     world
• C: Hello world
• D: `Hello

Đáp án: C

String.raw trả về chuỗi nguyên bản, các ký tự ( , , etc.) sẽ vẫn là nguyên bản và không biến thành xuống dòng hay khoảng trắng! Nếu ta không để là chuỗi nguyên bản, sẽ có trường hợp xảy ra lỗi không mong muốn, ví dụ với đường dẫn:

const path = `C:DocumentsProjects able.html`

Sẽ cho ta chuỗi là:

"C:DocumentsProjects able.html"

Với String.raw, nó sẽ trả về là:

C:DocumentsProjects able.html

Do đó, trong trường hợp này Hello world sẽ được ghi ra.

Sự kiện load trong JavaScript là một sự kiện quan trọng, được kích hoạt khi một trang web hoàn toàn tải xong tất cả nội dung bao gồm hình ảnh, tệp JavaScript, tệp CSS, và các phụ thuộc khác. Sự kiện này thường được sử dụng trong thẻ <body> để thực thi một đoạn script ngay sau khi trang web tải xong hoàn toàn

Đặc điểm của sự kiện load:

• Sự kiện load xảy ra khi đối tượng đã được tải hoàn toàn.
• Sự kiện này không thể hủy bỏ (non-cancelable) và không lan truyền (non-bubbling).
• Thường được sử dụng để kiểm tra loại trình duyệt và phiên bản trình duyệt của người dùng, và tải phiên bản phù hợp của trang web dựa trên thông tin đó
• Có thể được sử dụng để xử lý cookies
• Sự kiện load khác với sự kiện DOMContentLoaded, sự kiện này được kích hoạt ngay khi DOM của trang đã tải xong, không cần chờ đợi các tài nguyên khác hoàn tất việc tải

Cách sử dụng sự kiện load:

Bạn có thể sử dụng sự kiện load bằng cách thêm thuộc tính onload vào một phần tử HTML hoặc gán nó cho một đối tượng trong JavaScript. Dưới đây là một số cách để đăng ký sự kiện load:

Trong HTML:

<body onload="myFunction()">

Trong JavaScript:

window.onload = function() {
  // Mã lệnh được thực thi sau khi trang tải xong
};

Hoặc sử dụng addEventListener để thêm một trình xử lý sự kiện:

window.addEventListener("load", function() {
  // Mã lệnh được thực thi sau khi trang tải xong
});

Lưu ý khi sử dụng sự kiện load:

• Nếu bạn cần thực thi mã ngay khi DOM sẵn sàng mà không cần chờ đợi các tài nguyên khác, bạn nên sử dụng sự kiện DOMContentLoaded thay vì load
• Để đảm bảo rằng các tài nguyên như CSS được tải trước khi JavaScript thực thi, bạn nên đặt các tệp CSS trong thẻ <head> và các tệp JavaScript ở cuối thẻ <body>

Sự kiện load là một công cụ hữu ích để đảm bảo rằng tất cả các tài nguyên cần thiết cho trang web đã sẵn sàng trước khi thực hiện các thao tác liên quan đến DOM hoặc các tài nguyên khác.

  const box = { x: 10, y: 20 };
  Object.freeze(box);
  const shape = box;
  shape.x = 100;
  console.log(shape);

• A: { x: 100, y: 20 }
• B: { x: 10, y: 20 }
• C: { x: 100 }
• D: ReferenceError

Đáp án: B

Object.freeze khiến cho chúng ta không thể thêm vào, xóa đi hay thay đổi bất kì thuộc tính nào của object (trừ phi giá trị của thuộc tính lại chính là một object khác).

Khi chúng ta tạo ra biến shape và set cho nó giá trị bằng với một object đã được đóng băng là box, thì shape cũng sẽ trỏ tới một object đã được đóng băng. Ta có thể check một object có đang bị đóng băng hay không bằng Object.isFrozen. Trong trường hợp này, Object.isFrozen(shape) trả về true, vì shape đang trỏ tới một object bị đóng băng.

Do đó, cộng với việc x không phải là object, ta sẽ không thể thay đổi giá trị của x. x sẽ vẫn là 10, và { x: 10, y: 20 } được ghi ra.

  function* generator(i) {
    yield i;
    yield i * 2;
  }
  const gen = generator(10);
  console.log(gen.next().value);
  console.log(gen.next().value);

• A: [0, 10], [10, 20]
• B: 20, 20
• C: 10, 20
• D: 0, 10 and 10, 20

Đáp án: C

Một hàm bình thường không thể bị dừng giữa chừng khi được gọi. Tuy nhiên một generator thì khác, nó có thể "dừng lại" được, và sau đó nó sẽ tiếp tục từ vị trí nó dừng lại. Mỗi khi một generator gặp một từ khóa yield, nó sẽ sinh ra giá trị ngay phía sau nó. Chú ý là generator không trả về giá trị, nó sinh ra giá trị.

Đầu tiên, chúng ta khởi tạo generator với giá trị i là 10. Generator được gọi bằng cách sử dụng phương thức next(). Khi lần đầu gọi thì i vẫn là 10. Khi nó bắt gặp từ khóa yield: nó sẽ sinh ra giá trị i. Generator sẽ được "tạm dừng" tại đây, và ghi ra giá trị 10.

Sau đó chung ta tiếp tục gọi generator bằng cách sử dụng tiếp phương thức next(). Nó sẽ bắt đầu từ vị trí nó tạm dừng lúc trước, khi i vẫn đang là 10. Và khi nó bắt gặp từ khóa yield, nó sẽ sinh ra giá trị i * 2. i là 10, nên nó sẽ sinh ra 10 * 2, tức 20. Vậy kết quả cuối cùng là 10, 20.

  const list = [1 + 2, 1 * 2, 1 / 2];
  console.log(list);

• A: ["1 + 2", "1 * 2", "1 / 2"]
• B: ["12", 2, 0.5]
• C: [3, 2, 0.5]
• D: [1, 1, 1]

Đáp án: C

Mảng có thể nhận bất cứ giá trị nào. Số, chuỗi, objects, mảng khác, null, boolean, undefined, và nhiều dạng biểu thức nữa như ngày tháng, hàm, và các tính toán.

Giá trị của phần tử chính là giá trị trả về. 1 + 2 trả về 3, 1 * 2 trả về 2, và 1 / 2 trả về 0.5.

Bubbling event là một khái niệm trong quá trình lan truyền sự kiện (event propagation) trong DOM của JavaScript. Khi một sự kiện xảy ra trên một phần tử, nó không chỉ được xử lý tại phần tử đó mà còn được "bong bóng" lên qua các phần tử cha của nó trong cấu trúc DOM, từ phần tử mục tiêu (target element) cho đến đối tượng cửa sổ toàn cầu (global window object)

Cách Thức Hoạt Động của Bubbling Event

Khi một sự kiện được kích hoạt, sau khi được xử lý tại phần tử mục tiêu, nó sẽ bắt đầu "bong bóng" lên qua các phần tử cha. Sự kiện sẽ đi qua tất cả các phần tử cha theo thứ tự lồng nhau của chúng trong giai đoạn "bubbling". Trong quá trình này, bất kỳ trình xử lý sự kiện (event handler) nào được đăng ký trên các phần tử cha cũng sẽ được thực thi

Ngăn Chặn Bubbling Event

Để ngăn chặn sự kiện tiếp tục "bong bóng" lên các phần tử cha, bạn có thể sử dụng phương thức stopPropagation() trên đối tượng sự kiện. Phương thức này ngăn chặn sự lan truyền của sự kiện hiện tại trong các giai đoạn capturing và bubbling. Tuy nhiên, nó không ngăn chặn các hành vi mặc định từ việc xảy ra; ví dụ, các click trên liên kết vẫn được xử lý. Nếu bạn muốn ngăn chặn cả hành vi mặc định, bạn cần sử dụng phương thức preventDefault()

Ví dụ

Dưới đây là một ví dụ về cách ngăn chặn bubbling event:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Event Bubbling Example</title>
</head>
<body>
    <div id="parent">
        <button id="child">Click me</button>
    </div>

    <script>
        // Trình xử lý sự kiện cho phần tử cha
        document.getElementById("parent").addEventListener("click", function() {
            alert("Parent element clicked!");
        });

        // Trình xử lý sự kiện cho phần tử con và ngăn chặn bubbling
        document.getElementById("child").addEventListener("click", function(event) {
            alert("Child element clicked!");
            event.stopPropagation(); // Ngăn chặn sự kiện "bong bóng" lên phần tử cha
        });
    </script>
</body>
</html>

Trong ví dụ trên, khi bạn click vào nút có id là "child", chỉ có thông báo "Child element clicked!" được hiển thị và sự kiện không "bong bóng" lên phần tử cha, do đó thông báo "Parent element clicked!" sẽ không được hiển thị.

Tóm lại, bubbling event là một phần quan trọng của việc xử lý sự kiện trong JavaScript, cho phép các sự kiện được xử lý theo cấp độ phân cấp. Tuy nhiên, trong một số trường hợp, bạn có thể muốn ngăn chặn sự kiện này để tránh kích hoạt các trình xử lý sự kiện không mong muốn trên các phần tử cha, và bạn có thể làm điều này bằng cách sử dụng phương thức stopPropagation()

  const myPromise = () => Promise.resolve("I have resolved!");
  function firstFunction() {
  myPromise().then((res) => console.log(res));
  console.log("second");
  }
  async function secondFunction() {
  console.log(await myPromise());
  console.log("second");
  }
  firstFunction();
  secondFunction();

• A: I have resolved!, second và I have resolved!, second
• B: second, I have resolved! và second, I have resolved!
• C: I have resolved!, second và second, I have resolved!
• D: second, I have resolved! và I have resolved!, second

Đáp án: D

Có thể tưởng tượng đơn giản cách promise thực thi như sau: bây giờ tôi sẽ để tạm nó sang một bên vì nó tính toán mất thời gian. Chỉ khi nào nó được hoàn thành (resolved) hay bị hủy bỏ (rejected) hay khi call stack trở nên rỗng thì tôi sẽ lấy giá trị trả về ra.

Dù chúng ta có thể sử dụng giá trị thu được bằng cú pháp .then, hoặc sử dụng cặp cú pháp await/async, nhưng, cách chúng hoạt động là khác nhau.

Trong firstFunction, chúng ta đưa promise qua một bên chờ cho nó tính toán xong, và vẫn tiếp tục chạy những code tiếp sau đó, theo đó console.log('second') sẽ được chạy. Sau đó promise được hoàn thành trả về giá trị I have resolved, giá trị này sẽ được log ra khi call stack trở nên rỗng.

Với từ khóa await trong secondFunction, ta đã tạm dừng một hàm bất đồng bộ cho tới khi chúng trả về giá trị, sau đó ta mới đi tiếp đến các câu lệnh tiếp theo.

Do đó nó sẽ chờ cho tới khi myPromise được hoàn thành và trả về giá trị I have resolved, sau đó chúng ta sẽ chạy tiếp câu lệnh tiếp theo in ra second.

  let randomValue = { name: "Lydia" };
  randomValue = 23;

  if (!typeof randomValue === "string") {
    console.log("It's not a string!");
  } else {
    console.log("Yay it's a string!");
  }

• A: It's not a string!
• B: Yay it's a string!
• C: TypeError
• D: undefined

Đáp án: B

Điều kiện trong mệnh đề if kiểm tra xem giá trị của !typeof randomValue bằng với "string" hay không. Phép toán ! chuyển giá trị đó thành giá trị boolean. Nếu giá trị là truthy, giá trị trả về sẽ là false, nếu giá trị là falsy, giá trị trả về sẽ là true. Trong trường hợp này, giá trị trả về của typeof randomValue là giá trị truthy "number", nghĩa là giá trị của !typeof randomValue là một giá trị boolean false.

!typeof randomValue === "string" luôn trả về false, vì ta thực sự đang kiểm tra false === "string". Vì điều kiện đã trả về false, code của mệnh đề else sẽ chạy và Yay it's a string! được in ra.

Trong JavaScript, một object (đối tượng) là một cấu trúc dữ liệu cho phép lưu trữ và quản lý dữ liệu dưới dạng cặp khóa (key) và giá trị (value). Object trong JavaScript có thể được so sánh với một thực thể độc lập, có thuộc tính và kiểu, giống như các đối tượng thực tế trong cuộc sống hàng ngày. Mỗi cặp khóa và giá trị trong một object được gọi là một property, trong đó khóa thường là một chuỗi hoặc symbol, và giá trị có thể là bất kỳ kiểu dữ liệu nào, bao gồm cả một object khác

Khai báo và Truy cập Object

Object trong JavaScript có thể được khai báo sử dụng cú pháp object literal, bằng cách sử dụng dấu ngoặc nhọn {} và liệt kê các property bên trong. Mỗi property được phân tách bởi dấu phẩy

const person = {
  name: "John Doe",
  age: 30
};

Có hai cách để truy cập vào các property của object:

• Dot notation: objectName.propertyName
• Bracket notation: objectName["propertyName"]

Thuộc tính và Phương thức

Trong một object, giá trị của property có thể là một hàm, khi đó property đó được gọi là một phương thức (method) của object. Phương thức là các hàm được gắn với object và thường được sử dụng để xác định hành vi của object

const person = {
  name: "John Doe",
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

person.greet(); // Output: Hello, John Doe

Nested Objects

Object trong JavaScript có thể chứa các object khác, tạo thành cấu trúc dữ liệu phức tạp với nhiều cấp độ lồng nhau

const person = {
  name: "John Doe",
  address: {
    street: "123 Main St",
    city: "Anytown"
  }
};

console.log(person.address.city); // Output: Anytown

Tính linh hoạt

Object trong JavaScript rất linh hoạt và cho phép thêm hoặc xóa các property sau khi object đã được tạo. Điều này giúp JavaScript trở thành một ngôn ngữ lập trình mạnh mẽ và linh hoạt, phù hợp với nhiều loại ứng dụng khác nhau

Kết luận

Object trong JavaScript là một khái niệm cốt lõi, giúp lập trình viên có thể lưu trữ và quản lý dữ liệu một cách hiệu quả. Sự linh hoạt và khả năng lưu trữ dữ liệu phức tạp làm cho object trở thành một công cụ không thể thiếu trong việc phát triển ứng dụng web.

Coercion trong JavaScript là quá trình chuyển đổi tự động hoặc ngầm định giá trị từ một kiểu dữ liệu này sang kiểu dữ liệu khác, như từ chuỗi sang số. Coercion có thể xảy ra khi bạn áp dụng các toán tử cho các giá trị có kiểu khác nhau hoặc khi giá trị được sử dụng trong một ngữ cảnh cụ thể mà ở đó kiểu dữ liệu cần phải được chuyển đổi

Coercion có thể là rõ ràng (explicit) hoặc ngầm định (implicit). Coercion rõ ràng xảy ra khi lập trình viên biểu thị ý định chuyển đổi giữa các kiểu bằng cách viết mã phù hợp, như sử dụng hàm Number(value) để chuyển một giá trị thành số. Trong khi đó, coercion ngầm định xảy ra khi JavaScript tự động chuyển đổi giữa các kiểu khác nhau mà không cần sự can thiệp của lập trình viên

Ví dụ về coercion ngầm định:

const value1 = "5";
const value2 = 9;
let sum = value1 + value2;
console.log(sum); // Kết quả là "59"

Trong ví dụ trên, JavaScript đã tự động chuyển đổi số 9 thành một chuỗi và sau đó nối hai giá trị lại với nhau, kết quả là một chuỗi "59". Để có kết quả là tổng số, bạn cần phải chuyển đổi rõ ràng "5" thành một số bằng cách sử dụng phương thức Number()

Coercion ngầm định có thể hữu ích nhưng cũng có thể gây ra những lỗi không mong muốn, đặc biệt là khi so sánh các giá trị với toán tử bằng lỏng lẻo ==. Do đó, việc sử dụng toán tử bằng chặt === được khuyến nghị để tránh những hành vi không mong muốn này

  function Car() {
    this.make = "Lamborghini";
    return { make: "Maserati" };
  }

  const myCar = new Car();
  console.log(myCar.make);

• A: "Lamborghini"
• B: "Maserati"
• C: ReferenceError
• D: TypeError

Đáp án: B

Khi chúng ta trả về một thuộc tính, giá trị của thuộc tính bằng với giá trị đã được trả về bởi lệnh return, chứ không phải giá trị được set trong constructor. Chúng ta trả về giá trị là "Maserati", do đó myCar.make sẽ là "Maserati".

Trong JavaScript, call(), apply(), và bind() là ba phương thức quan trọng của Function, giúp chúng ta làm việc với từ khóa this và các đối số của hàm một cách linh hoạt. Mỗi phương thức có cách sử dụng và mục đích riêng.

call()

Phương thức call() cho phép bạn gọi một hàm với một giá trị this được chỉ định và các đối số được truyền vào một cách rõ ràng. Cú pháp của call() là func.call(thisArg, arg1, arg2, ...), trong đó thisArg là giá trị this muốn gán, và arg1, arg2, ... là các đối số truyền vào hàm

apply()

Phương thức apply() rất giống với call(), nhưng thay vì truyền các đối số một cách rõ ràng, apply() cho phép bạn truyền một mảng các đối số. Cú pháp của apply() là func.apply(thisArg, [argsArray]), với thisArg là giá trị this muốn gán, và [argsArray] là mảng chứa các đối số

bind()

Phương thức bind() tạo ra một hàm mới, có giá trị this được ràng buộc với giá trị được cung cấp. Khác với call() và apply(), bind() không tự động gọi hàm mà trả về một hàm mới với context this đã được set. Cú pháp của bind() là func.bind(thisArg[, arg1[, arg2[, ...]]]), trong đó thisArg là giá trị this muốn gán, và arg1, arg2, ... là các đối số mặc định cho hàm mới

Khi nào sử dụng?

• call() và apply() thường được sử dụng khi bạn muốn gọi một hàm với một giá trị this cụ thể hoặc khi bạn muốn mượn một hàm từ một đối tượng khác mà không tạo ra một phương thức mới cho đối tượng đó. Sự khác biệt chính giữa hai phương thức này là cách thức truyền đối số: call() nhận đối số dưới dạng danh sách, trong khi apply() nhận đối số dưới dạng mảng
• bind() thường được sử dụng khi bạn cần ràng buộc this cho một hàm để sử dụng sau này, ví dụ như trong các sự kiện hoặc khi bạn cần đảm bảo rằng this trong một hàm luôn trỏ đến đối tượng mong muốn, bất kể nó được gọi như thế nào

Ví dụ

let person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
};

let person1 = {
    firstName: "John",
    lastName: "Doe"
};

// Sử dụng call()
console.log(person.fullName.call(person1));  // John Doe

// Sử dụng apply()
console.log(person.fullName.apply(person1)); // John Doe

// Sử dụng bind()
let getPersonName = person.fullName.bind(person1);
console.log(getPersonName());  // John Doe

Tóm lại, call(), apply(), và bind() là các phương thức mạnh mẽ giúp bạn kiểm soát giá trị của this trong JavaScript, mỗi phương thức có những ứng dụng và cách sử dụng riêng biệt phù hợp với nhu cầu cụ thể trong lập trình

  const keys = ["name", "age"];
  const values = ["Lydia", 22];

  const method =
    /* ?? */
    Object[method](
      keys.map((_, i) => {
        return [keys[i], values[i]];
      }),
    ); // { name: "Lydia", age: 22 }

• A: entries
• B: values
• C: fromEntries
• D: forEach

Đáp án: C

Hàm fromEntries trả về một mảng 2d trong một object. Phần tử đầu tiên trong từng mảng con sẽ là từ khoá và phần tử thứ hai trong từng mảng con sẽ là giá trị. Trong trường hợp này, ta tiến hành map qua mảng keys, nó sẽ trả về một mảng mà phần tử đầu tiên của mảng đó là phần tử trên thứ tự hiện tại của mảng key, và phần tử thứ hai của mảng đó là phần tử trên thứ tự hiện tại của mảng values.

Theo như trên thì ta tạo ra một mảng gồm những mảng con chứa đựng những từ khoá và giá trị đúng, và nó trả về { name: "Lydia", age: 22 }.

  class Dog {
    constructor(name) {
      this.name = name;
    }
  }

  Dog.prototype.bark = function () {
    console.log(`Woof I am ${this.name}`);
  };

  const pet = new Dog("Mara");

  pet.bark();

  delete Dog.prototype.bark;

  pet.bark();

• A: "Woof I am Mara", TypeError
• B: "Woof I am Mara","Woof I am Mara"
• C: "Woof I am Mara", undefined
• D: TypeError, TypeError

Đáp án: A

Chúng ta có thể xóa các thuộc tính khỏe object bằng từ khóa delete, kể cả với prototype. Khi chúng ta xóa một thuộc tính trên prototype, nó sẽ bị vô hiệu hóa hoàn toàn trong chuỗi prototype. Trong trường hợp này, hàm bark sẽ bị vô hiệu hóa ngay sau khi chúng ta thực hiện hàm xóa delete Dog.prototype.bark, tất nhiên ta vẫn có thể truy cập vào nó nhưng giá trị sẽ là undefined.

Khi chúng ta chạy một thứ không phải là hàm, nó sẽ bắn ra một TypeError. Trong trường hợp này là TypeError: pet.bark is not a function, vì bản thân thuộc tính pet.bark là undefined.

Để "deep-freeze" một đối tượng trong JavaScript, bạn cần sử dụng phương thức Object.freeze() kết hợp với đệ quy. Phương thức Object.freeze() ngăn chặn việc thêm mới, xóa bỏ, hoặc thay đổi các thuộc tính của đối tượng, cũng như ngăn chặn việc thay đổi prototype của đối tượng. Tuy nhiên, Object.freeze() chỉ áp dụng một "shallow freeze", nghĩa là nó chỉ đóng băng các thuộc tính trực tiếp của đối tượng và không áp dụng cho các đối tượng lồng nhau. Để đạt được một "deep freeze", bạn cần áp dụng đệ quy để đóng băng mọi đối tượng lồng nhau

Dưới đây là một ví dụ về cách thực hiện "deep freeze" một đối tượng:

function deepFreeze(object) {
    // Lấy tất cả tên thuộc tính của đối tượng
    const propNames = Reflect.ownKeys(object);

    // Đóng băng các thuộc tính trước khi đóng băng chính đối tượng
    for (const name of propNames) {
        const value = object[name];
        if ((value && typeof value === "object") || typeof value === "function") {
            deepFreeze(value);
        }
    }

    return Object.freeze(object);
}

const obj2 = {
    internal: {
        a: null,
    },
};

deepFreeze(obj2);
obj2.internal.a = "anotherValue"; // Thay đổi này sẽ không có hiệu lực

Trong ví dụ trên, hàm deepFreeze sẽ đệ quy qua tất cả các thuộc tính của đối tượng. Nếu một thuộc tính là một đối tượng hoặc một hàm, hàm deepFreeze sẽ được gọi đệ quy cho thuộc tính đó trước khi đóng băng chính đối tượng. Cuối cùng, Object.freeze() được gọi để đóng băng đối tượng. Kết quả là, bạn không thể thay đổi, thêm mới, hoặc xóa bỏ bất kỳ thuộc tính nào của đối tượng, kể cả trong các đối tượng lồng nhau

Lưu ý rằng việc sử dụng "deep freeze" có thể ảnh hưởng đến hiệu suất nếu đối tượng có cấu trúc phức tạp và lồng nhau sâu. Do đó, hãy cân nhắc kỹ trước khi áp dụng cho toàn bộ đối tượng lớn hoặc phức tạp.

Con trỏ this trong JavaScript được dùng để tham chiếu đến đối tượng mà nó thuộc về, hay nói cách khác, this đại diện cho ngữ cảnh mà đoạn mã đang được thực thi. Trong JavaScript, giá trị của this không cố định mà phụ thuộc vào cách mà hàm hoặc phương thức được gọi

Cách hoạt động của this

• Khi một hàm được gọi như là một phương thức của một đối tượng, this tham chiếu đến đối tượng đó
• Khi một hàm được gọi mà không phải là một phương thức của đối tượng, this tham chiếu đến đối tượng global, tức là window trong trình duyệt và global trong Node.js. Tuy nhiên, trong strict mode, this sẽ là undefined
• Trong các hàm mũi tên (arrow functions), this được "bắt" từ ngữ cảnh bên ngoài hàm mũi tên, tức là nó không có this riêng mà sử dụng this từ ngữ cảnh bên ngoài của nó

Ví dụ về this

const person = {
  name: "Alice",
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

person.greet(); // "Hello, Alice" - `this` tham chiếu đến đối tượng `person`

Trong trường hợp hàm được gọi không thông qua một đối tượng:

function showName() {
  console.log(this.name);
}

const user = { name: "Bob" };
window.name = "GlobalName";

showName(); // "GlobalName" - `this` tham chiếu đến `window` trong trình duyệt

Sử dụng this trong các trường hợp đặc biệt

• Khi sử dụng this trong một hàm callback hoặc một hàm được truyền như một tham số, giá trị của this có thể không phải là như mong đợi. Trong trường hợp này, các phương thức như bind, call, và apply có thể được sử dụng để rõ ràng xác định giá trị của this

Tóm lại

this là một từ khóa quan trọng trong JavaScript, giúp xác định ngữ cảnh thực thi của mã. Hiểu rõ cách this hoạt động là cần thiết để viết mã chính xác và tránh các lỗi không mong muốn liên quan đến ngữ cảnh thực thi.

Trong JavaScript, shim và polyfill là hai khái niệm thường được sử dụng để giúp code JavaScript hoạt động trên các trình duyệt khác nhau, đặc biệt là các trình duyệt cũ không hỗ trợ các tính năng mới. Dù có mục đích tương tự nhau, chúng có những đặc điểm và cách sử dụng khác nhau.

Shim

• Định nghĩa: Shim là một thư viện trong ngôn ngữ JavaScript có chức năng chặn các lời gọi API (Application Programming Interface) và có thể sửa đổi các tham số được truyền, xử lý chính hoạt động đó hoặc đôi khi chuyển hướng hoạt động đến một nơi khác. Shim có thể được sử dụng để thực thi các chương trình trên nhiều nền tảng phần mềm khác nhau mà chúng không được phát triển cho
• Chức năng: Shim cung cấp một API mới cho một môi trường nền tảng cũ, nhưng không thể thêm vào những thực thi bị thiếu trong một lời gọi API

Polyfill

• Định nghĩa: Polyfill, hay còn gọi là polyfilling, là phiên bản tiếp theo hoặc phiên bản cao cấp hơn của shim. Polyfill là khái niệm về việc thực thi các tính năng bị mất trong một lời gọi API, nơi mà shim không thể thực thi các tính năng bị mất đó. Polyfill là một đoạn mã hoặc plugin cung cấp công nghệ mà bạn mong đợi trình duyệt web cung cấp một cách tự nhiên. Polyfill thêm vào các trình duyệt cũ với thực thi HTML5/CSS3 hiện đại
• Chức năng: Polyfill cài đặt thực thi của riêng nó nếu các tính năng bị thiếu, không chỉ sửa chữa hành vi của mã đã tồn tại mà còn thực thi một tính năng trên các trình duyệt web không hỗ trợ tính năng đó, dù nó có tồn tại hay không

Khi nào sử dụng?

• Shim thường được sử dụng khi cần mang một API mới đến một môi trường nền tảng cũ, nhưng không cần thêm vào những thực thi bị thiếu.
• Polyfill được sử dụng khi cần thực thi các tính năng bị thiếu trong trình duyệt, đặc biệt là để đảm bảo tính tương thích giữa các trình duyệt cũ và các tính năng mới của HTML5/CSS3.

Tóm lại, cả shim và polyfill đều là những công cụ quan trọng trong việc viết mã JavaScript tương thích với nhiều trình duyệt, nhưng chúng khác nhau về mục đích và cách thức hoạt động. Shim cung cấp một API mới cho môi trường cũ mà không thêm vào thực thi bị thiếu, trong khi polyfill thêm vào thực thi cho các tính năng bị thiếu để đảm bảo tính tương thích trên các trình duyệt

Trong JavaScript ES6, Arrow Functions mang lại cú pháp ngắn gọn và tiện lợi cho việc viết hàm, nhưng không phải lúc nào chúng cũng là lựa chọn tốt nhất. Dưới đây là một số trường hợp bạn không nên sử dụng Arrow Functions:

1. Khi cần sử dụng this trong ngữ cảnh động: Arrow Functions không có this riêng của chúng. this trong Arrow Functions được xác định bởi ngữ cảnh bên ngoài (lexical this) khi hàm được khai báo, không phải khi hàm được gọi. Điều này có thể gây ra vấn đề khi bạn cần this để tham chiếu đến đối tượng chứa hàm đó, như trong các phương thức của đối tượng hoặc khi xử lý sự kiện
2. Khi định nghĩa phương thức trong đối tượng: Nếu bạn sử dụng Arrow Functions để định nghĩa phương thức trong một đối tượng, this sẽ không trỏ đến đối tượng đó mà trỏ đến ngữ cảnh bên ngoài, thường là window hoặc undefined trong strict mode. Điều này làm cho Arrow Functions không phù hợp để định nghĩa phương thức trong đối tượng
3. Khi sử dụng làm hàm khởi tạo (constructor): Arrow Functions không thể sử dụng làm hàm khởi tạo và sẽ báo lỗi nếu bạn cố gắng sử dụng new với Arrow Function. Điều này là do Arrow Functions không có this riêng và không có thuộc tính prototype
4. Khi cần sử dụng arguments object: Arrow Functions không cung cấp đối tượng arguments giống như các hàm thông thường. Nếu bạn cần truy cập vào các đối số được truyền vào hàm mà không được định nghĩa trước trong danh sách tham số, Arrow Functions sẽ không phù hợp
5. Khi cần định nghĩa các phương thức trong class: Khi sử dụng Arrow Functions để định nghĩa phương thức trong class, bạn có thể gặp phải vấn đề với this giống như khi định nghĩa phương thức trong đối tượng. this trong Arrow Functions sẽ không trỏ đến instance của class

Tóm lại, mặc dù Arrow Functions mang lại nhiều lợi ích về cú pháp ngắn gọn và tiện lợi, nhưng chúng không phù hợp cho mọi tình huống, đặc biệt là khi cần sử dụng this trong ngữ cảnh động, định nghĩa phương thức trong đối tượng hoặc class, sử dụng làm hàm khởi tạo, hoặc khi cần truy cập vào đối tượng arguments.

Từ khóa new trong JavaScript được sử dụng để tạo một thể hiện mới của một đối tượng từ một hàm tạo (constructor function) hoặc từ một lớp (class). Khi một hàm được gọi với từ khóa new, hàm đó sẽ được sử dụng như một hàm tạo, và new sẽ thực hiện các bước sau

1. Tạo một đối tượng trống, đơn giản.
2. Gán đối tượng mới này (newInstance) vào thuộc tính [[Prototype]] của hàm tạo, nếu prototype là một đối tượng. Nếu không, newInstance sẽ là một đối tượng đơn giản với Object.prototype làm [[Prototype]] của nó.
3. Thực thi hàm tạo với các đối số đã cho, liên kết newInstance như là this trong hàm tạo.
4. Trả về đối tượng mới tạo, trừ khi hàm tạo trả về một giá trị không phải nguyên thủy (đối tượng JavaScript tùy chỉnh).

Một hàm có thể biết liệu nó có được gọi với new hay không bằng cách kiểm tra new.target. new.target chỉ không xác định khi hàm được gọi mà không có new

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

function Car(color) {
  if (!new.target) {
    // Được gọi như một hàm.
    return `${color} car`;
  }
  // Được gọi với new.
  this.color = color;
}

const a = Car("red"); // a là "red car"
const b = new Car("red"); // b là `Car { color: "red" }`

Nếu không sử dụng new, hàm tạo có thể được gọi như một hàm thông thường (tức là không có new), và trong trường hợp này không có đối tượng mới nào được tạo và giá trị của this cũng khác

Tóm lại, từ khóa new cho phép các nhà phát triển tạo ra một thể hiện của một kiểu đối tượng do người dùng định nghĩa hoặc một trong những kiểu đối tượng tích hợp sẵn có trong JavaScript

DOM trong ngữ cảnh của phát triển web là viết tắt của Document Object Model. Đây là một giao diện lập trình ứng dụng (API) đa nền tảng và độc lập với ngôn ngữ lập trình, cho phép các tài liệu HTML hoặc XML được xem như một cấu trúc cây, trong đó mỗi nút của cây đại diện cho một phần của tài liệu

Đặc Điểm của DOM:

• Cấu trúc cây: DOM mô tả tài liệu dưới dạng một cấu trúc cây, với mỗi phần tử, thuộc tính, và nội dung văn bản được biểu diễn như là một nút (node) trong cây
• Tương tác: DOM cho phép các ngôn ngữ lập trình như JavaScript tương tác với tài liệu, cho phép thay đổi cấu trúc, kiểu dáng và nội dung của tài liệu một cách động
• Độc lập với ngôn ngữ: Mặc dù DOM thường được sử dụng với JavaScript, nó được thiết kế để độc lập với bất kỳ ngôn ngữ lập trình cụ thể nào và có thể được triển khai cho bất kỳ ngôn ngữ nào

DOM không phải là một phần của ngôn ngữ JavaScript; nó là một Web API được sử dụng để xây dựng các trang web. JavaScript thường được sử dụng để tương tác với DOM và thực hiện các thao tác như thêm, xóa hoặc sửa đổi các phần tử HTML, lắng nghe và xử lý sự kiện, và thay đổi CSS của các phần tử

Ưu điểm của Promise so với Callback trong lập trình JavaScript bao gồm:

1. Cải thiện Đọc và Bảo trì Mã: Promises cung cấp cú pháp sạch sẽ và dễ đọc hơn so với callbacks. Cấu trúc mã trở nên tuyến tính và dễ theo dõi hơn, giúp dễ dàng hơn cho việc hiểu và bảo trì mã.
2. Loại bỏ Callback Hell: Promises giúp tránh được "Callback Hell" hoặc "Pyramid of Doom", nơi các callback lồng nhau dẫn đến mã khó đọc và hiểu. Promises cho phép bạn xử lý các hoạt động bất đồng bộ một cách duyên dáng hơn, cải thiện cấu trúc tổng thể của mã.
3. Xử lý Lỗi Tốt hơn: Promises có cơ chế xử lý lỗi tích hợp, giúp dễ dàng bắt và xử lý lỗi có thể xảy ra trong quá trình hoạt động bất đồng bộ. Điều này dẫn đến mã mạnh mẽ và đáng tin cậy hơn, vì quản lý lỗi là một phần không thể tách rời của cấu trúc promise.
4. Chuỗi và Tuần tự hóa: Promises tạo điều kiện cho việc chuỗi các hoạt động bất đồng bộ, làm cho việc tuần tự hóa nhiều tác vụ trở nên đơn giản. Khả năng chuỗi này tăng cường sự rõ ràng của mã, cung cấp một luồng logic hơn khi xử lý các tác vụ bất đồng bộ phụ thuộc.
5. Đơn giản hóa Thiết kế: Promises đơn giản hóa thiết kế mã của bạn. Chúng tóm gọn một số phức tạp liên quan đến callbacks, cho phép bạn tập trung vào logic của ứng dụng hơn là quản lý luồng hoạt động bất đồng bộ.
6. Đường Dẫn Thực thi Đơn lẻ: Promises đảm bảo một đường dẫn thực thi đơn lẻ, làm cho việc hiểu thứ tự hoạt động trở nên dễ dàng hơn. Sự dự đoán này góp phần vào độ tin cậy của mã và giảm thiểu khả năng xảy ra hành vi không mong muốn.
7. Xử lý Lỗi Toàn cầu: Promises cung cấp một cơ chế tập trung cho việc xử lý lỗi. Bạn có thể đính kèm một khối .catch() duy nhất ở cuối chuỗi promise để bắt bất kỳ lỗi nào có thể đã xảy ra ở bất kỳ điểm nào trong chuỗi. Điều này đơn giản hóa việc theo dõi và gỡ lỗi.
8. Thúc đẩy Luồng Mã Tự nhiên hơn: Promises góp phần vào một luồng mã tự nhiên và dễ hiểu hơn. Logic trở nên giống với mã đồng bộ hơn, cho phép các nhà phát triển biểu đạt trình tự hoạt động mong muốn mà không bị gián đoạn bởi các phức tạp liên quan đến callback.

Tóm lại, việc chọn Promises thay vì callbacks không chỉ cải thiện các khía cạnh kỹ thuật của mã mà còn cải thiện trải nghiệm tổng thể của việc viết và bảo trì mã. Các lợi ích bao gồm cải thiện khả năng đọc, loại bỏ callback hell, xử lý lỗi tốt hơn, khả năng chuỗi, đơn giản hóa thiết kế, một đường dẫn thực thi đơn lẻ và xử lý lỗi toàn cầu.

Trong JavaScript, null, undefined và undeclared đều đại diện cho các trạng thái khác nhau của biến, và việc hiểu rõ sự khác biệt giữa chúng là quan trọng để viết mã nguồn chính xác và tránh lỗi.

null

• Định nghĩa: null là một giá trị nguyên thủy trong JavaScript, được sử dụng để biểu thị một biến có giá trị "không có gì" hoặc "trống rỗng". Nó thể hiện sự vắng mặt ý định của một giá trị đối tượng
• Kiểu dữ liệu: Khi kiểm tra kiểu dữ liệu của null bằng toán tử typeof, kết quả trả về là "object"
• Sử dụng: null thường được gán một cách chủ động vào biến để biểu thị rằng biến đó không trỏ đến bất kỳ đối tượng nào

undefined

• Định nghĩa: undefined biểu thị rằng một biến đã được khai báo nhưng chưa được gán giá trị, hoặc một thuộc tính không tồn tại trong đối tượng
• Kiểu dữ liệu: Khi kiểm tra kiểu dữ liệu của undefined bằng toán tử typeof, kết quả trả về là "undefined"
• Sử dụng: undefined thường xuất hiện tự nhiên khi một biến được khai báo mà không có giá trị khởi tạo, hoặc khi truy cập vào một thuộc tính không tồn tại của đối tượng

undeclared

• Định nghĩa: Một biến undeclared là biến chưa được khai báo trong phạm vi hiện tại, tức là không sử dụng var, let, hoặc const để khai báo
• Kiểu dữ liệu: Không áp dụng vì biến undeclared không tồn tại trong phạm vi hiện tại.
• Sử dụng: Khi một biến được sử dụng mà không được khai báo, JavaScript sẽ báo lỗi ReferenceError

So sánh và Kiểm Tra

• So sánh null và undefined: Trong so sánh trừu tượng (sử dụng ==), null và undefined được coi là bằng nhau (null == undefined trả về true). Tuy nhiên, trong so sánh nghiêm ngặt (sử dụng ===), chúng không bằng nhau (null === undefined trả về false)
• Kiểm tra undeclared: Khi truy cập một biến undeclared, JavaScript sẽ báo lỗi ReferenceError vì biến đó không tồn tại trong phạm vi hiện tại

Kết luận

null và undefined đều là giá trị nguyên thủy trong JavaScript nhưng biểu thị hai trạng thái khác nhau: null là một giá trị rỗng được gán một cách chủ động, trong khi undefined là giá trị mặc định cho biến chưa được khởi tạo. undeclared là trạng thái của một biến không được khai báo và sẽ gây ra lỗi nếu cố gắng sử dụng nó

  const user = {
    email: "my@email.com",
    updateEmail: (email) => {
      this.email = email;
    },
  };

  user.updateEmail("new@email.com"); console.log(user.email);

• A: my@email.com
• B: new@email.com
• C: undefined
• D: ReferenceError

Đáp án: A

Hàm updateEmail là một cú pháp arrow function và nó không gắn với user object. Điều này cho thấy từ khoá this không trỏ tới user object mà trỏ tới global scope. Giá trị của email trong user object không thay đổi. Khi ta in ra giá trị của user.email, nó trả về giá trị ban đầu của my@email.com.

IIFEs, viết tắt của Immediately Invoked Function Expressions, là một kỹ thuật trong JavaScript để thực thi một hàm ngay lập tức sau khi nó được định nghĩa. IIFEs thường được sử dụng để tạo ra một phạm vi lexical (phạm vi từ vựng) bằng cách sử dụng phạm vi hàm, giúp tránh việc các biến bị nâng lên (hoisting) từ bên trong các khối lệnh, bảo vệ khỏi việc làm bẩn không gian toàn cục (global namespace) và đồng thời cho phép truy cập công khai đến các phương thức trong khi vẫn giữ được tính riêng tư

Cấu trúc cơ bản của một IIFE bao gồm một hàm ẩn danh được bao quanh bởi toán tử nhóm () để ngăn chặn việc truy cập vào các biến bên trong IIFE cũng như ngăn chặn việc làm bẩn không gian toàn cục. Phần thứ hai tạo ra biểu thức hàm được gọi ngay lập tức () thông qua đó trình biên dịch JavaScript sẽ trực tiếp diễn giải hàm

IIFEs có thể được viết theo nhiều cách khác nhau, nhưng một quy ước phổ biến là đặt biểu thức hàm - và tùy chọn toán tử gọi hàm của nó - trong cặp dấu ngoặc đơn, để rõ ràng báo cho trình phân tích cú pháp biết rằng đây là một biểu thức

Ví dụ về một IIFE đơn giản:

(function () {
    // Mã lệnh của bạn ở đây
})();

Hoặc sử dụng biến thể hàm mũi tên (arrow function):

(() => {
    // Mã lệnh của bạn ở đây
})();

IIFEs có thể được sử dụng để tránh làm bẩn không gian toàn cục, thực hiện các hàm bất đồng bộ như setTimeout(), hoặc tạo ra các biến riêng tư mà bạn muốn ngăn chặn sự thay đổi hoặc chỉnh sửa không mong muốn

Một ví dụ về việc sử dụng IIFE để tạo ra các biến riêng tư:

const counter = (function () {
    let i = 0;
    return {
        get: function () { return i; },
        set: function (val) { i = val; },
        increment: function () { return ++i; }
    };
})();

Trong ví dụ trên, biến i là riêng tư và không thể truy cập từ bên ngoài IIFE. Các phương thức get, set, và increment là công khai và có thể được gọi từ bên ngoài IIFE, nhưng chúng vẫn có thể truy cập biến i riêng tư bên trong IIFE

IIFEs cũng có thể được đặt tên, mặc dù việc đặt tên không làm thay đổi thực tế là hàm không "rò rỉ" ra không gian toàn cục và không thể được gọi lại sau khi thực thi

Ngoài ra, IIFEs có thể được sử dụng để tạo ra các biến và phương thức riêng tư và công khai trong mô hình module

Tóm lại, IIFEs là một công cụ hữu ích trong JavaScript để tạo ra phạm vi riêng tư, tránh làm bẩn không gian toàn cục và thực thi mã ngay lập tức.

  const set = new Set();
  set.add(1);
  set.add("Lydia");
  set.add({ name: "Lydia" });
  for (let item of set) {
    console.log(item + 2);
  }

• A: 3, NaN, NaN
• B: 3, 7, NaN
• C: 3, Lydia2, [object Object]2
• D: "12", Lydia2, [object Object]2

Đáp án: C

Phép toán + không chỉ dùng để cộng các số, mà nó còn dùng để nối chuỗi nữa. Mỗi khi Javascript engine gặp một giá trị trong phép toán không phải dạng số, nó sẽ chuyển các số trong phép toán đó sang dạng chuỗi.

Phép toán đầu tiên item là một số 1, nên 1 + 2 trả về 3.

Ở phép toán thứ hai, item là một chuỗi "Lydia". trong khi đó 2 là một số, nên 2 sẽ bị chuyển sang dạng chuỗi, sau khi nối vào ta có chuỗi "Lydia2".

Ở phép toán thứ ba, { name: "Lydia" } là một object. Tuy nhiên dù có là object hay gì đi nữa thì nó cũng sẽ bị chuyển sang dạng chuỗi. Đối với object thì khi chuyển sang dạng chuỗi nó sẽ trở thành "[object Object]". "[object Object]" nối với "2" trở thành "[object Object]2".

let number = 0;
console.log(number++);
console.log(++number);
console.log(number);

• A: 1 1 2
• B: 1 2 2
• C: 0 2 2
• D: 0 1 2

Đáp án: C

Khi phép toán ++ nằm ở đằng sau (postfix):

1. Trả về giá trị (trả về 0)
2. Tăng giá trị lên (number giờ là 1)

Khi phép toán ++ nằm ở đằng trước (prefix):

1. Tăng giá trị lên (number giờ là 2)
2. Trả về giá trị (trả về 2)

Vậy kết quả là 0 2 2.

Scope trong JavaScript

Scope trong JavaScript xác định khả năng truy cập của biến và hàm ở các phần khác nhau trong một đoạn code. Có hai loại scope chính: global scope và local scope

Global Scope

Biến được khai báo ngoài tất cả các hàm là biến toàn cục (global) và có thể được truy cập từ bất kỳ đâu trong mã JavaScript. Ví dụ:

var name = 'GlobalName'; // Biến toàn cục

function showName() {
  console.log(name); // Truy cập biến toàn cục từ bên trong hàm
}

showName(); // In ra: GlobalName

Local Scope

Biến được khai báo bên trong một hàm là biến cục bộ (local) và chỉ có thể được truy cập từ bên trong hàm đó. Mỗi hàm định nghĩa một scope riêng, và biến cục bộ không thể được truy cập từ bên ngoài hàm đó:

function showName() {
  var localName = 'LocalName'; // Biến cục bộ
  console.log(localName); // Truy cập biến cục bộ từ bên trong hàm
}

showName(); // In ra: LocalName
console.log(localName); // Uncaught ReferenceError: localName is not defined

Scope Chain

Scope chain là cơ chế mà JavaScript sử dụng để tìm kiếm biến và hàm. Khi một biến không được tìm thấy trong scope hiện tại, JavaScript sẽ tìm kiếm trong scope cha, và tiếp tục như vậy cho đến khi tìm thấy biến hoặc đến khi đạt đến global scope

Mỗi function định nghĩa một scope riêng, và mỗi function được định nghĩa bên trong một function khác sẽ tạo ra một nested scope. Biến được định nghĩa trong một scope có thể được truy cập từ bất kỳ nested scope nào bên trong nó:

var globalName = 'GlobalName'; // Biến toàn cục

function outerFunction() {
  var outerName = 'OuterName'; // Biến cục bộ của outerFunction

  function innerFunction() {
    var innerName = 'InnerName'; // Biến cục bộ của innerFunction
    console.log(innerName); // InnerName
    console.log(outerName); // OuterName
    console.log(globalName); // GlobalName
  }

  innerFunction();
}

outerFunction();

Trong ví dụ trên, innerFunction có thể truy cập cả innerName, outerName, và globalName thông qua scope chain. Tuy nhiên, outerFunction không thể truy cập innerName vì nó nằm ngoài scope của outerFunction.

Scope chain cũng liên quan đến cơ chế hoisting, nơi mà các khai báo biến và hàm được di chuyển lên đầu scope trước khi code được thực thi. Điều này có nghĩa là bạn có thể tham chiếu đến một biến trước cả khi nó được khai báo trong cùng một scope:

function showName() {
  console.log(name); // undefined do hoisting
  var name = 'LocalName';
  console.log(name); // LocalName
}

showName();

Trong trường hợp trên, console.log(name) đầu tiên in ra undefined vì biến name đã được hoisted, nhưng chưa được gán giá trị.

Kết luận

Hiểu rõ về scope và scope chain là chìa khóa để viết code chống lỗi và trở thành developer tốt hơn. Bạn sẽ hiểu được ở đâu biến và hàm có thể được truy cập, có thể thay đổi scope của ngữ cảnh trong code của bạn, và viết code nhanh hơn, dễ bảo trì hơn, cũng như debug dễ dàng hơn

  async function getData() {
    return await Promise.resolve("I made it!");
  }

  const data = getData();
  console.log(data);

• A: "I made it!"
• B: Promise {<resolved>: "I made it!"}
• C: Promise {<pending>}
• D: undefined

Đáp án: C

Một hàm async luôn luôn trả về một promise. await sẽ chờ cho tới khi promise đó được hoàn thành: một pending promise sẽ được trả về khi ta gọi getData() bằng cách gán nó cho biến data.

Nếu ta muốn truy cập giá trị đã hoàn thành của promise, trong trường hợp này là "I made it", ta có thể sử dụng hàm .then() ngay sau data như sau:

data.then(res => console.log(res))

Khi này nó sẽ ghi ra "I made it!"

  const colorConfig = {
    red: true,
    blue: false,
    green: true,
    black: true,
    yellow: false,
  };
  const colors = ["pink", "red", "blue"];
  console.log(colorConfig.colors[1]);

• A: true
• B: false
• C: undefined
• D: TypeError

Đáp án: D

Trong Javascript ta có hai cách để truy cập thuộc tính của một object: sử dụng ngoặc vuông [], hoặc sử dụng chấm .. Trong trương hợp này chúng ta sử dụng chấm (colorConfig.colors) thay cho ngoặc vuông (colorConfig["colors"]).

Với cách sử dụng chấm, Javascript sẽ tìm kiếm một thuộc tính có tên chính xác như tên ta đưa vào. Trong trường hợp này nó là thuộc tính colors trong object colorConfig Tuy nhiên trong object này không có thuộc tính nào tên là colors, nên nó sẽ trả về undefined. Sau đó chúng ta cố truy cậ vào thuộc tính 1 của nó bằng cách gọi [1]. Chúng ta không thể làm như vậy trên giá trị undefined, nên nó sẽ trả về TypeError: Cannot read property '1' of undefined.

Javascript thông dịch theo câu lệnh. Khi ta sử dụng ngoặc vuông, Nnó sẽ tìm mở ngoặc đầu tiên [ và tiếp tục cho tới khi gặp đóng ngoặc tương ứng ]. Chỉ khi đó nó mới đánh giá câu lệnh. Nếu chúng ta sử dụng cú pháp colorConfig[colors[1]], nó sẽ trả về giá trị của thuộc tính red trong object colorConfig.

JSONP (JSON with Padding)

JSONP là một kỹ thuật được sử dụng để vượt qua hạn chế về chính sách cùng nguồn (same-origin policy) trong các ứng dụng web. Chính sách này ngăn chặn các trang web từ việc yêu cầu tài nguyên từ một miền khác, gây khó khăn trong việc truy cập dữ liệu từ các API nằm trên các miền khác nhau. JSONP giải quyết vấn đề này bằng cách sử dụng thẻ <script> để thực hiện yêu cầu, vì thẻ <script> không bị hạn chế bởi chính sách cùng nguồn

Cách hoạt động của JSONP bao gồm việc gửi một yêu cầu đến máy chủ với một tham số callback trong URL. Máy chủ sau đó trả về dữ liệu dưới dạng một hàm JavaScript, với dữ liệu được bao quanh bởi hàm callback đã được chỉ định. Khi dữ liệu được trả về, hàm callback sẽ được thực thi tự động, cho phép dữ liệu được xử lý bởi trang web

AJAX (Asynchronous JavaScript and XML)

AJAX, viết tắt của Asynchronous JavaScript and XML, là một kỹ thuật cho phép trang web gửi và nhận dữ liệu từ máy chủ một cách không đồng bộ, mà không cần phải tải lại trang web. Điều này giúp cải thiện trải nghiệm người dùng bằng cách làm cho các ứng dụng web trở nên nhanh chóng và đáp ứng hơn

AJAX hoạt động bằng cách sử dụng đối tượng XMLHttpRequest để gửi yêu cầu đến máy chủ và nhận dữ liệu trả về. Dữ liệu trả về có thể ở nhiều định dạng khác nhau, bao gồm XML, JSON, HTML, hoặc văn bản thuần túy. Sau khi nhận được dữ liệu, JavaScript được sử dụng để cập nhật trang web mà không cần tải lại trang

Sự Khác Biệt Chính

• Chính sách cùng nguồn: AJAX tuân thủ chính sách cùng nguồn, nghĩa là nó chỉ có thể gửi yêu cầu đến cùng một miền như trang web đang gửi yêu cầu. Trong khi đó, JSONP cho phép vượt qua hạn chế này bằng cách sử dụng thẻ <script>
• Phương thức yêu cầu: JSONP chỉ hỗ trợ phương thức GET do nó sử dụng thẻ <script> để gửi yêu cầu. AJAX hỗ trợ cả GET và POST, cho phép gửi dữ liệu phức tạp hơn đến máy chủ
• Bảo mật: JSONP có rủi ro bảo mật cao hơn do nó thực thi mã JavaScript từ một miền khác, có thể dẫn đến các cuộc tấn công XSS. AJAX được coi là an toàn hơn khi sử dụng trong cùng một miền

Kết Luận

Mặc dù JSONP và AJAX đều là các kỹ thuật cho phép truy cập dữ liệu không đồng bộ trong các ứng dụng web, chúng hoạt động dựa trên các nguyên tắc khác nhau và có những ưu nhược điểm riêng. JSONP là một giải pháp để vượt qua hạn chế về chính sách cùng nguồn nhưng có rủi ro bảo mật cao hơn, trong khi AJAX cung cấp một cách an toàn và linh hoạt hơn để tương tác với máy chủ, nhưng bị hạn chế bởi chính sách cùng nguồn

Không thể reset một generator trong JavaScript để trở về trạng thái ban đầu mà không gọi lại hàm generator. Một khi generator đã đạt trạng thái "hoàn thành" (khi thuộc tính done trở thành true), nó sẽ ở trạng thái đó vĩnh viễn và không thể được reset. Điều này có nghĩa là bất kỳ trạng thái thực thi nào liên quan đến generator có thể được loại bỏ. Nếu bạn muốn sử dụng lại generator, bạn cần phải khởi tạo một thể hiện mới của nó

Tuy nhiên, có một số cách để "reset" giá trị mà generator đã yield về giá trị ban đầu hoặc cập nhật nó bằng cách truyền một đối số vào phương thức next(). Điều này chỉ có thể thực hiện trước khi generator hoàn thành. Ví dụ, bạn có thể truyền một giá trị vào phương thức next() để cập nhật biến trạng thái bên trong generator, nhưng điều này không thực sự "reset" generator về trạng thái ban đầu của nó mà chỉ thay đổi giá trị mà nó sẽ yield tiếp theo

Nếu bạn muốn sử dụng lại một generator sau khi nó đã hoàn thành, giải pháp duy nhất là khởi tạo lại nó bằng cách gọi lại hàm generator. Điều này tạo ra một thể hiện mới của generator, cho phép bạn bắt đầu quá trình lặp lại từ đầu

Trong JavaScript, việc sử dụng các phương thức và thuộc tính private được giới thiệu như một phần của cú pháp lớp (class syntax) trong ECMAScript 2015 (ES6) và được mở rộng với các tính năng bổ sung trong các phiên bản sau. Các phương thức và thuộc tính private trong một lớp chỉ có thể được truy cập từ bên trong lớp đó. Tuy nhiên, việc sử dụng các phương thức và thuộc tính private trong JavaScript có một số hạn chế:

1. Khả năng tương thích: Hỗ trợ cho các thuộc tính và phương thức private trong JavaScript không phải là toàn cầu. Mặc dù các trình duyệt hiện đại và môi trường như Node.js đã bắt đầu hỗ trợ tính năng này, nhưng vẫn có một số môi trường cũ hơn không hỗ trợ hoặc chỉ hỗ trợ một phần. Điều này có thể gây ra vấn đề khi cố gắng viết mã tương thích với nhiều môi trường khác nhau.
2. Gỡ lỗi và Kiểm tra: Việc gỡ lỗi và kiểm tra mã có thể trở nên phức tạp hơn khi sử dụng các thuộc tính và phương thức private. Các công cụ gỡ lỗi không thể truy cập trực tiếp vào các thành phần private từ bên ngoài lớp, điều này có thể làm cho việc kiểm tra và gỡ lỗi mã trở nên khó khăn hơn.
3. Phản xạ và Động: Trong JavaScript, việc sử dụng phản xạ (reflection) và các kỹ thuật lập trình động để truy cập hoặc thay đổi mã tại thời gian chạy là khá phổ biến. Tuy nhiên, các thuộc tính và phương thức private không thể được truy cập hoặc thay đổi thông qua phản xạ hoặc các phương pháp động khác từ bên ngoài lớp, giới hạn khả năng linh hoạt của mã.
4. Sử dụng và Hiểu biết: Cú pháp và cách sử dụng các thuộc tính và phương thức private có thể không quen thuộc với tất cả các nhà phát triển JavaScript, đặc biệt là những người mới làm quen với ngôn ngữ hoặc chưa cập nhật với các tính năng mới nhất. Điều này có thể làm tăng độ phức tạp của mã và làm giảm khả năng đọc và bảo trì mã.
5. Thiết kế và Kiến trúc: Việc sử dụng quá mức các thuộc tính và phương thức private có thể dẫn đến việc thiết kế lớp quá phức tạp và khó mở rộng. Trong một số trường hợp, việc sử dụng các mẫu thiết kế và kỹ thuật khác có thể cung cấp một giải pháp linh hoạt và dễ bảo trì hơn.

Tóm lại, mặc dù các thuộc tính và phương thức private trong JavaScript mang lại nhiều lợi ích về bảo mật và đóng gói, nhưng cũng đi kèm với một số hạn chế liên quan đến khả năng tương thích, gỡ lỗi, phản xạ, và thiết kế. Các nhà phát triển cần cân nhắc kỹ lưỡng khi quyết định sử dụng tính năng này trong các dự án của mình.

  let person = { name: "Lydia" };
  const members = [person];
  person = null;
  console.log(members);

• A: null
• B: [null]
• C: [{}]
• D: [{ name: "Lydia" }]

Đáp án: D

Đầu tiên, chúng ta khai báo một biến person là một object có thuộc tính name.

Sau đó chúng ta khai báo một biến members. Ta set giá trị đầu tiên của mảng là giá trị của biến person. Khi sử dụng gán bằng, object sẽ được tham chiếu tới object mà nó được gán. Khi ta gán tham chiếu từ một biến sang biến khác, ta tạo ra một bản sao của tham chiếu đó. (nên nhớ rằng đó vẫn là 2 tham chiếu hoàn toàn khác nhau!)

Sau đó ta set giá trị của person bằng null.

Chúng ta chỉ đơn thuần là thay đổi giá trị của biến person mà thôi, chứ không phải giá trị của phần tử đầu tiên ở trong mảng, vì chúng ta có một tham chiếu khác đến object đó. Phần tử đầu tiên của mảng members vẫn giữ tham chiêu đến object gốc. Do vậy, khi chúng ta in ra mảng members, phần tử đầu tiên sẽ vẫn in ra giá trị của objet gốc.

setInterval(() => console.log("Hi"), 1000);

• A: một id duy nhất
• B: số lượng milliseconds
• C: function truyền vào
• D: undefined

Đáp án: A

Nó trả về một id duy nhất. Id này dùng để clear interval sau này với hàm clearInterval().

  let c = { greeting: "Hey!" };
  let d;

  d = c;
  c.greeting = "Hello";
  console.log(d.greeting);

• A: Hello
• B: Hey
• C: undefined
• D: ReferenceError
• E: TypeError

Đáp án: A

Trong JavaScript, tất cả các object sẽ được tham chiếu khi chúng được gán _bằng_wwwww một giá trị khác.

Đầu tiên, giá trị c có giá trị là một object. Sau đó, chúng ta gán d tham chiếu tới object mà c trỏ tới.

Khi ta thay đổi giá trị của object, tất cả các biến tham chiếu cũng đều thay đổi giá trị theo.

  const promise1 = Promise.resolve("First");
  const promise2 = Promise.resolve("Second");
  const promise3 = Promise.reject("Third");
  const promise4 = Promise.resolve("Fourth");

  const runPromises = async () => {
    const res1 = await Promise.all([promise1, promise2]);
    const res2 = await Promise.all([promise3, promise4]);
    return [res1, res2];
  };

  runPromises()
    .then((res) => console.log(res))
    .catch((err) => console.log(err));

• A: [['First', 'Second'], ['Fourth']]
• B: [['First', 'Second'], ['Third', 'Fourth']]
• C: [['First', 'Second']]
• D: 'Third'

Đáp án: D

Hàm Promise.all trả về những promise truyền vào song song nhau. Nếu một promise thất bại, hàm Promise.all rejects với giá trị của promise đó. Trong trường hợp này, promise3 bị reject với giá trị "Third". Ta đang kiểm tra giá trị bị reject trong chuỗi hàm catch khi goi hàm runPromises để tìm ra lỗi trong hàm runPromises. Chỉ có "Third" được trả về vì promise3 reject giá trị này.

  var x = 1;
  var output = (function () {
    delete x;
    return x;
  })();
  console.log(output);

Đoạn mã trên có output là 1. Toán tử delete được sử dụng để xóa thuộc tính khỏi object. x ở đây không phải là một object mà là biến toàn cục (global variable) có kiểu là number.

  let a = 3;
  let b = new Number(3);
  let c = 3;

  console.log(a == b);
  console.log(a === b);
  console.log(b === c);

• A: true false true
• B: false false true
• C: true false false
• D: false true true

Đáp án: C

new Number() là một hàm built-in constructor. Mặc dù nó trông có vẻ giống như là một số, nhưng không phải: nó thực sự là một object với hàng tá những thông số khác nữa.

Khi ta sử dụng phép so sánh ==, nó đơn thuần chỉ kiểm tra xem 2 biến có giá trị giống nhau. Chúng đều có giá trị là 3, vậy nên phép toán đầu trả về true.

Tuy nhiên khi sử dụng phép so sánh ===, cả giá trị và kiểu đều phải giống nhau. Rõ ràng: new Number() không phải là một số, nó là một object. Cả 2 phép toán sau đều trả về false.

• A: Target > Capturing > Bubbling
• B: Bubbling > Target > Capturing
• C: Target > Bubbling > Capturing
• D: Capturing > Target > Bubbling

Đáp án: D

Trong capturing phase, event được truyền từ các phần tử cha cho tới phần tử target. Sau khi tới được phần tử target thì bubbling sẽ bắt đầu.

  const createMember = ({ email, address = {} }) => {
    const validEmail = /.+@.+..+/.test(email);
    if (!validEmail) throw new Error("Valid email pls");

    return {
      email,
      address: address ? address : null,
    };
  };

  const member = createMember({ email: "my@email.com" });
  console.log(member);

• A: { email: "my@email.com", address: null }
• B: { email: "my@email.com" }
• C: { email: "my@email.com", address: {} }
• D: { email: "my@email.com", address: undefined }

Đáp án: C

Giá trị mặc định của address là một object rỗng {}. Khi ta cho biến member bằng với object được trả về bởi hàm createMember, ta đã không truyền vào một giá trị của address, nghĩa là giá trị của address là object rỗng {} được mặc định. Object rỗng mang giá trị truthy, tức là điều kiện address ? address : null trả về true. Giá trị của address là một object rỗng {}.

Khi sử dụng Javascript trong HTML, chúng ta có thể sử dụng các thuộc tính async và defer để tối ưu hóa quá trình tải trang web và cải thiện trải nghiệm người dùng.

Thuộc tính async cho phép các script được tải và thực thi song song với quá trình phân tích HTML, điều này thích hợp với các script độc lập và không phụ thuộc vào nhau. Trong trường hợp này, việc sử dụng thuộc tính async sẽ giúp cải thiện tốc độ tải trang.

Thuộc tính defer cũng cho phép tải và thực thi script song song với quá trình phân tích HTML, nhưng việc thực thi sẽ diễn ra sau khi trình duyệt đã phân tích xong toàn bộ HTML. Điều này thích hợp cho các script phụ thuộc vào nhau hoặc được sử dụng lại. Trong trường hợp này, việc sử dụng thuộc tính defer sẽ giúp đảm bảo thứ tự thực thi của các script.

Tuy nhiên, nếu script của bạn rất nhỏ (chỉ vài dòng code), tốt nhất là sử dụng inline script, tức là đặt code script trực tiếp vào trong thẻ script, để tránh tải thêm một file JavaScript độc lập.

Tóm lại, việc hiểu rõ tính chất, nguyên lý của các thuộc tính async và defer sẽ giúp bạn sử dụng chúng đúng cách và tối ưu hóa tốc độ tải trang của website.

Ví dụ sử dụng async

<!DOCTYPE html>
<html>
  <head>
    <title>Async Example</title>
  </head>
  <body>
    <h1>Async Example</h1>
    <script async src="script.js"></script>
    <p>This paragraph may appear before the script is loaded and executed.</p>
  </body>
</html>

Trong ví dụ trên, script.js là một tập tin script external, và được đặt trong thẻ script với thuộc tính async. Điều này cho phép trang web tiếp tục render các phần khác của HTML trong khi trang web đang tải script.js. Khi script.js được tải và chạy xong, nó sẽ thực thi.

Ví dụ sử dụng defer

<!DOCTYPE html>
<html>
  <head>
    <title>Defer Example</title>
    <script defer src="script.js"></script>
  </head>
  <body>
    <h1>Defer Example</h1>
    <p>This paragraph may appear before the script is loaded, but it won't execute until the entire HTML document is parsed.</p>
  </body>
</html>

Trong ví dụ trên, script.js được đặt trong thẻ script với thuộc tính defer. Script này sẽ được tải trong quá trình phân tích HTML, nhưng nó sẽ không thực thi cho đến khi HTML được phân tích hoàn tất. Điều này giúp tăng tốc độ hiển thị trang web của bạn, vì nó cho phép trình duyệt render phần còn lại của HTML trước khi script.js được thực thi.

  let num = 10;

  const increaseNumber = () => num++;
  const increasePassedNumber = number => number++;

  const num1 = increaseNumber();
  const num2 = increasePassedNumber(num1);

  console.log(num1);
  console.log(num2);

• A: 10, 10
• B: 10, 11
• C: 11, 11
• D: 11, 12

Đáp án: A

Phép toán ++ sẽ trả về trước giá trị của toán hạng, sau đó tăng giá trị của toán hạng lên. Giá trị của num1 là 10, vì increaseNumber sẽ trả về giá trị của num, đang là 10, và sau đó mới tăng giá trị của num lên.

num2 cũng là 10, vì chúng ta đưa num1 vào increasePassedNumber. number bằng 10(tức giá trị của num1). Cũng giống như trên, phép toán ++ sẽ trả về trước giá trị của toán hạng, sau đó tăng giá trị của toán hạng lên. Giá trị của number là 10, do đó num2 cũng sẽ là 10.

  const add = () => {
    const cache = {};
    return (num) => {
      if (num in cache) {
        return `From cache! ${cache[num]}`;
      } else {
        const result = num + 10;
        cache[num] = result;
        return `Calculated! ${result}`;
      }
    };
  };

  const addFunction = add(); console.log(addFunction(10)); console.log(addFunction(10)); console.log(addFunction(5 * 2));

• A: Calculated! 20 Calculated! 20 Calculated! 20
• B: Calculated! 20 From cache! 20 Calculated! 20
• C: Calculated! 20 From cache! 20 From cache! 20
• D: Calculated! 20 From cache! 20 Error

Đáp án: C

Hàm add chính là một hàm memoized (hàm có nhớ). Với việc có nhớ, chúng ta có thể cache lại kết quả của function để tăng tốc độ tính toán lên. Trong trường hợp này, chúng ta tạo ra một cache object để lưu trữ những kết quả tính toán trước đó.

Mỗi lần chúng ta gọi hàm addFunction với đối số giống nhau, đầu tiên nó sẽ check xem đối số đó có tồn tại trong cache hay không. Nếu có, giá trị trong cache sẽ được trả về luôn, tiết kiệm thời gian tính toán. Còn nếu không thì nó sẽ tiến hành tính toán kết quả và tiếp tục lưu vào cache.

Chúng ta gọi hàm addFunction ba lần với cùng một đối số: trong lần gọi đầu tiên, giá trị của num là 10 và chưa có mặt trong cache. Do đó num in cache trả về false, và sẽ chạy vào else block: Calculated! 20 sẽ được ghi ra, và 10 sẽ được đưa vào cạche. cache khi này sẽ là { 10: 20 }.

Tại lần gọi thứ hai, cache object đã có giá trị 10. num in cache trả về true, và 'From cache! 20' được ghi ra.

Tại lần gọi thứ ba, ta đưa vào 5 * 2, tức 10 vào hàm. Tiếp tục giống như trên, 'From cache! 20' sẽ được ghi ra.

Trong JavaScript nếu bạn sử dụng một biến không tồn tại và chưa được khai báo, thì JavaScript sẽ thảy ra một lỗi var name is not defined và sau đó script sẽ bị ngừng thực thi. Nhưng nếu bạn sử dụng typeof undeclared_variable thì nó sẽ trả về undefined.

Trước khi bắt đầu thảo luận thêm, hãy hiểu sự khác biệt giữa khai báo và định nghĩa.

var x là một khai báo vì bạn chưa xác định nó giữ giá trị nào, bạn chỉ đang khai báo sự tồn tại của nó và nhu cầu cấp phát bộ nhớ.

var x; // declaring x
console.log(x); //output: undefined

var x = 1 vừa là khai báo vừa là định nghĩa (cũng có thể nói là chúng ta đang khởi tạo), ở đây việc khai báo và gán giá trị xảy ra nội tuyến cho biến x, trong JavaScript mọi khai báo biến và khai báo hàm đều đưa lên đầu phạm vi (scope) hiện tại của nó, nó được khai báo sau đó việc gán diễn ra theo thứ tự, thuật ngữ này được gọi là hoisting.

Một biến được khai báo nhưng không được định nghĩa và khi chúng ta cố gắng truy cập vào nó, nó sẽ trả về kết quả là undefined.

var x; // Declaration
if(typeof x === 'undefined') // Will return true

Một biến không được khai báo và cũng không được định nghĩa thì khi chúng ta cố gắng tham chiếu đến biến đó, kết quả sẽ là not defined.

console.log(y); // Output: ReferenceError: y is not defined

  (() => {
    let x = (y = 10);
  })();

  console.log(typeof x);
  console.log(typeof y);

• A: "undefined", "number"
• B: "number", "number"
• C: "object", "number"
• D: "number", "undefined"

Đáp án: A

let x = y = 10; chính là cách viết ngắn gọn của:

y = 10;
let x = y;

Khi ta set y bằng 10, thực tế chúng ta đã sử dụng biến global y (window nếu là trên browser, global nếu là môi trường Node).Trên browser, window.y sẽ là 10.

Sau đó, chúng ta khai báo giá trị của x với giá trị của y, tức 10. Tuy nhiên khi ta khai báo với từ khóa let biến x sẽ chỉ tồn tại trong block scoped; hay trong trường hợp này là hàm thực hiện ngay lập tức (immediately-invoked function - IIFE). Khi ta sử dụng phép toán typeof, x hoàn toàn chưa được định nghĩa: vì x lúc này nằm bên ngoài block nó được định nghĩa lúc trước. Nghĩa là x là undefined. Do đó console.log(typeof x) trả về "undefined".

Tuy nhiên với y thì khác, ta đã có giá trị của y khi set y bằng 10. Giá trị đó có thể truy cập được từ bất kì đâu bởi chúng là biến global. y được định nghĩa với kiểu là "number". Do đó console.log(typeof y) trả về "number".

  for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 1);
  }

  for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 1);
  }

• A: 0 1 2 and 0 1 2
• B: 0 1 2 and 3 3 3
• C: 3 3 3 and 0 1 2

Đáp án: C

Bởi vì event queue trong JavaScript, hàm setTimeout callback sẽ được gọi sau khi vòng lặp được thực hiện. Bời vì biến i trong vòng lặp đầu tiên được khai báo với từ khóa var, nên nó sẽ là một biến global. Trong suốt vòng lặp, mỗi lần chúng ta tăng giá trị của i lên 1, sử dụng phép toán ++. Cho tới khi callback setTimeout được gọi, giá trị của i đã trở thành 3 rồi.

Trong vòng lặp thứ 2, biến i được khai báo với từ khóa let, có nghĩa nó là một biến block-scoped (block là những gì được viết bên trong cặp ngoặc { }). Tại mỗi vòng lặp, i sẽ là một biến mới có một giá trị mới, và giá trị đó có scope là bên trong vòng lặp mà thôi.

  +true;
  !"Lydia";

• A: 1 and false
• B: false and NaN
• C: false and false

Đáp án: A

Phép toán cộng + sẽ convert một toán hạng sang dạng number. true là 1, và false is 0.

Chuỗi 'Lydia' là một truthy value. Điều chúng ta thật sự đang hỏi chính là "có phải một giá trị truthy là falsy?". Rõ ràng câu trả lời là false rồi.

Trong JavaScript, bind, call và apply là ba phương thức của đối tượng Function và chúng đều được sử dụng để thiết lập giá trị của this khi gọi một hàm. Dưới đây là sự khác biệt chính giữa chúng:

call()

• Gọi hàm ngay lập tức: call() gọi hàm ngay lập tức với giá trị this được chỉ định.
• Truyền tham số: Các tham số được truyền vào hàm một cách rõ ràng, phân cách bởi dấu phẩy

apply()

• Gọi hàm ngay lập tức: Giống như call(), apply() cũng gọi hàm ngay tức thì.
• Truyền tham số: Thay vì truyền từng tham số riêng lẻ, apply() nhận một mảng các tham số

bind()

• Không gọi hàm ngay lập tức: bind() không gọi hàm ngay khi nó được sử dụng, mà trả về một hàm mới với giá trị this được ràng buộc sẵn.
• Truyền tham số: Các tham số được truyền vào giống như call(), nhưng hàm mới này có thể được gọi sau đó với giá trị this đã được thiết lập

Khi nào sử dụng từng phương thức

• call(): Khi bạn muốn gọi một hàm ngay lập tức và bạn biết số lượng tham số cụ thể.
• apply(): Khi bạn muốn gọi một hàm ngay lập tức nhưng tham số được lưu trữ trong một mảng.
• bind(): Khi bạn muốn tạo ra một hàm mới với this được ràng buộc sẵn để sử dụng sau này, hoặc khi bạn muốn tránh việc this bị thay đổi trong các callback hoặc event handler.

Ví dụ

let person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

// Sử dụng call()
person.greet.call({ name: 'Bob' }); // "Hello, my name is Bob"

// Sử dụng apply()
person.greet.apply({ name: 'Charlie' }); // "Hello, my name is Charlie"

// Sử dụng bind()
let boundGreet = person.greet.bind({ name: 'David' });
boundGreet(); // "Hello, my name is David"

Trong ví dụ trên, call() và apply() được sử dụng để gọi hàm greet ngay lập tức với this được thiết lập là một đối tượng mới. bind() tạo ra một hàm mới boundGreet mà khi gọi sau này sẽ sử dụng this đã được ràng buộc từ trước.

Trong JavaScript, await và yield là hai từ khóa được sử dụng trong các ngữ cảnh khác nhau, với mục đích và cách hoạt động riêng biệt. Dưới đây là sự khác biệt chính giữa chúng:

await

• Ngữ cảnh sử dụng: await được sử dụng trong một hàm async để tạm dừng việc thực thi hàm cho đến khi Promise được giải quyết (resolved) hoặc bị từ chối (rejected).
• Mục đích: Mục đích của await là đơn giản hóa việc sử dụng các hàm không đồng bộ, giúp mã nguồn trở nên dễ đọc và viết giống như mã đồng bộ, mặc dù nó thực sự là không đồng bộ.
• Cách hoạt động: Khi await được sử dụng trước một Promise, việc thực thi của hàm async sẽ tạm dừng cho đến khi Promise đó hoàn thành. Sau đó, hàm tiếp tục thực thi với giá trị được giải quyết từ Promise.

yield

• Ngữ cảnh sử dụng: yield được sử dụng trong một hàm generator (được định nghĩa bằng cách thêm * sau từ khóa function) để tạm dừng và tiếp tục việc thực thi của hàm.
• Mục đích: yield cho phép một hàm generator tạm dừng việc thực thi và trả về một giá trị (hoặc undefined). Hàm generator có thể được tiếp tục lại từ điểm tạm dừng, cho phép tạo ra một chuỗi các giá trị theo yêu cầu thay vì tính toán tất cả cùng một lúc.
• Cách hoạt động: Khi yield được gọi, nó trả về một đối tượng có hai thuộc tính: value (giá trị được trả về bởi yield) và done (một boolean chỉ ra liệu hàm generator đã hoàn thành hay chưa). Việc thực thi của hàm generator tạm dừng tại yield và có thể được tiếp tục lại bằng cách gọi phương thức next().

Kết luận

• await được sử dụng trong hàm async để làm cho việc xử lý các Promise trở nên dễ dàng hơn, giúp mã nguồn không đồng bộ trông giống như đồng bộ.
• yield được sử dụng trong hàm generator để tạo ra một chuỗi các giá trị theo yêu cầu, cho phép tạm dừng và tiếp tục việc thực thi của hàm.

Cả hai từ khóa đều mang lại lợi ích trong việc xử lý các tác vụ không đồng bộ và tạo ra dữ liệu theo yêu cầu, nhưng chúng được sử dụng trong các ngữ cảnh và mục đích khác nhau.

function getPersonInfo(one, two, three) {
  console.log(one);
  console.log(two);
  console.log(three);
}

const person = "Lydia";
const age = 21;

getPersonInfo`${person} is ${age} years old`;

• A: "Lydia" 21 ["", " is ", " years old"]
• B: ["", " is ", " years old"] "Lydia" 21
• C: "Lydia" ["", " is ", " years old"] 21

Đáp án: B

Nếu bạn dùng tagged template literals, giá trị của đối số đầu tiên luôn luôn là một mảng các string. Những đối số còn lại sẽ lấy giá trị từ biểu thức đưa vào!

  const bird = {
    size: "small",
  };

  const mouse = {
    name: "Mickey",
    small: true,
  };

• A: mouse.bird.size không hợp lệ
• B: mouse[bird.size] không hợp lệ
• C: mouse[bird["size"]] không hợp lệ
• D: Tất cả đều hợp lệ

Đáp án: A

Trong JavaScript thì tất cả keys của các object đều là string (ngoại trừ khi nó là một Symbol). Dù chúng ta không viết chúng như một string, về cơ bản chúng sẽ luôn được chuyển sang dạng string.

JavaScript thông dịch (hay unboxes) từng câu lệnh. Khi chúng ta sử dụng cặp dấu ngoặc [], nó sẽ tìm kiếm dấu mở ngoặc đầu tiên [, và sẽ tiếp tục tìm kiếm cho tới khi gặp dấu đóng ngoặc ]. Chỉ khi đó thì câu lệnh mới được thực thi.

mouse[bird.size]: Giá trị đầu tiên bird.size là "small". mouse["small"] sẽ trả về true

Tuy nhiên, khi chúng ta sử dụng dấu chấm ., điều trên không còn đúng nữa. mouse không hề có key nào tên là bird, có nghĩa mouse.bird sẽ là undefined. Sau đó chúng ta gọi size sử dụng chấm .: mouse.bird.size. Vì mouse.bird là undefined, lời gọi sẽ trở thành undefined.size. Đây là một lời gọi không hợp lệ, nó sẽ throw ra một lỗi kiểu như Cannot read property "size" of undefined.

Trong ECMAScript 6 (ES6), Map và WeakMap là hai cấu trúc dữ liệu mới được giới thiệu để lưu trữ cặp khóa-giá trị. Mặc dù cả hai đều lưu trữ cặp khóa-giá trị, chúng có một số sự khác biệt quan trọng:

Map

1. Khóa mạnh: Trong một Map, khóa có thể là bất kỳ kiểu dữ liệu nào, bao gồm cả đối tượng, chuỗi, số, và các kiểu dữ liệu khác.
2. Duyệt được: Map là duyệt được, có nghĩa là bạn có thể lặp qua các phần tử của nó theo thứ tự chèn vào.
3. Kích thước: Bạn có thể dễ dàng lấy được kích thước của một Map thông qua thuộc tính size.
4. Hiệu suất: Map có hiệu suất tốt trong việc thêm và xóa các phần tử.
5. Bộ nhớ: Map giữ các khóa với một tham chiếu mạnh, điều này có nghĩa là miễn là một khóa tồn tại trong Map, nó sẽ không được thu gom rác (garbage collected).

WeakMap

1. Khóa yếu: Trong một WeakMap, khóa phải là một đối tượng. Không thể sử dụng các kiểu dữ liệu nguyên thủy như chuỗi hoặc số làm khóa.
2. Không duyệt được: WeakMap không phải là duyệt được, và không có phương thức hoặc thuộc tính nào để lấy hoặc kiểm tra toàn bộ nội dung của nó.
3. Không có kích thước: WeakMap không có thuộc tính size và không có cách nào để xác định số lượng phần tử mà nó chứa.
4. Bộ nhớ: WeakMap giữ các khóa với một tham chiếu yếu, có nghĩa là nếu không còn tham chiếu nào khác đến một đối tượng được sử dụng làm khóa, đối tượng đó có thể được thu gom rác. Điều này giúp WeakMap trở thành một lựa chọn tốt cho việc lưu trữ dữ liệu riêng tư hoặc dữ liệu tạm thời mà không ngăn chặn việc thu gom rác của các đối tượng khóa.

Kết luận

Map và WeakMap đều hữu ích cho các trường hợp sử dụng khác nhau. Map thích hợp cho việc lưu trữ cặp khóa-giá trị mà bạn muốn duyệt qua hoặc khi bạn cần biết số lượng phần tử. WeakMap thích hợp cho các trường hợp mà bạn muốn tránh ngăn chặn việc thu gom rác của các đối tượng khóa, hoặc khi bạn không cần duyệt qua các phần tử và không quan tâm đến số lượng phần tử trong cấu trúc dữ liệu.

  function compareMembers(person1, person2 = person) {
    if (person1 !== person2) {
      console.log("Not the same!");
    } else {
      console.log("They are the same!");
    }
  }
  const person = { name: "Lydia" };
  compareMembers(person);

• A: Not the same!
• B: They are the same!
• C: ReferenceError
• D: SyntaxError

Đáp án: B

Object sẽ được truyền vào hàm theo reference. Khi chúng ta nói so sánh strict equal (===), nghĩa là ta đang so sánh các reference của chúng.

Ta set giá trị mặc định của person2 là object person, và đưa object person vào làm giá trị cho đối số person1.

Điều đó có nghĩa là chúng cùng trỏ đến một object trong bộ nhớ, do đó chúng bằng nhau, và They are the same! được in ra.

  const name = "Lydia";
  age = 21;

  console.log(delete name);
	console.log(delete age);

• A: false, true
• B: "Lydia", 21
• C: true, true
• D: undefined, undefined

Đáp án: A

Phép toán delete sẽ trả về một giá trị boolean: true nếu xóa thành công, false nếu thất bại. Tuy nhiên, nếu biến được khai báo với các từ khóa var, const hay let thì nó sẽ không thể bị xóa bởi phép toán delete.

Biến name được khai báo với từ khóa const, nên nó sẽ không thể bị xóa và trả về false. Khi ta set age bằng 21, thực tế là ta đang sử dụng biến global age. Ta có thể xóa sử dụng phép toán delete, khi này delete age trả về true.

Generator trong JavaScript là một loại hàm đặc biệt có thể tạm dừng và tiếp tục việc thực thi của nó. Các hàm generator được định nghĩa bằng cách thêm một dấu sao (*) ngay sau từ khóa function. Khi được gọi, hàm generator không thực thi ngay lập tức mà thay vào đó, nó trả về một đối tượng Generator mà qua đó việc thực thi có thể được kiểm soát.

Đặc điểm của Generator

• Tạm dừng và tiếp tục: Generator có khả năng tạm dừng việc thực thi tại từ khóa yield và sau đó có thể tiếp tục từ điểm tạm dừng đó.
• Trả về nhiều giá trị: Generator có thể trả về (yield) một chuỗi các giá trị, mỗi lần một giá trị, thông qua nhiều lần gọi.
• Lười biếng (Lazy evaluation): Các giá trị được tạo ra bởi generator không cần phải tính toán trước, chúng chỉ được tính toán khi cần thiết, giúp tiết kiệm tài nguyên.

Cách sử dụng Generator

Để sử dụng một hàm generator, bạn cần:

1. Định nghĩa hàm generator bằng cách thêm dấu sao (*) sau từ khóa function.
2. Sử dụng từ khóa yield bên trong hàm để trả về giá trị.
3. Gọi hàm generator để nhận được đối tượng Generator.
4. Sử dụng phương thức next() trên đối tượng Generator để tiếp tục việc thực thi và nhận giá trị tiếp theo.

Ví dụ

function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = numberGenerator(); // Tạo đối tượng Generator

console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

Trong ví dụ trên, mỗi lần gọi phương thức next() trên đối tượng Generator sẽ nhận được giá trị tiếp theo từ hàm generator.

Kết luận

Generator là một công cụ mạnh mẽ trong JavaScript cho phép viết mã có khả năng tạm dừng và tiếp tục, tạo ra dữ liệu theo yêu cầu và thực hiện các tác vụ không đồng bộ một cách hiệu quả. Các hàm generator thường được sử dụng trong các tình huống cần xử lý các chuỗi dữ liệu lớn hoặc phức tạp, hoặc khi cần kiểm soát chặt chẽ quá trình thực thi của hàm.

  function* startGame() {
    const answer = yield "Do you love JavaScript?";
    if (answer !== "Yes") {
      return "Oh wow... Guess we're gone here";
    }
    return "JavaScript loves you back ❤️";
  }

  const game = startGame();
  console.log(/* 1 */); // Do you love JavaScript?
  console.log(/* 2 */); // JavaScript loves you back ❤️

• A: game.next("Yes").value and game.next().value
• B: game.next.value("Yes") and game.next.value()
• C: game.next().value and game.next("Yes").value
• D: game.next.value() and game.next.value("Yes")

Đáp án: C

Một generator sẽ "tạm dừng" khi nhìn thấy từ khóa yield. Đầu tiên ra sẽ đưa ra chuỗi "Do you love JavaScript?", bằng cách gọi game.next().value.

Chương trình sẽ chạy từng dòng, cho tới khi nó tìm thấy từ khóa yield. Có một từ khóa yield tại dòng đầu tiên của hàm: chương trình sẽ dừng tại đâ! Điều đó có nghĩa là biến answer chưa hề được định nghĩa!

Khi ta gọi game.next("Yes").value, yield trước đó sẽ được thay thế bởi giá trị được truyền vào hàm next(), trong trường hợp này là"Yes". Theo đó giá trị của biến answer giờ sẽ là "Yes". Điều kiện if sẽ trả về false, và JavaScript loves you back ❤️ sẽ được ghi ra.

Thuộc tính NaN trong JavaScript đại diện cho "Not-a-Number", tức là một giá trị không phải là một số hợp lệ. Dưới đây là một số điểm quan trọng về NaN:

• NaN là một giá trị đặc biệt trong JavaScript, biểu thị một giá trị không xác định hoặc không thể biểu diễn được dưới dạng số
• NaN là kết quả của một số phép toán không hợp lệ, chẳng hạn như phép chia 0 cho 0, lấy căn bậc hai của một số âm, hoặc cố gắng chuyển đổi một chuỗi không phải là số thành số
• Mặc dù NaN có kiểu là number, nó không bằng bất kỳ giá trị số nào khác, kể cả chính nó. Điều này có nghĩa là NaN !== NaN trả về true
• Để kiểm tra một giá trị có phải là NaN hay không, bạn không thể sử dụng toán tử so sánh bình thường. Thay vào đó, bạn nên sử dụng hàm Number.isNaN() hoặc hàm isNaN(). Number.isNaN() trả về true nếu giá trị đó là NaN và kiểu dữ liệu là Number, trong khi isNaN() chuyển đổi giá trị thành số trước khi kiểm tra
• Trong JavaScript hiện đại, NaN là một thuộc tính không ghi được, không liệt kê được và không cấu hình được của đối tượng Number

Ví dụ, để kiểm tra một giá trị có phải là NaN:

console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN(123)); // false

NaN và cách xử lý nó đóng một vai trò quan trọng trong việc xác định và xử lý các tình huống lỗi hoặc không hợp lệ trong các phép toán số học trong JavaScript

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

sum(1, "2");

• A: NaN
• B: TypeError
• C: "12"
• D: 3

Đáp án: C

JavaScript là một ngôn ngữ dynamically typed: chúng ta không khai báo kiểu dữ liệu khi khai báo biến. Giá trị có thể bị tự động convert sang một kiểu dữ liệu khác mà ta không hề hay biết, điều này được gọi là implicit type coercion. Coercion có nghĩa là convert từ kiểu này sang kiểu khác.

Trong ví dụ này, JavaScript sẽ convert số 1 sang dạng string. Mỗi khi ta cộng một số (1) với một string ('2'), số sẽ luôn được xem như là một string. Kết quả sẽ là một phép nối chuỗi giống như "Hello" + "World", vậy nên "1" + "2" sẽ trả về là "12".