Phá Kén

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

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

React Native VS Flutter – Nên Học Cái Nào?

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

11 min
1 năm ago
3

Giới thiệu Sự phát triển ứng dụng di động đang bùng nổ từ những thập kỷ trước và không có điểm dừng. Trước đây mình đã cố gắng học phát triển Ứng dụng di động nhiều lần nhưng không thành công. Những […]

Tagged #ReactNative

Giới thiệu

Sự phát triển ứng dụng di động đang bùng nổ từ những thập kỷ trước và không có điểm dừng. Trước đây mình đã cố gắng học phát triển Ứng dụng di động nhiều lần nhưng không thành công.

Những vấn đề mình gặp phải khi học nó:

Ngôn ngữ: Mình là nhà phát triển web nên tôi biết rõ về JavaScript. Nhưng đối với ứng dụng Android, bạn cần biết Java hoặc Kotlin. Tôi biết Java nhưng không nhiều lắm. Tương tự trên iOS, bạn cần học Swift.
Studio Android: Mình cảm thấy Android Studio phức tạp hơn. Khó hiểu.

Phát triển di động

Gần đây, một lần nữa mình quyết định học phát triển ứng dụng di động nhưng có một sự thay đổi. Tôi sẽ không sử dụng nền tảng phát triển gốc mà sử dụng nền tảng phát triển chéo cho cả Android và iOS.

Sau rất nhiều nghiên cứu và đọc các bài báo, có hai framework đa nền tảng chính để phát triển ứng dụng di động. Một là React Native và cái còn lại là rung chuyển. Hôm nay chúng ta sẽ mổ xẻ cả hai để biết cái nào phù hợp với bạn nhất.

Vì vậy hãy bắt đầu.

Phát triển ứng dụng Cross- PlatForm là gì?

Trước tiên hãy giải quyết câu hỏi phát triển ứng dụng di động Cross.

Thuật ngữ Phát triển ứng dụng Cross- PlatForm ngụ ý rằng nhà phát triển có thể chạy chương trình của họ trên nhiều nền tảng di động khác nhau trong trường hợp của chúng mình là Android và iOS, đồng thời với một cơ sở mã duy nhất.

Bạn không cần phải viết mã riêng cho một nền tảng riêng. Điều này giúp tiết kiệm thời gian và chi phí khi thuê hai nhóm nhà phát triển cho cùng một ứng dụng.

Vì vậy, bây giờ chuyển sang phần giới thiệu về hai framework của chúng ta.

React Native

React bản địa là một khung phát triển ứng dụng di động đa nền tảng Nguồn mở được Facebook phát triển vào năm 2015. Nó có thể được sử dụng để phát triển ứng dụng cho Android, Android TV, iOS, macOS, TV, Web, Windows và UWP bằng cách cho phép các nhà phát triển sử dụng Khung của React cùng với khả năng của nền tảng gốc.
–Wikipedia

React Native sử dụng JavaScript, giúp các nhà phát triển web phát triển ứng dụng di động một cách đơn giản. Nếu bạn đã quen thuộc với khung React. Khái niệm về React-Native gần giống với React.

Tất cả những yếu tố này đã khiến React Native trở nên phổ biến hơn trong cộng đồng.

Ứng dụng được phát triển bằng React Native

Facebook
Instagram
UberEATS
Pinterest
Skype
Và nhiều hơn nữa

Flutter

Flutter là bộ công cụ phát triển phần mềm UI nguồn mở do Google tạo ra. Nó được sử dụng để phát triển các ứng dụng đa nền tảng cho Android, iOS, Linux, Mac, Windows, Google Fuchsia và web từ một cơ sở mã duy nhất. Được mô tả lần đầu tiên vào năm 2015, Flutter được phát hành vào tháng 5 2017.
-Wikipedia

Đối thủ cạnh tranh lớn nhất của React Native là Flutter. Gần đây, rung động đang được rất nhiều người yêu thích. Google Trends hiển thị nhiều tìm kiếm về Flutter hơn React Native trong thời gian gần đây.

Flutter sử dụng ngôn ngữ lập trình Dart. Nó được phát triển bởi Google.

Ứng dụng được phát triển bằng Flutter

Cửa hàng Google Play
eBay
Tencent
Mơ11
ByteDance
Quảng cáo Google
Và nhiều hơn nữa

Sự khác biệt giữa

Hãy cùng tìm hiểu xem framework nào ưu việt hơn trong concept sau đây

Ý tưởng	Sự miêu tả	Người chiến thắng
Hiệu suất	JS nhanh hơn Dart. Nhưng Flutter trên Android và iOS nhanh hơn React Native rất nhiều.	Flutter
Thiết kế	React Native có giao diện gốc cho cả Android và iOS theo mặc định. Flutter sử dụng widget tùy chỉnh.	React Native
Cộng đồng	React Native có cộng đồng lớn hơn Flutter nhưng cộng đồng Flutter đang phát triển với tốc độ nhanh hơn.	React Native
Hỗ trợ tự động hóa xây dựng và phát hành	Flutter có hỗ trợ phát triển thông qua CLI và triển khai với Fastlane, điều còn thiếu trong React Native.	Flutter
Thư viện của bên thứ ba	React Native hỗ trợ nhiều thư viện, nó cũng hỗ trợ hầu hết các thư viện dựa trên React. Flutter có ít thư viện của bên thứ ba.	React Native
Kiểm tra	Trong Flutter, bạn có thể thực hiện kiểm thử đơn vị, kiểm thử tích hợp và kiểm thử widget. Trong React Native, bạn phụ thuộc vào các công cụ của bên thứ ba.	Flutter
Số lượng ứng dụng	hơn 30 nghìn ứng dụng được xây dựng bằng React Native và chỉ hơn 12 nghìn ứng dụng sử dụng Flutter. Ngoài ra, các ứng dụng hàng đầu sử dụng React Native hơn là Flutter	React Native

Lộ trình học tập

Flutter

Flutter sử dụng Dart. Dart được phát triển bởi google, là Ngôn ngữ lập trình hướng đối tượng. Đối với người mới bắt đầu, việc học Dart và sau đó là Flutter sẽ dễ dàng hơn.

Vì vậy, đối với người mới bắt đầu muốn tìm hiểu framework phát triển ứng dụng di động chéo, Flutter sẽ là lựa chọn lý tưởng.

React Native

Lộ trình học tập của React Native bao gồm học JavaScript làm ngôn ngữ lập trình chính, có kiến thức về React và sau đó bạn có thể học React Native.

Để học React Native bạn nên biết JavaScript và React. Điều này làm cho lộ trình học tập dài hơn một chút so với sự rung động dành cho người mới bắt đầu.

Phần kết luận

Cả hai khung đều có khả năng xây dựng các ứng dụng đẹp và hữu dụng cho cả Android và iOS. Bạn có thể chọn những gì phù hợp nhất với yêu cầu của bạn.

Mình chọn React Native làm lộ trình học tập của nó. Theo mình biết React và JavaScript thì React Native dễ học hơn.

Vì vậy mình sẽ tải lên nhiều nội dung liên quan đến React Native trong những ngày tới. Đảm bảo theo dõi mình về nội dung đó.

Cảm ơn đã đọc bài đăng trên blog.

Từ Web đến Native với React

50 min
1 năm ago
3
9

Mọi thứ mà nhà phát triển web cần biết về việc xây dựng ứng dụng React Native đầu tiên của mình. React Native là lựa chọn tuyệt vời cho các nhà phát triển web có kinh nghiệm về React và đang muốn […]

Tagged #ReactNative

Hiểu về optimistic UI và React useOptimistic Hook

17 min
2 năm ago
2

Tagged #React, #ReactNative

Milliseconds có thể tạo nên hoặc phá hỏng trải nghiệm người dùng, vì sự chậm trễ có thể khiến họ rời khỏi trang web của chúng ta. Một chiến lược đang được chú ý nhờ khả năng mang lại các tương tác nhanh chóng và nhạy bén là mẫu giao diện lạc quan (Optimistic UI pattern). Mẫu này cho phép chúng ta cập nhật giao diện người dùng ngay lập tức sau khi người dùng hoàn thành một hành động, dựa trên giả định rằng các hoạt động nền sẽ thành công. Phương pháp này làm tăng cảm giác về tốc độ của ứng dụng và cải thiện đáng kể trải nghiệm người dùng bằng cách cung cấp phản hồi ngay tức thì.

Hiểu về Optimistic UI và Hook useOptimistic của React
Trong bài viết này, chúng ta sẽ khám phá Hook mới của React là useOptimistic và cách nó có thể giúp chúng ta triển khai các cập nhật giao diện lạc quan để làm cho ứng dụng của chúng ta cảm giác nhanh hơn và nhạy bén hơn.

React useOptimistic Hook là gì?
Hook useOptimistic là một tính năng mạnh mẽ hiện có sẵn trong phiên bản Canary của React. Nó cho phép chúng ta hiển thị một trạng thái khác trong khi một hành động bất đồng bộ, chẳng hạn như yêu cầu mạng, đang diễn ra. Điều này đặc biệt quan trọng trong những trường hợp người dùng mong đợi phản hồi tức thì cho các hành động của họ, chẳng hạn như khi gửi biểu mẫu hoặc bình luận trên mạng xã hội.

Bằng cách triển khai Hook useOptimistic, các ứng dụng có thể cập nhật giao diện người dùng ngay lập tức, mang lại trải nghiệm người dùng liền mạch và hấp dẫn. Hãy cùng tìm hiểu với một ví dụ:

const [optimisticComments, postComment] = useOptimistic(commentsFromServer, addComment);

optimisticComments: Đây là trạng thái Optimistic, được khởi tạo với giá trị từ commentsFromServer. Nó hiển thị danh sách các bình luận hiện có trên một bài đăng, phản ánh ngay lập tức mọi hành động của người dùng.
postComment: Đây là hàm dispatch mà chúng ta gọi để áp dụng mutation được định nghĩa trong addComment. Hàm này cập nhật optimisticComments một cách Optimistic khi người dùng thêm một bình luận.
commentsFromServer: Đây là nguồn dữ liệu chính, đại diện cho danh sách các bình luận đã được xác nhận lấy từ server. Nếu giá trị này thay đổi (ví dụ, sau khi lấy dữ liệu mới từ server), optimisticComments cũng sẽ cập nhật để đảm bảo tính nhất quán.
addComment: Đây là logic mutation sẽ được áp dụng cho optimisticComments khi postComment được gọi. Nó xác định cách thêm một bình luận mới vào danh sách một cách Optimistic.

Xét về hiệu quả của nhà phát triển, React đã giới thiệu Hook useOptimistic được tùy chỉnh cho mẫu giao diện này. Việc cập nhật giao diện lạc quan đảm bảo rằng người dùng không phải chờ đợi phản hồi từ server, điều này là rất quan trọng để duy trì trải nghiệm người dùng mượt mà. Khi người dùng thực hiện một hành động, useOptimistic phản ánh ngay lập tức các thay đổi trạng thái trước khi server phản hồi.

Hook này quản lý trạng Optimistic bằng cách ban đầu giả định rằng API sẽ phản hồi thành công. Nếu API phản hồi thành công, trạng thái giả định sẽ được duy trì. Trong trường hợp API thất bại, trạng thái sẽ trở lại trạng thái ban đầu. Sự cân bằng này là rất quan trọng để duy trì tính toàn vẹn của dữ liệu trong khi cung cấp trải nghiệm người dùng nhanh chóng và nhạy bén.

Bằng cách sử dụng Hook useOptimistic, các nhà phát triển có thể tạo ra những ứng dụng cảm giác tức thì và hấp dẫn hơn, giữ cho người dùng luôn tham gia và hài lòng với hiệu suất.

Một ví dụ đơn giản: Bình luận trên một bài đăng
Hãy tưởng tượng một nền tảng mạng xã hội nơi người dùng có thể xem các bài đăng của người khác. Khi người dùng nhấn nút Gửi, ứng dụng sẽ đợi phản hồi từ server trước khi cập nhật giao diện người dùng. Sự chậm trễ này có thể làm cho ứng dụng cảm giác chậm chạp.

Giả sử chúng ta đã có một server được thiết lập với các tệp cần thiết, hãy tiến hành triển khai chức năng Optimistic:

import { useState } from 'react';
import { useOptimistic } from 'react';
function CommentButton({ postId }) {
const [comments, setComments] = useOptimistic([]);
const [newComment, setNewComment] = useState('');
const [error, setError] = useState('');
const handleCommentSubmit = async () => {
setError(''); // Xóa mọi lỗi trước đó
const optimisticNewComment = { id: Date.now(), text: newComment, status: 'sending' };
setComments([...comments, optimisticNewComment]);  // Cập nhật danh sách bình luận một cách Optimistic
try {
const response = await api.postComment(postId, newComment);
const updatedComments = comments.map(comment =>
comment.id === optimisticNewComment.id ? { ...comment, status: 'sent' } : comment
);
setComments(updatedComments); // Cập nhật trạng thái bình luận thành 'sent'
} catch (error) {
const filteredComments = comments.filter(comment => comment.id !== optimisticNewComment.id);
setComments(filteredComments);
setError('Không thể đăng bình luận. Vui lòng thử lại.');
}
};
return (
<div>
<input 
type="text"
value={newComment}
onChange={(e) => setNewComment(e.target.value)}
placeholder="Viết bình luận..."
/>
<button onClick={handleCommentSubmit} disabled={!newComment.trim()}>
Đăng bình luận
</button>
{comments.map(comment => (
<div key={comment.id}>
{comment.text} {comment.status === 'sending' && <span>(Đang gửi...)</span>}
</div>
))}
{error && <p style={{ color: 'red' }}>{error}</p>}
</div>
);
}
export default CommentButton;

Trong đoạn mã này, chúng ta đang khởi tạo Optimistic. Biến trạng thái optimisticComments chứa danh sách các bình luận, bao gồm mọi cập nhật Optimistic (các bình luận xuất hiện ngay lập tức khi người dùng thêm chúng, trước khi được xác nhận từ server). Nó bắt đầu dưới dạng một mảng trống [].

postComment là một hàm mà chúng ta sử dụng để cập nhật optimisticComments một cách Optimistic. Nó nhận một bình luận mới và thêm nó vào danh sách các bình luận hiện có. Hàm mutation (comments, newComment) => [...comments, newComment] xác định cách cập nhật danh sách bình luận khi thêm một bình luận mới. Nó tạo ra một mảng mới chứa tất cả các bình luận hiện có và bình luận mới.

Để gửi một bình luận một cách Optimistic, trước tiên chúng ta sẽ tạo một bình luận Optimistic. optimisticNewComment là một đối tượng bình luận mới với một ID tạm thời, văn bản từ trường nhập liệu, và trạng thái là sending. Đối tượng này đại diện cho bình luận mà người dùng vừa thêm.

Sau đó, để đạt được cập nhật Optimistic, chúng ta sẽ sử dụng postComment(optimisticNewComment), hành động này sẽ cập nhật danh sách optimisticComments để bao gồm bình luận mới ngay lập tức. Điều này mang lại cho người dùng phản hồi tức thì rằng bình luận của họ đã được thêm.

Sau đó, khối try sẽ cố gắng gửi bình luận mới đến server bằng cách sử dụng api.postComment(postId, newComment). Nếu server xác nhận bình luận đã được thêm, trạng thái của optimisticNewComment sẽ được cập nhật thành sent. Danh sách bình luận sẽ được cập nhật để phản ánh trạng thái mới này. Nếu cuộc gọi đến server thất bại, khối catch sẽ xóa bình luận Optimistic khỏi optimisticComments và đặt một thông báo lỗi để thông báo cho người dùng rằng bình luận không thể được đăng.

Khi chúng ta chạy ứng dụng và nhấn nút Đăng bình luận, nó sẽ trông như thế này:

Lưu ý cách nó hiển thị “Đang gửi” cùng với bình luận — đó chính là điều mà Hook useOptimistic làm. Nó đăng bình luận trong khi vẫn đang chờ yêu cầu mạng hoàn tất.

Optimistic UI vs. Các phương pháp truyền thống
Bằng cách triển khai mẫu giao diện Optimistic, các ứng dụng có thể giả lập phản hồi tức thì bằng cách cập nhật giao diện người dùng ngay khi người dùng tương tác, điều này đặc biệt quan trọng trong các môi trường tương tác liền mạch như mạng xã hội.

Các cập nhật giao diện truyền thống dựa vào thời gian phản hồi từ server, khiến người dùng phải chờ đợi lâu và làm cho ứng dụng cảm giác chậm chạp. Giao diện Optimistic biến đổi trải nghiệm này bằng cách cập nhật giao diện trước khi server phản hồi, hiển thị ngay kết quả mong đợi của hành động người dùng — như việc nhìn thấy một bình luận xuất hiện ngay khi nhấn.

ấn “Đăng bình luận”. Điều này làm cho ứng dụng cảm giác nhanh hơn nhiều.

Tóm lại, mẫu giao diện Optimistic giúp cải thiện trải nghiệm người dùng bằng cách giảm thiểu sự chậm trễ và mang lại cảm giác tức thì. Bằng cách sử dụng Hook useOptimistic của React, chúng ta có thể dễ dàng triển khai chiến lược này, mang lại trải nghiệm người dùng mượt mà hơn và tăng cường sự tương tác với người dùng.

Chúng ta đã đi qua các khái niệm và lợi ích của Optimistic UI và React Hook useOptimistic. Khi triển khai các kỹ thuật này, bạn có thể tạo ra các ứng dụng cảm giác nhanh hơn và nhạy bén hơn. Những ứng dụng này không chỉ cung cấp phản hồi tức thì cho người dùng mà còn giúp nâng cao trải nghiệm tổng thể của họ.

Hãy cân nhắc sử dụng useOptimistic trong dự án React tiếp theo của bạn để tận dụng mẫu giao diện Optimistic và mang lại trải nghiệm tốt nhất cho người dùng!

Làm thế nào để thêm màn hình Splash Screen và biểu tượng ứng dụng App Icon trong React Native?

13 min
2 năm ago
2

Tagged #ReactNative

Quá trình tạo ứng dụng yêu cầu chúng ta phải cân nhắc nhiều nhiệm vụ khác nhau. Chúng ta cần tạo ra một codebase và thêm các hình ảnh để ứng dụng có giao diện đặc trưng. Như đã nói, quá trình xây dựng ứng dụng cần các tệp tin hình ảnh png được lưu trữ trong thư mục gốc của ứng dụng, chúng ta không thể bỏ qua nội dung của icon ứng dụng và màn hình splash.

Với các dịch vụ phát triển ứng dụng React Native, chúng ta có thể áp dụng một kỹ thuật đơn giản để thêm hai tài nguyên này vào ứng dụng. Hãy cùng tìm hiểu cách thực hiện.

Trước khi đi vào phần chính của bài viết, hãy cùng thảo luận một số lý thuyết liên quan đến chủ đề này.

Màn hình splash là gì?
Màn hình splash là màn hình mở đầu của ứng dụng. Nó hiển thị trong một khoảng thời gian ngắn trước khi người dùng truy cập vào nội dung chính của ứng dụng. Màn hình splash hoàn toàn khác với biểu tượng ứng dụng. Khi tạo màn hình splash, chúng ta cần nhớ rằng nó sẽ hiển thị trên toàn bộ màn hình của ứng dụng.

Biểu tượng ứng dụng là gì?
Chúng ta có thể đã thấy một logo mỗi khi muốn mở một ứng dụng nào đó. Logo này chính là biểu tượng ứng dụng mà chúng ta sẽ tạo trong bài viết này. Với biểu tượng này, chúng ta có thể nhận diện ứng dụng mà mình muốn sử dụng.

Các điều kiện tiên quyết
Có hai điều kiện tiên quyết cần được xem xét. Điều đầu tiên là thiết lập môi trường React Native. Điều thứ hai là quy trình tạo một ứng dụng cơ bản bằng React Native. Chúng ta không thể tiến xa hơn với dự án hiện tại nếu chưa đáp ứng các điều kiện này.

Để sử dụng framework React Native trong quá trình phát triển ứng dụng, chúng ta cần một số phần mềm như Node.js, Android Studio, VS Code Editor, và các phần mềm khác. Nếu có bất kỳ nghi ngờ nào liên quan đến quá trình thiết lập, hãy tham khảo bài viết này.

Đối với bất kỳ thắc mắc nào về quy trình xây dựng ứng dụng, chúng ta có thể ghé thăm blog hướng dẫn để có cái nhìn toàn diện. Từ blog này, chúng ta cũng sẽ học cách điều hướng qua trình chỉnh sửa mã VS Code và thêm các thành phần vào codebase của mình.

Plugin React Native bên thứ ba: react-native-splash-screen
Ở đây, chúng ta sẽ xem xét các bước cài đặt plugin bên thứ ba cần thiết.

Bằng cách import splashScreen từ thư viện này, chúng ta có thể ẩn màn hình chào mừng sau một khoảng thời gian nhất định.

Bây giờ, để có được gói này, chúng ta cần chạy một lệnh trên Command Prompt. Lưu ý, chúng ta cần mở Command Prompt từ thư mục của ứng dụng. Lệnh này như sau:

npm i react-native-splash-screen –save

Các tiêu chí bổ sung cần đáp ứng
Trong phần này, chúng ta sẽ tìm hiểu một số bước bổ sung cần thực hiện trước khi tạo codebase. Đây là phần cụ thể cho việc cài đặt plugin.

Lưu ý rằng, có hai cách để cài đặt plugin này. Chúng ta có thể chọn cài đặt tự động hoặc cài đặt thủ công. Chúng ta nên chọn cài đặt thủ công.

Để thực hiện điều này, làm theo các bước như sau. Trước tiên, mở trình chỉnh sửa mã từ ứng dụng của chúng ta.

Mở android và sau đó gradle. Tại đây, chúng ta cần thêm dòng sau:

include ‘:react-native-splash-screen’
project(‘:react-native-splash-screen’).projectDir = new File(rootProject.projectDir, ‘../node_modules/react-native-splash-screen/android’)

Bây giờ, mở android, sau đó app, và sau đó gradle. Tại đây, chúng ta sẽ tìm thấy một phần về dependencies. Trong phần này, thêm:

implementation project(‘:react-native-splash-screen’)

Mở android, sau đó app, sau đó src, sau đó main, sau đó java\com\awesomeproject, và sau đó file java để thêm:

import org.devio.rn.splashscreen.SplashScreenReactPackage;

Mở android, sau đó app, sau đó src, sau đó main, sau đó java\com\awesomeproject, và cuối cùng là file MainActivity.java để thêm:

import android.os.Bundle; // đây
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // đây
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this);  // đây
super.onCreate(savedInstanceState);
}

Tham khảo hình 1 để có cái nhìn về cách các lệnh được thêm vào thư mục gốc của ứng dụng.

Tạo thư mục layout
Bây giờ, tạo một thư mục layout dưới ./main./res. Cũng tạo một file tên là launchscreen.xml trong thư mục layout. Có thể bỏ qua bước này nếu chúng ta đã có hai thư mục này trong thư mục gốc của dự án.

Mở android, sau đó app, sau đó src, sau đó main, sau đó res, sau đó layout, và cuối cùng là xml từ trình chỉnh sửa mã VS Code. Thêm:

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical” android:layout_width=”match_parent”
android:layout_height=”match_parent”>
<ImageView android:layout_width=”match_parent” android:layout_height=”match_parent” android:src=”@drawable/launch_screen” android:scaleType=”centerCrop” />
</RelativeLayout>

Thêm màn hình splash và icon ứng dụng
Chúng ta cần tải một hình ảnh định dạng png. Dù hình ảnh cho icon ứng dụng sẽ có kích thước cụ thể, hình ảnh cho màn hình splash sẽ không yêu cầu kích thước cụ thể. Sau khi có được hình ảnh, tạo một thư mục drawable trong thư mục res của ứng dụng. Dán hình ảnh vào thư mục drawable và đặt tên là launch_screen. Sau đó, chúng ta cần lưu toàn bộ quá trình này.

Bây giờ, chúng ta sẽ tiến hành các bước thêm icon hình ảnh vào ứng dụng.

Ở đây, cần cân nhắc kích thước của hình ảnh. Chọn một hình ảnh từ trình duyệt web. Tải hình ảnh này với năm kích thước khác nhau và lưu trữ chúng trong năm file khác nhau. Khi mở thư mục res, chúng ta sẽ thấy năm file riêng biệt với tên là mipmap-hdpi, mipmap-mdpi, mipmap-xxxhdpi, mipmap-xxhdpi, và mipmap-xhdpi. Đã có một số hình ảnh mặc định trong năm thư mục này. Tất cả những gì chúng ta cần làm là thay thế các hình ảnh này bằng hình ảnh đã tải về.

Hãy cùng xác định kích thước của các hình ảnh. Với mipmap-hdpi, kích thước là 7272, với mipmap-xxxhdpi, kích thước là 192192, với mipmap-xxhdpi, kích thước là 144144, với mipmap-xhdpi, kích thước là 9696 và cuối cùng, với mipmap-mdpi, kích thước là 48*48.

Vậy là chúng ta đã tùy chỉnh thành công icon hình ảnh và màn hình splash. Bây giờ, chúng ta cần cấu trúc thư mục app.js.

Cấu trúc thư mục App.js
Phần này sẽ là một đoạn mã nhỏ. Chúng ta chỉ cần import các components và wrap SplashScreen với useEffect.

Hãy cùng xem cách thực hiện.

import { StyleSheet, Text, View } from ‘react-native’
import SplashScreen from ‘react-native-splash-screen’;
import React,{useEffect} from ‘react’

Ngoài các components cốt lõi, chúng ta cần import component quan trọng SplashScreen từ thư viện bên thứ ba RN: react-native-splash-screen.

Bây giờ, chúng ta sẽ gọi SplashScreen để ẩn màn hình chào mừng. Xem cú pháp sau:

useEffect(()=>{
SplashScreen.hide();
},2000)

Theo cú pháp này, màn hình chào mừng sẽ hiển thị trong 2 giây.

const App = () => {
return (
<View>
<Text>App</Text>
</View>
)
}

Đây là codebase chung mà chúng ta sẽ thấy trong mọi thư mục App.js. Mục đích của cú pháp này là để hiển thị dòng chữ “App”.

Khi đã cấu trúc xong thư mục app.js, chúng ta sẽ tiến hành chạy ứng dụng trên trình giả lập.

Chạy ứng dụng trên trình giả lập
Mở terminal từ ứng dụng. Chạy npm install và sau đó npx react-native run-android. Quá trình bundle của ứng dụng có thể mất chút thời gian. Ngay khi quá trình bundle hoàn thành,

màn hình như trong hình 2 sẽ xuất hiện trên trình giả lập. Cũng tham khảo hình 3 cho icon ứng dụng.

Sự khác biệt giữa hook useMemo và useCallback là gì?

23 min
2 năm ago
3

React cung cấp nhiều hook giúp quản lý trạng thái ứng dụng và các tính năng React khác trong các thành phần chức năng dễ dàng hơn. Hook cung cấp các tính năng thành phần lớp cho các thành phần chức năng […]

Tagged #ReactNative

Hooks cũng giúp cuộc sống của bạn dễ dàng hơn bằng cách cung cấp một số tính năng tiện lợi. Trong số các hooks này, chúng ta có useMemovà useCallbackgiúp cải thiện hiệu suất trang web của bạn.

Trong hướng dẫn hôm nay, chúng ta sẽ thảo luận về cả hooks useMemovà useCallbackhooks. Bạn sẽ học được sự khác biệt giữa chúng và thời điểm sử dụng từng hooks.

`useMemo`Hook

Hook ghi nhớuseMemo giá trị trả về của phép tính tốn kém giữa các lần kết xuất. Ghi nhớ có nghĩa là lưu trữ giá trị dưới dạng giá trị được lưu trong bộ nhớ đệm để giá trị không cần phải được tính toán lại (trừ khi cần thiết).

useMemolà một hook được sử dụng để tối ưu hóa hiệu suất render của bạn. Thông thường, khi bạn khai báo một biến bên trong một thành phần, nó sẽ được tạo lại trên mỗi lần render. Nếu nó lưu trữ giá trị trả về của một hàm, thì hàm đó sẽ được gọi mỗi lần render component của bạn.

Thông thường, điều này không phải là vấn đề. Nhưng, nếu hàm này tốn kém thì sao? Nếu mất nhiều thời gian hơn để thực thi thì sao? Hãy xem ví dụ sau:

function calculate() { let result = 0; for (let i = 0; i < 1000000000; i++) { result += i; } return result; } function App1() { const [count, setCount] = useState(0); const value = calculate(); return ( <div className="App"> <button onClick={() => setCount(count + 1)}>Increment Count</button> <p>Count: {count}</p> </div> ); }

Khi bạn nhấp vào ‘count’, phải mất vài giây để cập nhật trạng thái số lượng. Điều này là do hàm calculate run mỗi lần một thành phần được render lại sau khi thay đổi trạng thái.

Bây giờ, hãy tưởng tượng nếu có nhiều biến trạng thái trong thành phần, mỗi biến có mục đích riêng. Mỗi lần cập nhật trạng thái sẽ gây ra việc kết xuất lại và thực hiện hàm tốn kém này.

Các biến trạng thái này có thể hoàn toàn không liên quan đến phép tính tốn kém được thực hiện, điều này sẽ gây ra sự chậm trễ không cần thiết. Điều này sẽ ảnh hưởng đến hiệu suất của trang web của bạn và có thể dẫn đến trải nghiệm người dùng tồi tệ.

useMemocó thể giúp bạn giải quyết vấn đề này. Trước tiên chúng ta hãy hiểu cú pháp của nó:

const value = useMemo(expensiveFunction, [...dependencyArray])

Hook useMemophải được khai báo ở cấp cao nhất của thành phần của bạn. Nó lấy các đối số sau:

expensiveFunctionchứa phép tính tốn kém mà bạn muốn thực hiện. Nếu bạn đã khai báo hàm bên ngoài, chỉ truyền tham chiếu hàm, không có dấu ngoặc. Bạn cũng có thể truyền trực tiếp các hàm mũi tên.
dependencyArraychứa danh sách các phụ thuộc cho hook. Hàm tốn kém sẽ chỉ được gọi khi một trong các phụ thuộc này được cập nhật. Bạn có thể truyền các biến trạng thái hoặc prop phụ thuộc vào phép tính này. Bất kỳ cập nhật trạng thái nào khác sẽ không kích hoạt hàm.

Trong lần render đầu tiên, useMemotrả về kết quả expensiveFunctionvà lưu trữ kết quả. Trong các lần render tiếp theo, nó sẽ trả về giá trị được lưu trữ nếu không có sự phụ thuộc nào thay đổi. Nếu chúng thay đổi, thì nó sẽ gọi lại hàm.

Chúng ta hãy sử dụng điều này trong trường hợp của chúng ta:

const [dependentCount, setDependentCount] = useState(10); const value = useMemo(calculate, [dependentCount]); return ( <div className="App"> // ... <button onClick={() => setDependentCount(dependentCount + 1)}> Increment Dependent Count </button> <p>Dependent Count: {dependentCount}</p> </div> );

Chúng ta đã tạo một trạng thái khác dependentCountmà chúng ta cho là phụ thuộc vào phép tính tốn kém. Khi trạng thái này cập nhật và hiển thị thành phần, hàm calculatesẽ chạy.

Nhưng nếu bất kỳ trạng thái nào khác thay đổi, thì useMemosẽ trả về giá trị được lưu trong bộ nhớ đệm thay vì chạy lại hàm.

Hãy kiểm tra điều này bằng cách thêm a console.logvào bên trong hàm:

Đầu ra với useMemo

Bây giờ, khi bạn nhấp vào “Increment Count”, việc kết xuất sẽ nhanh hơn vì hàm calculatekhông được gọi trong mọi lần kết xuất. Điều này cũng giống như trong mọi lần cập nhật trạng thái khác không được liệt kê trong mảng phụ thuộc useMemo.

Nhưng khi bạn nhấp vào “Increment dependent Count”, phải mất thời gian để hiển thị giá trị đã cập nhật. Điều này là do dependentCountnó là một phụ thuộc của useMemovà việc thay đổi nó sẽ gọi hàm tốn kém, do đó thành phần mất thời gian để hiển thị lại.

Theo cách này, với useMemo, bạn có thể kiểm soát việc thực thi một hàm tốn kém bằng cách chỉ gọi nó cho các bản cập nhật trạng thái thực sự cần giá trị được trả về. Điều này có thể cải thiện đáng kể hiệu suất ứng dụng của bạn.

Khi nào nên sử dụng `useMemo`:

Khi bạn có trạng thái phụ thuộc vào phép tính tốn kém nhưng không muốn chạy phép tính đó trên mọi lần kết xuất.
Khi bạn khai báo một mảng hoặc đối tượng bên trong một thành phần, tham chiếu của nó thay đổi trên mỗi lần kết xuất, mặc dù giá trị vẫn giữ nguyên. Việc bao bọc các giá trị bên trong useMemoduy trì tính bình đẳng tham chiếu và ngăn chặn việc kết xuất lại không cần thiết. Điều này rất cần thiết khi có useEffectsự phụ thuộc vào mảng hoặc đối tượng.
Khi bạn đang kết xuất danh sách, Array.mapkhông cần phải thay đổi trừ khi giá trị trạng thái nào đó thay đổi.

Cái `useCallbac`kHook

Tương tự như useMemo, bạn cũng có thể sử dụng hook này để tối ưu hóa hiệu suất. useCallbackHook ghi nhớ một hàm gọi lại và trả về hàm đó.

Lưu ý rằng useCallbackhook sẽ ghi nhớ chính hàm đó, chứ không phải giá trị trả về của nó. useMemoLưu trữ đệm giá trị trả về của hàm để hàm không cần phải thực thi lại. useCallbackLưu trữ đệm định nghĩa hàm hoặc tham chiếu hàm.

Một hàm được khai báo bên trong một thành phần được tạo lại trên mỗi lần render thành phần, tương tự như một biến. Sự khác biệt là, nó được render với một tham chiếu khác nhau mỗi lần. Vì vậy, một thành useEffectphần phụ thuộc vào hàm này sẽ thực thi lại trên mỗi lần render. Một điều tương tự xảy ra với các thành phần con.

Chúng ta hãy lấy một ví dụ:

const App = () => { const [count, setCount] = useState(0); const [value, setValue] = useState(""); const handleClick = () => { setValue("Kunal"); }; return ( <div className="App"> <button onClick={() => setCount(count + 1)}>Increment Count</button> <p>Count: {count}</p> <p>Value: {value}</p> <SlowComponent handleClick={handleClick} /> </div> ); }; const SlowComponent = React.memo(({ handleClick, value }) => { // Intentially making the component slow for (let i = 0; i < 1000000000; i++) {} return ( <div> <h1>Slow Component</h1> <button onClick={handleClick}>Click Me</button> </div> ); });

Ở đây, chúng ta có a SlowComponentlà thành phần con của Appthành phần. Khi một thành phần cha được render, tất cả các thành phần con của nó đều được render, bất kể có bất kỳ thay đổi nào bên trong chúng hay không.

Để tránh việc render không cần thiết các thành phần con, chúng ta thường sử dụng hàm React.memo. Về cơ bản, hàm này sẽ lưu trữ bộ nhớ đệm thành phần và chỉ render lại nếu props của thành phần đó đã thay đổi.

Bây giờ, khi bạn nhấp vào ‘Increment Count’, vẫn mất nhiều thời gian để render, vì SlowComponentrender lại khi trạng thái thay đổi. Nhưng tại sao vậy? Chúng ta không thay đổi bất kỳ prop nào của nó.

Trên bề mặt, chúng ta có thể không thay đổi giá trị của handleClickprop. Nhưng vì các hàm được tạo lại với một tham chiếu khác, nên trên mỗi lần render của thành phần App, thành phần con của nó (tức là SlowComponent) sẽ render.

Để duy trì tính bình đẳng tham chiếu, chúng ta gói định nghĩa hàm này bên trong a useCallback.

Chúng ta hãy cùng tìm hiểu cú pháp của nó:

const cachedFn = useCallback(fn, [...dependencyArray])

useCallbackcó các lập luận sau:

fnlà hàm bạn muốn lưu vào bộ nhớ đệm. Đây là định nghĩa hàm bạn muốn tạo và có thể lấy bất kỳ đối số nào và trả về bất kỳ giá trị nào.
dependencyArraylà danh sách các phụ thuộc, các thay đổi kích hoạt việc tạo lại hàm. Bạn có thể truyền các giá trị trạng thái hoặc prop phụ thuộc vào hàm này.

Trong lần render đầu tiên, React tạo hàm (không gọi hàm) và lưu vào bộ nhớ đệm. Trong các lần render tiếp theo, hàm được lưu vào bộ nhớ đệm sẽ được trả về cho bạn. Hãy nhớ rằng, hook này trả về và lưu vào bộ nhớ đệm hàm chứ không phải giá trị trả về của hàm.

Chúng ta hãy sử dụng hook này trong ví dụ của chúng ta:

import { useCallback } from "react"; const App = () => { // ... const handleClick = useCallback(() => { setValue("Kunal"); }, [value, setValue]); // ... };

Ở đây, chúng ta đã gói hàm bên trong a useCallbackvà truyền hai phụ thuộc liên quan đến hàm này.

Bây giờ, khi bạn nhấp vào ‘Increment Count’, việc kết xuất sẽ nhanh hơn nhiều. Điều này là do tham handleClickchiếu được lưu trong bộ nhớ đệm giữa các lần kết xuất và do đó, SlowComponentkhông kết xuất lại.

Nhưng khi bạn nhấp vào nút bên trong, SlowComponentnó sẽ render lại. Điều này là do khi valuetrạng thái thay đổi, handleClickphương thức được tạo lại và do đó các props của thành phần chậm đã thay đổi.

Giá trị cần thời gian để hiển thị

Bạn có thể thêm nhiều trạng thái hơn vào Appthành phần và cập nhật chúng mà không làm giảm hiệu suất miễn là bạn không cập nhật valuetrạng thái của.

Khi nào sử dụng`useCallback`

Khi bạn đã xác định trình xử lý sự kiện cho một phần tử bên trong thành phần của mình, hãy gói chúng bên trong a useCallbackđể tránh việc tạo lại trình xử lý sự kiện không cần thiết.
Khi bạn gọi một hàm bên trong a useEffect, bạn thường truyền hàm đó dưới dạng một dependency. Để tránh sử dụng useEffectkhông cần thiết trên mỗi lần render, hãy gói định nghĩa hàm bên trong a useCallback.
Nếu bạn đang viết một hook tùy chỉnh và nó trả về một hàm, bạn nên gói nó bên trong useCallback. Vì vậy, người dùng không cần phải lo lắng về việc tối ưu hóa hook – thay vào đó, họ có thể tập trung vào mã của riêng họ.

Sự khác biệt giữa `useMemo`và`useCallback`

Chúng ta hãy tóm tắt sự khác biệt giữa hai loại hook này:

useMemolưu trữ đệm giá trị trả về của một hàm. useCallbacklưu trữ đệm định nghĩa của chính hàm đó.
useMemođược sử dụng khi bạn có một phép tính tốn kém mà bạn muốn tránh trong mỗi lần kết xuất.
useCallbackđược sử dụng để lưu trữ đệm một hàm nhằm tránh phải tạo lại hàm đó sau mỗi lần kết xuất lại.
useMemođảm bảo rằng một hàm đắt tiền chỉ được gọi cho các giá trị trạng thái phụ thuộc vào nó.
useCallbacktạo ra các hàm ổn định duy trì cùng một tham chiếu giữa các lần kết xuất. Điều này tránh việc kết xuất không cần thiết các thành phần con.

Và đây là một vài điều nữa cần nhớ. Chỉ sử dụng các hook này nếu bạn muốn ghi nhớ các phép tính tốn kém hoặc ngăn chặn việc kết xuất lại không cần thiết. Không sử dụng useMemovà useCallbackở mọi nơi.

Đối với các hàm thông thường, các hook này không tạo ra nhiều khác biệt. Việc sử dụng quá nhiều sẽ khiến mã của bạn không thể đọc được. Thay vào đó, bạn có thể tìm ra những cách khác để cải thiện hiệu suất ứng dụng.

Phần kết luận

useMemovà useCallbacklà những hook hữu ích trong React có thể giúp bạn tối ưu hóa hiệu suất của ứng dụng web. Điều quan trọng là phải hiểu sự khác biệt giữa hai cái này và cách sử dụng của chúng.

Trong bài viết này, chúng ta đã thảo luận về cách thức hoạt động của cả hai hook. useMemolưu trữ kết quả của một phép tính tốn kém, trong khi useCallbacklưu trữ tham chiếu hàm. Chúng ta cũng đã liệt kê các tình huống khi bạn nên sử dụng từng hook. Cả hai hook này cùng nhau có thể giúp trang web của bạn nhanh hơn.

Mình hy vọng bài viết này giúp làm sáng tỏ mọi sự nhầm lẫn. Nếu bạn có thêm câu hỏi hoặc bình luận về bài đăng, hãy liên hệ với mình. Mình rất muốn nghe các đề xuất. Hẹn gặp lại lần sau, tạm biệt!

Cách lưu trữ dữ liệu cục bộ trong React Native Expo

17 min
2 năm ago
1
2

React Native ngày càng trở nên phổ biến như một công cụ phát triển ứng dụng di động vì khả năng tạo các ứng dụng đa nền tảng bằng các nguyên tắc JavaScript và React quen thuộc. Khi xây dựng các ứng […]

Tagged #ReactNative

React Native ngày càng trở nên phổ biến như một công cụ phát triển ứng dụng di động vì khả năng tạo các ứng dụng đa nền tảng bằng các nguyên tắc JavaScript và React quen thuộc.

Khi xây dựng các ứng dụng di động, một yêu cầu chung là khả năng lưu dữ liệu cục bộ trên thiết bị. Đây là lúc lưu trữ cục bộ phát huy tác dụng. Lưu trữ bất đồng bộ , do React Native Expo cung cấp, là giải pháp đơn giản nhưng mạnh mẽ để lưu dữ liệu cục bộ trong các ứng dụng React Native Expo của bạn.

Trong hướng dẫn này, chúng ta sẽ thảo luận về những nguyên tắc cơ bản của lưu trữ cục bộ, giới thiệu về Lưu trữ bất đồng bộ và trình bày cách tích hợp nó đúng cách vào các dự án React Native Expo.

Điều kiện tiên quyết

Quen thuộc với React Native và JavaScript.
Đã cài đặt Node.js và npm (hoặc yarn).

Lưu trữ cục bộ là gì?

Lưu trữ cục bộ là thành phần thiết yếu của quá trình phát triển ứng dụng di động, cho phép các nhà phát triển lưu trữ dữ liệu trên thiết bị của người dùng. Không giống như các lựa chọn lưu trữ khác như cơ sở dữ liệu, Lưu trữ cục bộ sử dụng kỹ thuật lưu trữ cặp khóa-giá trị đơn giản.

Các nhà phát triển có thể sử dụng nó để lưu trữ một lượng nhỏ dữ liệu vẫn được lưu trữ ngay cả khi họ đóng chương trình hoặc khởi động lại thiết bị. Điều này làm cho nó trở nên tuyệt vời để lưu trữ tùy chọn của người dùng, mã thông báo xác thực và các thông tin quan trọng khác.

Lưu trữ cục bộ rất cần thiết để tăng tốc độ ứng dụng vì nó giúp loại bỏ nhu cầu phải thường xuyên truy xuất dữ liệu từ các máy chủ ở xa.

Lưu trữ bất đồng bộ là gì?

Async Storage là hệ thống lưu trữ khóa-giá trị do React Native Expo cung cấp cho phép bạn quản lý bộ nhớ cục bộ trong ứng dụng di động. Nó cung cấp hệ thống lưu trữ khóa-giá trị đơn giản cho phép các nhà phát triển lưu trữ và truy xuất dữ liệu không đồng bộ.

Không giống như các phương pháp lưu trữ đồng bộ, Lưu trữ bất đồng bộ cho phép bạn lưu và truy xuất dữ liệu mà không làm gián đoạn luồng chính, mang lại trải nghiệm người dùng liền mạch hơn.

Cách bắt đầu với lưu trữ không đồng bộ

Để sử dụng Async Storage trong dự án React Native Expo của bạn, hãy đảm bảo Expo đã được cài đặt. Nếu bạn chưa thiết lập dự án React Native Expo, bạn có thể thực hiện bằng cách cài đặt Expo CLI:

$ npm install -g expo-cli

Tạo một dự án Expo mới:

$ expo init MyProject
$ cd MyProject

Để thêm Async Storage vào dự án của bạn, hãy chạy lệnh sau:

$ expo install @react-native-async-storage/async-storage

Đây @react-native-async-storage/async-storagelà phiên bản AsyncStorage do cộng đồng duy trì. Sau khi cài đặt, bạn có thể thiết lập một tệp để xử lý các phương thức AsyncStorage như setItem(), updateItem(), deleteItem(), và các phương thức khác. Tệp này sẽ được nhập bất cứ khi nào bạn muốn gọi đến bộ lưu trữ cục bộ.

Trong ví dụ này, chúng ta sẽ tạo một thư mục có tên utilstheo đường dẫn gốc của dự án và sau đó tạo AsyncStorage.jstệp để xử lý các phương thức sau:

Cấu trúc tập tin lưu trữ bất đồng bộ

Trong AsyncStorage.jstệp, bạn có thể định nghĩa các phương thức AsyncStorage như thế này:

// utils/AsyncStorage.js
import AsyncStorage from '@react-native-async-storage/async-storage';
export const setItem = async (key, value) => {
try {
await AsyncStorage.setItem(key, JSON.stringify(value));
} catch (error) {
console.error('Error setting item:', error);
}
};
export const getItem = async (key) => {
try {
const value = await AsyncStorage.getItem(key);
return value != null ? JSON.parse(value) : null;
} catch (error) {
console.error('Error getting item:', error);
return null;
}
};
export const removeItem = async (key) => {
try {
await AsyncStorage.removeItem(key);
} catch (error) {
console.error('Error removing item:', error);
}
};
export const mergeItem = async (key, value) => {
try {
await AsyncStorage.mergeItem(key, JSON.stringify(value));
} catch (error) {
console.error('Error merging item:', error);
}
};
export const clear = async () => {
try {
await AsyncStorage.clear();
} catch (error) {
console.error('Error clearing AsyncStorage:', error);
}
};
export const getAllKeys = async () => {
try {
return await AsyncStorage.getAllKeys();
} catch (error) {
console.error('Error getting all keys:', error);
return [];
}
};
export const getAllItems = async () => {
try {
const keys = await AsyncStorage.getAllKeys();
const items = await AsyncStorage.multiGet(keys);
return items.reduce((accumulator, [key, value]) => {
accumulator[key] = JSON.parse(value);
return accumulator;
}, {});
} catch (error) {
console.error('Error getting all items:', error);
return {};
}
};

AsyncStorage.jsnội dung tập tin

Tiến về phía trước, ở phần tiếp theo, chúng tôi sẽ giải thích và phân tích ý nghĩa của các hàm AsyncStorage trong tệp AsyncStorage.js.

Hiểu về phương pháp lưu trữ bất đồng bộ

Bằng cách tách các hàm AsyncStorage thành tệp riêng, bạn có thể quản lý và sử dụng lại chúng một cách thuận tiện trong suốt dự án React Native Expo của mình. Phương pháp tiếp cận theo mô-đun này cải thiện khả năng bảo trì và khả năng đọc mã.

Ở phần trước, chúng ta đã tạo AsyncStorage.jstệp và thêm một số hàm.

Trong các phần sau, chúng ta sẽ nói về những phương pháp này và cách sử dụng chúng hiệu quả.

`setItem()`

Phương pháp này rất cần thiết để lưu trữ dữ liệu cục bộ trên thiết bị. Nó cho phép các nhà phát triển lưu trữ các cặp khóa-giá trị trong AsyncStorage, trong đó khóa đóng vai trò là mã định danh duy nhất và giá trị biểu thị dữ liệu cần lưu trữ.

await AsyncStorage.setItem('username', 'freeCodeCamp');

Lưu trữ tên người dùng trong bộ nhớ cục bộ

`getItem()`

Phương pháp này getItem()trả về giá trị liên kết với một khóa nhất định từ bộ nhớ cục bộ. Nó gửi một tham số/khóa, là định danh duy nhất của dữ liệu đang được yêu cầu. Và nó trả về giá trị liên kết với khóa được cung cấp hoặc null nếu không có giá trị nào được phát hiện cho khóa đã cho.

const username = await AsyncStorage.getItem('username');

Lấy tên người dùng từ bộ nhớ cục bộ

Trong trường hợp này, giá trị cho khóa usernameđược lấy từ bộ nhớ cục bộ. Giá trị thu được này, freeCodeCamp, sau đó được đặt trong biến username, giúp nó có thể sử dụng trong ứng dụng.

`removeItem()`

Hàm này xóa đối tượng có khóa được cung cấp khỏi bộ nhớ cục bộ. Hàm này hữu ích khi bạn muốn xóa một phần dữ liệu cụ thể không còn cần thiết nữa.

await AsyncStorage.removeItem('username');

Phương thức removeItem()

Trong ví dụ này, đối tượng được xác định bằng khóa username sẽ bị xóa khỏi bộ nhớ cục bộ.

`mergeItem()`

Phương pháp này mergeItem()kết hợp giá trị của khóa hiện có với giá trị được cung cấp làm đầu vào. Nếu khóa không tồn tại, nó hoạt động tương tự như setItem(), tạo cặp khóa-giá trị mới.

await AsyncStorage.mergeItem('user', JSON.stringify({ name: 'John' }));

Hàm mergeItem()

`clear()`

Phương pháp này clear()xóa tất cả các mục khỏi bộ nhớ cục bộ. Phương pháp này hữu ích khi bạn muốn xóa tất cả dữ liệu cục bộ, chẳng hạn như khi bạn đăng xuất khỏi người dùng hoặc đặt lại trạng thái ứng dụng.

await AsyncStorage.clear();

Phương thức clear()

`getAllKeys()`

Hàm này getAllKeys()trả về tất cả các khóa được lưu trong bộ nhớ cục bộ. Hàm này hữu ích khi bạn cần lặp qua tất cả các khóa hoặc thực hiện các thao tác dựa trên các khóa trong bộ nhớ cục bộ.

const keys = await AsyncStorage.getAllKeys();

Gọi hàm getAllKeys()

`multiGet()`

Hàm này multiGet()lấy một số cặp khóa-giá trị từ bộ nhớ cục bộ bằng cách sử dụng một mảng khóa được cung cấp.

const data = await AsyncStorage.multiGet(['username', 'email']);

Phương pháp multiGet

Trong ví dụ này, các giá trị cho khóa usernamevà emailđược lấy từ bộ nhớ cục bộ.

Sử dụng nâng cao và thực hành tốt nhất

Mặc dù AsyncStorage cung cấp giao diện đơn giản cho lưu trữ cục bộ nhưng có một số biện pháp tốt nhất cần cân nhắc:

Tuần tự hóa dữ liệu : Khi lưu trữ các kiểu dữ liệu phức tạp như đối tượng hoặc mảng, hãy nhớ tuần tự hóa chúng thành định dạng chuỗi bằng lệnh JSON.stringify()trước khi lưu trữ và hủy tuần tự hóa chúng bằng lệnh JSON.parse()khi truy xuất.
Xử lý lỗi : Triển khai xử lý lỗi mạnh mẽ để xử lý linh hoạt mọi lỗi có thể xảy ra trong quá trình lưu trữ bất đồng bộ.
Cân nhắc về bảo mật : Cần lưu ý đến tính nhạy cảm của dữ liệu được lưu trữ cục bộ và triển khai các biện pháp bảo mật phù hợp như mã hóa thông tin nhạy cảm.

Phần kết luận

Tóm lại, việc sử dụng bộ nhớ cục bộ vào các dự án React Native Expo của bạn là điều cần thiết để phát triển các ứng dụng di động mạnh mẽ và phản hồi nhanh. Lưu trữ bất đồng bộ đơn giản hóa quá trình lưu trữ và truy xuất dữ liệu trên thiết bị, mang lại trải nghiệm người dùng nhất quán và cho phép các chức năng ngoại tuyến.

Bằng cách làm theo các bước trong bài viết này, bạn có thể sử dụng Async Storage để cải thiện chức năng lưu trữ cục bộ của ứng dụng.
Ngoài ra, các bạn có thể tìm hiểu thêm các trick về console.log giúp mình thêm ngầu hơn, code nhanh hơn tại đây:

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

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