1.

JSX

K/n: JSX là viết tắt của JavaScript XML. XML là ngôn ngữ đánh dấu giống như HTML. JSX
ra đời để hỗ trợ có thể giúp viết Html trong file JavaScript hoặc trong các thẻ JavaScript.

JSX cho phép chúng ta viết các phần tử HTML bằng JavaScript và đặt chúng vào DOM
mà không cần bất kỳ phương thức createElement() hoặc appendChild() nào.

Tuy nhiên JSX không thể nào truyền thẳng cho React DOM được nên nó cần một bước
trung gian. Một thư viện thông dụng là Babel - một thư viện của JavaScript chuyên dùng để
phân tích và chuyển đổi cú pháp. Thông dụng nhất là biết đến Babel khi nó sử dụng để
chuyển đổi những cú pháp của JS ES6 trở lên trở thành ES5. Việc chuyển đổi này nhằm
mục đích hỗ trợ hầu hết các trình duyệt chạy JS có thể chạy được project vì đôi khi có trình
duyệt cũ không hỗ trợ cú pháp JS ES6. Khi đó Babel sẽ chuyển cú pháp của ES6 về ES5.

JSX được sử dụng như thế nào?

- Sử dụng 1 thẻ cha duy nhất: để có thể trả về nhiều phần tử trong 1 đoạn mã JSX
cần phải bọc chúng trong 1 thẻ cha duy nhất.
- Đóng tất cả các thẻ: JSX yêu cầu tất cả các thẻ phải được đóng giống như trong
Html
- Có thể tạo ra biến và gán đoạn mã JSX cho biến đó.

- Sử dụng cặp dấu ngoặc nhọn: Với JSX bạn có thể viết biểu thức như biến React,
thuộc tính hoặc bất kỳ biểu thức JavaScript nào bên trong dấu ngoặc nhọn

- ClassName: class là một thuộc tính được sử dụng nhiều trong Html, trong JSX nó
được thay thế bằng className

- Câu lệnh điều kiện if-else: để dử dụng các câu lệnh điều kiện, cần phải đặt chúng
bên ngoài JSX
 2. ES5

ES5 là gì? ES5 là viết tắt của "ECMAScript 5," là phiên bản thứ 5 của tiêu chuẩn
ECMAScript. Phiên bản này được phát hành vào năm 2009 và đã định rõ một số tính năng
và cú pháp mới cho ngôn ngữ JavaScript.

- Strict Mode: Sử dụng "use strict"; ở đầu tệp hoặc hàm để bật chế độ nghiêm
ngặt. Nó giúp viết mã sạch hơn, ngăn việc sử dụng đối tượng mà không khai
báo, xóa đối tượng, chức năng không được phép, …

- Phạm vi biến: ES5 cho phép sử dụng var để tạo phạm vi biến mới bên trong
các khối lệnh, không chỉ bên trong hàm.

- Array Methods: ES5 giới thiệu nhiều phương thức mới cho mảng như
forEach, map, filter, reduce, every, và some. Các phương thức này giúp thao
tác với mảng dễ dàng hơn, không cần sử dụng các vòng lặp truyền thống.

- Phạm vi hàm (Function Scope): Biến được định nghĩa trong một hàm chỉ có
thể truy cập bởi hàm đó và các hàm con của nó. Điều này giúp tránh xung đột
biến và tạo ra một phạm vi biến tốt hơn.

- String Methods: ES5 cung cấp các phương thức chuỗi như trim(), charAt(),
substring(), và split(), giúp thao tác với chuỗi dễ dàng hơn.

- JSON (JavaScript Object Notation): ES5 bổ sung hỗ trợ tích hợp cho JSON
qua phương thức JSON.parse() để chuyển đổi chuỗi JSON thành đối tượng
JavaScript và JSON.stringify() để chuyển đổi đối tượng JavaScript thành
chuỗi JSON.

- Object.defineProperty(): ES5 cho phép bạn thêm và xóa thuộc tính của đối
tượng thông qua Object.defineProperty().

- Function: ES5 cung cấp cách định nghĩa hàm mới sử dụng từ khóa function,
cho phép định nghĩa hàm một cách rõ ràng và dễ đọc hơn.

3. JS với ES6
ES6 là bản sửa đổi lớn thứ hai của JavaScript.

● Kiểu dữ liệu trong JS: là các thuộc tính(biến) dùng để lưu trữ thông tin, giá trị mà khi
chương trình biên dịch sinh ra.
 - Kiểu dữ liệu nguyên thủy:
+ Number: Các số nguyên hoặc số thực.
+ String: là các text, text có thể có một hoặc nhiều ký tự.
+ Boolean: chỉ có 2 giá trị là true hoặc false.
+ Undefine: là các giá trị không xác định, biến không gán được giá trị.
+ Null: không có giá trị nào cả.
=> Các kiểu dữ liệu nguyên thủy được truyền theo tham trị. Khi truyền 1 tham trị vào 1 hàm
là tạo ra 1 bản sao mới. Do đó bất kỳ sự thay đổi nào được thực hiện bên trong hàm, không
ảnh hưởng đến giá trị của biến gốc bên ngoài hàm đó bởi bản sao và bản gốc hoàn toàn
độc lập.

- Kiểu dữ liệu không nguyên thủy:

+ Object: là một đối tượng với các thuộc tính
+ Array: kiểu mảng, là nhóm các giá trị giống nhau
+ RegExp: Biểu thức chính quy.
=> Các kiểu dữ liệu không nguyên thủy trong JavaScript được truyền theo tham chiếu. Khi
truyền một tham chiếu vào hàm là đang truyền trực tiếp đến hàm. Do đó các thay đổi bên
trong hàm sẽ ảnh hưởng đến hàm gốc.

● Var: biến được khai báo bởi var có phạm vi truy cập toàn cục, không phụ thuộc vào
block scope. Var có thể khai báo trùng lặp.

● Contants: hằng số là 1 số không đổi, vì thế contant được hiểu là khi 1 biến là contant
thì giá trị của biến sẽ không thay đổi sau khi gán giá trị ban đầu.

● Let: biến được khai báo bởi let có phạm vi truy cập trong block scope mà nó được
khai báo. Let không thể khai báo lại 1 biến trong cùng 1 phạm vi.
● Scope: dùng để xác định phạm vi truy cập của biến, hàm, hoặc các khối mã trong
chương trình.
- Block-Scoped Variables: Khi một biến được khai báo bằng let và const thì nó
chỉ có thể truy cập bởi các block mà nó được định nghĩa bên trong hoặc các
block bên trong block nó khai báo.

- Block-Scoped Functions: Biến được khai báo bằng let và const trong một
hàm chỉ có thể truy cập bởi hàm đó và các hàm con bên trong, các hàm bên
ngoài khai báo không thể truy cập.

- Scope của biến:

+ Block Scope: các biến được khai báo bởi let và const bên trong block
{ } không thể được truy cập từ bên ngoài khối

+ Function Scope: biến được khai báo bằng var, let và const khi được
khai báo bên trong hàm không thể được truy cập từ bên ngoài hàm

+ Global Scope : các biến được khai báo bằng var, let và const bên
ngoài một khối có thể truy cập từ mọi nơi trong chương trình.
- Scope chain: là công cụ để js sử dụng xác định phạm vi (scope) của biến
hoặc hàm được gọi trong mã. Khi gọi đến 1 biến, js sẽ tìm kiếm nó theo một
quy trình được gọi là "scope chain".
+ Local scope: Tìm kiếm biến trong phạm vi cục bộ
+ Outer scopes: Tìm kiếm ở phạm vi các hàm cha theo trình tự từ bên
ngoài vào trong
 + Global scope: Tìm kiếm trong phạm vi toàn cục
+ Nếu không tìm thấy: Nếu không tìm thấy biến hoặc hàm trong bất kỳ
phạm vi nào trong "scope chain" và cũng không tìm thấy trong phạm
vi toàn cục, trình thông dịch sẽ báo lỗi và ném ra một ngoại lệ
(exception).

- Closure: là một hàm mà có thể truy cập các biến bên ngoài của nó, ngay cả
khi hàm đã hoàn thành việc thực thi của nó. Closures cho phép lưu trữ trạng
thái và dữ liệu trên thời gian khi hàm gọi hoàn thành. Closure có 3 scope
chain, đó là:
+ Có thể truy cập đến biến của chính nó (biến được định nghĩa trong
dấu ngoặc nhọn của nó).
+ Có thể truy cập biến của hàm bên ngoài.
+ Có thể truy cập biến toàn cục (global).

● Arrow Function: cung cấp cú pháp ngắn gọn để định nghĩa hàm trong JavaScript

● Extended Parameter Handling:

- Default Parameter Values: nếu một tham số không được truyền vào hoặc
được truyền vào với giá trị undefined, giá trị mặc định sẽ được sử dụng.
- Rest Parameter: ký hiệu bằng dấu ba chấm (...) cho phép truyền vào một số lượng
đối số không giới hạn.

- Spread operator: cũng được ký hiệu bằng dấu ba chấm (...) cho phép lồng các phần
tử của một mảng vào một mảng khác

● Template Literals
- String Interpolation: cho phép nhúng các biến vào chuỗi một dòng hoặc nhiều
dòng.

- Custom Interpolation: cho phép sử dụng hàm tùy chỉnh bằng cách sử dụng
tiền tố của hàm và dấu `` để thay đổi nội dung của hàm trước khi nhúng nó
vào chuỗi
- Raw String Access: sử dụng để giữ nguyên định dạng chuỗi gốc khi chuỗi có
các ký tự như /n,//.

● Extended Literals
- Binary & Octal Literal: sử dụng để biểu diễn các số nguyên dưới dạng nhị
phân và bát phân bằng cách sử dụng tiền tố 0b và 0o

- Unicode String & RegExp Literal: hỗ trợ sử dụng mã Unicode để biểu diễn các ký tự
trong chuỗi
● Enhanced Regular Expression: giúp chuỗi có thêm các tính năng về so sánh và khớp
các ký tự
- Regular Expression Sticky Matching: so sánh và khớp các ký tự từ vị vị trí
hiện tại, nếu thành công chuyển sang vị trí tiếp theo mà không phải so sánh
và khớp từ vị trí đầu tiên.

- Unicode Regular Expressions: so khớp chuỗi unicode

- Line-by-Line Matching : So khớp từng dòng của chuỗi

● Enhanced Object Properties: hỗ trợ việc khai báo và sử dụng các Object ngắn gọn
hơn
- Property Shorthand: Rút ngắn cú pháp định nghĩa cho đối tượng
- Computed Property Names: sử dụng biểu thức để đặt tên cho các Object

- Method Properties: định nghĩa phương thức của Object mà không cần sử
dụng Function
● Destructuring Assignment: tách các giá trị từ mảng hoặc thuộc tính từ Object thành
các biến riêng biệt.
- Array Matching: Tách mảng thành các biến riêng biệt

- Object Matching: Tách các thuộc tính từ Object thành các biến riêng biệt

- Default Values: Gán các giá trị mặc định để phân tách mảng và thuộc tính từ Object
● Modules: giúp chia nhỏ chương trình thành các module độc lập chứa biến số với var,
let hay const, class, function... để sử dụng chúng ở file JS khác.
- Value Export/Import: sử dụng import để sử dụng biến hoặc hàm ở module
khác, sử dụng export để xuất 1 biến hoặc hàm ở module

- Default & Wildcard: sử dụng Export default để xuất một giá trị duy nhất từ một
module và sử dụng Wildcard Import để nhập toàn bộ các giá trị từ một module mà
không cần phải nhập từng giá trị.
● Class: trong lập trình hướng đối tượng, class được sử dụng để tạo đối tượng có
thuộc tính (attribute) và phương thức (method).Bên trong 1 class sử dụng
constructor để định nghĩa hàm, định nghĩa các phương thức bằng cặp dấu {}. Sử
dụng extends để sử dụng tính kế thừa trong Class. Trong class có thể sử dụng get
và set để thiết lập và lấy giá trị.

● Symbol: là một giá trị duy nhất và không thay đổi, được sử dụng làm key cho các
thuộc tính của Object để tránh xảy ra việc hai thuộc tính trong một Object có cùng
tên.
● Iterators: vòng lặp được sử dụng để thực thi cùng một khối mã lặp đi lặp lại với cùng
một điều kiện. Hiện tại JS hỗ trợ 5 loại vòng lặp:
- For: lặp qua một dãy các phần tử, thường được sử dụng khi đã biết trước số
lần lặp.

- for...in: lặp qua các thuộc tính của object hoặc của mảng
 - for…of: được sử dụng để để duyệt qua các phần tử như Array, String, Map,
Set hoặc các Object có vòng lặp

- While: lặp qua các phần tử đến khi điều kiện sai thì vòng lặp sẽ dừng. Nếu
đièu kiện sai ngay ở phần tử đầu tiên thì vòng lặp sẽ không được thực hiện.

- do…while: lặp qua các phần tử đến khi điều kiện sai thì vòng lặp sẽ dừng. Nếu điều
kiện sai thì ít nhất vẫn có 1 vòng lặp được thực hiện. Tức là nó sẽ thực hiện vòng lặp
trước khi kiểm tra điều kiện, còn while sẽ kiểm tra điều kiện trước khi thực hiện vòng
lặp.

● Generators : được sử dụng để dừng hoặc tiếp tục thực hiện các hàm trong quá trình
thực thi. Sử dụng Generator bằng cách sử dụng từ khóa function*. Generator sử
dụng hàm next để tiếp tục thực thi và cho đến khi gặp yield thì sẽ dừng lại.

● Map/Set & WeakMap/WeakSet: là các collection trong ES6 dùng để để lưu trữ dữ
liệu và quản lý các giá trị duy nhất
- Map: chứa các cặp key-value trong đó các khóa có thể là bất kỳ kiểu dữ liệu
nào. Trong Map có thể thực hiện thêm, xóa, ghi đè, tìm kiếm với các cặp key-
value
 - Set: là tập hợp các giá trị tồn tại duy nhất, không bị trùng lặp. Set không sử
dụng key để gọi các giá trị như trong map, nó duy trì thứ tự các phần tử khi
được thêm vào. Trong set cũng có thể thực hiện các hành động thêm, xóa
hoặc so sánh.

- WeakMap: Tương tự như map. Tuy nhiên key trong map phải là Object và
chúng sẽ được xóa nếu không được sử dụng.

- WeakSet: tương tự như WeakMap, WeakSet cũng chỉ có thể chứa object, và
nếu một phần tử trong WeakSet không được sử dụng nó sẽ bị xóa để giải
phóng bộ nhớ.

● Array: được sử dụng để lưu trữ một tập hợp các giá trị có thứ tự trong một biến duy
nhất và truy cập chúng bằng cách sử dụng chỉ số (index). Mảng chứa các loại dữ
liệu khác nhau, bao gồm số, chuỗi, đối tượng.
- Khởi tạo mảng: bằng cách sử dụng dấu ngoặc vuông [] và dấu , để liệt kê các
phần tử hoặc sử dụng hàm khởi tạo new Array().

- Truy cập các phần tử trong mảng: để truy cập các phần tử trong mảng sử
dụng arr[index] với index là chỉ số của phần tử.
 - Length: sử dụng để xác định độ dài của mảng

- Thêm/ xóa phần tử của mảng: thêm một phần tử vào cuối mảng bằng
phương thức push() và xóa phần tử cuối cùng bằng phương thức pop().

- Lặp: Sử dụng phương thức forEach() để lặp qua từng phần tử của mảng và
thực hiện các hành động trên từng phần tử. Sử dụng map() để lặp qua mảng
và tạo ra một mảng mới từ các giá trị của mảng ban đầu bằng cách sử dụng
filter().

- Phương thức find() và findIndex():find() trả về giá trị của phần tử mảng đầu
tiên thỏa mãn điều kiện, trong khi findIndex() trả về chỉ số của giá trị đó.

● New Built-In Methods:

- Object Property Assignment: sử dụng Object.assign() để sao chép các thuộc
tính có khả năng sử dụng các vòng lặp như chuỗi từ Object và gán chúng
vào Object khác.

- String Repeating: sử dụng String.prototype.repeat() để lặp lại một chuỗi nhiều

lần

- String Searching: sử dụng để tìm kiếm một chuỗi con trong một chuỗi cha
+ String.prototype.includes(substring): dùng để tìm kiếm xem chuỗi con
có tồn tại trong chuỗ cha không. Kết quả trả về dưới dạng true or false
 + String.prototype.startsWith(substring): tìm kiếm xem chuỗi cha có bắt
đầu bằng chuỗi con không. Kết quả trả về dưới dạng true or false

+ String.prototype.endsWith(substring): tìm kiếm xem chuỗi cha có kết

thúc bằng chuỗi con không. Kết quả trả về dưới dạng true or false

+ String.prototype.indexOf(substring): tìm kiếm vị trí đầu tiên của chuỗi

con trong chuỗi cha
+ String.prototype.lastIndexOf(substring): tìm kiếm vị trí cuỗi cùng của
chuỗi con trong chuỗi cha. Nếu không tồn tại chuỗi con trong chuỗi
cha thì trả về -1
- Number Type Checking: kiểm tra số và số không hữu hạn
+ Number.isNaN(value): Dùng để kiểm tra giá trị có phải là NaN (Not-a-
Number) . Dữ liệu trả về dưới dạng true or false
+ Number.isFinite(value): Kiểm tra xem giá trị value có phải là một số
hữu hạn không. Dữ liệu trả về dưới dạng true or false
● Stack: Stack là một danh sách có thứ tự mà phép chèn và xóa được thực hiện tại
đầu cuối của danh sách.

Stack có 2 phương thức chính:

- Push: Thêm một phần tử mới vào đỉnh của ngăn xếp.
- Pop: Loại bỏ phần tử ở đỉnh của ngăn xếp và trả về nó.
Trong JS stack được biết đến với thuật ngữ “Call Stack” dùng để theo dõi và quản lý
luồng thực thi của các hàm trong chương trình. Nói một cách dễ hiểu thì với call
stack hàm gọi đầu tiên là hàm chạy cuối cùng. Sau khi mỗi hàm chạy xong nó sẽ
được loại ra khỏi đỉnh của ngăn xếp. Trong một số trường hợp sẽ xảy ra việc tràn
đỉnh ngăn xếp.
● Heap: là nơi lưu trữ và quản lý bộ nhớ bao gồm những dữ liệu được tạo ra trong quá
trình chạy chương trình.
- Vòng đời bộ nhớ:
+ Cấp phát bộ nhớ - bộ nhớ được cấp phát bởi hệ điều hành cho phép
các chương trình sử dụng.
+ Sử dụng bộ nhớ - các hoạt động đọc và ghi diễn ra khi các biến được
sử dụng.
+ Giải phóng bộ nhớ - đây là lúc giải phóng hoàn toàn bộ nhớ khi không
cần dùng đến nữa.