Lý Thuyết Flashcards
The Event Loop
JavaScript has a runtime model based on an event loop, which is responsible for executing the code, collecting and processing events, and executing queued sub-tasks. This model is quite different from models in other languages like C and Java.
JavaScript có mô hình thời gian chạy dựa trên vòng lặp sự kiện, chịu trách nhiệm thực thi mã, thu thập và xử lý các sự kiện cũng như thực thi các tác vụ phụ được xếp hàng đợi. Mô hình này khá khác biệt so với các mô hình trong các ngôn ngữ khác như C và Java.
What is Javascript ?
Javascript is a high-level object-oriented , multi-paradigm programming language
Javascript là ngôn ngữ lập trình đa mô hình, hướng đối tượng cấp cao
- High level
- Garbage - collected
- Interepreted or just - in - time compiled
- Multi - pradigm
- Prototype - based object - oriented
- First - class functions
- Dynamic
- Single - threaded
- Non - blocking envent loop
Quy tắc đặt tên cho Biến
Chữ đầu viết thường , chữ sau viết hoa
Không bắt đầu bằng số
Có bao nhiêu kiểu dữ liệu nguyên bản ?
JavaScript has dynamic typing :
- Number
- String
- Boolean
- Undefined ( Biến khai báo nhưng không gán giá trị )
- Null : giá trị trống
We do not have to manually dèfine the data type of the value stored in a variable . Instead , data types are determined automatically
Phân biệt Let Const Var
Sử dụng từ khóa “ Let “ để khai báo các biến có thể thay đổi sau này trong quá trình thực thi chương trình
- Const để khai báo các biến không thay đổi ở bất kỳ thời điểm nào trong tương lai
Strings and template Literals
Template Literals :
Viết chuỗi string một cách liền mạch ``
Trong Javascript có 5 giá trị sai đó là ?
0, ‘ ‘, undefined, null, NaN
Statements and Expressions
Biểu thức là một đoạn mã tạo ra một giá trị
Statements thì sẽ thường kết thức bởi dấu “ ; “
Basic Array Operations
.push Thêm giá trị vào cuối mảng
.unshift Thêm giá trị vào đầu mảng
Cả 2 phương thức trên đều trả về độ dài của mảng mới
Remove Elements
.pop() Xoá phần tử cuối mảng
Phương thức này trả về phần tử đã bị loại bỏ
.shift() Xoá phần tử đầu mảng
indexOf(“ “ ) Biết vị trí của phần tử trong mảng
includes Trả về True nếu phần tử nằm trong mảng và False nếu phần tử không nằm trong mảng
Cơ chế hoạt động khi một phím nhấn trong JavaScript
Vì vậy khi sự kiện xảy ra , chúng tôi sẽ gọi hàm này với đối tượng sự kiện làm đối số
Như thế nào là ngôn ngữ bậc cao
Ngôn ngữ bậc thấp thì bạn phải quản lý các tài nguyên như Ram , Bộ nhớ một cách thủ công
Ngôn ngữ bậc cao thì không cần phải làm nhưng việc đó => dễ học , dễ sử dụng , nhưng nhược điểm là các chương trình sẽ không bao giờ nhanh hoặc được tối ưu hoá như các chương trình C
—
Bên cạnh đó là việc thu gom rác ( Garbage - collected )
Tự động loại bỏ các đối tượng cũ ra khỏi bộ nhớ máy tính
Multi - paradigm
- Procedural programming : Tổ chức mã theo cách tuyến tính
- OOP
- Functional programming
Nhiều ngôn ngữ chỉ có 1 loại , nhưng với JavaScript nó có tất cả , nên nó được gọi là đa mô hình
What is a JavaScript Engine ?
Là một chương trình máy tính thực thi ( Executes ) mã JavaScript
Call Stack : Chứa các mã JavaScript được thực thi
Heap : Chưa các Object trong memory
Compilation và Interpretation
Mọi chương trình đều cần chuyển đổi thành mã máy và có thể xảy ra bằng cách sử dụng biên dịch hoặc thông dịch .
Trong quá trình biên dịch , toàn bộ mã nguồn được chuyển thành mã máy cùng một lúc . Và mã máy này sau đó được viết thành một tệp di động có thể được thực thi trên bất kỳ máy tính nào
Just - in - time ( JIT ) : biên dịch toàn bộ mã thành mã máy cùng một lúc và sau đó thực thi nó ngay lập tức
JavaScript Runtime là gì ?
Một JavaScript Runtime điển hình cũng bao gồm một hàng đợi gọi lại ( Callback Queue ) . Đây là một cấu trúc dữ liệu chứa tất cả các hàm gọi lại sẵn sàng được thực thi .
Ví dụ : khi bấm OnClick thì hàm gọi lại sẽ được đưa vào Callback Queue , nếu Call Stack trống thì sẽ được đưa đến Call Stack để thực thi ( Điều này xảy ra bởi một thứ gọi là vòng lặp sự kiện * Event Loop )
Event Loop :
- Về cơ bản , vòng lặp sự kiện nhận các hàm gọi lại từ Callback Queue và đặt chúng vào Call Stack để chúng có thể được thực thi
Execution contexts là gì
Execution contexts là một môi trường trong đó một đoạn JavaScript được thực thi
Chỉ có một Global Execution Context
Cách các hàm hoạt động sau khi top-level code đã được thực thi :
- Đối với mỗi và mọi lệnh gọi hàm và ngữ cảnh thực thi ( Execute Contexts ) của bạn sẽ được tạo ra chứa tất cả thông tin cần thiết để chạy chính xác hàm đó .
What’s inside execution context ?
- Variable Enviroment
- let , const and var declarations
- Functions
- arguments object - Scope Chain
- bao gồm các tham chiếu đến các biến nằm bên ngoài hàm hiện tại . Nó được lưu trữ trong mỗi ngữ cảnh thực thi ( Execute Context ) - this keyword
Important :
- Execute Contexts của các hàm arrow , không có từ khoá “ arguments “ và “this “ . Thay vào đó nó dùng 2 từ khoá này từ các hàm cha mẹ gần nhất của nó .
Scoping and scope in JavaScript : Concepts
Scoping: được tổ chức và truy cập bởi công cụ JavaScript
Lexical scoping : có nghĩa là cách các biến được tổ chức và truy cập hoàn toàn được kiểm soát bởi vị trí của các hàm và các khối trong mã của chương trình
Scope: là không gian hoặc môi trường trong đó một biến nhất định được khai báo
Trong JavaScript có Global scope , Function Scope , and Block Scope
Scope of a variable : về cơ bản là toàn bộ vùng mã của chúng ta , nơi một biến nhất định có thể được truy cập
The 3 Types of Scope
Global Scope :
- Dành cho top-level code , được khai báo bên ngoài bất kỳ hàm nào hoặc khối nào .
- Các biến này có thể truy cập ở mọi nơi trong chương trình của chúng tôi , trong tất cả các hàm và tất cả các khối
Function Scope :
- Mỗi và mọi hàm đều tạo ra một phạm vi ( Scope )
- Và các biến được khai báo bên trong phạm vi hàm đó chỉ có thể truy cập bên trong hàm đó = > cũng được gọi là Local Scope
Block Scope :
- Cũng giống các hàm , các biến được khai báo bên trọng một khối chỉ có thể truy cập bên trong khối đó chứ không phải bên ngoài khối đó
- Phạm vi của khối chỉ áp dụng cho các biến được khai báo bằng let hoặc const
Hoisting in JavaScript
Về cơ bản , mã được quét để tìm các khai báo biến trước khi nó được thực thi .
Hoisting không hoạt động giống nhau cho các loại biến :
Primitives , Objects and the JavaScript Engine
Primitive types được lưu trữ trong Call Stacks
Trong khi đó Object ( Reference types ) được lưu trữ trong Heap
Muốn giải quyết vấn đề với việc copy Object :
const jessicaCopy = Object.assign( { } , jessica2);
- Chỉ giải quyết vấn đề ở cấp độ sơ cấp , nếu trong Object có thêm Object thì kết quả vẫn như vậy
Spread Operator
Toán tử Spread để mở rộng một mảng về cơ bản thành tất cả các phần tử của nó .
Vì vậy , về cơ bản toán tử Spread lấy tất cả các phần tử từ mảng và nó cũng không tạo ra các biến mới . Và do đó , chúng ta chỉ có thể sử dụng nó ở những nơi mà nếu không chúng ta sẽ viết các giá trị được ngăn cách bằng dấu phẩy
Iterables : arrays , strings , maps, sets. NOT objects
Toán tử AND
Nếu gặp điều kiện sai thì sẽ dừng lại , còn nếu đúng thì sẽ đến cuối
The Nullish Coalescing Operator (??)
Null and undefined ( NOT 0 or ‘ ‘ )
Toán tử OR
Nếu gặp giá trị True thì sẽ trả về luôn , còn nếu False thì sẽ đi dần đến cuối
for of
for ( const item of menu ) console.log(item);
!!! continue và break dùng được trong for of
Cũng dùng được hủy cấu trúc cho vòng for of
for ( const [i, el ]of menu.entries ) console.log(item);
Optional Chaining (?.)
console.log(restaurant.openingHours.mon?.open);
Nếu 0 hoặc ‘ ‘ thì vẫn sẽ trả về
Map là gì ? Phương thức tạo Map khác là gì ?
Map chúng ta có thể sử dụng để ánh xạ các giá trị thành khóa
Tạo Map
const rest = new Map();
Thêm nội dung vào Map
console.log(rest.set(‘name’, ‘Classico Italiano’));
rest.set(1, ‘Firenze, Italy’);
console.log(rest.set(2, ‘Lisbon, Portugal’));
rest
.set(‘categories’, [‘Italian’, ‘Pizzeria’, ‘Vegetarian’, ‘Organic’])
.set(‘open’, 11)
.set(‘close’, 23)
.set(true, ‘We are open :D’)
.set(false, ‘We are closed :( ‘);
console.log(rest.get(‘name’));
Cách viết mới :
const question = new Map([
[‘question’, ‘What is the best programming language in the world?’],
[1, ‘C’],
[2, ‘Java’],
[3, ‘JavaScript’],
[‘correct’, 3],
[true, ‘correct’],
[false, ‘Try Again’],
]);
console.log(question);
Closures
Bất kỳ hàm nào cũng luôn có quyền truy cập vào môi trường biến của ngữ cảnh thực thi mà hàm được tạo
Vì vậy kết nối này được gọi là Closure : Khi đó , sự đóng lại về cơ bản là môi trường biến này được gắn với hàm , chính xác như tại thời điểm và địa điểm mà hàm được tạo ra
Closures Summary :
- bao đóng là môi trường đóng trên biến của ngữ cảnh thực thi trong đó một hàm được tạo ngay cả sau khi ngữ cảnh thực thi không còn nữa
- Một bao đóng cung cấp cho một hàm truy cập vào tất cả các biến của hàm cha của nó
Numeric Separators ( Khi viết số lớn dễ đọc hơn )
Sử dụng dấu “ _ “ khi viết các con số
