JavaScript Nâng Cao - Kỳ 23

Trong bài viết này, chúng ta sẽ cùng khám phá sâu về JavaScript với một số chủ đề thú vị, từ Hoisting, Temporal Dead Zone cho đến Generator Functions và cách sử dụng Template Literals. Mục tiêu của chúng ta là làm rõ kiến thức nâng cao về JavaScript, giúp bạn trở thành lập trình viên xuất sắc hơn.

1. Temporal Dead Zone và Hoisting

Trong JavaScript, có một câu nói thú vị: "Trên đời chỉ có thứ nhiều người chửi và thứ không ai thèm dùng." JavaScript là một trong những ngôn ngữ đó. Về lý thuyết, nó rất dễ hiểu nhưng khi lập trình thực tế lại thường xảy ra những bối rối. Vì vậy, chúng ta sẽ cùng nhau phân tích các đoạn mã cụ thể để hiểu sâu hơn về JavaScript.

1.1 Output của đoạn code sau:

let name = 'Lydia';

function getName() {
  console.log(name);
  let name = 'Sarah';
}

getName();

Các lựa chọn:

• A: Lydia
• B: Sarah
• C: undefined
• D: ReferenceError

Đáp án: D - ReferenceError

1.2 Giải thích về Hoisting và Temporal Dead Zone

• Hoisting là hành vi trong JavaScript mà ở đó các khai báo biến và hàm được đưa lên đầu scope trước khi mã được thực thi. Tuy nhiên, chỉ có khai báo được hoisted, không bao gồm việc khởi tạo.
• Temporal Dead Zone (TDZ) là khoảng thời gian từ khi biến được hoisted cho đến khi nó được khởi tạo. Nếu cố gắng truy cập biến trong khoảng thời gian này, JavaScript sẽ ném ra ReferenceError.

1.3 Phân tích đoạn code

Khi hàm getName() được gọi, JavaScript tạo ra một scope mới cho hàm này. Trong scope đó, biến name được khai báo bằng let. Dù name được hoisted lên đầu, nhưng nó nằm trong TDZ cho đến khi được khởi tạo với giá trị 'Sarah'. Do đó, khi thực thi console.log(name), JavaScript không tìm thấy giá trị hợp lệ và ném ra ReferenceError.

2. Generator Functions và 'yield'

2.1 Output của đoạn code dưới đây là gì?

function* generatorOne() {
  yield ['a', 'b', 'c'];
}

function* generatorTwo() {
  yield* ['a', 'b', 'c'];
}

const one = generatorOne();
const two = generatorTwo();

console.log(one.next().value);
console.log(two.next().value);

Các lựa chọn:

• A: a và a
• B: a và undefined
• C: ['a', 'b', 'c'] và a
• D: a và ['a', 'b', 'c']

Đáp án: C

2.2 Điều gì xảy ra?

• Generator Functions cho phép tạo ra các iterator dễ dàng. Bằng việc sử dụng từ khóa yield, chúng ta có thể trả về một giá trị đơn lẻ hoặc một iterable object.
• Trong mã trên, generatorOne yield toàn bộ mảng, trong khi generatorTwo yield từng phần tử của mảng.

3. Template Literals và Arrow Functions

3.1 Output của đoạn code sau là gì?

console.log(`${(x => x)('I love')} to program`);

Các lựa chọn:

• A: I love to program
• B: undefined to program
• C: ${(x => x)('I love')} to program
• D: TypeError

Đáp án: A

3.2 Giải thích về Template Literals và Arrow Functions

• Template literals cho phép nhúng biểu thức JavaScript trong chuỗi thông qua cú pháp ${}.
• Arrow functions cung cấp cách viết hàm ngắn gọn hơn mà không tạo ra context this riêng.
• Trong đoạn mã trên, arrow function trả về giá trị 'I love' và nó được nhúng vào trong chuỗi kết quả.

4. setInterval và Garbage Collection

4.1 Điều gì xảy ra với đoạn mã sau?

let config = {
  alert: setInterval(() => {
    console.log('Alert!');
  }, 1000)
}

config = null;

Các lựa chọn:

• A: Callback setInterval sẽ không được gọi
• B: Callback setInterval sẽ được gọi một lần duy nhất
• C: Callback setInterval vẫn sẽ được gọi mỗi giây một lần
• D: config.alert() không bao giờ được gọi bởi config là null

Đáp án: C

4.2 Giải thích về setInterval và Garbage Collection

setInterval được thiết lập để thực thi mã theo định kỳ. Gán null cho config không dừng setInterval, tức là callback vẫn sẽ được gọi tiếp tục vì JavaScript vẫn giữ một tham chiếu đến hàm callback.

5. Map và Function References

5.1 Những hàm nào sẽ trả về 'Hello world!'?

const myMap = new Map();
const myFunc = () => 'greeting';

myMap.set(myFunc, 'Hello world!');

//1
myMap.get('greeting');
//2
myMap.get(myFunc);
//3
myMap.get(() => 'greeting');

Các lựa chọn:

• A: 1
• B: 2
• C: 2 và 3
• D: Tất cả

Đáp án: B

5.2 Giải thích

Chỉ hàm myFunc được set vào Map, do đó chỉ có myMap.get(myFunc) trả về 'Hello world!'. Các functions mới hoặc khác không tương ứng với myFunc đều không tìm thấy trong Map.

Kết luận

Qua bài viết này, chúng ta đã khám phá nhiều khía cạnh nâng cao của JavaScript như Temporal Dead Zone, Generator Functions, Template Literals và Garbage Collection. Kiến thức này giúp bạn trở nên thành thạo hơn trong việc viết mã và tránh những lỗi phổ biến. Hãy theo dõi các kỳ tiếp theo của series để tiếp tục nâng cao kỹ năng lập trình của bạn nhé! 🚀
source: viblo