Có một câu nói vui 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 ví dụ điển hình. Với nhiều điểm thú vị, nó cũng không thiếu những điều khiến chúng ta đau đầu. Mặc dù lý thuyết có vẻ đơn giản, nhưng khi thực hành, mọi thứ lại trở nên phức tạp hơn. Hãy cùng nhau đào sâu vào từng ví dụ cụ thể và phân tích để hiểu hơn về JavaScript nhé! Chúng ta bắt đầu nào, GÉT GÔ 🚀
Nếu bạn có bất kỳ câu hỏi nào, hãy bình luận dưới phần
comment
nhé. Mộtcomment
chào mình cũng là động lực lớn để mình hoàn thành series này. Cảm ơn các bạn rất nhiều! 🤗
1. Tìm Hiểu Về Phương Thức push() và Giá Trị Trả Về
javascript
let newList = [1, 2, 3].push(4)
console.log(newList.push(5))
- A:
[1, 2, 3, 4, 5]
- B:
[1, 2, 3, 5]
- C:
[1, 2, 3, 4]
- D:
Error
Đáp Án: D
Phân Tích Đoạn Code
Trong đoạn mã trên, push()
là phương thức dùng để thêm một hoặc nhiều phần tử vào cuối mảng. Tuy nhiên, push()
sẽ không trả về một mảng mới sau khi thêm phần tử, mà nó trả về độ dài của mảng.
Phân Tích Kết Quả
Trong lệnh let newList = [1, 2, 3].push(4)
, kết quả sẽ là 4 (độ dài của mảng [1, 2, 3, 4]
). Tiếp theo, khi cố gắng gọi newList.push(5)
, chúng ta sẽ gây ra lỗi vì newList
là một số và không có phương thức push()
, dẫn đến TypeError.
Kết Luận
Nắm rõ về giá trị trả về của phương thức là rất quan trọng trong JavaScript. Để tránh nhầm lẫn, chúng ta có thể sửa lại đoạn mã như sau:
javascript
let arr = [1, 2, 3];
arr.push(4);
arr.push(5);
console.log(arr); // [1, 2, 3, 4, 5]
Hoặc tạo một mảng mới:
javascript
let newList = [...[1, 2, 3], 4];
newList = [...newList, 5];
console.log(newList); // [1, 2, 3, 4, 5]
2. Tìm Hiểu Về Prototype Trong JavaScript
javascript
function giveLydiaPizza() {
return "Here is pizza!"
}
const giveLydiaChocolate = () => "Here's chocolate... now go hit the gym already.";
console.log(giveLydiaPizza.prototype);
console.log(giveLydiaChocolate.prototype);
- A:
{ constructor: ...}
{ constructor: ...}
- B:
{}
{ constructor: ...}
- C:
{ constructor: ...}
{}
- D:
{ constructor: ...}
undefined
Đáp Án: D
Giải Thích
Trong JavaScript, tất cả các hàm đều có thuộc tính prototype
, nhưng điều này không áp dụng cho arrow functions. Hàm thông thường (giveLydiaPizza
) sẽ có prototype
, tuy nhiên arrow function (giveLydiaChocolate
) sẽ không có thuộc tính này.
3. Sử Dụng Object.entries() và Destructuring
javascript
const person = {
name: "Lydia",
age: 21
}
for (const [x, y] of Object.entries(person)) {
console.log(x, y)
}
- A:
name
Lydia
vàage
21
- B:
["name", "Lydia"]
và["age", 21]
- C:
["name", "age"]
vàundefined
- D:
Error
Đáp Án: A
Phân Tích Kết Quả
Object.entries()
sử dụng để chuyển đổi một object thành một mảng các cặp key-value. Trong ví dụ này, chúng ta lặp qua các cặp này và in ra key và value của mỗi phần tử.
Kết Luận
Nắm vững về Object.entries()
và destructuring cực kỳ quan trọng trong JavaScript, giúp bạn dễ dàng làm việc với các cấu trúc dữ liệu phức tạp.
4. Rest Parameters và Cách Sử Dụng Đúng
javascript
function getItems(fruitList, ...args, favoriteFruit) {
return [...fruitList, ...args, favoriteFruit]
}
getItems(["banana", "apple"], "pear", "orange")
Đáp Án: D
Giải Thích
Rest parameters cần phải là tham số cuối cùng trong hàm. Việc đặt ...args
không phải là tham số cuối sẽ gây ra SyntaxError.
5. Automatic Semicolon Insertion (ASI) Trong JavaScript
javascript
function nums(a, b) {
if (a > b)
console.log('a is bigger')
else
console.log('b is bigger')
return
a + b
}
console.log(nums(4, 2))
console.log(nums(1, 2))
Đáp Án: B
Phân Tích Kết Quả
JavaScript tự động thêm dấu chấm phẩy sau từ khóa return
, dẫn đến việc hàm sẽ trả về undefined
. Điều này có thể gây nhầm lẫn cho lập trình viên. Để khắc phục, hãy chắc chắn rằng giá trị trả về nằm trên cùng một dòng với return
.
Kết Luận
Hiểu rõ về ASI rất quan trọng để tránh những lỗi không mong muốn trong JavaScript. Thực hành và kiểm tra code của bạn thường xuyên sẽ giúp bạn thành công trong việc phát triển ứng dụng với JavaScript.
Bài viết này đã điểm qua 5 tính năng quan trọng trong JavaScript. Hy vọng thông qua bài viết, bạn đã hiểu rõ hơn về các khía cạnh của ngôn ngữ này và có thêm kiến thức để áp dụng vào công việc lập trình của mình. Đừng ngần ngại để lại câu hỏi trong phần bình luận nhé! Hẹn gặp lại trong các bài viết tiếp theo! 🚀🎉
source: viblo