Qua bài viết Tổng quan về JavaScript và học JS để làm gì? Chúng ta phần nào cũng hiểu được tầm ảnh hưởng của JS và bắt đầu con đường tìm hiểu thứ ngôn ngữ lập trình thú vị này.
Để học ngôn ngữ JavaScript một cách hiệu quả, chúng ta nên tìm hiểu sơ bộ qua tất cả, vạch ra một lộ trình cụ thể và sau đó sẽ học chuyên sâu vào từng vấn đề. Cho nên trong bài viết này, mình sẽ đi sơ lược qua tất cả các khái niệm cần nắm trong JavaScript chúng ta có thể tạo ra lộ trình học Javascript cho riêng mình.
Lưu ý: Bài viết này mình đi qua các khái niệm mà không giải thích cụ thể vì nó sẽ rất dài. Mình sẽ có các bài viết khác để nói sâu hơn về các vấn đề này ở Series về JavaScript, mọi người theo dõi nhé
Lộ trình học Javascript - Khái niệm cần nắm trong javascript
Khái niệm cơ bản
1. Biến (Variables) và Kiểu biến (Type Variable)
Biến là nơi chứa các giá trị để chúng ta có thể sử dụng lại sau này qua tên biến. Chúng ta có thể khai báo biến bằng var, let, const
var num;
let str = "Hello";
const NAME = "Dyno Nguyễn";
JS là ngôn ngữ sử dụng biến động (dynamic type), có nghĩa là nó có thể nhận bất kỳ kiểu dữ liệu nào mà ta truyền cho nó. JS cung cấp từ khoá typeof để chúng ta kiểm tra kiểu của biến.
Đến nay thì JS có 9 kiểu dữ liệu và chia làm 3 loại:
6 Data Types là các kiểu nguyên thuỷ (primitives): undefined, boolean, number, string, bigint, symbol.
2 Structural Types: object và function.
1 Structural Root Primitives: null
var x; // typeof x = "undefined"
x = "Dyno"; // string
x = 10; // number
x = {}; // object
x = function(){}; // function
x = null; // object
x = false; // boolean
2. Ghi chú (Comment)
Comment Trong Code
Comment trong code rất quan trọng, nó giúp người khác có thể hiểu được code của chúng ta, dễ bảo trì sau này. Vì thế nó thói quen comment code là rất tốt. Nhưng “Hãy comment tại sao phải làm như vậy” thay vì “Comment nó là cái g”.
Trình thông dịch sẽ không biên dịch câu comment của bạn.
Có 2 cách comment trong JavaScript:
// Đây là comment đơn dòng. Sử dụng dấu //
/*
Đây là commnent đa dòng.
Sử dụng dấu /* */
*/
3. Input và Output trong JS
Cách để nhập input phổ biến nhất là chúng ta sẽ dùng thẻ <input /> trong HTML, sau đó dùng JS để lấy giá trị của nó. Bạn tìm hiểu thêm ở phần DOM bên dưới.
Cách thứ 2 là dùng method prompt , trình duyệt sẽ hiển thị một popup cho chúng ta nhập dữ liệu.
var age = prompt("Nhập tuổi của bạn: ");
Về output, bạn có thể dùng các cách sau để hiển thị kết quả:
var x = 10;
console.log(x); // Cách này tiện nhất
alert(x);
document.write(x);
4. Toán tử (Operator)
Có rất nhiều toán tử trong JS, mình sẽ cung cấp các từ khoá để bạn tìm hiểu nhé.
Toán tử số học (Arithmetic Operators): + – * / % ++ — **
list itemToán tử gán (Assignment Operators): = += -= *= /= %= **=
Toán tử so sánh (Comparison Operators): == === != !== > < >= <= ?
Toán tử logic (Logical Operators): && || !
Toán tử về bit (Bitwise Operators): & | ~ ^ << >> >>>
Toán tử về kiểu (Type Operators): typeof, instanceof
Tham khảo: W3School JavaScript Operators
5. Câu điều kiện (Conditionals)
Điểu kiện rẽ nhánh giúp bạn phân loại các trường hợp xãy ra và xử lý logic nhất.
Các từ khoá: if, else, else if, switch case
const condition = 5;
if(condition > 2){
console.log("5 > 2")
}else{
console.log("5 < 2")
};
// "5 > 2" 🤣 đương nhiên rùi
6. Vòng lặp (Loop)
Vòng lặp giúp chúng ta tận dụng sức mạnh của máy tính để lặp lại có thao tác tính giống nhau nhiều lần liên tục.
Trong JS có các loại vòng lặp sau: for, while, do while, for in, for of
let sum = 0;
for(let i = 0; i < 100; ++i){
sum += i;
}
console.log(sum); // 4950
7. Hàm (Function) và Phương thức (Method)
Hàm hay chức năng nó giúp chúng ta gom nhóm các câu lệnh lại để thực hiện một công việc nhất định, và sau này thực hiện lại công việc đó chúng ta chỉ cần thực hiện lời gọi hàm.
// khai báo hàm
function sum(num1, num2){
return num1 + num2;
}
// thực hiện hàm
const result = sum(2, 3);
console.log(result); // 5
Phương thức cũng là một hàm, nhưng hàm này được định nghĩa trong một class hoặc object.
var name = "Dyno Nguyen";
name = name.toLowerCase(); phương thức toLowerCase của string
console.log(name); // "dyno nguyen"
8. Đối tượng (Object)
JS thao tác rất nhiều với đối tượng thay vì lớp. Các bạn có thể hiểu đối tượng là một sự vật, sự việc có chung tính chất và chúng ta gom nó thành một biến. VD:
// Tạo một đối tượng person chứa thông tin của một người
const person = {
name: 'Dyno',
age: 18,
country: 'Việt Nam',
talk: function(){
console.log("Hello");
}
}
// truy xuất các thuộc tính, phương thức của đối tượng
console.log(person.name); // "Dyno"
console.log(person["age"]); // 18 - cách truy xuất khác
person.talk(); // Hello
9. Mảng (Array)
Array bản chất cũng là một object. Array chứa các phần tử liên tiếp cùng kiểu dữ liệu với nhau (Thật ra, bạn hoàn toàn có thể thay đổi bất kỳ phần tử nào trong đấy khác kiểu với các phần tử còn lại, nhưng mình nghĩ điều đó là không nên vì sẽ sai đi ngữ nghĩa của array).
const arr = [1, 2, 3, 4, 5];
console.log(arr[1]); // 2
arr[1] = "Dyno"; // Không nên làm vầy
console.log(arr); // [1, "Dyno", 3, 4, 5]
10. Chuỗi (String)
Có một điều mình muốn thú nhận là làm việc với string trong JS thật sự rất sướng. Các method hỗ trợ tận răng luôn Demo chút nhé
let str = " Dyno ngUyen 123 "; // Expect: str = "dyno nguyen"
str = str.replaceAll(/\d/g,'').trim().toLowerCase();
11. Phương thức xây dựng sẵn (Built-in Methods)
Hầu như các object hay class được xây dựng sẵn trong JS đều có các method hỗ trợ cho chúng ta. Việc học các method này giúp chúng ta code nhanh và tối ưu hơn thay vì phải tự đi xây dựng lại. Mọi vài method phổ biến.
Array: map(), filter(), find(), findIndex(), includes(), concat, reduce(), sort(), …
String: indexOf(), split(), slice(), replace(), …
12. DOM (Document Object Model) & BOM (Browser Object Model)
Để xây dựng các thành phần động trong một trang website thì chúng ta cần tìm hiểu về cách thao tác với DOM và BOM.
Khái niệm nâng cao
1. Ép kiểu (Type Conversion)
Trong rất nhiều trường hợp chúng ta bắt buộc phải đổi kiểu dữ liệu của một biến để nó phù hợp với ngữ nghĩa. Đa phần thì sẽ từ string sang number hoặc ngược lại.
Có 2 dạng ép kiểu là Explicit (Rõ ràng) và Implicit (Ngầm định).
const num = 18;
const numStr = num.toString() + " tuổi"; // typeof numStr = "string" - Explicit
const str = "18";
const age = str * 1; // typeof age = "number" - Implicit
2. Phân biệt == (equality operator) với === (identity operator)
Đây là khái niệm dễ gây nhầm lẫn và khó hiểu với những người mới học. Hiểu đơn giản, với == thì nó tự động ép kiểu và sau đó so sánh, còn === sẽ so sánh trực tiếp cả về giá trị lẫn kiểu dữ liệu.
Mình khuyến khích nên dùng === để code tường minh hơn, tránh gây ra những bug không đáng có.
3. Truthy và Falsy
Truthy là các giá trị khi ép về kiểu Boolean thì trả về true. Falsy thì ngược lại.
Các giá trị Falsy: false, 0, -0, 0n, "", null, undefined, and NaN
Ngoài các giá trị trên thì tất cả còn lại đều là Truthy.
4. Tham chiếu (Pass by Reference) và Tham trị (Pass by Value)
Nếu bạn đã học qua C/C++ thì chắc cũng đã nghe đến tham chiếu và tham trị. Đó là 2 cách quản lý bộ nhớ khác nhau, bạn cần hiểu rõ để tránh nhầm lẫn trong việc so sánh và sử dụng bộ nhớ tối ưu hơn.
const a = 123;
const b = 123;
console.log(a === b); // true do so sánh 2 giá trị giống nhau (pass by value)
const c = { x : 1 };
const d = { x : 1 };
console.log(c === d); // false do so sánh 2 địa chỉ vùng nhớ khác nhau (pass by reference)
5. Sao chép nông (Shallow Copy) và Sao chép sâu (Deep Copy)
Như vấn đề về tham chiếu ở trên, khi ta copy 1 object hoặc 1 array từ 1 object khác thì nên cẩn thận, vì nếu chúng ta dùng kỹ thuật shallow copy thì rất dễ bị chung vùng nhớ, dẫn đến object bị sai không đáng có.
Mình có đề cập ở đây, bạn có thể đọc thêm: JavaScript tips & tricks
6. Khối (Block) và Phạm vi hàm (Function Scope)
Block là các đoạn code để thực hiện một chức năng nào đó mà chúng ta muốn gom nhóm nó lại, thì tất cả các code nằm trong { } thì gọi là một block.
Function scope cũng như block nhưng nó áp dụng cho phạm vi bên trong 1 hàm nào đó.
Bạn cần hiểu rõ 2 khái niệm này để dễ dàng tiếp cận với kiến thức chuyên sâu bên dưới hơn.
Khái niệm chuyên sâu và ES6+
1. Hàm tạo (Constructor Function) và từ khoá new
Đây là một cách khởi tạo ra một đối tượng trong JS, nó cũng gần giống như class vậy. Và chúng ta sẽ dùng từ khoá new để tạo ra một object đó.
function Person(name, age){
this.name = name;
this.age = age;
this.sayName = function(){
console.log("My name is " + this.name);
}
}
const dyno = new Person("Dyno", 18);
console.log(dyno.name); // "Dyno"
2. Prototypes
Đây là một điều đặc biệt của JS, prototype là một cơ chế để object có thể kế thừa có thuộc tính và phương thức với nhau, điều này giúp tiết kiệm bộ nhớ khi tạo các object.
Prototypes trong JavaScript
3. Class
Tuy JS không phải là một ngôn ngữ thuần OOP nhưng hiện nay thì JS cũng đã hỗ trợ chúng ta rất đầy đủ các tính chất OOP cho mọi người vọc vạch nhé
4. Hoisting
Khi khai báo một biến với từ khoá var thì chúng ta rất dễ bị rơi vào tình trạng hoisting và điều này dẫn đến các kết quả không mong muốn và rất khó debug.
Từ phiên bản ES6 thì JS đã hỗ trợ từ khoá const và let để thay cho việc sử dụng var.
5. Function context, từ khoá this và bind
6. Arrow function
Trong ES6 có một cách khai báo function đó chính là dùng Arrow function, đều này giúp code chúng ta gọn gàng hơn và hưởng được một số đặc tính khác những.
const myFn = () => {
// do something ...
}
7. Một vài từ khoá khác trong ES6+
Template string, arguments, call, apply, spread operator, object destructuring, …
Bạn có thể xem các tips với ES6+ tại đây nhe: JS tips & tricks
8. Các khái niệm nâng cao khác
Sau đây là một vài khái niệm nâng cao, để hiểu rõ hơn bản chất của JS thì chúng ta cần hiểu các khái niệm sau. Do nó khá phức tạp nên mình sẽ có các bài viết riêng cho các từ khoá này:
Event loop trong JS.
Strict Mode
Callback & Promise
Async/Await và bất đồng bộ trong JS
HOF (Higher Order Functions)
Cà ri à không Currying function
Clousure
IIFE (Immediately Invoked Function Expression)
Modules, Import và Export trong JS
…
Tóm tắt
Trên đây là tất cả các khái niệm mà trong lúc mình học JS thì mình đã học qua, ngoài ra còn rất nhiều thứ khác nữa.
Chia sẻ tí kinh nghiệm học JS của mình là mọi người nên học sơ bộ qua các khái niệm một lượt, sau đó bắt tay vào hiểu sâu từng khái niệm. Và để hiểu sâu về nó thì chỉ có thực hành thì mới nhanh được, đừng chỉ học mỗi lý thuyết.
Thời gian tới mình sẽ ra các bài viết khác đi sâu vào các vấn đề trên tại Series về JavaScript, mong được sự ủng hộ và góp ý của mọi người
Cảm ơn mọi người đã đọc bài viết
