Dưới đây là câu trả lời chi tiết cho từng câu hỏi liên quan đến JavaScript và ReactJS:

JavaScript

1. This là gì?

Trong JavaScript, this là một từ khóa tham chiếu đến đối tượng mà nó đang được sử dụng trong ngữ cảnh hiện tại. Giá trị của this phụ thuộc vào cách hàm được gọi:

• Trong Global Scope: this tham chiếu đến window (trong trình duyệt) hoặc global (trong Node.js).

• Trong Object Method: this tham chiếu đến đối tượng chứa phương thức đó.

• Trong Constructor Function: this tham chiếu đến instance mới của object được tạo bởi hàm khởi tạo.

• Trong Arrow Function: this không có giá trị riêng mà kế thừa từ this của phạm vi bên ngoài.

• Trong Event Listener: this tham chiếu đến phần tử mà sự kiện đang được kích hoạt.

• Trong Strict Mode ('use strict'): this sẽ là undefined nếu không có object nào gọi nó.

2. Có những loại biến nào? Sự khác nhau của chúng?

3. Trình bày các loại Scope

• Global Scope: Biến khai báo bên ngoài mọi hàm có thể truy cập ở mọi nơi.

• Function Scope (Local Scope): Biến khai báo trong hàm chỉ có thể truy cập bên trong hàm đó.

• Block Scope: let và const có phạm vi giới hạn trong {} của if, for, while, v.v.

Ví dụ:

function test() {
    var a = 10;  // Function Scope
    if (true) {
        let b = 20;  // Block Scope
        const c = 30; // Block Scope
    }
    console.log(a); // 10
    console.log(b); // Lỗi: b is not defined
}

4. Closure là gì?

Closure là một hàm có thể ghi nhớ và truy cập biến từ phạm vi bên ngoài của nó ngay cả khi hàm đó đã được thực thi xong.

Ví dụ:

function outer() {
    let count = 0;
    return function inner() {
        count++;
        console.log(count);
    };
}

const counter = outer();
counter(); // 1
counter(); // 2

5. Sự khác nhau giữa Local Storage, Cookies, Session Storage?

6. Xử lý bất đồng bộ (Callback, Promise, Async/Await)

• Callback: Hàm được truyền như đối số để thực thi sau khi một tác vụ hoàn thành.

• Promise: Giúp tránh callback hell, có 3 trạng thái: pending, fulfilled, rejected.

• Async/Await: Giúp code dễ đọc hơn khi xử lý bất đồng bộ.

Ví dụ với Promise & Async/Await:

function fetchData() {
    return new Promise(resolve => {
        setTimeout(() => resolve("Dữ liệu đã tải"), 2000);
    });
}

async function getData() {
    const data = await fetchData();
    console.log(data);
}

getData(); // Sau 2s: "Dữ liệu đã tải"

7. Hoisting là gì?

Hoisting là cơ chế đưa phần khai báo biến lên đầu phạm vi trước khi thực thi code.

Ví dụ:

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

8. Những thay đổi ở ES6

• let, const

• Template literals ${}

• Arrow functions

• Destructuring

• Default parameters

• Classes

• Modules (import/export)

• Spread & Rest Operators

• Promises, Async/Await

9. Truthy & Falsy

• Falsy: false, 0, "", null, undefined, NaN

• Truthy: Bất cứ giá trị nào khác Falsy

10. Đồng bộ và Bất đồng bộ

JavaScript là ngôn ngữ đồng bộ, nhưng có cơ chế xử lý bất đồng bộ thông qua callback, Promise, async/await.

11. Tham trị và Tham chiếu

• Tham trị (Primitive Types): Number, String, Boolean, null, undefined, Symbol, BigInt.

• Tham chiếu (Reference Types): Object, Array, Function.

let a = { name: "Alice" };
let b = a;
b.name = "Bob";
console.log(a.name); // "Bob" (Tham chiếu)

ReactJS

1. ReactJS là gì?

React là thư viện JavaScript giúp xây dựng giao diện người dùng dựa trên Component.

2. Life Cycle trong ReactJS

• Mounting: constructor → render → componentDidMount

• Updating: shouldComponentUpdate → render → componentDidUpdate

• Unmounting: componentWillUnmount

3. useEffect được dùng trong giai đoạn nào?

useEffect có thể được dùng trong:

• Mounting (chạy một lần sau khi render)

• Updating (chạy khi dependency thay đổi)

• Unmounting (return cleanup function)

useEffect(() => {
    console.log("Component Mounted");
    return () => console.log("Component Unmounted");
}, []);

4. Virtual DOM

Virtual DOM giúp React tối ưu hóa cập nhật UI bằng cách so sánh các phiên bản DOM ảo cũ và mới, chỉ cập nhật phần thay đổi.

5. Key là gì?

key giúp React xác định phần tử nào cần cập nhật, tránh render lại không cần thiết.

6. Cách tối ưu performance

• Tránh re-render bằng memo, useMemo, useCallback

• Code splitting với React.lazy()

• Sử dụng useRef để giữ giá trị giữa các render

7. Có thể gán trực tiếp state không?

Không, vì React không nhận diện thay đổi nếu không gọi setState.

8. Phân biệt state và props

• State: Quản lý trạng thái nội bộ của component.

• Props: Truyền dữ liệu giữa các component.

9. Khi nào component re-render?

• Khi state hoặc props thay đổi.

• Khi parent component re-render.

10. Code Splitting

Tách nhỏ file JS để tăng tốc độ tải trang bằng React.lazy().