Javascript tuyển tập - Phần 2

newbiejavascriptfrontendbackend
Javascript tuyển tập - Phần 2
8k 3 tháng trước

Trong phần 2, chúng ta sẽ tìm hiểu về cách làm việc với biến trong JavaScript, bao gồm khai báo, gán giá trị, và thay đổi giá trị của biến. Ngoài ra, chúng ta cũng sẽ khám phá phạm vi (scope) trong JavaScript và một số hàm thường dùng.

Khai báo Biến

JavaScript cung cấp ba từ khóa để khai báo biến: var, let, và const.

var

  • Phạm vi hàm: Biến khai báo bằng var có phạm vi trong hàm chứa nó.
  • Hoisting: Biến var được hoisting lên đầu phạm vi của nó, nhưng chỉ hoisting phần khai báo, không hoisting phần gán giá trị.

let

  • Phạm vi khối: let có phạm vi trong khối code (block) chứa nó.
  • Không hoisting giá trị: let cũng được hoisting nhưng nằm trong “Temporal Dead Zone” cho đến khi gặp dòng khai báo.

const

  • Phạm vi khối: Tương tự let, const có phạm vi trong khối code.
  • Không thể thay đổi giá trị: Biến const phải được gán giá trị khi khai báo và không thể gán lại sau đó.

Hiểu rõ hơn về Hoisting

Hoisting là một hành vi trong JavaScript khi các khai báo biến và hàm được đưa lên đầu phạm vi của chúng trước khi code được thực thi.

Hoisting với var

Khi sử dụng var, JavaScript hoisting phần khai báo biến lên đầu phạm vi, nhưng không hoisting phần gán giá trị.

Trong ví dụ trên, JavaScript xử lý như sau:

Hoisting với let và const - Temporal Dead Zone

let và const cũng được hoisting, nhưng khác với var, chúng không được khởi tạo với giá trị undefined. Thay vào đó, chúng tồn tại trong “Temporal Dead Zone” cho đến khi đến dòng khai báo.

Bảng so sánh giữa var, let và const

Đặc điểm var let const
Phạm vi Global scope Block scope Block scope
Hoisting Hoisted và khởi tạo với undefined Hoisted nhưng không khởi tạo (TDZ) Hoisted nhưng không khởi tạo (TDZ)
Gán lại giá trị Có thể Có thể Không thể
Khai báo lại Có thể Không thể trong cùng phạm vi Không thể trong cùng phạm vi
Khởi tạo Không bắt buộc Không bắt buộc Bắt buộc
Giới thiệu từ ES1 (1997) ES6 (2015) ES6 (2015)

Lưu ý khi sử dụng ba từ khóa khai báo

  1. Sử dụng var:

    • Tránh sử dụng var trong code mới
    • Chỉ nên sử dụng khi cần tương thích với trình duyệt cũ không hỗ trợ ES6
    • Cẩn thận với hoisting và phạm vi

  2. Sử dụng let:

    • Dùng khi giá trị biến cần thay đổi
    • Phù hợp cho các biến counter, các giá trị tạm thời
    • Nên khai báo càng gần nơi sử dụng càng tốt

  3. Sử dụng const:

    • Ưu tiên sử dụng const làm mặc định
    • Dùng cho các giá trị không thay đổi, tham chiếu không đổi
    • Lưu ý: với object và array, nội dung bên trong vẫn có thể thay đổi

Gán Giá trị cho Biến

Toán tử gán = được sử dụng để gán giá trị cho biến.

Thay đổi Giá trị của Biến

Biến khai báo bằng var hoặc let có thể thay đổi giá trị trong quá trình thực thi.

Phạm vi trong JavaScript

Scope là gì?

Scope (phạm vi) xác định nơi biến có thể được truy cập trong code.

Global Scope

Biến khai báo ngoài mọi hàm hoặc khối code có phạm vi toàn cục.

Local Scope

Biến khai báo trong hàm hoặc khối code có phạm vi cục bộ.

Lưu ý khi sử dụng Scope

  • Tránh sử dụng quá nhiều biến toàn cục để giảm thiểu xung đột và lỗi.
  • Sử dụng let và const để kiểm soát phạm vi biến chặt chẽ hơn.
  • Ưu tiên phạm vi nhỏ nhất có thể cho biến.

Một số Hàm Thường Dùng

alert()

Hiển thị hộp thoại thông báo.

confirm()

Hiển thị hộp thoại xác nhận với hai nút OK và Cancel.

setTimeout()

Thực thi hàm sau một khoảng thời gian.

setInterval()

Thực thi hàm định kỳ sau mỗi khoảng thời gian.

0

Tóm cái váy lại

Trong phần tiếp theo, chúng ta sẽ khám phá sâu hơn về các toán tử, biểu thức cơ bản, các kiểu so sánh, câu lệnh rẽ nhánh, vòng lặp bờ la bờ la. Nói chung là nếu mình khum lười hihi. Cảm ơn các bạn đã đọc ạaa

0%
\n```\n\n\n\n---\n\n### `let`\n\n- **Phạm vi khối**: `let` có phạm vi trong khối code (block) chứa nó.\n- **Không hoisting giá trị**: `let` cũng được hoisting nhưng nằm trong \"Temporal Dead Zone\" cho đến khi gặp dòng khai báo.\n\n\n\n```html\n
\n\n\n```\n\n\n\n---\n\n### `const`\n\n- **Phạm vi khối**: Tương tự `let`, `const` có phạm vi trong khối code.\n- **Không thể thay đổi giá trị**: Biến `const` phải được gán giá trị khi khai báo và không thể gán lại sau đó.\n\n\n\n```html\n
\n\n\n```\n\n\n\n---\n\n## Hiểu rõ hơn về Hoisting\n\nHoisting là một hành vi trong JavaScript khi các khai báo biến và hàm được đưa lên đầu phạm vi của chúng trước khi code được thực thi.\n\n### Hoisting với `var`\n\nKhi sử dụng `var`, JavaScript hoisting phần khai báo biến lên đầu phạm vi, nhưng không hoisting phần gán giá trị.\n\n\n\n```html\n
\n\n\n```\n\n\n\nTrong ví dụ trên, JavaScript xử lý như sau:\n\n\n\n```html\n
\n\n\n```\n\n\n\n---\n\n### Hoisting với `let` và `const` - Temporal Dead Zone\n\n`let` và `const` cũng được hoisting, nhưng khác với `var`, chúng không được khởi tạo với giá trị `undefined`. Thay vào đó, chúng tồn tại trong \"Temporal Dead Zone\" cho đến khi đến dòng khai báo.\n\n---\n\n## Bảng so sánh giữa var, let và const\n\n| Đặc điểm | var | let | const |\n| ------------------- | ----------------------------------- | ---------------------------------- | ---------------------------------- |\n| **Phạm vi** | Global scope | Block scope | Block scope |\n| **Hoisting** | Hoisted và khởi tạo với `undefined` | Hoisted nhưng không khởi tạo (TDZ) | Hoisted nhưng không khởi tạo (TDZ) |\n| **Gán lại giá trị** | Có thể | Có thể | Không thể |\n| **Khai báo lại** | Có thể | Không thể trong cùng phạm vi | Không thể trong cùng phạm vi |\n| **Khởi tạo** | Không bắt buộc | Không bắt buộc | Bắt buộc |\n| **Giới thiệu từ** | ES1 (1997) | ES6 (2015) | ES6 (2015) |\n\n---\n\n## Lưu ý khi sử dụng ba từ khóa khai báo\n\n1. **Sử dụng `var`**:\n\n - Tránh sử dụng `var` trong code mới\n - Chỉ nên sử dụng khi cần tương thích với trình duyệt cũ không hỗ trợ ES6\n - Cẩn thận với hoisting và phạm vi\n\n2. **Sử dụng `let`**:\n\n - Dùng khi giá trị biến cần thay đổi\n - Phù hợp cho các biến counter, các giá trị tạm thời\n - Nên khai báo càng gần nơi sử dụng càng tốt\n\n3. **Sử dụng `const`**:\n - Ưu tiên sử dụng `const` làm mặc định\n - Dùng cho các giá trị không thay đổi, tham chiếu không đổi\n - Lưu ý: với object và array, nội dung bên trong vẫn có thể thay đổi\n\n\n\n```html\n
\n\n\n```\n\n\n\n---\n\n## Gán Giá trị cho Biến\n\nToán tử gán `=` được sử dụng để gán giá trị cho biến.\n\n\n\n```html\n
\n\n\n```\n\n\n\n---\n\n## Thay đổi Giá trị của Biến\n\nBiến khai báo bằng `var` hoặc `let` có thể thay đổi giá trị trong quá trình thực thi.\n\n\n\n```html\n
\n\n\n```\n\n\n\n---\n\n## Phạm vi trong JavaScript\n\n### Scope là gì?\n\nScope (phạm vi) xác định nơi biến có thể được truy cập trong code.\n\n### Global Scope\n\nBiến khai báo ngoài mọi hàm hoặc khối code có phạm vi toàn cục.\n\n\n\n```html\n
\n\n\n```\n\n\n\n---\n\n### Local Scope\n\nBiến khai báo trong hàm hoặc khối code có phạm vi cục bộ.\n\n\n\n```html\n
\n\n\n```\n\n\n\n### Lưu ý khi sử dụng Scope\n\n- Tránh sử dụng quá nhiều biến toàn cục để giảm thiểu xung đột và lỗi.\n- Sử dụng `let` và `const` để kiểm soát phạm vi biến chặt chẽ hơn.\n- Ưu tiên phạm vi nhỏ nhất có thể cho biến.\n\n---\n\n## Một số Hàm Thường Dùng\n\n### `alert()`\n\nHiển thị hộp thoại thông báo.\n\n\n\n```html\n\n\n\n```\n\n\n\n---\n\n### `confirm()`\n\nHiển thị hộp thoại xác nhận với hai nút OK và Cancel.\n\n\n\n```html\n\n
\n\n\n```\n\n\n\n---\n\n### `setTimeout()`\n\nThực thi hàm sau một khoảng thời gian.\n\n\n\n```html\n\n
\n\n\n```\n\n\n\n---\n\n### `setInterval()`\n\nThực thi hàm định kỳ sau mỗi khoảng thời gian.\n\n\n\n```html\n\n
0
\n\n\n```\n\n\n\n---\n\n## Tóm cái váy lại\n\nTrong phần tiếp theo, chúng ta sẽ khám phá sâu hơn về các toán tử, biểu thức cơ bản, các kiểu so sánh, câu lệnh rẽ nhánh, vòng lặp bờ la bờ la. Nói chung là nếu mình khum lười hihi. Cảm ơn {{USERNAME}} đã đọc ạaa","image":"https://service.duonguyen.site/icons/javascript.jpg","view_count":7959,"path":"/blogs/javascript-tuyen-tap-phan-2"}}