JavaScript Nâng Cao - Kỳ 19: Khám Phá Những Tính Năng Quan Trọng

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ột comment 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ề

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:

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:

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

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

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

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

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