26 khái niệm cần nắm trong JavaScript

Văn Tân
👣Chia sẻ:

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 này để hiểu biết thêm các khái niệm của JS mời đọc bài viết dưới đây nhé. 

Để học ngôn ngữ JavaScript một cách hiệu quả, chúng ta nên tìm hiểu tổng quan qua tất cả khái niệm, vạch ra lộ trình cụ thể và sau đó sẽ học chuyên sâu vào từng vấn đề. Bài viết dưới đâ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.

Khái niệm cần nắm trong 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.

Khai báo biến bằng var, let, constvar

Var num;
let str = "Hello";
const NAME = "Văn Tâ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 còn có cách gọi là typeof để chúng ta kiểm tra kiểu của biến.

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 khá là quan trọng, nó giúp người khác có thể hiểu được những dòng code của chúng ta, dễ dàng sửa lỗi khi bị dính bug. Vì thế chúng ta nên có thói quen comment code. 

Trình thông dịch sẽ không biên dịch câu comment của bạn.

2 cách comment trong JavaScript thông dụng:

// Đâ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 dễ dàng tìm hiểu hơn nhé.

  • Toán tử số học (Arithmetic Operators): + – * / % ++ — **
  • Toá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á: ifelse, else ifswitch case

const condition = 5;
if(condition > 2){
  console.log("5 > 2")
}else{
  console.log("5 < 2")
};

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: forwhiledo whilefor infor 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 = "Van Tan";
name = name.toLowerCase(); phương thức toLowerCase của string
console.log(name);

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)

let str = "  Van Tan 123 "; // Expect: str = "van tan"
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.

Dom
Dom
Windows Objects
Windows Objects

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ó.

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("tan", 18);
console.log(tan.name); // "tan"

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
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, …

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 webgle.info chia sẻ các khái niệm học JS bạn nên tham khảo.

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. Mời bạn xem thêm: kiến thức lập trình.

Tham khảo từ: Internet

Viết một bình luận