Lưu trữ #javascript

Chúng ta thừa nhận rằng tôi không chắc mình sẽ viết bài viết này trong năm nay. Thật dễ dàng để viết những bài viết khiến mọi người phấn khích về tiềm năng của công nghệ mới. Nhưng năm 2024 là năm […]

Tagged #javascript

150 câu hỏi phỏng vấn javascript kèm lời giải chi tiết từ A-Z

Lập Trình

Lập Trình Mobile

React Native

Tài Liệu - Khóa Học Free

117 min
1 năm ago
151

Câu hỏi 1: Khác biệt giữa var, let, và const là gì? Phân tích chi tiết: Câu hỏi 2: Giải thích cách hoạt động của this trong JavaScript. Phân tích chi tiết: Câu hỏi 3: Sự khác biệt giữa == và ===? […]

Tagged #javascript

Phân tích chi tiết:

// Ví dụ 1: var function testVar() { var x = 10; if (true) { var x = 20; // Re-declare trong cùng scope console.log(x); // Output: 20 } console.log(x); // Output: 20 } testVar();

var có scope là function hoặc toàn cục, không bị ràng buộc trong block {}.
Có thể khai báo lại biến (re-declare) mà không bị lỗi.

// Ví dụ 2: let function testLet() { let x = 10; if (true) { let x = 20; // Scope riêng trong block console.log(x); // Output: 20 } console.log(x); // Output: 10 } testLet();

let có scope là block {}.
Không cho phép khai báo lại biến trong cùng một scope.

// Ví dụ 3: const function testConst() { const x = 10; x = 20; // Error: Assignment to constant variable } testConst();

const dùng để khai báo hằng số.
Không thể thay đổi giá trị sau khi đã gán.

Câu hỏi 2: Giải thích cách hoạt động của `this` trong JavaScript.

Phân tích chi tiết:

Trong hàm bình thường: function showThis() { console.log(this); } showThis(); // Output: global object (trong trình duyệt là window, trong Node.js là global)
- Khi gọi hàm thông thường, this tham chiếu đến global object.
Trong phương thức của object: const obj = { value: 42, showThis() { console.log(this.value); }, }; obj.showThis(); // Output: 42
- Trong phương thức của object, this tham chiếu đến chính object đó.
Arrow function: const obj = { value: 42, showThis: () => { console.log(this); }, }; obj.showThis(); // Output: global object
- Trong arrow function, this không tham chiếu đến object chứa nó mà thừa hưởng giá trị this từ scope bao ngoài.
Bind, Call, Apply: function showThis(param) { console.log(this.name, param); } const obj = { name: "Alice" }; showThis.call(obj, "test"); // Output: Alice test showThis.apply(obj, ["test"]); // Output: Alice test const boundFunc = showThis.bind(obj, "test"); boundFunc(); // Output: Alice test
- call và apply thay đổi this của hàm và thực thi ngay.
- bind trả về một hàm mới với this cố định.

Câu hỏi 3: Sự khác biệt giữa `==` và `===`?

Phân tích chi tiết:

console.log(5 == "5"); // Output: true console.log(5 === "5"); // Output: false

== so sánh giá trị sau khi thực hiện ép kiểu ngầm định (type coercion).
=== so sánh cả giá trị và kiểu dữ liệu.

Ví dụ chi tiết về ép kiểu:

console.log(true == 1); // Output: true (true được chuyển thành 1) console.log(null == undefined); // Output: true console.log([] == 0); // Output: true (mảng rỗng chuyển thành số 0)

Câu hỏi 4: Giải thích về `Promise` và cách sử dụng.

Phân tích chi tiết:

const promise = new Promise((resolve, reject) => { const success = true; if (success) { resolve("Operation successful"); } else { reject("Operation failed"); } }); promise .then((result) => { console.log(result); // Output: Operation successful }) .catch((error) => { console.error(error); });

Promise đại diện cho một giá trị sẽ có trong tương lai.
Trạng thái của Promise:
- Pending: Đang xử lý.
- Fulfilled: Xử lý thành công (resolve).
- Rejected: Xử lý thất bại (reject).
Các phương thức chính:
- then: Xử lý khi thành công.
- catch: Xử lý khi thất bại.
- finally: Luôn được gọi, dù thành công hay thất bại.

Câu hỏi 5: Sử dụng `async/await` để làm việc với async code.

Phân tích chi tiết:

function delay(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); } async function asyncExample() { console.log("Start"); await delay(1000); // Tạm dừng 1 giây console.log("After 1 second"); } asyncExample();

async biến một hàm thành bất đồng bộ.
await tạm dừng việc thực thi cho đến khi Promise được resolve.
Lợi ích:
- Code rõ ràng hơn so với then/catch.
- Dễ đọc và gỡ lỗi.

Câu hỏi 6: Hoisting trong JavaScript là gì?

Phân tích chi tiết:

Khái niệm: Hoisting là cơ chế trong JavaScript, nơi khai báo biến, hàm hoặc class được “nâng lên” (hoisted) lên đầu phạm vi trước khi thực thi code.

console.log(x); // Output: undefined var x = 10;

Biến x được “hoisted” nhưng chỉ phần khai báo (var x), không phải giá trị gán.
Thực chất, đoạn trên được hiểu như sau: var x; console.log(x); // undefined x = 10;

Hoisting hoạt động khác nhau với var, let, và const:

console.log(a); // undefined var a = 5; console.log(b); // ReferenceError: Cannot access 'b' before initialization let b = 10; console.log(c); // ReferenceError: Cannot access 'c' before initialization const c = 15;

var: Được hoisted và khởi tạo với giá trị undefined.
let & const: Được hoisted nhưng không khởi tạo giá trị. Truy cập trước khi khai báo gây lỗi ReferenceError.

Hoisting cũng áp dụng cho hàm:

sayHello(); // Output: Hello, world! function sayHello() { console.log("Hello, world!"); }

Hàm khai báo (function declaration) được hoisted toàn bộ.
Tuy nhiên, hàm biểu thức (function expression) không được hoisted: greet(); // TypeError: greet is not a function var greet = function () { console.log("Hi!"); };

Câu hỏi 7: Event Loop trong JavaScript là gì?

Phân tích chi tiết:

Event Loop là cơ chế xử lý các tác vụ bất đồng bộ trong JavaScript, như setTimeout, Promise, và các event.

Call Stack: Nơi các hàm được thực thi tuần tự.
Task Queue: Hàng đợi chứa các callback từ setTimeout hoặc event.
Microtask Queue: Hàng đợi chứa các callback từ Promise hoặc MutationObserver.

Ví dụ minh họa:

console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End");

Kết quả:

Start End Promise Timeout

console.log("Start") và console.log("End") được thực thi đầu tiên vì chúng nằm trong Call Stack.
Callback từ Promise được đặt vào Microtask Queue và ưu tiên thực thi trước Task Queue (callback từ setTimeout).

Câu hỏi 8: Giải thích `closure` trong JavaScript.

Phân tích chi tiết:

Khái niệm: Closure là hàm “ghi nhớ” phạm vi nơi nó được tạo ra, ngay cả khi phạm vi đó không còn tồn tại.

Ví dụ:

function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const counter = outer(); counter(); // Output: 1 counter(); // Output: 2 counter(); // Output: 3

Hàm inner là một closure, vì nó truy cập được biến count từ phạm vi của outer ngay cả khi outer đã kết thúc.
Mỗi lần gọi counter, biến count vẫn được lưu trữ trong bộ nhớ.

Câu hỏi 9: Sự khác biệt giữa `null` và `undefined`?

Phân tích chi tiết:

null: Đại diện cho giá trị “trống rỗng” do lập trình viên chỉ định.
undefined: Đại diện cho biến chưa được gán giá trị.

Ví dụ:

let a; console.log(a); // undefined let b = null; console.log(b); // null

So sánh:

console.log(null == undefined); // true (vì so sánh giá trị) console.log(null === undefined); // false (vì khác kiểu dữ liệu)

Câu hỏi 10: Sự khác biệt giữa `spread` và `rest` operators (`...`)?

Phân tích chi tiết:

Spread operator: Dùng để tách các phần tử của mảng hoặc object. const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5]; console.log(arr2); // [1, 2, 3, 4, 5] const obj1 = { a: 1, b: 2 }; const obj2 = { ...obj1, c: 3 }; console.log(obj2); // { a: 1, b: 2, c: 3 }
Rest operator: Dùng để gom nhóm các tham số hoặc phần tử còn lại. function sum(...numbers) { return numbers.reduce((acc, curr) => acc + curr, 0); } console.log(sum(1, 2, 3)); // Output: 6 const [first, ...rest] = [1, 2, 3, 4]; console.log(first); // 1 console.log(rest); // [2, 3, 4]

Câu hỏi 11: Khác biệt giữa `map`, `filter`, và `reduce`?

Phân tích chi tiết:

map: Duyệt qua mảng và trả về mảng mới với kết quả đã được biến đổi. const nums = [1, 2, 3]; const doubled = nums.map((num) => num * 2); console.log(doubled); // [2, 4, 6]
filter: Lọc mảng dựa trên điều kiện, trả về mảng mới. const nums = [1, 2, 3, 4]; const evens = nums.filter((num) => num % 2 === 0); console.log(evens); // [2, 4]
reduce: Tính toán một giá trị duy nhất dựa trên mảng. const nums = [1, 2, 3]; const sum = nums.reduce((acc, curr) => acc + curr, 0); console.log(sum); // 6

Câu hỏi 12: Giải thích về `Prototype` trong JavaScript.

Phân tích chi tiết:

function Person(name) { this.name = name; } Person.prototype.greet = function () { console.log(`Hello, my name is ${this.name}`); }; const alice = new Person("Alice"); alice.greet(); // Output: Hello, my name is Alice

Prototype: Là một object được liên kết với mọi function và object trong JavaScript.
Hàm Person có một thuộc tính prototype, nơi chứa các phương thức và thuộc tính dùng chung.
Các object được tạo từ hàm Person sẽ kế thừa các phương thức từ Person.prototype.

Câu hỏi 13: Khác biệt giữa `Object.create()` và `new` trong JavaScript?

Phân tích chi tiết:

Object.create():
- Dùng để tạo một object mới, với prototype được chỉ định.
- Không gọi hàm khởi tạo (constructor).
const person = { greet() { console.log(`Hello, my name is ${this.name}`); }, }; const alice = Object.create(person); alice.name = "Alice"; alice.greet(); // Output: Hello, my name is Alice
- alice là một object kế thừa từ person.
new:
- Dùng để tạo một object mới dựa trên một constructor function.
- Gọi hàm khởi tạo.
function Person(name) { this.name = name; } Person.prototype.greet = function () { console.log(`Hello, my name is ${this.name}`); }; const bob = new Person("Bob"); bob.greet(); // Output: Hello, my name is Bob

So sánh:

Object.create(): Linh hoạt hơn vì cho phép tạo object mà không cần hàm khởi tạo.
new: Sử dụng phổ biến hơn khi muốn tạo object từ constructor function hoặc class.

Câu hỏi 14: Khác biệt giữa `forEach`, `for...of`, và `for...in`?

Phân tích chi tiết:

forEach:
- Dùng để duyệt qua mảng.
- Không thể dừng (break) hoặc thoát sớm.
const arr = [1, 2, 3]; arr.forEach((num) => console.log(num)); // Output: 1, 2, 3
for...of:
- Duyệt qua các iterable objects như mảng, chuỗi, Set, Map.
- Có thể dừng bằng break hoặc continue.
const arr = [1, 2, 3]; for (const num of arr) { console.log(num); } // Output: 1, 2, 3
for...in:
- Duyệt qua các thuộc tính liệt kê của một object (bao gồm cả thuộc tính kế thừa).
const obj = { a: 1, b: 2 }; for (const key in obj) { console.log(key, obj[key]); } // Output: a 1, b 2

Lưu ý: Không dùng for...in để duyệt mảng vì nó sẽ duyệt cả chỉ số mảng.

Câu hỏi 15: Sự khác biệt giữa `setTimeout` và `setInterval`?

Phân tích chi tiết:

setTimeout:
- Chạy một hàm sau khoảng thời gian nhất định.
- Chỉ chạy một lần.
setTimeout(() => { console.log("This runs after 1 second"); }, 1000);
setInterval:
- Chạy một hàm sau khoảng thời gian nhất định và lặp lại.
- Cần dừng thủ công bằng clearInterval.
const interval = setInterval(() => { console.log("This runs every 1 second"); }, 1000); setTimeout(() => { clearInterval(interval); // Dừng sau 5 giây }, 5000);

Lưu ý:

Nếu sử dụng không cẩn thận, setInterval có thể gây lỗi hiệu suất do chạy vô hạn.

Câu hỏi 16: Giải thích về `Destructuring Assignment` trong JavaScript.

Phân tích chi tiết:

Với mảng: const arr = [1, 2, 3]; const [a, b, c] = arr; console.log(a, b, c); // Output: 1 2 3
- Dùng để gán các phần tử của mảng vào biến.
Với object: const obj = { x: 10, y: 20 }; const { x, y } = obj; console.log(x, y); // Output: 10 20
- Dùng để gán các thuộc tính của object vào biến.
- Có thể đổi tên biến: const { x: a, y: b } = obj; console.log(a, b); // Output: 10 20
Giá trị mặc định: const [a = 5, b = 10] = [1]; console.log(a, b); // Output: 1 10

Câu hỏi 17: `Debounce` và `Throttle` là gì?

Phân tích chi tiết:

Debounce:
- Trì hoãn việc thực hiện hàm cho đến khi không còn sự kiện nào xảy ra trong một khoảng thời gian.
- Phù hợp cho các tác vụ tốn kém tài nguyên như tìm kiếm, resize.
function debounce(func, delay) { let timeout; return function (...args) { clearTimeout(timeout); timeout = setTimeout(() => func(...args), delay); }; } const log = debounce(() => console.log("Debounced!"), 1000); window.addEventListener("resize", log);
Throttle:
- Đảm bảo hàm chỉ được gọi một lần trong một khoảng thời gian cụ thể.
- Phù hợp cho các tác vụ như scroll, resize.
function throttle(func, limit) { let lastFunc; let lastRan; return function (...args) { const now = Date.now(); if (!lastRan || now - lastRan >= limit) { func(...args); lastRan = now; } }; } const log = throttle(() => console.log("Throttled!"), 1000); window.addEventListener("scroll", log);

Câu hỏi 18: JSON là gì? Cách parse và stringify JSON trong JavaScript?

Phân tích chi tiết:

JSON:
- Viết tắt của JavaScript Object Notation.
- Dùng để biểu diễn dữ liệu dưới dạng chuỗi.
Parse JSON: const jsonString = '{"name": "Alice", "age": 25}'; const obj = JSON.parse(jsonString); console.log(obj.name); // Output: Alice
Stringify JSON: const obj = { name: "Alice", age: 25 }; const jsonString = JSON.stringify(obj); console.log(jsonString); // Output: {"name":"Alice","age":25}
Lưu ý:
- JSON chỉ hỗ trợ các kiểu: chuỗi, số, object, mảng, boolean, null.
- Không hỗ trợ undefined, hàm, hoặc symbol.

Câu hỏi 19: `typeof`, `instanceof`, và `Object.prototype.toString.call` khác nhau thế nào?

Phân tích chi tiết:

typeof:
- Trả về kiểu dữ liệu của giá trị.
console.log(typeof 42); // "number" console.log(typeof "Hello"); // "string" console.log(typeof null); // "object" (lỗi trong JavaScript)
instanceof:
- Kiểm tra xem một object có phải là instance của một constructor.
console.log([] instanceof Array); // true console.log([] instanceof Object); // true
Object.prototype.toString.call:
- Trả về chính xác kiểu dữ liệu.
console.log(Object.prototype.toString.call([])); // "[object Array]" console.log(Object.prototype.toString.call(null)); // "[object Null]"

Câu hỏi 20: Sự khác biệt giữa `call`, `apply`, và `bind` trong JavaScript?

Phân tích chi tiết:

call:
- Gọi hàm và cho phép xác định this, đồng thời truyền tham số trực tiếp.
function greet(greeting) { console.log(`${greeting}, my name is ${this.name}`); } const person = { name: "Alice" }; greet.call(person, "Hello"); // Output: Hello, my name is Alice
apply:
- Tương tự call, nhưng truyền tham số dưới dạng mảng.
greet.apply(person, ["Hi"]); // Output: Hi, my name is Alice
bind:
- Trả về một hàm mới với this được cố định, nhưng không thực thi ngay.
const boundGreet = greet.bind(person, "Hey"); boundGreet(); // Output: Hey, my name is Alice

So sánh:

call và apply: Gọi hàm ngay lập tức.
bind: Trả về một hàm mới.

Câu hỏi 21: Sự khác biệt giữa `async` và `defer` trong thẻ `<script>`?

Phân tích chi tiết:

async:
- Tải script song song với HTML, nhưng thực thi ngay khi script tải xong.
- Có thể gây ra lỗi nếu script phụ thuộc vào DOM hoặc các script khác.
<script src="script.js" async></script>
defer:
- Tải script song song với HTML, nhưng chỉ thực thi sau khi toàn bộ HTML đã được phân tích xong.
- Đảm bảo thứ tự thực thi nếu có nhiều script.
<script src="script.js" defer></script>

So sánh:

async: Nhanh hơn nhưng không đảm bảo thứ tự.
defer: Đảm bảo thứ tự, phù hợp với script phụ thuộc vào DOM.

Câu hỏi 22: Khái niệm `Immutable` trong JavaScript là gì?

Phân tích chi tiết:

Khái niệm:
- Immutable (bất biến) nghĩa là không thể thay đổi giá trị sau khi được tạo.
- Một số kiểu dữ liệu nguyên thủy như string, number, và boolean là bất biến.
const str = "hello"; const newStr = str.toUpperCase(); console.log(str); // Output: hello (không thay đổi) console.log(newStr); // Output: HELLO
Làm việc với object/mảng bất biến:
- Sử dụng Object.freeze để ngăn object bị sửa đổi.
const obj = Object.freeze({ a: 1 }); obj.a = 2; // Không thay đổi console.log(obj.a); // Output: 1
- Với mảng:
const arr = [1, 2, 3]; const newArr = [...arr, 4]; console.log(newArr); // Output: [1, 2, 3, 4]

Câu hỏi 23: Khác biệt giữa `deep copy` và `shallow copy`?

Phân tích chi tiết:

Shallow copy:
- Sao chép cấp đầu tiên, các tham chiếu bên trong vẫn trỏ về cùng object.
const obj1 = { a: 1, b: { c: 2 } }; const obj2 = { ...obj1 }; obj2.b.c = 3; console.log(obj1.b.c); // Output: 3 (tham chiếu chung)
Deep copy:
- Sao chép toàn bộ, không chia sẻ tham chiếu.
const obj1 = { a: 1, b: { c: 2 } }; const obj2 = JSON.parse(JSON.stringify(obj1)); obj2.b.c = 3; console.log(obj1.b.c); // Output: 2 (không ảnh hưởng)Lưu ý: Cách trên không hỗ trợ function hoặc undefined.
- Deep copy bằng thư viện: const lodash = require("lodash"); const obj2 = lodash.cloneDeep(obj1);

Câu hỏi 24: Giải thích về `Event Delegation`.

Phân tích chi tiết:

Khái niệm: Event Delegation là kỹ thuật xử lý sự kiện ở cấp độ cha, thay vì gắn trực tiếp vào từng phần tử con.

Ví dụ:

document.getElementById("parent").addEventListener("click", (event) => { if (event.target && event.target.matches("button.className")) { console.log("Button clicked!"); } });

Lợi ích:
- Giảm số lượng event listeners.
- Dễ dàng quản lý các phần tử được thêm mới sau này.
Cách hoạt động:
- Event “bubbling” (sự kiện nổi lên): Sự kiện lan truyền từ phần tử con đến cha.
- Kiểm tra event.target để biết phần tử nào kích hoạt sự kiện.

Câu hỏi 25: Temporal Dead Zone (TDZ) là gì?

Phân tích chi tiết:

Khái niệm:

TDZ là khoảng thời gian từ lúc biến được hoisted đến khi biến được khởi tạo.

Ví dụ:

console.log(a); // ReferenceError: Cannot access 'a' before initialization let a = 5;

Biến a được hoisted, nhưng không khởi tạo giá trị.
Khi truy cập a trước khi gán giá trị, sẽ xảy ra lỗi ReferenceError.

Câu hỏi 26: Custom Events trong JavaScript là gì?

Phân tích chi tiết:

Tạo và sử dụng sự kiện tùy chỉnh:

const customEvent = new Event("customEvent"); document.addEventListener("customEvent", () => { console.log("Custom event triggered!"); }); document.dispatchEvent(customEvent); // Output: Custom event triggered!

Sử dụng dữ liệu trong sự kiện:

const customEvent = new CustomEvent("customEvent", { detail: { key: "value" }, }); document.addEventListener("customEvent", (event) => { console.log(event.detail); // Output: { key: "value" } }); document.dispatchEvent(customEvent);

Event: Sử dụng cho sự kiện đơn giản.
CustomEvent: Hỗ trợ truyền dữ liệu.

Câu hỏi 27: WeakMap và WeakSet là gì?

Phân tích chi tiết:

WeakMap:
- Key phải là object.
- Không ngăn chặn thu gom rác (garbage collection).
const wm = new WeakMap(); let obj = { key: "value" }; wm.set(obj, "data"); console.log(wm.get(obj)); // Output: "data" obj = null; // Object bị xóa khỏi WeakMap
WeakSet:
- Chỉ chứa các object.
- Không có .size hoặc .forEach.
const ws = new WeakSet(); let obj = { key: "value" }; ws.add(obj); console.log(ws.has(obj)); // Output: true obj = null; // Object bị xóa khỏi WeakSet

Lợi ích:

Tăng hiệu quả bộ nhớ, tự động xóa object không còn tham chiếu.

Câu hỏi 28: `Symbol` trong JavaScript là gì?

Phân tích chi tiết:

Khái niệm:
- Symbol là một kiểu dữ liệu nguyên thủy, được dùng để tạo ra các giá trị duy nhất.
- Phù hợp để sử dụng làm key của object, tránh xung đột với các key khác.
const sym1 = Symbol("description"); const sym2 = Symbol("description"); console.log(sym1 === sym2); // Output: false (mỗi Symbol là duy nhất)
Sử dụng Symbol làm key: const obj = {}; const sym = Symbol("key"); obj[sym] = "value"; console.log(obj[sym]); // Output: "value" console.log(obj); // Object không hiển thị key Symbol khi console
Symbol và thuộc tính đặc biệt: const obj = { [Symbol.toPrimitive](hint) { return hint === "number" ? 42 : "default"; }, }; console.log(+obj); // Output: 42 console.log(`${obj}`); // Output: default

Lợi ích:

Đảm bảo tính duy nhất, tránh ghi đè trong object.
Tạo các thuộc tính không thể truy cập qua vòng lặp for...in.

Câu hỏi 29: Sự khác biệt giữa ES5 và ES6?

Phân tích chi tiết:

Một số điểm khác biệt quan trọng:

Khai báo biến:
- ES5: Chỉ có var.
- ES6: Thêm let và const.
Template literals: // ES5 var greeting = "Hello, " + name + "!"; // ES6 const greeting = `Hello, ${name}!`;
Arrow function: // ES5 var add = function (a, b) { return a + b; }; // ES6 const add = (a, b) => a + b;
Destructuring: // ES5 var x = obj.x; var y = obj.y; // ES6 const { x, y } = obj;
Modules:
- ES5: Sử dụng require và module.exports.
- ES6: Sử dụng import và export.
Class: // ES5 function Person(name) { this.name = name; } Person.prototype.greet = function () { console.log(`Hello, my name is ${this.name}`); }; // ES6 class Person { constructor(name) { this.name = name; } greet() { console.log(`Hello, my name is ${this.name}`); } }

Câu hỏi 30: Sự khác biệt giữa `Function Declaration` và `Function Expression`?

Phân tích chi tiết:

Function Declaration:
- Được hoisted, có thể gọi trước khi khai báo.
sayHello(); function sayHello() { console.log("Hello!"); }
Function Expression:
- Không được hoisted, chỉ có thể gọi sau khi khai báo.
const sayHello = function () { console.log("Hello!"); }; sayHello(); // Output: Hello!
Arrow Function (một dạng Function Expression):
- Không có this, arguments, hoặc prototype.
const add = (a, b) => a + b; console.log(add(2, 3)); // Output: 5

Câu hỏi 31: Sự khác biệt giữa `setTimeout` và `Promise` trong xử lý bất đồng bộ?

Phân tích chi tiết:

setTimeout:
- Đưa callback vào Task Queue và được xử lý sau khi Call Stack trống.
console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); console.log("End"); Kết quả: Start End Timeout
Promise:
- Đưa callback vào Microtask Queue, được ưu tiên xử lý trước Task Queue.
console.log("Start"); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End"); Kết quả: Start End Promise

So sánh:

Promise được ưu tiên hơn setTimeout.
Sử dụng Promise để làm việc với các tác vụ phức tạp hơn.

Câu hỏi 32: Khác biệt giữa `Array` và `Set`?

Phân tích chi tiết:

Array:
- Lưu trữ các giá trị theo thứ tự.
- Cho phép phần tử trùng lặp.
const arr = [1, 2, 2, 3]; console.log(arr); // Output: [1, 2, 2, 3]
Set:
- Lưu trữ các giá trị duy nhất.
- Không cho phép phần tử trùng lặp.
const set = new Set([1, 2, 2, 3]); console.log(set); // Output: Set {1, 2, 3}
Các phương thức của Set: const set = new Set(); set.add(1); set.add(2); set.delete(1); console.log(set.has(2)); // Output: true
Chuyển đổi giữa Array và Set: const arr = [1, 2, 2, 3]; const unique = [...new Set(arr)]; console.log(unique); // Output: [1, 2, 3]

Câu hỏi 33: Event Bubbling và Event Capturing là gì?

Phân tích chi tiết:

Event Bubbling:
- Sự kiện bắt đầu từ phần tử được kích hoạt, rồi “nổi lên” cha của nó.
document.getElementById("child").addEventListener("click", () => { console.log("Child clicked"); }); document.getElementById("parent").addEventListener("click", () => { console.log("Parent clicked"); }); Kết quả: Child clicked Parent clicked
Event Capturing:
- Sự kiện được xử lý từ cha đến con.
- Sử dụng { capture: true }.
document.getElementById("child").addEventListener( "click", () => { console.log("Child clicked"); }, { capture: true } ); document.getElementById("parent").addEventListener( "click", () => { console.log("Parent clicked"); }, { capture: true } ); Kết quả: Parent clicked Child clicked

Câu hỏi 34: Giải thích về `Proxy` trong JavaScript.

Phân tích chi tiết:

Khái niệm:
- Proxy cho phép tạo một object đại diện với khả năng can thiệp vào các thao tác (get, set, delete, v.v.).
Ví dụ: const obj = { a: 1 }; const proxy = new Proxy(obj, { get(target, prop) { console.log(`Getting ${prop}`); return target[prop]; }, set(target, prop, value) { console.log(`Setting ${prop} to ${value}`); target[prop] = value; return true; }, }); console.log(proxy.a); // Output: Getting a, 1 proxy.b = 2; // Output: Setting b to 2

Lợi ích:

Giám sát và tùy chỉnh hành vi của object.
Áp dụng các ràng buộc hoặc kiểm tra dữ liệu.

Câu hỏi 35: Sự khác biệt giữa `window` và `document` trong JavaScript?

Phân tích chi tiết:

window:
- Đại diện cho toàn bộ cửa sổ trình duyệt.
- Là object toàn cục (global object) trong JavaScript.
- Cung cấp các phương thức, thuộc tính, và sự kiện để tương tác với trình duyệt.
console.log(window.innerWidth); // Độ rộng của cửa sổ trình duyệt alert("Hello!"); // Gọi phương thức alert của window
document:
- Đại diện cho cấu trúc DOM của trang HTML.
- Là một phần của window.
- Cung cấp các phương thức và thuộc tính để truy cập và thao tác các phần tử trong DOM.
console.log(document.title); // Tiêu đề của trang const element = document.getElementById("myElement");

So sánh:

window bao trùm document.
document chỉ tương tác với nội dung của trang web.

Câu hỏi 36: Sự khác biệt giữa `LocalStorage`, `SessionStorage`, và `Cookies`?

Phân tích chi tiết:

LocalStorage:
- Lưu trữ dữ liệu lâu dài (ngay cả khi đóng trình duyệt).
- Dung lượng: Lớn hơn cookies (~5-10 MB).
- Không gửi dữ liệu tự động đến server.
localStorage.setItem("key", "value"); console.log(localStorage.getItem("key")); // Output: value
SessionStorage:
- Lưu trữ dữ liệu trong phiên (session).
- Dữ liệu bị xóa khi đóng trình duyệt.
sessionStorage.setItem("key", "value"); console.log(sessionStorage.getItem("key")); // Output: value
Cookies:
- Dung lượng nhỏ (~4 KB).
- Dùng để lưu trữ thông tin gửi đến server trong mỗi yêu cầu HTTP.
- Hỗ trợ thiết lập thời gian hết hạn.
document.cookie = "key=value; expires=Fri, 31 Dec 2024 23:59:59 GMT"; console.log(document.cookie); // Output: key=value

So sánh:

Đặc điểm	LocalStorage	SessionStorage	Cookies
Lưu trữ lâu dài	Có	Không	Có (tùy chọn)
Kích thước	~5-10 MB	~5 MB	~4 KB
Gửi đến server	Không	Không	Có

Câu hỏi 37: Sự khác biệt giữa `null` và `undefined` là gì?

Phân tích chi tiết:

undefined:
- Biến đã được khai báo nhưng chưa được gán giá trị.
let a; console.log(a); // Output: undefined
null:
- Đại diện cho “không có giá trị”.
- Lập trình viên gán null khi muốn biểu thị “trống”.
let b = null; console.log(b); // Output: null

So sánh:

undefined: Hệ thống tự động gán.
null: Do lập trình viên gán.

console.log(typeof undefined); // Output: undefined console.log(typeof null); // Output: object (lỗi trong JavaScript)

Câu hỏi 38: `Object.seal` và `Object.freeze` khác nhau thế nào?

Phân tích chi tiết:

Object.freeze:
- Không cho phép thêm, xóa, hoặc sửa đổi thuộc tính của object.
const obj = Object.freeze({ a: 1 }); obj.a = 2; // Không thay đổi obj.b = 3; // Không thêm được console.log(obj); // Output: { a: 1 }
Object.seal:
- Không cho phép thêm hoặc xóa thuộc tính.
- Nhưng vẫn cho phép sửa đổi giá trị thuộc tính hiện tại.
const obj = Object.seal({ a: 1 }); obj.a = 2; // Thay đổi được delete obj.a; // Không xóa được obj.b = 3; // Không thêm được console.log(obj); // Output: { a: 2 }

So sánh:

freeze: Toàn bộ object bất biến.
seal: Giới hạn thay đổi cấu trúc object, nhưng vẫn thay đổi giá trị.

Câu hỏi 39: Khác biệt giữa `==` và `===`?

Phân tích chi tiết:

== (Equality Operator):
- So sánh giá trị sau khi thực hiện ép kiểu (type coercion).
console.log(5 == "5"); // Output: true console.log(null == undefined); // Output: true
=== (Strict Equality Operator):
- So sánh cả giá trị và kiểu dữ liệu, không ép kiểu.
console.log(5 === "5"); // Output: false console.log(null === undefined); // Output: false

Nên sử dụng:

Luôn ưu tiên === để tránh các lỗi khó phát hiện.

Câu hỏi 40: Cách kiểm tra một giá trị có phải là mảng trong JavaScript?

Phân tích chi tiết:

Sử dụng Array.isArray: console.log(Array.isArray([1, 2, 3])); // Output: true console.log(Array.isArray("string")); // Output: false
Sử dụng instanceof: console.log([] instanceof Array); // Output: true console.log({} instanceof Array); // Output: false
Sử dụng Object.prototype.toString: console.log(Object.prototype.toString.call([])); // Output: [object Array] console.log(Object.prototype.toString.call({})); // Output: [object Object]

Nên sử dụng:

Array.isArray là cách kiểm tra tốt nhất vì rõ ràng và chính xác.

Câu hỏi 41: Sự khác biệt giữa `Object.keys`, `Object.values`, và `Object.entries`?

Phân tích chi tiết:

Object.keys:
- Trả về một mảng chứa các key của object.
const obj = { a: 1, b: 2 }; console.log(Object.keys(obj)); // Output: ["a", "b"]
Object.values:
- Trả về một mảng chứa các giá trị của object.
console.log(Object.values(obj)); // Output: [1, 2]
Object.entries:
- Trả về một mảng các cặp [key, value].
console.log(Object.entries(obj)); // Output: [["a", 1], ["b", 2]]

Ứng dụng:

Dễ dàng duyệt qua object bằng for...of. for (const [key, value] of Object.entries(obj)) { console.log(key, value); }

Câu hỏi 42: Sự khác biệt giữa `Object.assign` và `spread operator`?

Phân tích chi tiết:

Object.assign:
- Sao chép một hoặc nhiều object vào object mục tiêu.
const target = { a: 1 }; const source = { b: 2 }; const result = Object.assign(target, source); console.log(result); // Output: { a: 1, b: 2 }
Spread operator (...):
- Sao chép tương tự, nhưng ngắn gọn hơn.
const result = { ...target, ...source }; console.log(result); // Output: { a: 1, b: 2 }

So sánh:

Object.assign: Thay đổi object mục tiêu (mutate).
Spread operator: Không thay đổi object ban đầu, tạo object mới.

Câu hỏi 43: `Event.preventDefault` và `Event.stopPropagation` khác nhau như thế nào?

Phân tích chi tiết:

Event.preventDefault:
- Ngăn hành vi mặc định của một sự kiện.
- Ví dụ: Ngăn việc gửi form khi nhấn nút submit.
document.querySelector("a").addEventListener("click", (event) => { event.preventDefault(); console.log("Link click prevented"); }); Kết quả: Link không được chuyển hướng khi click.
Event.stopPropagation:
- Ngăn sự kiện lan truyền đến các phần tử cha.
- Có thể dùng để chặn “bubbling” hoặc “capturing”.
document.querySelector(".child").addEventListener("click", (event) => { event.stopPropagation(); console.log("Child clicked"); }); document.querySelector(".parent").addEventListener("click", () => { console.log("Parent clicked"); }); Kết quả: Chỉ hiển thị “Child clicked”, sự kiện không lan tới phần tử cha.

So sánh:

preventDefault: Ngăn hành vi mặc định của sự kiện.
stopPropagation: Ngăn sự kiện lan truyền.

Câu hỏi 44: Các cách chuyển đổi một giá trị sang số trong JavaScript?

Phân tích chi tiết:

Dùng Number(): console.log(Number("123")); // Output: 123 console.log(Number("abc")); // Output: NaN
Dùng dấu cộng +: console.log(+"123"); // Output: 123 console.log(+"abc"); // Output: NaN
Dùng parseInt hoặc parseFloat:
- parseInt: Chuyển đổi sang số nguyên.
- parseFloat: Chuyển đổi sang số thực.
console.log(parseInt("123.45")); // Output: 123 console.log(parseFloat("123.45")); // Output: 123.45
Dùng Math.floor, Math.ceil, hoặc Math.round:
- Tự động ép kiểu.
console.log(Math.floor("123.45")); // Output: 123
Dùng * 1 hoặc / 1: console.log("123" * 1); // Output: 123 console.log("abc" * 1); // Output: NaN

Lưu ý:

Kiểm tra kết quả bằng isNaN() để tránh lỗi.
Number chính xác hơn parseInt vì không bỏ qua các ký tự không phải số.

Câu hỏi 45: Giải thích về `eval` và tại sao nên tránh sử dụng nó?

Phân tích chi tiết:

eval:
- Thực thi một chuỗi như mã JavaScript.
const x = 10; eval("console.log(x + 5)"); // Output: 15
Lý do nên tránh:
- Bảo mật: Có thể thực thi mã độc.
eval("alert('Hacked!')");
- Hiệu suất: Chậm hơn do trình thông dịch phải phân tích và biên dịch mã trong runtime.
- Khó kiểm tra lỗi: Mã không rõ ràng, gây khó khăn cho việc debug.

Thay thế eval:

Dùng JSON.parse hoặc hàm tùy chỉnh.

Câu hỏi 46: Sự khác biệt giữa `prototype` và `proto`?

Phân tích chi tiết:

prototype:
- Thuộc tính của hàm khởi tạo (constructor).
- Dùng để định nghĩa các phương thức và thuộc tính chia sẻ giữa các object.
function Person(name) { this.name = name; } Person.prototype.greet = function () { console.log(`Hello, my name is ${this.name}`); }; const alice = new Person("Alice"); alice.greet(); // Output: Hello, my name is Alice
__proto__:
- Thuộc tính của một object cụ thể.
- Tham chiếu đến prototype của constructor đã tạo ra object đó.
const obj = {}; console.log(obj.__proto__ === Object.prototype); // Output: true

So sánh:

prototype: Liên quan đến constructor function.
__proto__: Liên quan đến instance của object.

Câu hỏi 47: Cách kiểm tra một object có phải là rỗng?

Phân tích chi tiết:

Dùng Object.keys: const obj = {}; console.log(Object.keys(obj).length === 0); // Output: true
Dùng vòng lặp for...in: const obj = {}; let isEmpty = true; for (const key in obj) { isEmpty = false; } console.log(isEmpty); // Output: true
Dùng JSON.stringify: const obj = {}; console.log(JSON.stringify(obj) === "{}"); // Output: true

Câu hỏi 48: Khi nào nên sử dụng `Promise.all` và `Promise.race`?

Phân tích chi tiết:

Promise.all:
- Chờ tất cả các promise được hoàn thành.
- Nếu bất kỳ promise nào bị lỗi, nó sẽ trả về lỗi ngay lập tức.
const p1 = Promise.resolve(1); const p2 = Promise.resolve(2); const p3 = Promise.reject("Error"); Promise.all([p1, p2, p3]) .then((values) => console.log(values)) .catch((error) => console.log(error)); // Output: Error
Promise.race:
- Trả về kết quả của promise được hoàn thành đầu tiên (thành công hoặc thất bại).
const p1 = new Promise((resolve) => setTimeout(() => resolve("P1"), 1000)); const p2 = new Promise((resolve) => setTimeout(() => resolve("P2"), 500)); Promise.race([p1, p2]).then((value) => console.log(value)); // Output: P2

Ứng dụng:

Promise.all: Khi cần đợi tất cả các tác vụ hoàn thành.
Promise.race: Khi cần kết quả nhanh nhất từ các tác vụ.

Câu hỏi 49: Thế nào là một “pure function”?

Phân tích chi tiết:

Định nghĩa:
- Hàm không có tác dụng phụ (side effect).
- Đầu vào giống nhau luôn trả về đầu ra giống nhau.
function add(a, b) { return a + b; } console.log(add(2, 3)); // Output: 5
Không phải pure function:
- Gây thay đổi ngoài hàm.
let x = 0; function increment() { x++; } increment(); console.log(x); // Output: 1

Lợi ích:

Code dễ kiểm tra, tái sử dụng, và bảo trì hơn.

Câu hỏi 50: Sự khác biệt giữa `call stack` và `event loop`?

Phân tích chi tiết:

Call Stack:
- Nơi chứa các hàm đang thực thi.
- Hàm được thêm vào stack khi gọi và bị xóa khi hoàn thành.
function first() { second(); } function second() { console.log("Second"); } first(); // Call stack: // 1. first() // 2. second()
Event Loop:
- Theo dõi Call Stack và Task Queue.
- Khi Call Stack trống, Event Loop đẩy các nhiệm vụ từ Task Queue hoặc Microtask Queue vào Call Stack.
console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); console.log("End");Kết quả: Start End Timeout
- setTimeout được xử lý sau cùng bởi Event Loop.

Câu hỏi 51: Sự khác biệt giữa `shallow copy` và `deep copy` với ví dụ?

Phân tích chi tiết:

Shallow Copy:
- Sao chép các giá trị cấp đầu tiên của object hoặc array.
- Các object con vẫn trỏ đến cùng tham chiếu.
const obj1 = { a: 1, b: { c: 2 } }; const obj2 = { ...obj1 }; obj2.b.c = 42; console.log(obj1.b.c); // Output: 42 (tham chiếu chung)Cách tạo shallow copy:
- Dùng Object.assign.
- Dùng spread operator (...).
Deep Copy:
- Sao chép toàn bộ cấu trúc object, bao gồm các object con.
- Không chia sẻ tham chiếu.
const obj1 = { a: 1, b: { c: 2 } }; const obj2 = JSON.parse(JSON.stringify(obj1)); obj2.b.c = 42; console.log(obj1.b.c); // Output: 2 (không ảnh hưởng)Lưu ý:
- JSON không sao chép được các giá trị như function hoặc undefined.
- Thư viện như lodash có thể tạo deep copy tốt hơn: const _ = require("lodash"); const obj2 = _.cloneDeep(obj1);

Câu hỏi 52: Sự khác biệt giữa `for...in` và `for...of`?

Phân tích chi tiết:

for...in:
- Duyệt qua các key trong object (bao gồm cả key kế thừa).
const obj = { a: 1, b: 2 }; for (const key in obj) { console.log(key); // Output: "a", "b" }
- Không nên dùng cho mảng, vì sẽ duyệt cả các chỉ số.
const arr = [10, 20]; for (const key in arr) { console.log(key); // Output: 0, 1 }
for...of:
- Duyệt qua các giá trị của iterable objects (mảng, chuỗi, Set, Map).
const arr = [10, 20]; for (const value of arr) { console.log(value); // Output: 10, 20 }
- Không thể dùng cho object (trừ khi sử dụng Object.entries).

So sánh:

for...in: Duyệt qua key của object.
for...of: Duyệt qua giá trị của iterable objects.

Câu hỏi 53: Khác biệt giữa `try...catch` và `throw`?

Phân tích chi tiết:

try...catch:
- Dùng để xử lý lỗi trong runtime mà không làm gián đoạn chương trình.
try { const result = JSON.parse("{ invalid json }"); } catch (error) { console.log("Caught an error:", error.message); }
throw:
- Dùng để tạo lỗi tùy chỉnh hoặc phát sinh lỗi thủ công.
function validateAge(age) { if (age < 18) { throw new Error("Age must be 18 or older"); } } try { validateAge(15); } catch (error) { console.log(error.message); // Output: Age must be 18 or older }

So sánh:

try...catch: Bao bọc đoạn code có khả năng gây lỗi.
throw: Chủ động phát sinh lỗi.

Câu hỏi 54: Sự khác biệt giữa `DOMContentLoaded` và `load` event?

Phân tích chi tiết:

DOMContentLoaded:
- Được kích hoạt khi HTML đã được tải và phân tích xong, không cần đợi tài nguyên như ảnh hoặc script.
document.addEventListener("DOMContentLoaded", () => { console.log("DOM fully loaded and parsed"); });
load:
- Được kích hoạt khi toàn bộ trang, bao gồm các tài nguyên như ảnh, script, đã tải xong.
window.addEventListener("load", () => { console.log("Page fully loaded"); });

So sánh:

DOMContentLoaded: Nhanh hơn, chỉ cần DOM hoàn tất.
load: Chậm hơn, chờ toàn bộ tài nguyên.

Câu hỏi 55: Làm thế nào để debounce một hàm trong JavaScript?

Phân tích chi tiết:

Khái niệm:

Debounce là kỹ thuật hạn chế việc thực thi một hàm nhiều lần liên tiếp trong một khoảng thời gian ngắn.

function debounce(func, delay) { let timeout; return function (...args) { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), delay); }; } // Ví dụ const log = debounce(() => console.log("Debounced!"), 1000); window.addEventListener("resize", log);

Khi sự kiện resize liên tục được gọi, log chỉ được thực thi sau 1 giây kể từ lần gọi cuối.

Câu hỏi 56: Giải thích về `Promise.finally` và cách hoạt động của nó?

Phân tích chi tiết:

finally:
- Luôn được gọi sau khi Promise được giải quyết (fulfilled hoặc rejected).
const promise = new Promise((resolve, reject) => { setTimeout(() => reject("Error"), 1000); }); promise .catch((error) => console.log(error)) // Output: Error .finally(() => console.log("Cleanup")); // Output: Cleanup
Ứng dụng:
- Dùng để dọn dẹp tài nguyên hoặc thực hiện hành động bất kể Promise thành công hay thất bại.

Câu hỏi 57: Sự khác biệt giữa `apply`, `call`, và `bind`?

Phân tích chi tiết:

call:
- Gọi hàm với this và các tham số truyền riêng lẻ.
function greet(greeting) { console.log(`${greeting}, my name is ${this.name}`); } const person = { name: "Alice" }; greet.call(person, "Hello"); // Output: Hello, my name is Alice
apply:
- Tương tự call, nhưng tham số được truyền dưới dạng mảng.
greet.apply(person, ["Hi"]); // Output: Hi, my name is Alice
bind:
- Trả về một hàm mới với this cố định, không thực thi ngay.
const boundGreet = greet.bind(person, "Hey"); boundGreet(); // Output: Hey, my name is Alice

So sánh:

call và apply: Gọi hàm ngay lập tức.
bind: Trả về một hàm mới.

Câu hỏi 58: Làm thế nào để kiểm tra xem một object có phải là “plain object”?

Phân tích chi tiết:

Khái niệm: “Plain object” là object được tạo bởi {} hoặc new Object().

Dùng Object.prototype.toString: function isPlainObject(obj) { return Object.prototype.toString.call(obj) === "[object Object]"; } console.log(isPlainObject({})); // Output: true console.log(isPlainObject(new Date())); // Output: false
Dùng Object.getPrototypeOf: function isPlainObject(obj) { return Object.getPrototypeOf(obj) === Object.prototype; } console.log(isPlainObject({})); // Output: true console.log(isPlainObject(Object.create(null))); // Output: false

Câu hỏi 59: Sự khác biệt giữa `Object.defineProperty` và gán trực tiếp thuộc tính?

Phân tích chi tiết:

Gán trực tiếp thuộc tính:
- Dễ sử dụng nhưng không kiểm soát được cấu hình thuộc tính.
const obj = {}; obj.name = "Alice"; console.log(obj.name); // Output: Alice
Object.defineProperty:
- Cho phép kiểm soát chi tiết thuộc tính (writable, enumerable, configurable).
const obj = {}; Object.defineProperty(obj, "name", { value: "Alice", writable: false, // Không cho phép thay đổi giá trị enumerable: true, // Hiển thị trong vòng lặp configurable: false, // Không thể xóa hoặc thay đổi thuộc tính }); console.log(obj.name); // Output: Alice obj.name = "Bob"; // Không thay đổi được console.log(obj.name); // Output: Alice

Ứng dụng:

Định nghĩa thuộc tính không thể thay đổi hoặc có quyền truy cập đặc biệt.

Câu hỏi 60: Làm thế nào để lấy tất cả các key của một object, bao gồm cả key từ prototype?

Phân tích chi tiết:

Dùng for...in:
- Duyệt qua cả key của object và prototype.
const obj = Object.create({ inheritedKey: 42 }); obj.ownKey = 10; for (const key in obj) { console.log(key); // Output: "inheritedKey", "ownKey" }
Dùng Object.keys và Object.getPrototypeOf:
- Kết hợp để lấy cả key của object và prototype.
function getAllKeys(obj) { const keys = []; for (const key in obj) { keys.push(key); } return keys; } const obj = Object.create({ inheritedKey: 42 }); obj.ownKey = 10; console.log(getAllKeys(obj)); // Output: ["inheritedKey", "ownKey"]

Câu hỏi 61: `new.target` là gì và khi nào sử dụng?

Phân tích chi tiết:

Khái niệm:
- new.target cho biết một hàm hoặc class có được gọi bằng từ khóa new hay không.
Ví dụ: function MyClass() { if (!new.target) { throw new Error("Must use 'new' with MyClass"); } this.name = "MyClass instance"; } new MyClass(); // Không lỗi MyClass(); // Lỗi: Must use 'new' with MyClass
Ứng dụng:
- Đảm bảo constructor được gọi đúng cách.

Câu hỏi 62: Làm thế nào để kiểm tra một giá trị là kiểu nguyên thủy?

Phân tích chi tiết:

Khái niệm:
- Kiểu nguyên thủy: string, number, boolean, null, undefined, symbol, và bigint.
Cách kiểm tra: function isPrimitive(value) { return value !== Object(value); } console.log(isPrimitive(42)); // Output: true console.log(isPrimitive({})); // Output: false console.log(isPrimitive("Hello")); // Output: true

Câu hỏi 63: Sự khác biệt giữa `function` và `class` trong JavaScript?

Phân tích chi tiết:

function:
- Hàm có thể được sử dụng làm constructor.
- Không bắt buộc phải gọi bằng new.
function Person(name) { this.name = name; } const alice = new Person("Alice"); console.log(alice.name); // Output: Alice
class:
- Cú pháp rõ ràng hơn cho constructor và phương thức.
- Phải gọi bằng new.
class Person { constructor(name) { this.name = name; } } const alice = new Person("Alice"); console.log(alice.name); // Output: Alice

So sánh:

function: Linh hoạt hơn, nhưng cú pháp phức tạp.
class: Rõ ràng, dễ đọc hơn cho lập trình hướng đối tượng.

Câu hỏi 64: Tại sao vòng lặp `forEach` không thể sử dụng `break` hoặc `continue`?

Phân tích chi tiết:

Hạn chế của forEach:
- forEach không có cơ chế để thoát khỏi vòng lặp.
- Không hỗ trợ từ khóa break hoặc continue.
[1, 2, 3].forEach((num) => { if (num === 2) continue; // Lỗi: SyntaxError console.log(num); });
Giải pháp thay thế:
- Sử dụng for hoặc for...of:
for (const num of [1, 2, 3]) { if (num === 2) continue; console.log(num); // Output: 1, 3 }

Câu hỏi 65: `WeakMap` và `WeakSet` khác biệt gì so với `Map` và `Set`?

Phân tích chi tiết:

Điểm chung:
- WeakMap và WeakSet lưu trữ các object như Map và Set.
Khác biệt:
- WeakMap:
  - Key phải là object.
  - Không ngăn thu gom rác (garbage collection).
  let obj = {}; const wm = new WeakMap(); wm.set(obj, "value"); obj = null; // Object bị thu gom rác
- WeakSet:
  - Chỉ chứa các object.
  - Không hỗ trợ lặp (iteration).
  let obj = {}; const ws = new WeakSet(); ws.add(obj); obj = null; // Object bị thu gom rác

Câu hỏi 66: `Reflect` trong JavaScript là gì?

Phân tích chi tiết:

Khái niệm:
- Reflect cung cấp các phương thức để thao tác với object tương tự như Object.
Ví dụ: const obj = { a: 1 }; Reflect.set(obj, "b", 2); console.log(obj); // Output: { a: 1, b: 2 } const result = Reflect.has(obj, "a"); console.log(result); // Output: true
Ứng dụng:
- Xử lý Proxy.
- Thay thế các phương thức truyền thống của Object.

Câu hỏi 67: Tại sao `typeof null` lại trả về `"object"`?

Phân tích chi tiết:

Lý do:
- Do lỗi trong việc triển khai JavaScript ban đầu, null được gán giá trị là 0 trong internal representation.
- typeof kiểm tra internal type tag và thấy 0, tương ứng với "object".
Cách xử lý:
- Kiểm tra giá trị null một cách chính xác:
console.log(value === null); // Đúng cách kiểm tra

Câu hỏi 68: Làm thế nào để tạo một phương thức getter và setter?

Phân tích chi tiết:

Khái niệm:
- Getter: Truy xuất giá trị.
- Setter: Cập nhật giá trị.
Cách sử dụng: const obj = { _name: "Alice", get name() { return this._name; }, set name(value) { this._name = value.toUpperCase(); }, }; console.log(obj.name); // Output: Alice obj.name = "bob"; console.log(obj.name); // Output: BOB

Câu hỏi 69: Khác biệt giữa `Object.freeze` và `Object.seal` với ví dụ?

Phân tích chi tiết:

Object.freeze:
- Ngăn mọi thay đổi: không thêm, xóa, hoặc sửa giá trị.
const obj = Object.freeze({ a: 1 }); obj.a = 2; // Không thay đổi console.log(obj.a); // Output: 1
Object.seal:
- Ngăn thêm hoặc xóa thuộc tính, nhưng vẫn thay đổi giá trị hiện tại.
const obj = Object.seal({ a: 1 }); obj.a = 2; // Thay đổi được delete obj.a; // Không xóa được console.log(obj); // Output: { a: 2 }

Câu hỏi 70: Sự khác biệt giữa `Array.prototype.map` và `Array.prototype.forEach`?

Phân tích chi tiết:

map:
- Tạo một mảng mới từ kết quả của hàm callback được gọi trên từng phần tử.
- Không thay đổi mảng ban đầu.
const arr = [1, 2, 3]; const newArr = arr.map((num) => num * 2); console.log(newArr); // Output: [2, 4, 6] console.log(arr); // Output: [1, 2, 3]
forEach:
- Chạy hàm callback trên từng phần tử của mảng.
- Không trả về giá trị, dùng để thực hiện thao tác phụ (side effects).
const arr = [1, 2, 3]; arr.forEach((num) => console.log(num * 2)); // Output: 2, 4, 6

So sánh:

map: Trả về mảng mới.
forEach: Không trả về giá trị.

Câu hỏi 71: Làm thế nào để kiểm tra một giá trị là số hợp lệ trong JavaScript?

Phân tích chi tiết:

Dùng isNaN:
- Kiểm tra xem giá trị có phải là số không hợp lệ.
console.log(isNaN("123")); // Output: false console.log(isNaN("abc")); // Output: true
Dùng Number.isNaN:
- Chính xác hơn vì không ép kiểu.
console.log(Number.isNaN(NaN)); // Output: true console.log(Number.isNaN("123")); // Output: false
Kiểm tra số hợp lệ: function isValidNumber(value) { return typeof value === "number" && !isNaN(value); } console.log(isValidNumber(123)); // Output: true console.log(isValidNumber("123")); // Output: false

Câu hỏi 72: Sự khác biệt giữa `SetTimeout` và `RequestAnimationFrame`?

Phân tích chi tiết:

setTimeout:
- Chạy một hàm sau một khoảng thời gian cụ thể.
setTimeout(() => console.log("Run after 1 second"), 1000);
requestAnimationFrame:
- Dùng để tối ưu hóa việc vẽ trên màn hình (animation).
- Chạy hàm callback ngay trước lần vẽ tiếp theo của trình duyệt (~16ms với 60FPS).
function animate() { console.log("Frame rendered"); requestAnimationFrame(animate); } requestAnimationFrame(animate);

So sánh:

setTimeout: Chạy sau một khoảng thời gian cố định.
requestAnimationFrame: Chạy theo tốc độ vẽ của trình duyệt, tối ưu hơn cho animation.

Câu hỏi 73: Sự khác biệt giữa `Object.create` và `{}` để tạo object?

Phân tích chi tiết:

Object.create:
- Tạo một object mới với prototype cụ thể.
const proto = { greet: () => console.log("Hello!") }; const obj = Object.create(proto); obj.greet(); // Output: Hello!
{}:
- Tạo một object mới với prototype mặc định (Object.prototype).
const obj = {}; console.log(obj.__proto__ === Object.prototype); // Output: true

So sánh:

Object.create: Cho phép tùy chỉnh prototype.
{}: Prototype mặc định là Object.prototype.

Câu hỏi 74: Làm thế nào để chuyển một `NodeList` thành mảng?

Phân tích chi tiết:

Dùng Array.from: const nodeList = document.querySelectorAll("div"); const array = Array.from(nodeList); console.log(array);
Dùng spread operator (...): const array = [...document.querySelectorAll("div")]; console.log(array);
Dùng Array.prototype.slice: const array = Array.prototype.slice.call(document.querySelectorAll("div")); console.log(array);

So sánh:

Array.from và spread operator là cách phổ biến và dễ đọc hơn.

Câu hỏi 75: Tại sao `setTimeout` với 0ms vẫn có độ trễ?

Phân tích chi tiết:

Lý do:
- setTimeout không thực thi ngay lập tức vì nó đưa callback vào Task Queue.
- Nếu Call Stack không trống, trình duyệt sẽ đợi cho đến khi stack trống để thực thi callback.
Ví dụ: console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); console.log("End"); Kết quả: Start End Timeout

Lưu ý:

Độ trễ tối thiểu của setTimeout trong trình duyệt thường là 4ms (theo chuẩn HTML5).

Câu hỏi 76: Khác biệt giữa `undefined` và `not defined` trong JavaScript?

Phân tích chi tiết:

undefined:
- Biến đã được khai báo nhưng chưa gán giá trị.
let x; console.log(x); // Output: undefined
not defined:
- Biến chưa được khai báo.
console.log(y); // ReferenceError: y is not defined

Câu hỏi 77: Làm thế nào để clone một object trong JavaScript?

Phân tích chi tiết:

Dùng spread operator (...): const obj = { a: 1, b: 2 }; const clone = { ...obj }; console.log(clone); // Output: { a: 1, b: 2 }
Dùng Object.assign: const clone = Object.assign({}, obj); console.log(clone); // Output: { a: 1, b: 2 }
Dùng JSON (Deep clone): const deepClone = JSON.parse(JSON.stringify(obj));

Lưu ý:

Spread operator và Object.assign tạo shallow copy.
JSON không sao chép được các giá trị không hợp lệ như undefined hoặc function.

Câu hỏi 78: Làm thế nào để kiểm tra một object là một mảng?

Phân tích chi tiết:

Dùng Array.isArray: console.log(Array.isArray([1, 2, 3])); // Output: true
Dùng instanceof: console.log([] instanceof Array); // Output: true
Dùng Object.prototype.toString: console.log(Object.prototype.toString.call([])); // Output: [object Array]

Nên sử dụng:

Array.isArray là cách chính xác và dễ đọc nhất.

Câu hỏi 79: Sự khác biệt giữa `delete` và `Object.keys().splice` khi xóa thuộc tính?

Phân tích chi tiết:

delete:
- Xóa một thuộc tính khỏi object.
const obj = { a: 1, b: 2 }; delete obj.a; console.log(obj); // Output: { b: 2 }
Object.keys().splice:
- Chỉ thao tác trên mảng của các key, không thay đổi object gốc.
const obj = { a: 1, b: 2 }; const keys = Object.keys(obj); keys.splice(0, 1); console.log(keys); // Output: ["b"] console.log(obj); // Output: { a: 1, b: 2 }

Câu hỏi 80: Khác biệt giữa `Promise.allSettled` và `Promise.all`?

Phân tích chi tiết:

Promise.all:
- Chỉ thành công nếu tất cả promise đều hoàn thành.
- Nếu một promise bị reject, toàn bộ bị reject.
const p1 = Promise.resolve(1); const p2 = Promise.reject("Error"); Promise.all([p1, p2]) .then((results) => console.log(results)) .catch((error) => console.log(error)); // Output: Error
Promise.allSettled:
- Luôn hoàn thành, bất kể promise thành công hay thất bại.
Promise.allSettled([p1, p2]).then((results) => console.log(results)); // Output: [{ status: "fulfilled", value: 1 }, { status: "rejected", reason: "Error" }]

Ứng dụng:

Promise.all: Khi cần tất cả thành công.
Promise.allSettled: Khi cần xử lý kết quả từng promise, dù thành công hay thất bại.

Câu hỏi 81: Sự khác biệt giữa `Function.prototype.apply`, `Function.prototype.call`, và `Function.prototype.bind`?

Phân tích chi tiết:

apply:
- Gọi hàm ngay lập tức và truyền tham số dưới dạng mảng.
function greet(greeting, name) { console.log(`${greeting}, ${name}`); } greet.apply(null, ["Hello", "Alice"]); // Output: Hello, Alice
call:
- Gọi hàm ngay lập tức và truyền tham số lần lượt.
greet.call(null, "Hi", "Bob"); // Output: Hi, Bob
bind:
- Trả về một hàm mới với this và các tham số cố định, không thực thi ngay.
const greetBob = greet.bind(null, "Hey", "Bob"); greetBob(); // Output: Hey, Bob

So sánh:

apply: Tham số dưới dạng mảng.
call: Tham số lần lượt.
bind: Tạo hàm mới.

Câu hỏi 82: Sự khác biệt giữa `null` và `undefined` trong JavaScript?

Phân tích chi tiết:

undefined:
- Biến được khai báo nhưng chưa gán giá trị.
let a; console.log(a); // Output: undefined
null:
- Biến được gán giá trị null, biểu thị “không có giá trị”.
let b = null; console.log(b); // Output: null
So sánh: console.log(null == undefined); // Output: true (so sánh lỏng lẻo) console.log(null === undefined); // Output: false (so sánh nghiêm ngặt)

Câu hỏi 83: Khác biệt giữa `Object.hasOwnProperty` và `in`?

Phân tích chi tiết:

hasOwnProperty:
- Kiểm tra xem một object có sở hữu một thuộc tính (không kiểm tra prototype).
const obj = { a: 1 }; console.log(obj.hasOwnProperty("a")); // Output: true console.log(obj.hasOwnProperty("b")); // Output: false
in:
- Kiểm tra xem thuộc tính có tồn tại trong object (bao gồm cả từ prototype).
console.log("a" in obj); // Output: true console.log("toString" in obj); // Output: true (từ prototype)

So sánh:

hasOwnProperty: Chỉ kiểm tra thuộc tính riêng.
in: Kiểm tra cả thuộc tính kế thừa.

Câu hỏi 84: Tại sao sử dụng `use strict`?

Phân tích chi tiết:

Mục đích:
- Áp dụng chế độ nghiêm ngặt, giúp tránh lỗi tiềm ẩn.
Ví dụ:
- Không cho phép gán giá trị cho biến chưa khai báo.
"use strict"; x = 10; // Error: x is not defined
- Ngăn sử dụng từ khóa dành riêng.
"use strict"; const private = 10; // Error: Unexpected strict mode reserved word
Ứng dụng:
- Giúp phát hiện lỗi sớm.
- Nâng cao hiệu suất bằng cách cho trình thông dịch tối ưu hóa tốt hơn.

Câu hỏi 85: Làm thế nào để hợp nhất hai object trong JavaScript?

Phân tích chi tiết:

Dùng spread operator (...): const obj1 = { a: 1 }; const obj2 = { b: 2 }; const merged = { ...obj1, ...obj2 }; console.log(merged); // Output: { a: 1, b: 2 }
Dùng Object.assign: const merged = Object.assign({}, obj1, obj2); console.log(merged); // Output: { a: 1, b: 2 }

So sánh:

Spread operator: Cú pháp ngắn gọn hơn.
Object.assign: Phù hợp khi cần hỗ trợ trình duyệt cũ.

Câu hỏi 86: Khác biệt giữa `arguments` và rest parameter (`...args`)?

Phân tích chi tiết:

arguments:
- Đối tượng giả mảng, chứa tất cả tham số được truyền vào hàm.
- Không tồn tại trong arrow function.
function sum() { console.log(arguments); } sum(1, 2, 3); // Output: [1, 2, 3]
Rest parameter (...args):
- Mảng thực sự, chứa các tham số còn lại.
- Hoạt động trong cả function thường và arrow function.
function sum(...args) { console.log(args); } sum(1, 2, 3); // Output: [1, 2, 3]

So sánh:

arguments: Giả mảng, không hỗ trợ các phương thức của mảng.
...args: Mảng thực sự, linh hoạt hơn.

Câu hỏi 87: Khác biệt giữa `console.log`, `console.dir`, và `console.table`?

Phân tích chi tiết:

console.log:
- In giá trị ra console.
console.log({ a: 1, b: 2 });
console.dir:
- Hiển thị cây DOM hoặc cấu trúc object.
console.dir(document.body);
console.table:
- Hiển thị dữ liệu dạng bảng.
const data = [{ name: "Alice", age: 25 }, { name: "Bob", age: 30 }]; console.table(data);

Ứng dụng:

console.log: Debug thông thường.
console.dir: Debug DOM hoặc object.
console.table: Debug dữ liệu dạng bảng.

Câu hỏi 88: Sự khác biệt giữa `JSON.stringify` và `JSON.parse`?

Phân tích chi tiết:

JSON.stringify:
- Chuyển object/mảng thành chuỗi JSON.
const obj = { name: "Alice", age: 25 }; const jsonString = JSON.stringify(obj); console.log(jsonString); // Output: '{"name":"Alice","age":25}'
JSON.parse:
- Chuyển chuỗi JSON thành object/mảng.
const json = '{"name":"Alice","age":25}'; const obj = JSON.parse(json); console.log(obj); // Output: { name: "Alice", age: 25 }

Câu hỏi 89: `Object.entries`, `Object.keys`, và `Object.values` khác nhau thế nào?

Phân tích chi tiết:

Object.entries:
- Trả về mảng các cặp [key, value].
const obj = { a: 1, b: 2 }; console.log(Object.entries(obj)); // Output: [["a", 1], ["b", 2]]
Object.keys:
- Trả về mảng các key.
console.log(Object.keys(obj)); // Output: ["a", "b"]
Object.values:
- Trả về mảng các value.
console.log(Object.values(obj)); // Output: [1, 2]

Câu hỏi 90: Làm thế nào để kiểm tra xem một object có phải là prototype của object khác?

Phân tích chi tiết:

Dùng isPrototypeOf: const proto = {}; const obj = Object.create(proto); console.log(proto.isPrototypeOf(obj)); // Output: true
Dùng Object.getPrototypeOf: console.log(Object.getPrototypeOf(obj) === proto); // Output: true

Câu hỏi 91: Sự khác biệt giữa `eval` và `Function` constructor trong JavaScript?

Phân tích chi tiết:

eval:
- Thực thi một chuỗi như mã JavaScript.
- Nguy hiểm và không an toàn.
const x = 10; eval("console.log(x + 5)"); // Output: 15
Function constructor:
- Tạo một hàm mới từ chuỗi mã.
- An toàn hơn vì chạy trong phạm vi cục bộ.
const add = new Function("a", "b", "return a + b"); console.log(add(2, 3)); // Output: 5

So sánh:

eval: Chạy mã trong phạm vi hiện tại, dễ gây lỗi bảo mật.
Function: Chạy mã trong phạm vi riêng, an toàn hơn.

Câu hỏi 92: Sự khác biệt giữa `break` và `return` trong vòng lặp?

Phân tích chi tiết:

break:
- Thoát khỏi vòng lặp hiện tại.
for (let i = 0; i < 5; i++) { if (i === 3) break; console.log(i); } // Output: 0, 1, 2
return:
- Thoát khỏi vòng lặp và cả hàm chứa vòng lặp.
function loop() { for (let i = 0; i < 5; i++) { if (i === 3) return; console.log(i); } console.log("This will not execute"); } loop(); // Output: 0, 1, 2

Câu hỏi 93: Sự khác biệt giữa `Object.assign` và spread operator (`...`)?

Phân tích chi tiết:

Object.assign:
- Sao chép một hoặc nhiều object vào object mục tiêu.
- Thay đổi object mục tiêu nếu không tạo một bản sao rỗng.
const obj1 = { a: 1 }; const obj2 = { b: 2 }; const result = Object.assign({}, obj1, obj2); console.log(result); // Output: { a: 1, b: 2 }
Spread operator (...):
- Ngắn gọn hơn và thường được sử dụng để sao chép object hoặc mảng.
const result = { ...obj1, ...obj2 }; console.log(result); // Output: { a: 1, b: 2 }

So sánh:

Spread operator ngắn gọn hơn.
Object.assign cần thiết khi hỗ trợ trình duyệt cũ.

Câu hỏi 94: Khác biệt giữa `const`, `let`, và `var`?

Phân tích chi tiết:

var:
- Có phạm vi toàn cục hoặc function.
- Có thể khai báo lại và không bị ràng buộc bởi block.
if (true) { var x = 10; } console.log(x); // Output: 10
let:
- Có phạm vi block ({}).
- Không thể khai báo lại trong cùng phạm vi.
if (true) { let y = 20; console.log(y); // Output: 20 } console.log(y); // Error: y is not defined
const:
- Giống let, nhưng giá trị không thể thay đổi (đối với kiểu nguyên thủy).
const z = 30; z = 40; // Error: Assignment to constant variable

Câu hỏi 95: Làm thế nào để kiểm tra xem một object có phải là instance của một class?

Phân tích chi tiết:

Dùng instanceof: class Person {} const alice = new Person(); console.log(alice instanceof Person); // Output: true
Dùng constructor: console.log(alice.constructor === Person); // Output: true

Câu hỏi 96: Sự khác biệt giữa `typeof` và `instanceof`?

Phân tích chi tiết:

typeof:
- Trả về kiểu dữ liệu của một giá trị.
- Hoạt động tốt với kiểu nguyên thủy, nhưng không chính xác với object.
console.log(typeof 42); // Output: "number" console.log(typeof null); // Output: "object" (lỗi)
instanceof:
- Kiểm tra xem một object có phải là instance của một class hoặc constructor.
console.log([] instanceof Array); // Output: true console.log([] instanceof Object); // Output: true

So sánh:

typeof: Kiểm tra kiểu dữ liệu.
instanceof: Kiểm tra nguồn gốc object.

Câu hỏi 97: Làm thế nào để làm tròn số trong JavaScript?

Phân tích chi tiết:

Dùng Math.floor:
- Làm tròn xuống.
console.log(Math.floor(4.7)); // Output: 4
Dùng Math.ceil:
- Làm tròn lên.
console.log(Math.ceil(4.3)); // Output: 5
Dùng Math.round:
- Làm tròn tới số gần nhất.
console.log(Math.round(4.5)); // Output: 5

Câu hỏi 98: Sự khác biệt giữa `==` và `===`?

Phân tích chi tiết:

==:
- So sánh giá trị sau khi thực hiện ép kiểu (type coercion).
console.log(5 == "5"); // Output: true
===:
- So sánh cả giá trị và kiểu dữ liệu (strict equality).
console.log(5 === "5"); // Output: false

Nên sử dụng:

Luôn ưu tiên === để tránh lỗi không mong muốn.

Câu hỏi 99: Làm thế nào để kiểm tra một giá trị là `NaN` trong JavaScript?

Phân tích chi tiết:

Dùng isNaN:
- Kiểm tra xem giá trị có phải là “Not-a-Number”.
console.log(isNaN("abc")); // Output: true console.log(isNaN(123)); // Output: false
Dùng Number.isNaN:
- Chính xác hơn vì không thực hiện ép kiểu.
console.log(Number.isNaN("abc")); // Output: false console.log(Number.isNaN(NaN)); // Output: true

Câu hỏi 100: Khác biệt giữa `forEach`, `map`, và `reduce`?

Phân tích chi tiết:

forEach:
- Duyệt qua mảng, không trả về giá trị.
[1, 2, 3].forEach((num) => console.log(num));
map:
- Duyệt qua mảng và trả về mảng mới.
const doubled = [1, 2, 3].map((num) => num * 2); console.log(doubled); // Output: [2, 4, 6]
reduce:
- Duyệt qua mảng và tích lũy giá trị thành một kết quả.
const sum = [1, 2, 3].reduce((total, num) => total + num, 0); console.log(sum); // Output: 6

So sánh:

forEach: Thực hiện tác vụ, không trả về.
map: Tạo mảng mới.
reduce: Tích lũy kết quả.

Câu hỏi 101: Khác biệt giữa `setTimeout` và `setImmediate` trong Node.js?

Phân tích chi tiết:

setTimeout:
- Chạy một callback sau khoảng thời gian nhất định.
- Đưa vào Timer Phase của Event Loop.
setTimeout(() => console.log("setTimeout"), 0);
setImmediate:
- Chạy một callback ngay sau khi I/O Phase hoàn thành.
- Đưa vào Check Phase của Event Loop.
setImmediate(() => console.log("setImmediate"));
So sánh:
- Nếu cả hai được gọi đồng thời, thứ tự thực thi phụ thuộc vào ngữ cảnh Event Loop.
setTimeout(() => console.log("setTimeout"), 0); setImmediate(() => console.log("setImmediate")); Kết quả: Thứ tự không đảm bảo, phụ thuộc vào cách Node.js quản lý Event Loop.

Câu hỏi 102: Khác biệt giữa `globalThis`, `window`, và `global`?

Phân tích chi tiết:

globalThis:
- Đối tượng toàn cục chuẩn hóa, hoạt động trên mọi môi trường.
console.log(globalThis); // Output: global (Node.js) hoặc window (trình duyệt)
window:
- Đối tượng toàn cục trong trình duyệt.
console.log(window); // Output: Window {...}
global:
- Đối tượng toàn cục trong Node.js.
console.log(global); // Output: [object global]

So sánh:

Sử dụng globalThis để đảm bảo tính tương thích trên cả trình duyệt và Node.js.

Câu hỏi 103: `Proxy` trong JavaScript là gì và cách sử dụng?

Phân tích chi tiết:

Khái niệm:
- Proxy cho phép kiểm soát hành vi của object thông qua các handler.
Ví dụ: const target = { a: 1 }; const proxy = new Proxy(target, { get(obj, prop) { return prop in obj ? obj[prop] : "Property not found"; }, set(obj, prop, value) { obj[prop] = value * 2; return true; }, }); console.log(proxy.a); // Output: 1 console.log(proxy.b); // Output: Property not found proxy.c = 5; console.log(proxy.c); // Output: 10
Ứng dụng:
- Theo dõi truy cập thuộc tính.
- Kiểm tra hoặc thay đổi dữ liệu trước khi lưu.

Câu hỏi 104: Khác biệt giữa `Object.freeze` và `Object.preventExtensions`?

Phân tích chi tiết:

Object.freeze:
- Không cho phép thêm, xóa hoặc sửa đổi thuộc tính.
const obj = Object.freeze({ a: 1 }); obj.a = 2; // Không thay đổi obj.b = 3; // Không thêm được
Object.preventExtensions:
- Không cho phép thêm thuộc tính mới, nhưng có thể sửa đổi hoặc xóa thuộc tính hiện tại.
const obj = Object.preventExtensions({ a: 1 }); obj.a = 2; // Thay đổi được obj.b = 3; // Không thêm được delete obj.a; // Xóa được

So sánh:

Object.freeze: Toàn bộ object bất biến.
Object.preventExtensions: Chỉ ngăn thêm thuộc tính mới.

Câu hỏi 105: Sự khác biệt giữa synchronous và asynchronous?

Phân tích chi tiết:

Synchronous:
- Thực thi các tác vụ theo tuần tự, tác vụ sau phải đợi tác vụ trước hoàn thành.
console.log("Start"); console.log("End"); // Output: Start, End
Asynchronous:
- Cho phép các tác vụ không đồng bộ thực thi mà không chặn chương trình.
console.log("Start"); setTimeout(() => { console.log("Asynchronous task"); }, 1000); console.log("End"); // Output: Start, End, Asynchronous task

So sánh:

Đồng bộ phù hợp với tác vụ đơn giản.
Bất đồng bộ tối ưu hóa hiệu suất khi xử lý tác vụ tốn thời gian.

Câu hỏi 106: Khác biệt giữa `setTimeout` và `setInterval`?

Phân tích chi tiết:

setTimeout:
- Chạy hàm callback sau một khoảng thời gian và chỉ chạy một lần.
setTimeout(() => console.log("Run once"), 1000);
setInterval:
- Lặp lại hàm callback sau mỗi khoảng thời gian cố định.
setInterval(() => console.log("Repeat"), 1000);

So sánh:

setTimeout: Chỉ chạy một lần.
setInterval: Lặp lại liên tục.

Câu hỏi 107: Làm thế nào để dừng `setInterval`?

Phân tích chi tiết:

Dùng clearInterval:
- Lưu ID trả về từ setInterval và truyền vào clearInterval.
const intervalId = setInterval(() => console.log("Running"), 1000); setTimeout(() => { clearInterval(intervalId); console.log("Stopped"); }, 5000);
Kết quả:
- In “Running” mỗi giây, sau 5 giây in “Stopped”.

Câu hỏi 108: Làm thế nào để thêm thuộc tính getter và setter vào object?

Phân tích chi tiết:

Dùng Object.defineProperty: const obj = {}; Object.defineProperty(obj, "value", { get() { return this._value; }, set(newValue) { this._value = newValue * 2; }, }); obj.value = 5; console.log(obj.value); // Output: 10
Ứng dụng:
- Kiểm soát quyền truy cập hoặc tính toán giá trị động.

Câu hỏi 109: `Promise.any` là gì và cách sử dụng?

Phân tích chi tiết:

Khái niệm:
- Promise.any trả về kết quả của promise đầu tiên được giải quyết (fulfilled).
- Nếu tất cả promise đều bị từ chối, trả về lỗi AggregateError.
Ví dụ: const p1 = Promise.reject("Error"); const p2 = Promise.resolve("Success"); const p3 = Promise.resolve("Another success"); Promise.any([p1, p2, p3]).then((result) => console.log(result)); // Output: Success

Câu hỏi 110: Khác biệt giữa `new Function` và khai báo hàm truyền thống?

Phân tích chi tiết:

new Function:
- Tạo hàm từ chuỗi.
- Chạy trong phạm vi toàn cục.
const add = new Function("a", "b", "return a + b"); console.log(add(2, 3)); // Output: 5
Khai báo hàm truyền thống:
- Chạy trong phạm vi hiện tại.
function add(a, b) { return a + b; }

So sánh:

new Function: Không an toàn và khó kiểm tra lỗi.
Khai báo hàm truyền thống: Ưu tiên sử dụng.

Câu hỏi 111: Sự khác biệt giữa `Array.prototype.reduce` và `Array.prototype.reduceRight`?

Phân tích chi tiết:

reduce:
- Duyệt mảng từ trái sang phải và tích lũy giá trị.
const arr = [1, 2, 3, 4]; const sum = arr.reduce((acc, curr) => acc + curr, 0); console.log(sum); // Output: 10
reduceRight:
- Duyệt mảng từ phải sang trái và tích lũy giá trị.
const arr = ["a", "b", "c"]; const result = arr.reduceRight((acc, curr) => acc + curr, ""); console.log(result); // Output: "cba"

So sánh:

reduce: Bắt đầu từ phần tử đầu tiên.
reduceRight: Bắt đầu từ phần tử cuối cùng.

Câu hỏi 112: Sự khác biệt giữa `Object.prototype.hasOwnProperty` và `in`?

Phân tích chi tiết:

hasOwnProperty:
- Kiểm tra xem object có sở hữu một thuộc tính hay không (không kiểm tra prototype).
const obj = Object.create({ inheritedKey: 42 }); obj.ownKey = 10; console.log(obj.hasOwnProperty("inheritedKey")); // Output: false console.log(obj.hasOwnProperty("ownKey")); // Output: true
in:
- Kiểm tra xem một thuộc tính có tồn tại trong object hoặc prototype.
console.log("inheritedKey" in obj); // Output: true console.log("ownKey" in obj); // Output: true

So sánh:

hasOwnProperty: Chỉ kiểm tra các thuộc tính riêng.
in: Kiểm tra cả thuộc tính kế thừa.

Câu hỏi 113: Làm thế nào để chuyển một `arguments` thành mảng?

Phân tích chi tiết:

Dùng Array.from: function example() { const args = Array.from(arguments); console.log(args); } example(1, 2, 3); // Output: [1, 2, 3]
Dùng spread operator (...): function example() { const args = [...arguments]; console.log(args); } example(1, 2, 3); // Output: [1, 2, 3]
Dùng Array.prototype.slice: function example() { const args = Array.prototype.slice.call(arguments); console.log(args); } example(1, 2, 3); // Output: [1, 2, 3]

Câu hỏi 114: Sự khác biệt giữa `==` và `Object.is`?

Phân tích chi tiết:

==:
- So sánh lỏng lẻo (ép kiểu).
console.log(5 == "5"); // Output: true console.log(null == undefined); // Output: true
Object.is:
- So sánh chính xác hơn, không thực hiện ép kiểu.
console.log(Object.is(5, "5")); // Output: false console.log(Object.is(NaN, NaN)); // Output: true

So sánh:

==: Có thể gây lỗi do ép kiểu.
Object.is: Phù hợp khi cần so sánh chính xác.

Câu hỏi 115: Làm thế nào để kiểm tra xem một hàm có phải là async function?

Phân tích chi tiết:

Kiểm tra constructor: async function asyncFunc() {} function regularFunc() {} console.log(asyncFunc.constructor.name === "AsyncFunction"); // Output: true console.log(regularFunc.constructor.name === "AsyncFunction"); // Output: false
Dùng Object.prototype.toString: console.log(Object.prototype.toString.call(asyncFunc)); // Output: [object AsyncFunction]

Câu hỏi 116: Sự khác biệt giữa `JSON.stringify` và `JSON.parse`?

Phân tích chi tiết:

JSON.stringify:
- Chuyển object/mảng thành chuỗi JSON.
const obj = { name: "Alice", age: 25 }; const jsonString = JSON.stringify(obj); console.log(jsonString); // Output: '{"name":"Alice","age":25}'
JSON.parse:
- Chuyển chuỗi JSON thành object/mảng.
const json = '{"name":"Alice","age":25}'; const obj = JSON.parse(json); console.log(obj); // Output: { name: "Alice", age: 25 }

Câu hỏi 117: Làm thế nào để làm tròn số thập phân?

Phân tích chi tiết:

Dùng toFixed:
- Làm tròn số và trả về chuỗi.
const num = 1.2345; console.log(num.toFixed(2)); // Output: "1.23"
Dùng Math.round với số mũ:
- Làm tròn và trả về số.
const num = 1.2345; const rounded = Math.round(num * 100) / 100; console.log(rounded); // Output: 1.23

Câu hỏi 118: Khác biệt giữa `delete` và `Reflect.deleteProperty`?

Phân tích chi tiết:

delete:
- Xóa một thuộc tính khỏi object.
const obj = { a: 1 }; delete obj.a; console.log(obj); // Output: {}
Reflect.deleteProperty:
- Hành vi tương tự delete, nhưng trả về boolean.
const obj = { a: 1 }; console.log(Reflect.deleteProperty(obj, "a")); // Output: true console.log(obj); // Output: {}

Ưu điểm của Reflect.deleteProperty:

Dễ kiểm tra kết quả thành công hoặc thất bại.

Câu hỏi 119: Làm thế nào để clone một object?

Phân tích chi tiết:

Dùng spread operator (...):
- Shallow copy (sao chép nông).
const obj = { a: 1, b: { c: 2 } }; const clone = { ...obj }; console.log(clone); // Output: { a: 1, b: { c: 2 } }
Dùng Object.assign:
- Tương tự spread operator.
const clone = Object.assign({}, obj);
Dùng JSON.parse(JSON.stringify()):
- Deep copy (sao chép sâu).
const deepClone = JSON.parse(JSON.stringify(obj));
Dùng thư viện lodash: const cloneDeep = require("lodash").cloneDeep; const deepClone = cloneDeep(obj);

Câu hỏi 120: Sự khác biệt giữa `call stack` và `event loop`?

Phân tích chi tiết:

Call Stack:
- Nơi lưu trữ các hàm đang thực thi.
function first() { second(); } function second() { console.log("Second"); } first();
Event Loop:
- Theo dõi Call Stack và Task Queue, đảm bảo các tác vụ bất đồng bộ được thực thi khi Call Stack trống.
console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); console.log("End"); // Output: Start, End, Timeout

So sánh:

Call Stack: Xử lý các tác vụ đồng bộ.
Event Loop: Điều phối các tác vụ bất đồng bộ.

Câu hỏi 121: Sự khác biệt giữa `static` và instance methods trong JavaScript?

Phân tích chi tiết:

Static methods:
- Được định nghĩa trên chính class, không trên instance.
- Gọi trực tiếp từ class, không cần khởi tạo object.
class MathUtil { static add(a, b) { return a + b; } } console.log(MathUtil.add(2, 3)); // Output: 5
Instance methods:
- Được định nghĩa trong class và sử dụng trên các object instance.
class Person { constructor(name) { this.name = name; } greet() { return `Hello, my name is ${this.name}`; } } const alice = new Person("Alice"); console.log(alice.greet()); // Output: Hello, my name is Alice

So sánh:

Static methods: Liên kết với class.
Instance methods: Liên kết với instance của class.

Câu hỏi 122: Làm thế nào để tạo một `Singleton` trong JavaScript?

Phân tích chi tiết:

Singleton là mẫu thiết kế đảm bảo một class chỉ có một instance duy nhất.

Dùng IIFE (Immediately Invoked Function Expression): const Singleton = (function () { let instance; function createInstance() { return { name: "Singleton Instance" }; } return { getInstance() { if (!instance) { instance = createInstance(); } return instance; }, }; })(); const instance1 = Singleton.getInstance(); const instance2 = Singleton.getInstance(); console.log(instance1 === instance2); // Output: true
Dùng class: class Singleton { constructor() { if (Singleton.instance) { return Singleton.instance; } Singleton.instance = this; } } const instance1 = new Singleton(); const instance2 = new Singleton(); console.log(instance1 === instance2); // Output: true

Câu hỏi 123: Làm thế nào để đảo ngược một chuỗi trong JavaScript?

Phân tích chi tiết:

Dùng split, reverse, và join: const reverseString = (str) => str.split("").reverse().join(""); console.log(reverseString("hello")); // Output: "olleh"
Dùng vòng lặp: const reverseString = (str) => { let reversed = ""; for (let char of str) { reversed = char + reversed; } return reversed; }; console.log(reverseString("hello")); // Output: "olleh"

Câu hỏi 124: Làm thế nào để tạo một debounce function?

Phân tích chi tiết:

Khái niệm:
- Debounce là kỹ thuật trì hoãn việc thực thi hàm cho đến khi không còn sự kiện nào xảy ra trong một khoảng thời gian nhất định.
Ví dụ debounce function: function debounce(func, delay) { let timeout; return function (...args) { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), delay); }; } const log = debounce(() => console.log("Debounced!"), 1000); window.addEventListener("resize", log);

Câu hỏi 125: Làm thế nào để tạo một throttle function?

Phân tích chi tiết:

Khái niệm:
- Throttle là kỹ thuật đảm bảo một hàm chỉ được gọi tối đa một lần trong một khoảng thời gian nhất định.
Ví dụ throttle function: function throttle(func, limit) { let lastFunc; let lastRan; return function (...args) { const now = Date.now(); if (!lastRan || now - lastRan >= limit) { func.apply(this, args); lastRan = now; } else { clearTimeout(lastFunc); lastFunc = setTimeout(() => { if (now - lastRan >= limit) { func.apply(this, args); lastRan = now; } }, limit - (now - lastRan)); } }; } const log = throttle(() => console.log("Throttled!"), 1000); window.addEventListener("scroll", log);

Câu hỏi 126: Sự khác biệt giữa `async/await` và `.then/.catch`?

Phân tích chi tiết:

.then/.catch:
- Xử lý bất đồng bộ dựa trên callback.
fetch("https://jsonplaceholder.typicode.com/posts") .then((response) => response.json()) .then((data) => console.log(data)) .catch((error) => console.error(error));
async/await:
- Cú pháp rõ ràng, dễ đọc hơn.
async function fetchData() { try { const response = await fetch("https://jsonplaceholder.typicode.com/posts"); const data = await response.json(); console.log(data); } catch (error) { console.error(error); } } fetchData();

So sánh:

async/await: Dễ đọc hơn, giống mã đồng bộ.
.then/.catch: Cú pháp cũ, dễ dẫn đến callback hell.

Câu hỏi 127: Sự khác biệt giữa `WeakMap` và `Map`?

Phân tích chi tiết:

WeakMap:
- Chỉ chấp nhận object làm key.
- Không ngăn thu gom rác (garbage collection).
let obj = {}; const wm = new WeakMap(); wm.set(obj, "value"); obj = null; // Object bị thu gom rác
Map:
- Chấp nhận mọi kiểu dữ liệu làm key.
- Key tồn tại cho đến khi bị xóa rõ ràng.
const map = new Map(); map.set("key", "value"); console.log(map.get("key")); // Output: "value"

Câu hỏi 128: Làm thế nào để kiểm tra xem một object là iterable?

Phân tích chi tiết:

Kiểm tra Symbol.iterator: const isIterable = (obj) => obj != null && typeof obj[Symbol.iterator] === "function"; console.log(isIterable([])); // Output: true console.log(isIterable({})); // Output: false
Ví dụ:
- Chuỗi, mảng, Set, Map đều là iterable.
console.log(isIterable("hello")); // Output: true console.log(isIterable(new Set())); // Output: true console.log(isIterable({ key: "value" })); // Output: false

Câu hỏi 129: Sự khác biệt giữa `toString` và `valueOf`?

Phân tích chi tiết:

toString:
- Trả về chuỗi đại diện cho object.
const obj = { toString: () => "Custom String" }; console.log(obj.toString()); // Output: "Custom String"
valueOf:
- Trả về giá trị nguyên thủy của object.
const obj = { valueOf: () => 42 }; console.log(obj + 10); // Output: 52

So sánh:

toString: Ưu tiên khi chuyển sang chuỗi.
valueOf: Ưu tiên khi thực hiện các phép toán.

Câu hỏi 130: Làm thế nào để phát hiện vòng lặp vô hạn trong `Promise`?

Phân tích chi tiết:

Ví dụ vòng lặp vô hạn: const loop = () => Promise.resolve().then(loop); loop();
Phát hiện:
- Dùng trình duyệt hoặc Node.js để phát hiện stack overflow.
- Sử dụng cơ chế giới hạn số lần lặp:
let counter = 0; const safeLoop = () => { if (counter++ > 1000) throw new Error("Infinite loop detected"); return Promise.resolve().then(safeLoop); }; safeLoop();

Câu hỏi 131: Sự khác biệt giữa `try...catch` và `finally` trong JavaScript?

Phân tích chi tiết:

try...catch:
- Bắt và xử lý lỗi trong một đoạn mã.
try { const result = JSON.parse("invalid json"); } catch (error) { console.error("Error caught:", error.message); // Output: Error caught: Unexpected token i }
finally:
- Luôn được thực thi, bất kể lỗi có xảy ra hay không.
try { console.log("Executing try block"); } finally { console.log("Finally block always runs"); }
Kết hợp try...catch...finally: try { throw new Error("An error occurred"); } catch (error) { console.error("Caught:", error.message); } finally { console.log("Cleanup actions here"); }

Ứng dụng:

catch: Xử lý lỗi.
finally: Dọn dẹp tài nguyên hoặc thực hiện các tác vụ luôn cần chạy.

Câu hỏi 132: Sự khác biệt giữa `for...of` và `for...in`?

Phân tích chi tiết:

for...of:
- Duyệt qua các giá trị của iterable objects (mảng, chuỗi, Set, Map).
const arr = [10, 20, 30]; for (const value of arr) { console.log(value); // Output: 10, 20, 30 }
for...in:
- Duyệt qua các key của object, bao gồm cả các thuộc tính kế thừa.
const obj = { a: 1, b: 2 }; for (const key in obj) { console.log(key, obj[key]); // Output: a 1, b 2 }

So sánh:

for...of: Hoạt động với iterable objects.
for...in: Hoạt động với các key của object.

Câu hỏi 133: Sự khác biệt giữa `get` và `set` trong object?

Phân tích chi tiết:

get:
- Được sử dụng để định nghĩa phương thức lấy giá trị thuộc tính.
const obj = { _value: 10, get value() { return this._value; }, }; console.log(obj.value); // Output: 10
set:
- Được sử dụng để định nghĩa phương thức gán giá trị thuộc tính.
const obj = { _value: 10, set value(val) { this._value = val * 2; }, }; obj.value = 5; console.log(obj._value); // Output: 10

Ứng dụng:

Kiểm soát hoặc xử lý logic trước khi gán/lấy giá trị thuộc tính.

Câu hỏi 134: Làm thế nào để kiểm tra xem một object là empty (rỗng)?

Phân tích chi tiết:

Dùng Object.keys: const isEmpty = (obj) => Object.keys(obj).length === 0; console.log(isEmpty({})); // Output: true console.log(isEmpty({ a: 1 })); // Output: false
Dùng vòng lặp for...in: const isEmpty = (obj) => { for (const key in obj) { return false; } return true; };
Dùng JSON: const isEmpty = (obj) => JSON.stringify(obj) === "{}";

Câu hỏi 135: Làm thế nào để chuyển đổi một `NodeList` thành mảng?

Phân tích chi tiết:

Dùng Array.from: const nodeList = document.querySelectorAll("div"); const array = Array.from(nodeList); console.log(array);
Dùng spread operator (...): const array = [...document.querySelectorAll("div")]; console.log(array);
Dùng Array.prototype.slice: const array = Array.prototype.slice.call(document.querySelectorAll("div")); console.log(array);

Câu hỏi 136: Sự khác biệt giữa `Object.create` và `new` trong JavaScript?

Phân tích chi tiết:

Object.create:
- Tạo một object mới với prototype được chỉ định.
const proto = { greet() { return "Hello"; } }; const obj = Object.create(proto); console.log(obj.greet()); // Output: Hello
new:
- Tạo một instance mới dựa trên constructor function.
function Person(name) { this.name = name; } const alice = new Person("Alice"); console.log(alice.name); // Output: Alice

So sánh:

Object.create: Chỉ định prototype trực tiếp.
new: Gọi constructor để tạo object.

Câu hỏi 137: Sự khác biệt giữa `apply`, `call`, và `bind`?

Phân tích chi tiết:

apply:
- Gọi hàm với this và tham số dưới dạng mảng.
function greet(greeting, name) { console.log(`${greeting}, ${name}`); } greet.apply(null, ["Hello", "Alice"]); // Output: Hello, Alice
call:
- Gọi hàm với this và tham số truyền trực tiếp.
greet.call(null, "Hi", "Bob"); // Output: Hi, Bob
bind:
- Tạo một hàm mới với this cố định và không thực thi ngay.
const greetAlice = greet.bind(null, "Hey", "Alice"); greetAlice(); // Output: Hey, Alice

Câu hỏi 138: Sự khác biệt giữa `WeakSet` và `Set`?

Phân tích chi tiết:

Set:
- Lưu trữ mọi giá trị duy nhất, bao gồm cả primitive và object.
const set = new Set(); set.add(1); set.add({ key: "value" }); console.log(set.size); // Output: 2
WeakSet:
- Chỉ lưu trữ object và không ngăn chặn thu gom rác (garbage collection).
let obj = {}; const ws = new WeakSet(); ws.add(obj); obj = null; // Object bị thu gom rác

So sánh:

Set: Lưu mọi giá trị, hỗ trợ iteration.
WeakSet: Chỉ lưu object, không hỗ trợ iteration.

Câu hỏi 139: Làm thế nào để kiểm tra xem một object có phải là prototype của object khác?

Phân tích chi tiết:

Dùng isPrototypeOf: const proto = {}; const obj = Object.create(proto); console.log(proto.isPrototypeOf(obj)); // Output: true
Dùng Object.getPrototypeOf: console.log(Object.getPrototypeOf(obj) === proto); // Output: true

Câu hỏi 140: Làm thế nào để kiểm tra xem một giá trị là iterable?

Phân tích chi tiết:

Kiểm tra Symbol.iterator: const isIterable = (value) => value != null && typeof value[Symbol.iterator] === "function"; console.log(isIterable([])); // Output: true console.log(isIterable({})); // Output: false console.log(isIterable("hello")); // Output: true

Câu hỏi 141: Sự khác biệt giữa `Function Declaration` và `Function Expression`?

Phân tích chi tiết:

Function Declaration:
- Được hoisted, có thể gọi trước khi khai báo.
greet(); function greet() { console.log("Hello!"); }
Function Expression:
- Không được hoisted, chỉ có thể gọi sau khi khai báo.
const greet = function () { console.log("Hello!"); }; greet(); // Output: Hello!
So sánh:
- Declaration: Có thể gọi trước khi khai báo.
- Expression: Cần khai báo trước khi gọi.

Câu hỏi 142: Sự khác biệt giữa `Map` và `Object` trong JavaScript?

Phân tích chi tiết:

Map:
- Lưu trữ key-value, key có thể là bất kỳ giá trị nào.
- Duy trì thứ tự các mục.
const map = new Map(); map.set("key", "value"); map.set(1, "number"); console.log(map.get("key")); // Output: value console.log(map.get(1)); // Output: number
Object:
- Lưu trữ key-value, key chỉ có thể là chuỗi hoặc symbol.
const obj = {}; obj.key = "value"; console.log(obj.key); // Output: value

So sánh:

Map: Hiệu quả hơn khi làm việc với số lượng lớn các mục.
Object: Phù hợp khi làm việc với cấu trúc dữ liệu đơn giản.

Câu hỏi 143: Khác biệt giữa `parseInt` và `Number` trong JavaScript?

Phân tích chi tiết:

parseInt:
- Phân tích một chuỗi và trả về số nguyên.
- Bỏ qua các ký tự không phải số sau số đầu tiên.
console.log(parseInt("42abc")); // Output: 42 console.log(parseInt("abc42")); // Output: NaN
Number:
- Chuyển đổi toàn bộ chuỗi thành số.
- Trả về NaN nếu chuỗi không hợp lệ.
console.log(Number("42")); // Output: 42 console.log(Number("42abc")); // Output: NaN

Câu hỏi 144: Làm thế nào để kiểm tra xem một object là một plain object?

Phân tích chi tiết:

Dùng Object.prototype.toString: const isPlainObject = (obj) => Object.prototype.toString.call(obj) === "[object Object]"; console.log(isPlainObject({})); // Output: true console.log(isPlainObject([])); // Output: false
Dùng Object.getPrototypeOf: const isPlainObject = (obj) => Object.getPrototypeOf(obj) === Object.prototype; console.log(isPlainObject({})); // Output: true console.log(isPlainObject(Object.create(null))); // Output: false

Câu hỏi 145: Sự khác biệt giữa `null` và `undefined`?

Phân tích chi tiết:

null:
- Đại diện cho “không có giá trị”.
- Lập trình viên gán giá trị null cho biến.
const a = null; console.log(a); // Output: null
undefined:
- Đại diện cho biến đã được khai báo nhưng chưa gán giá trị.
let b; console.log(b); // Output: undefined

So sánh:

null: Giá trị được gán.
undefined: Giá trị chưa được gán.

Câu hỏi 146: Làm thế nào để kiểm tra kiểu dữ liệu của một biến?

Phân tích chi tiết:

Dùng typeof:
- Kiểm tra kiểu dữ liệu cơ bản.
console.log(typeof 42); // Output: "number" console.log(typeof "Hello"); // Output: "string" console.log(typeof null); // Output: "object" (lỗi trong JavaScript)
Dùng Array.isArray:
- Kiểm tra kiểu mảng.
console.log(Array.isArray([1, 2, 3])); // Output: true
Dùng Object.prototype.toString:
- Phân biệt chính xác kiểu dữ liệu.
console.log(Object.prototype.toString.call(null)); // Output: "[object Null]" console.log(Object.prototype.toString.call([])); // Output: "[object Array]"

Câu hỏi 147: Sự khác biệt giữa `strict mode` và non-strict mode?

Phân tích chi tiết:

Strict Mode:
- Giúp ngăn ngừa các lỗi phổ biến.
- Kích hoạt bằng "use strict".
"use strict"; x = 10; // Error: x is not defined
Non-strict mode:
- JavaScript tự động xử lý một số lỗi, không cảnh báo.
x = 10; // Không lỗi, x trở thành biến toàn cục

Câu hỏi 148: Sự khác biệt giữa `==` và `Object.is` trong JavaScript?

Phân tích chi tiết:

==:
- So sánh lỏng lẻo, thực hiện ép kiểu.
console.log(0 == false); // Output: true console.log(null == undefined); // Output: true
Object.is:
- So sánh chính xác hơn, không thực hiện ép kiểu.
console.log(Object.is(0, false)); // Output: false console.log(Object.is(NaN, NaN)); // Output: true

So sánh:

==: Dễ gây lỗi do ép kiểu.
Object.is: Phù hợp khi cần so sánh chính xác.

Câu hỏi 149: Sự khác biệt giữa `document.readyState` và `DOMContentLoaded`?

Phân tích chi tiết:

document.readyState:
- Trả về trạng thái hiện tại của tài liệu: "loading", "interactive", hoặc "complete".
console.log(document.readyState); // Output: "loading", "interactive", hoặc "complete"
DOMContentLoaded:
- Sự kiện được kích hoạt khi HTML đã được tải và phân tích xong.
document.addEventListener("DOMContentLoaded", () => { console.log("DOM fully loaded and parsed"); });

Câu hỏi 150: Sự khác biệt giữa `innerHTML`, `textContent`, và `innerText`?

Phân tích chi tiết:

innerHTML:
- Trả về hoặc thiết lập HTML của phần tử.
const div = document.createElement("div"); div.innerHTML = "<b>Hello</b>"; console.log(div.innerHTML); // Output: "<b>Hello</b>"
textContent:
- Trả về hoặc thiết lập văn bản của phần tử (không bao gồm HTML).
div.textContent = "<b>Hello</b>"; console.log(div.textContent); // Output: "<b>Hello</b>"
innerText:
- Trả về văn bản hiển thị của phần tử (ảnh hưởng bởi CSS).
div.innerText = "<b>Hello</b>"; console.log(div.innerText); // Output: "<b>Hello</b>"

OOP trong javascript – Tính Encapsulation trong Javascript

Lập Trình

Lập Trình Mobile

React Native

Tài Liệu - Khóa Học Free

6 min
1 năm ago

Cái gì ??? Encapsulation là quá trình gộp dữ liệu và chức năng vào một đơn vị duy nhất (tức là viên nang), nó cũng có thể hạn chế quyền truy cập vào một số dữ liệu/phương thức. Nó là một trong bốn […]

Tagged #javascript

Encapsulation là quá trình gộp dữ liệu và chức năng vào một đơn vị duy nhất (tức là viên nang), nó cũng có thể hạn chế quyền truy cập vào một số dữ liệu/phương thức.

Nó là một trong bốn trụ cột của OOP, cùng với Kế thừa, Đa hình và Trừu tượng dữ liệu.

Tại sao ?

Việc đưa ra giả định mù quáng và tiếp tục sử dụng tính năng Encapsulation ở mọi nơi sẽ dễ dàng hơn, nhưng điều quan trọng là phải hiểu lý do tại sao để bạn có thể sử dụng nó đúng cách.

Hãy cố gắng hiểu (các) lý do tại sao bằng cách xem một nhiệm vụ ví dụ.

Nhiệm vụ:

Xây dựng một máy tính kết quả học sinh,

Tính điểm trung bình
Xác định xem học sinh có trượt hay đỗ không
Lỗi ném nếu bất kỳ dấu chủ đề nào không hợp lệ ( < 0 || > 100)

Giải pháp 1: cách không đóng gói

Ý tưởng chỉ nhằm giải quyết vấn đề nên tôi đã chọn Lập trình thủ tục cách đạt được nó mà tôi tin rằng có thể cho thấy sự tương phản tốt và làm cho vấn đề có vẻ rõ ràng hơn.

type Subject = "english" | "maths"; interface IStudent { name: string; marks: Record<Subject, number>; } // Receive Input const studentInput: IStudent = { name: "John", marks: { english: 100, maths: 100, }, }; // Step1: Validate the provided marks Object.keys(studentInput.marks).forEach((subjectName) => { const mark = studentInput.marks[subjectName as Subject]; if (mark > 100 || mark < 0) { throw new Error(`invlid mark found`); } }); // Step2: find the total marks const totalMarks = Object.keys(studentInput.marks).reduce( (accumulator: number, current: string) => studentInput.marks[current as Subject] + accumulator, 0 ); // Step3: find the average const average = totalMarks / Object.keys(studentInput.marks).length; // Step4: find the result const boolResult = average > 40; // Step 5: print result console.log(boolResult); console.log(average);

Vấn đề với giải pháp 1:

Điều này chắc chắn đạt được kết quả mong đợi nhưng có một số vấn đề liên quan đến nó. Để kể tên một vài,

Mọi triển khai ở đây đều có thể truy cập được trên toàn cầu và những người đóng góp trong tương lai không có quyền kiểm soát việc sử dụng nó.

Dữ liệu và hoạt động tách biệt nên khó theo dõi chức năng nào ảnh hưởng đến dữ liệu. Bạn sẽ phải xem xét cẩn thận từng đoạn mã để hiểu cái gì được gọi và một phần của quá trình thực thi.

Các chức năng trở nên khó quản lý hơn khi logic mở rộng. Các thay đổi có thể phá vỡ mã không liên quan do khớp nối chặt chẽ.

Làm thế nào để giải quyết vấn đề ?

Bằng cách kết hợp Đóng gói hoặc làm cho nó rõ ràng hơn bằng cách thực hiện hai bước dưới đây,

Kiểm soát quyền truy cập vào dữ liệu và chức năng
Kết hợp dữ liệu với hành vi

Giải pháp 2: Cách đóng gói

type SubjectNames = "english" | "maths"; interface IStudent { name: string; marks: Record<SubjectNames, number>; } class ResultCalculator { protected student: IStudent; constructor(student: IStudent) { this.student = student; } isPassed(): boolean { let resultStatus = true; Object.keys(this.student.marks).forEach((subject: string) => { if (this.student.marks[subject as SubjectNames] < 40) { resultStatus = false; } }); return resultStatus; } getAverage(): number { this.validateMarks(); return this.totalMarks() / this.subjectCount(); } private validateMarks() { Object.keys(this.student.marks).forEach((subject: string) => { if ( this.student.marks[subject as SubjectNames] < 0 || this.student.marks[subject as SubjectNames] > 100 ) { throw new Error(`invalid mark`); } }); } private totalMarks() { return Object.keys(this.student.marks).reduce( (acc, curr) => this.student.marks[curr as SubjectNames] + acc, 0 ); } private subjectCount() { return Object.keys(this.student.marks).length; } } // Receive Input const a: IStudent = { name: "jingleheimer schmidt", marks: { english: 100, maths: 100, }, }; // Create an encapsulated object const result = new ResultCalculator(a); // Perform operations & print results console.log(result.isPassed()); console.log(result.getAverage());

thông báo trong giải pháp trên,

phương pháp totalMarks, subjectCount, validateMarks & biến thành viên student không được hiển thị và chỉ có thể được sử dụng bởi đối tượng lớp.

2.dữ liệu student được đi kèm với mọi hành vi của nó.

Hãy nói không với console.log! javascript

Lập Trình

Lập Trình Mobile

React Native

3 min
2 năm ago
5

Chào các bạn, chắc mọi người cũng đã quá quen với console.log. Bạn có thường sử dụng nó console.log trong quá trình phát triển dự án của mình không? Và mặc dù chúng ta sẽ tiếp tục sử dụng console.log, vẫn có những giải […]

Tagged #javascript, #ReactNative

Chào các bạn, chắc mọi người cũng đã quá quen với console.log. Bạn có thường sử dụng nó console.log trong quá trình phát triển dự án của mình không?

Và mặc dù chúng ta sẽ tiếp tục sử dụng console.log, vẫn có những giải pháp thay thế khác giúp quá trình phát triển của bạn thú vị và hiệu quả hơn.

LƯU Ý: Nếu bạn đang xem nhật ký trong terminal, đặc biệt nếu bạn là nhà phát triển backend, thì bạn có thể thử JSON.stringify(your_data, null, 2)và sử dụng console.log()kết quả. Điều này sẽ đảm bảo rằng bạn không vào được {... value: [Object, Object]}nhật ký và nhật ký cũng sẽ được định dạng để dễ đọc hơn.

console.dir()

Để liệt kê theo thứ bậc các mảng và đối tượng.

console.dir(["apples", "oranges", "bananas"]);

console. table()

Đối với danh sách các hàng và cột của mảng (có thể không phù hợp với các đối tượng).

console.table(["apples", "oranges", "bananas"]);

console.table({"a": 1, "b": 2, "c": 3});

console. group()

console.log('This is the top outer level'); console.group('Task 1'); console.log('Task activity 1'); console.log('Task activity 2'); console.groupEnd(); console.group('Task 2'); console.log('Task activity 3'); console.log('Task activity 4'); console.groupEnd(); console.log('Back to the top outer level');

console.time() và console.timeEnd()

try { console.time("record-1"); await someAsyncTask(); } catch (error) { // handle error } finally { console.timeEnd("record-1"); }

console. delete()

Thao tác này sẽ xóa bảng điều khiển. Hãy thử nó 1 lần đi mọi người. đảm bảo rất tiện lợi và hay ho đó nhen!

Phá Kén

Thẻ: #javascript

JavaScript Frameworks – Hướng tới sự đổi mới trong năm 2025

150 câu hỏi phỏng vấn javascript kèm lời giải chi tiết từ A-Z

OOP trong javascript – Tính Encapsulation trong Javascript

Hãy nói không với console.log! javascript