JavaScript Nâng Cao - Kỳ 18: Khám Phá Các Khái Niệm Quan Trọng

Một Số Khái Niệm Châm Biếm Trong Thế Giới Lập Trình

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, nó sở hữu nhiều điểm thú vị nhưng cũng có không ít điều khiến chúng ta đau đầu. Lý thuyết có thể dễ dàng tiếp cận, nhưng khi bắt tay vào thực hành thì lại trở thành một thử thách.

Trong bài viết này, mình sẽ cùng các bạn từng bước khám phá và phân tích những khía cạnh cụ thể của JavaScript, giúp bạn hiểu rõ hơn về ngôn ngữ lập trình này.

Series này có thể sẽ kéo dài và có nhiều Kỳ, nhưng mình sẽ cố gắng tóm tắt lại các bài trước đó về JS để giúp bạn dễ dàng theo dõi hơn. Các kiến thức trong loạt bài này sẽ được tái diễn giải để các bạn có thể tiếp thu một cách thoải mái. Hãy bắt đầu nào... GÉT GÔ 🚀

Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại bình luận dưới phần comment nhé. Hoặc đơn giản chỉ cần để lại một comment chào mình là đã giúp mình có thêm động lực để hoàn thành series này. Cảm ơn các bạn rất nhiều. 🤗

1. Khái Niệm Truthy và Falsy Trong JavaScript

Để làm nổi bật khái niệm này, chúng ta hãy cùng phân tích câu hỏi sau:

Cách nào để gán hasName bằng true, nếu không thể truyền true vào tham số?

function getName(name) {
  const hasName = //
}

• A: !!name
• B: name
• C: new Boolean(name)
• D: name.length

Đáp án cho câu hỏi này là

Đáp án: A

Giải thích:
Khái niệm Truthy là những giá trị khi ép kiểu sang boolean sẽ thành true, trong khi Falsy là ngược lại. JavaScript có 6 giá trị falsy: false, 0, '', null, undefined, và NaN. Cách sử dụng !! là một cách hiệu quả để chuyển đổi một giá trị sang kiểu boolean. Ví dụ:

console.log(!!0);      // false
console.log(!!"hello"); // true
console.log(!!null);   // false
console.log(!!1);      // true

2. Truy Cập Ký Tự Trong Chuỗi

Khi bạn chạy đoạn mã sau:

console.log("I want pizza"[0])

Điều gì sẽ xảy ra? Hãy chọn một đáp án:

• A: ""
• B: "I"
• C: SyntaxError
• D: undefined

Đáp án cho câu hỏi này là

Đáp án: B

Giải thích:
Chuỗi trong JavaScript được coi như một mảng ký tự. Truy cập ký tự đầu tiên của chuỗi "I want pizza" bằng chỉ số 0 sẽ trả về ký tự "I".

Nếu bạn chạy đoạn mã sau:

console.log("Hello"[1]);     // "e"
console.log("World"[4]);     // "d"
console.log("JavaScript"[10]); // "t"

3. Giá Trị Mặc Định Khi Định Nghĩa Tham Số Hàm

Khi gọi hàm như sau:

function sum(num1, num2 = num1) {
  console.log(num1 + num2)
}

sum(10)

Kết quả sẽ là gì?

• A: NaN
• B: 20
• C: ReferenceError
• D: undefined

Đáp án là

Đáp án: B

Giải thích:
Với num1 là 10, num2 sẽ nhận giá trị mặc định là num1, tức là 10. Kết quả là 10 + 10 = 20.

4. Cách Export và Import Trong ES6 Modules

Giả sử bạn có mã như sau:

// module.js 
export default () => "Hello world"
export const name = "Lydia"
// index.js 
import * as data from "./module"
console.log(data)

Kết quả của đoạn mã trên là gì? Hãy chọn đáp án:

• A: { default: function default(), name: "Lydia" }
• B: { default: function default() }
• C: { default: "Hello world", name: "Lydia" }
• D: Global object of module.js

Đáp án là

Đáp án: A

Giải thích:
Khi import tất cả ở dạng object, thuộc tính default sẽ là hàm và các thuộc tính khác sẽ là giá trị tương ứng với các named export.

5. Đối Tượng Trong JavaScript

Khi bạn chạy mã sau:

class Person {
  constructor(name) {
    this.name = name
  }
}

const member = new Person("John")
console.log(typeof member)

Kết quả sẽ là gì? Chọn đáp án:

• A: "class"
• B: "function"
• C: "object"
• D: "string"

Đáp án đúng là

Đáp án: C

Giải thích:
Khi khởi tạo một lớp mới trong JavaScript, kết quả của nó sẽ là một đối tượng, do đó kết quả của typeof member là "object".

Kết Luận

Qua bài viết này, chúng ta đã cùng tìm hiểu 5 khái niệm quan trọng liên quan đến việc sử dụng JavaScript như cách nhận biết truthy và falsy, truy cập ký tự trong chuỗi, sử dụng giá trị mặc định cho tham số hàm, cũng như các nguyên tắc về export và import trong ES6 modules. Hy vọng bài viết sẽ giúp bạn có cái nhìn sâu sắc hơn về JavaScript và có thể áp dụng vào thực tế trong quá trình lập trình của mình. Hãy nhớ rằng, JavaScript mang đến cho chúng ta rất nhiều cách để thực hiện các tác vụ, và hiểu các khái niệm này sẽ giúp bạn tối ưu mã nguồn của mình hơn!
source: viblo