Tổng hợp 14 khái niệm cơ bản của JavaScript bạn cần biết

1. Cấu trúc code 

Một biểu thức hoàn chỉnh (tương ứng với một câu) được gọi là một câu lệnh (statement). Chương trình thực chất là tập hợp của những câu lệnh và dấu chấm phẩy.

alert('Say hi');

Dấu chấm phẩy (;).không bắt buộc trong JavaScript, nhưng chúng thường được dùng để kết thúc một câu lệnh thường được kết thúc bởi dấu chấm phẩy.

2. “Use strict”

Trong mắt nhiều lập trình viên, JavaScript là một ngôn ngữ “lộn xộn”. Tuy nhiên, với “use strict” hay strict mode, code của bạn sẽ trở nên chính xác và nghiêm chỉnh hơn.  Ngoài ra, ta cũng không cần lo lắng về khả năng tương thích ngược trong JavaScript. Why? Because feature releases never overlapped — until it did.

Năm 2009, ECMAScript 5 (ES5) được phát hành và  có sửa đổi một số tính năng hiện có. Và kết quả, nếu bạn không khai báo “use strict”, bạn sẽ không thể áp dụng những sửa đổi. 

Tính nghiêm ngặt của strict mode được thể hiện ở việc báo lỗi khi sử dụng delete, các tham số của hàm không được trùng nhau, không cho phép khai báo biến dưới dạng hệ nhị phân, không được phép ghi đè lên thuộc tính chỉ được phép đọc, không sử dụng được with, không cho phép khai báo biến trong eval, không chấp nhận khai báo các keyword…

3. Biến variables

Biến cũng giống như là một cái thùng chứa dùng để lưu trữ một giá trị dữ liệu

Sử dụng từ khóa “let” để khai báo một biến và đặt tên biến. Bằng cách đó, ta có thể khởi tạo biến và dùng “=” để gán cho nó một giá trị. 

Nếu bạn không gán bất kỳ thứ gì cho biến, mặc định trạng thái sẽ trở về “undefined” – có nghĩa là nó đã được khởi tạo nhưng giá trị không xác định. Tóm lại, biến trở về trạng thái chưa được thiết lập. 

Điều này khác với null

Null có nghĩa là giá trị rỗng hoặc giá trị không tồn tại, nó có thể được sử dụng để gán cho một biến như là một đại diện không có giá trị

4. Kiểu dữ liệu

Kiểu dữ liệu (data type hoặc chúng ta có thể gọi đơn giản là type) là một cách để phân loại dữ liệu cho trình biên dịch hiểu các lập trình viên muốn sử dụng loại dữ liệu nào.

JavaScript cho phép chúng ta làm việc với các kiểu dữ liệu nguyên thủy (string, number,…) và kiểu dữ liệu không nguyên thủy (Object, Array, RegExp).

  1. Dữ liệu dạng số Number và Biglnt 

Kiểu dữ liệu number trong JavaScript có thể xem là kiểu tổng hợp của int, float, double, … trong các ngôn ngữ lập trình khác.

Hiểu đơn giản number là kiểu dữ liệu số, số nguyên, số thực,… đều là kiểu số cả.

Điểm khác biệt duy nhất giữa number và bigInt chính là nằm ở mức giá trị con số. Do đó, trong thực tế có rất ít người biết hoặc chú ý đến sự tồn tại của bigInt bởi ít khi nào ta cần sử dụng một con số nhỏ hơn  -(253 − 1) và lớn hơn (253 − 1).

Trong kiểu Number này bạn cần lưu ý hai giá trị đặc biệt:

  • Infinity: Là số “vô cực” trong toán học.
  • NaN: Là Not a Number, tức là giá trị này không phải là số

       2. Dữ liệu dạng chuỗi String

Kiểu dữ liệu string là các text thường được viết trong dấu “nháy kép.”; ‘nháy đơn’…, text có thể có một hoặc nhiều ký tự.

Ví dụ:

var a = 'Hi everyone!'; // Dữ liệu của biến c được xếp vào kiểu string
const d = "Học lập trình thật thú vị :))"; // 
Dữ liệu của hằng d được xếp vào kiểu string

       3. Dữ liệu dạng logic Boolean

Nó chỉ có 2 giá trị là true (đúng) hoặc false (sai).

Bên cạnh người dùng có thể truyền (gán) dữ liệu boolean vào một Biến hoặc Hằng, dữ liệu boolean cũng có thể được tạo ra với vai trò là kết quả của một biểu thức logic.

       4. Dữ liệu không thể chứa giá trị

Undefine:  là các giá trị không xác định.

Null: đơn giản là không có giá trị nào cả.

Và còn nhiều kiểu dữ liệu khác 

5. Type Conversion 

Một biến trong Javascript có thể được chuyển đổi thành một biến khác với kiểu dữ liệu khác bằng 2 cách sau:

  • Sử dụng các hàm hỗ trợ trong Javascript(Number(), String(), Boolean() …).
  • Sử dụng các phương thức của chính đối tượng đó( toString, toNumber….

6. Toán tử (operators)

Thành phần quan trọng tiếp theo là toán tử (operators). Toán tử không chỉ xuất hiện trong JavaScript mà còn ở hầu hết các dạng ngôn ngữ lập trình khác. Trong lập trình, Operators sẽ có chức năng giống như tên gọi của nó. Dưới đây là danh sách các operators phổ biến: 

AND (&)  OR (|)  XOR (^)  NOT (~)  LEFT SHIFT (<<)  RIGHT SHIFT (>>)  ZERO-FILL RIGHT SHIFT (>>>)

7. Biến so sánh

So sánh trong JavaScript có dạng giống hệt trong toán học. Ví dụ: 

Lớn/nhỏ hơn: a > b, a < b.

Lớn/nhỏ hơn hoặc bằng: a >= b, a <= b.

Bằng nhau: a == b (một dấu = là biểu thị phép gán).

Không bằng nhau: a != b.

8. Hàm tương tác với người dùng: Alert, Prompt, Confirm

Alert: thông báo tới người dùng

alert(yourMessageHere);

Prompt: Nhận input từ người dùng

Hàm prompt của chúng ta nhận vào 2 tham số: tiêu đề của input và giá trị mặc định của input.

result = prompt("Your Name?", ["ICTS"])
alert(`Your name is ${result}`);

Confirm: Thông báo xác nhận true/ false

Khi sử dụng hàm confirm, nó sẽ hiển thị cho bạn một thông báo về câu hỏi yes-no. Cú pháp của nó cũng như 2 thông báo modal trên:

1   result = confirm("Are you 18 years old?");

2

3   alert(result);

Nếu bạn nhấn OK, result sẽ có giá trị true và ngược lại là false.

9. Lệnh điều kiện if else (conditionals)

Mệnh đề if được sử dụng để kiểm tra giá trị dạng boolean của điều kiện. Khối lệnh sau if được thực thi nếu giá trị của điều kiện là True, nếu là False thì chỉ có khối lệnh sau else được thực hiện.

Ví dụ một hàm với if giá trị true: 

if (true) alert('woot!');

Ví dụ một hàm với if giá trị false

if(false){

   //this code won't run because it returned false 

}else if(false){

   //this also won't run

}else if(false){

   //still nope

}else {

   //final catch all

}

10. Vòng lặp Loops

Vòng lặp được sinh ra để giúp chúng ta giảm các hành động được lặp lại nhiều lần. Ví dụ khi bạn muốn xuất ra màn hình từ số 1 đến số 10 thì việc ghi từng số như vậy sẽ mất rất nhiều thời gian cũng như công sức. Do đó để giải quyết trường hợp trên thì bạn nên sử dụng vòng lặp.

Vòng lặp do-while tạo ra một vòng lặp thực thi khối mã bên trong dấu {} cho đến khi điều kiện sai. Ở đây thì mình có chú ý nhỏ là điểm khác biệt giữa while và do-while là do-while sẽ thực thi ít nhất một lần khối mã của chúng ta trước khi đi vào kiểm tra điều kiện. Để hiểu rõ hơn bạn xem cú pháp sau đây nhé:

do{

  //some code here

}while(condition);

11. Câu lệnh switch

Mục tiêu của một lệnh switch là cung cấp một biểu thức để ước lượng và một số lệnh khác nhau để thực thi trên cơ sở giá trị của biểu thức. Bộ thông dịch kiểm tra mỗi case – trường hợp với giá trị của biểu thức tới khi tìm thấy một sự so khớp. Nếu không có so khớp nào, một điều kiện default – mặc định sẽ được sử dụng.

Ví dụ: 

switch(yourValueHere){ 

   case 'optionOne' :    

     //your code here   

   break; 

   case 'optionTwo':   

     //your code here   

   break; 

   case 'optionThree':   

     //your code here   

   break; 

   default:   

     //your fallback code here 

}

Ngoài ra, bạn có thể nhóm các trường hợp để không phải viết output nhiều lần. Ví dụ:

switch(yourValueHere){ 

   case 'optionOne' :    

   case 'optionTwo':   

     //your code here   

   break; 

   case 'optionThree':   

     //your code here   

   break; 

   default:   

     //your fallback code here 

}

12. Function 

Function hay còn gọi là hàm, là tập hợp một đoạn code dùng để xử lý một nhiệm vụ nào đó. Code bên trong function không được biên dịch cho tới khi được gọi đến. Chính vì vậy khi sử dụng function sẽ giúp chương trình được linh hoạt hơn.

Bạn có thể thiết kế function của riêng mình như:

function functionNameHere(){
  //your code here
}

Và có thể đặt tên function để gọi nó:

functionNameHere();

13. Cách viết các functions

Có nhiều cách để viết function, ví dụ: 

function yourFunctionName(){

 // some code here

}

let anotherFunction = function(){}

14. Hàm Arrow Function 

Arrow function còn được gọi là hàm mũi tên, tức là ta sẽ tạo hàm bằng cách sử dụng ký tự =>. Cách tạo này xuất hiện kể từ phiên bản ES6.

let functionNameHere = (argumentsHere) => //do something

Hàm Arrow functions thường đứng chung 1 dòng, nhưng nếu có nhiều dòng, ta có thể sử dụng ngoặc nhọn { }

Ví dụ:

let cat = () => { 

   //this is 

   //a multi-line 

   //example 

   return someValue; //is required. Can just be a straight return; 

}

Khi sử dụng ngoặc nhọn { } cho hàm arrow, ta cần dùng return để kết thúc nó.

Tham khảo:

14 Fundamental JavaScript Concepts Explained Simply (dottedsquirrel.com)

Vòng Lặp(Loop) Trong Javascript (niemvuilaptrinh.com)

 

 


Son Chu

You Might Also Like


0 Comment


    Would you like to share your thoughts?

    Your email address will not be published. Required fields are marked *

    This field is required.
    Please provide a valid email address.
    This field is required.