Câu Nói Nổi Tiế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ữ đầy hấp dẫn nhưng cũng không ít lần khiến lập trình viên phải đau đầu. Lý thuyết có thể dễ hiểu, nhưng khi bắt tay vào thực hành, không ít người gặp khó khăn. Trong bài viết này, mình sẽ cùng các bạn khám phá từng khía cạnh cụ thể của JavaScript thông qua các ví dụ thực tiễn.
Mục Lục
- Tham Trị và Tham Chiếu trong JavaScript
- Xử Lý Lỗi với Try-Catch và Throw
- Constructor Functions và Return
- Biến Toàn Cục và Từ Khóa Let
- Xóa Thuộc Tính của Đối Tượng
1. Tham Trị và Tham Chiếu trong JavaScript
Output của đoạn code sau là gì?
javascript
function getInfo(member, year) {
member.name = "Lydia";
year = "1998";
}
const person = { name: "Sarah" };
const birthYear = "1997";
getInfo(person, birthYear);
console.log(person, birthYear);Các lựa chọn:
- A:
{ name: "Lydia" }, "1997" - B:
{ name: "Sarah" }, "1998" - C:
{ name: "Lydia" }, "1998" - D:
{ name: "Sarah" }, "1997"
Đáp án của câu hỏi này là: A
Phân Tích Đoạn Code
Trong JavaScript, khi truyền tham số vào hàm, có hai cách xử lý giá trị: Tham Trị (Pass by Value) và Tham Chiếu (Pass by Reference).
- Tham Trị (Pass by Value): Các kiểu dữ liệu nguyên thủy (number, string, boolean, null, undefined).
- Tham Chiếu (Pass by Reference): Các đối tượng (objects), bao gồm arrays, functions, và object literals.
Trong ví dụ:
personlà một đối tượng, được truyền vào hàm bằng tham chiếu.birthYearlà một chuỗi, được truyền vào hàm bằng tham trị.
Khi vào hàm getInfo:
member.name = "Lydia"thay đổi giá trịnamecủaperson.year = "1998"chỉ thay đổi bản sao local củabirthYear, không ảnh hưởng tới giá trị bên ngoài.
Kết quả khi log ra: { name: "Lydia" }, "1997".
Lưu Ý Quan Trọng
Hiểu rõ về tham trị và tham chiếu là thành tố cốt lõi để tránh lỗi không mong muốn. Khi làm việc với objects và arrays, nếu bạn muốn thay đổi một object mà không ảnh hưởng đến object gốc, hãy tạo một bản sao:
javascript
const originalObj = { x: 1, y: 2 };
const copyObj = { ...originalObj };
copyObj.x = 100;
console.log(originalObj); // { x: 1, y: 2 }
console.log(copyObj); // { x: 100, y: 2 }2. Xử Lý Lỗi với Try-Catch và Throw
Output của đoạn code sau là gì?
javascript
function greeting() {
throw "Hello world!";
}
function sayHi() {
try {
const data = greeting();
console.log("It worked!", data);
} catch (e) {
console.log("Oh no an error!", e);
}
}
sayHi();Đáp án của câu hỏi này là: D
Phân Tích Đoạn Code
throwđược sử dụng để ném ra một ngoại lệ, làm dừng chương trình và chuyển quyền điều khiển cho khối xử lý lỗi.- Trong khối
try, nếu có lỗi xảy ra, nó sẽ bị bắt trong khốicatch. - Khi gọi
sayHi(), hàmgreeting()ném ra một ngoại lệ, và chúng ta in ra thông báo lỗi: "Oh no an error: Hello world!".
Lưu Ý Quan Trọng
Luôn ném ra các đối tượng Error khi sử dụng throw, giúp dễ dàng trong việc debug. Sử dụng async/await cùng với try-catch khi làm việc với các API bất đồng bộ.
3. Constructor Functions và Return
Output của đoạn code sau là gì?
javascript
function Car() {
this.make = "Lamborghini";
return { make: "Maserati" };
}
const myCar = new Car();
console.log(myCar.make);Đáp án của câu hỏi này là: B
Phân Tích Đoạn Code
Constructor functions cho phép tạo ra các đối tượng mới. Khi sử dụng từ khóa new, hàm sẽ định nghĩa đối tượng mới. Nếu constructor trả về một đối tượng, đối tượng đó sẽ được ưu tiên. Kết quả là myCar sẽ là { make: "Maserati" }.
Lưu Ý Quan Trọng
Tránh việc trả về một đối tượng khác trong constructor functions. Điều này có thể gây nhầm lẫn và khó debug.
4. Biến Toàn Cục và Từ Khóa Let
Output của đoạn code sau là gì?
javascript
(() => {
let x = (y = 10);
})();
console.log(typeof x);
console.log(typeof y);Đáp án của câu hỏi này là: A
Phân Tích Đoạn Code
Trong hàm IIFE, x được khai báo với let chỉ tồn tại trong phạm vi IIFE, trong khi y trở thành biến toàn cục. Kết thúc với: typeof x là "undefined" và typeof y là "number".
5. Xóa Thuộc Tính của Đối Tượng
Output của đoạn code sau là gì?
javascript
class Dog {
constructor(name) {
this.name = name;
}
}
Dog.prototype.bark = function() {
console.log(`Woof I am ${this.name}`);
};
const pet = new Dog("Mara");
pet.bark();
delete Dog.prototype.bark;
pet.bark();Đáp án của câu hỏi này là: A
Phân Tích Đoạn Code
Khi xóa bark từ prototype, lần gọi pet.bark() thứ hai sẽ dẫn đến TypeError vì phương thức đã bị xóa. Điều này cho thấy sự cần thiết của việc hiểu rõ về prototype chain trong JavaScript.
Kết Luận
Bài viết này đã trình bày sâu sắc về tham trị, tham chiếu, xử lý lỗi, constructor functions, biến toàn cục và cách làm việc với thuộc tính của đối tượng trong JavaScript. Hiểu biết những khía cạnh này không chỉ giúp bạn tránh được lỗi mà còn nâng cao kỹ năng lập trình JavaScript của bạn.
Hãy tiếp tục tìm hiểu và luyện tập để trở thành một lập trình viên JavaScript giỏi hơn nhé! Nếu có câu hỏi, hãy để lại phản hồi dưới bài viết này.Sự hỗ trợ từ bạn là động lực lớn cho mình.
source: viblo
