Khám Phá JavaScript Nâng Cao - Kỳ 10: Tham Chiếu, Vòng Lặp, Phép Tính và Các Khái Niệm Quan Trọng Khác

Có một câu ngạn ngữ thú vị rằng: 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 ngôn ngữ như vậy, với nhiều điểm thú vị nhưng cũng không ít vấn đề khiến lập trình viên đau đầu. Trong bài viết này, chúng ta sẽ cùng nhau khám phá những khái niệm quan trọng, từ các phép toán cơ bản đến cách làm việc với tham chiếu và vòng lặp trong JavaScript. Hy vọng các bạn sẽ tìm thấy thông tin hữu ích khi đọc bài viết này.

Loạt bài này sẽ có thể kéo dài với nhiều kỳ khác nhau. Để tiện cho những bạn chưa theo dõi các bài viết trước, mình sẽ giải thích lại các lý thuyết từ đầu để mọi người có thể dễ dàng nắm bắt. Hãy cùng bắt đầu, GÉT GÔ! 🚀

1. Tham Chiếu và Gán Giá Trị

Đoạn code sau sẽ cho ra kết quả gì?

let person = { name: "Lydia" };
const members = [person];
person = null;

console.log(members);

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

Đáp án: D

Hãy cùng phân tích tại sao lại có kết quả như vậy nhé! ❓️

1.1. Khái Niệm Về Tham Chiếu Trong JavaScript

Khi bạn làm việc với các loại dữ liệu phức tạp như object hay array, JavaScript sử dụng tham chiếu thay vì giá trị đơn giản. Khi khai báo:

let person = { name: "Lydia" };

person lưu trữ một tham chiếu đến vị trí trong bộ nhớ, nơi chứa object.

1.2. Gán Tham Chiếu

Khi khởi tạo mảng members:

const members = [person];

Tại đây, mảng members chứa tham chiếu đến object trong person. Trạng thái lúc này là cả hai đều trỏ tới cùng một object trong bộ nhớ.

1.3. Thay Đổi Giá Trị của Biến

Khi gán lại person:

person = null;

Chúng ta chỉ thay đổi giá trị của biến person mà không ảnh hưởng đến object gốc. members vẫn trỏ đến object { name: "Lydia" }.

1.4. Kết Quả Cuối Cùng

Do đó, khi console.log(members) thực thi, kết quả hiển thị là [{ name: "Lydia" }], không bị ảnh hưởng bởi việc gán null cho person.

2. Vòng Lặp for...in Trong JavaScript

Giá trị của đoạn code sau là gì?

const person = {
  name: "Lydia",
  age: 21
};

for (const item in person) {
  console.log(item);
}

• A: { name: "Lydia" }, { age: 21 }
• B: "name", "age"
• C: "Lydia", 21
• D: [name, "Lydia"], [age, 21]

Đáp án: B

Hãy cùng tìm hiểu nguyên nhân! ❓️

2.1. Vòng Lặp for...in

Vòng lặp for...in cho phép bạn lặp qua các thuộc tính của một object. Nó trả về các keys, chứ không phải values.

2.2. Cách Hoạt Động

Mỗi lần lặp, biến item sẽ lưu giá trị là tên thuộc tính trong object person. Ở đây, có hai thuộc tính: name và age.

2.3. Phân Tích Kết Quả

Khi chạy vòng lặp:

• Lần 1: item là "name".
• Lần 2: item là "age".

2.4. Lưu Ý Quan Trọng

Hãy nhớ rằng for...in chỉ lặp qua keys. Nếu cần truy cập values, bạn phải dùng person[item].

3. Phép Cộng và Ép Kiểu trong JavaScript

Giá trị của đoạn code dưới đây là gì?

console.log(3 + 4 + "5");

• A: "345"
• B: "75"
• C: 12
• D: "12"

Đáp án: B

Giờ hãy cùng khám phá! ❓️

3.1. Thứ Tự Thực Hiện Phép Toán

Các phép toán trong JavaScript thực hiện từ trái sang phải.

3.2. Phép Cộng Số Học

Đầu tiên, 3 + 4 = 7 tạo thành biểu thức 7 + "5".

3.3. Ép Kiểu

Khi gặp phép cộng giữa số và chuỗi, JavaScript chuyển đổi số thành chuỗi, dẫn đến kết quả "7" + "5" = "75".

4. Phân Tích Cú Pháp Số trong JavaScript

Giá trị của num là gì?

const num = parseInt("7*6", 10);

• A: 42
• B: "42"
• C: 7
• D: NaN

Đáp án: C

Giờ cùng phân tích nào! ❓️

4.1. Hàm parseInt()

parseInt() phân tích chuỗi và trả về số nguyên. Cú pháp:

parseInt(string, radix)

4.2. Cách Hoạt Động

parseInt() bỏ qua khoảng trắng và phân tích ký tự cho đến khi gặp ký tự không hợp lệ.

4.3. Phân Tích Kết Quả

Với chuỗi "7*6", parseInt() dừng lại tại ký tự * và trả về giá trị 7.

5. Map và undefined Trong JavaScript

Giá trị của đoạn code dưới đây là gì?

[1, 2, 3].map(num => {
  if (typeof num === "number") return;
  return num * 2;
});

• A: []
• B: [null, null, null]
• C: [undefined, undefined, undefined]
• D: [ 3 x empty ]

Đáp án: C

Hãy cùng tìm hiểu tại sao! ❓️

5.1. Phương Thức map()

map() tạo ra mảng mới bằng cách áp dụng một hàm cho mỗi phần tử trong mảng gốc.

5.2. Cách Hoạt Động

Mỗi phần tử trong mảng mới sẽ nhận giá trị trả về từ hàm callback.

5.3. Phân Tích Đoạn Code

Trong ví dụ này, mọi phần tử đều là số, hàm return undefined cho mọi trường hợp.

5.4. Kết Quả

Kết quả sẽ là [undefined, undefined, undefined]. map() luôn trả về mảng với số lượng phần tử tương tự như mảng gốc.

Kết Luận

Hiểu rõ về các khái niệm như tham chiếu, gán giá trị, vòng lặp và các phương thức như map() trong JavaScript sẽ giúp bạn phát triển kỹ năng lập trình một cách hiệu quả.
source: viblo