Toán Tử(Operator) Trong Javascript

Hôm nay bạn hãy cùng mình sẽ đi tìm hiểu khái niệm cũng như cách sử dụng toán tử của ngôn ngữ lập trình Javascript trong trang web nhé.

Tóm Tắt

Toán Tử (Operator) Javascript Là Gì?

Operator(Toán tử) có lẽ ai trong chúng ta đều đã tiếp xúc qua như là phép cộng, phép trừ, phép nhân, phép chia ở trong trường học và nó được xem là các toán tử cơ bản trong Javascript. Trong phần này chúng ta sẽ đi tìm hiểu thêm các loại toán tử khác nâng cao hơn. Để nắm rõ hơn hãy cùng mình đi vào chi tiết ở bên dưới nhé!

Toán tử Unary Javascript

Toán tử unary là toán tử được sử dụng chỉ cho một số hạng. Để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

 let a = 1;
 a = -a;
 console.log(a); /* -1, đây được gọi là toán tử unary */

Ở ví dụ trên chúng ta sử dụng toán tử unary trừ (-) dùng để chuyển đổi một số hạng thành một số phủ định so với giá trị ban đầu. Sau đây mình sẽ giới thiệu tiếp về cách sử dụng toán tử unary cộng(+) ở bên dưới dùng để chuyển một kiểu dữ liệu loại chuỗi sang kiểu số :

 let b = "12";
 b = +b;
 console.log(typeof b)// trả về number

Nếu bạn có thắc mắc về hàm typeof thì có thể tham khảo ở đây nhé: Hàm typeof. Đối với giá trị số thì unary cộng(+) thường không ảnh hưởng tới giá trị của số hạng nhưng đối với các kiểu dữ liệu khác thì có thể chuyển đổi sang kiểu dữ liệu số như ở ví dụ trên. Ngoài ra chúng ta thử áp dụng toán tử unary cộng(+) trong kiểu dữ liệu Boolean với true sẽ biến thành 1 và false sẽ biến thành 0. Để hiểu hơn bạn xem đoạn code dưới nhé:

 let f = false;
 let t = true; 
 console.log(+f); /*kết quả trả về 0*/
 console.log(+t); /*kết quả trả về 1*/

Tiếp theo chúng ta sẽ đi vào toán tử tăng/giảm. Nó hay được sử dụng trong các việc tính toán kiểu số trong Javascript. Để hiểu rõ hơn ta đi vào ví dụ nhé:

Toán tử tăng ++ dùng để tăng 1 đơn vị cho giá trị biến:
```
 let soDem = 1;
 soDem++; 
 console.log(soDem)// Kết quả trả về là 2
```
Ở đây bạn có thể hiểu soDem++ là viết tắt cho biểu thức soDem = soDem + 1.
Toán tử giảm -- dùng để giảm 1 đơn vị cho giá trị biến:
```
 let soDem = 3;
 soDem--; 
 console.log(soDem)// Kết quả trả về là 2
```
Ở đây bạn có thể hiểu soDem– là viết tắt cho biểu thức soDem = soDem - 1.

Chú ý:
Có điều quan trọng bạn cần lưu ý là toán tử tăng/giảm chỉ sử dụng cho biến. Nếu bạn dùng nó vào trong giá trị số như 4++ thì sẽ xảy ra lỗi đó nhé.

Toán tử tăng/giảm bạn có thể đặt ở hai vi trí là trước và sau biến:

Đặt trước biến(hay được gọi là tiền tố): ++soDem hay --soDem.
Đặt sau biến biến(hay được gọi là hậu tố): soDem++ hay soDem--.

Để làm rõ hai vị trí toán tử tăng giảm sẽ ảnh hưởng như thế nào đến giá trị của biến thì bạn xem 2 ví dụ dưới đây nhé:

Toán tử tăng ++ đặt trước biến:

 let soDem = 1; 
 let a = ++soDem;
 console.log(a) //Kết quả trả về 2.

++soDem sẽ tăng thêm 1 đơn vị cho biến soDem nên kết quả trả về là 2;

Toán tử tăng ++ đặt sau biến:

 let soDem = 1; 
 let a = soDem++;
 console.log(a) //Kết quả trả về 1.

soDem++ cũng sẽ tăng thêm 1 đơn vị cho biến soDem nhưng sẽ trả về kết quả cũ(trước khi tăng). Nên ta thấy ở màn hình là số 1.

Vậy qua đây mình có rút ra một số kết luận sau đây:

Nếu bạn không sử dụng kết quả trả về của toán tử tăng/giảm như ở hai ví dụ trên thì giá trị trả về của chúng hoàn toàn giống nhau:
```
 let sodem = 0;
 ++soDem;
 soDem++;
 console.log(soDem) // Kết quả trả về là 2
```
Nếu bạn muốn tăng giá trị và sử dụng kết quả ngay lập tức thì nên chọn vị trí phía trước biến (tiền tố):
```
 let soDem = 0;
 console.log(++soDem)//Kết quả trả về: 1.
```
Nếu bạn muốn tăng giá trị nhưng sử dụng kết quả cũ thì nên chọn vị trí phía sau biến (hậu tố):
```
 let soDem = 0;
 console.log(soDem--)//Kết quả trả về: 0.
```

Có một câu hỏi khá thú vị là khi bạn muốn tính toán một bài toán tính tổng với hai ô nhập trong form thì làm thế nào ta có thể chuyển nó từ kiểu chuỗi sang kiểu số bằng toán tử mình đã học ở trên? Thì dưới đây là đoạn code ví dụ nhé:

 let soHang1 = "2";
 let soHang2 = "3";
 let soTong = (+soHang1 + +soHang2);
 console.log(soTong);//Kết quả trả về: 5

Nãy giờ chúng ta hay dùng + cho các kiểu dữ liệu số, bây giờ ta thử cộng hai chuỗi lại với nhau bằng ví dụ sau đây nha:

 let c = "Xin" + "Chao"
 console.log(c)//Kết quả trả về là XinChao

Nếu chúng ta sử dụng toán tử cộng cho kiểu số và kiểu chuỗi thì số hạng trong đó sẽ tự động chuyển sang kiểu chuỗi. Để nắm rõ hơn bạn xem ví dụ sau đây nhé:

 console.log('1' + 2) /*Kết quả trả về là "12"*/
 console.log(2 + '1') /*Kết quả trả về là "21"*/

Do phép tính thì đi theo chiều từ trái sang phải nên nó sẽ chuyển từ kiểu số sang kiễu chuỗi khi gặp được số hạng là chuỗi. Để nắm rõ hơn bạn xem ví dụ sau đây nhé:

console.log(3 + 3 + "2"); // Kết quả trả về là "62"

Sự cho phép nối chuỗi là một tiện ích của toán tử cộng +. Còn với các phép tính khác như nhân, trừ… thì biểu thức sẽ tự động chuyển sang kiểu dữ liệu số. Hãy cùng mình đi vào ví dụ dưới để hiểu rõ hơn nhé:

 console.log(3 - "1") /*Kết quả là: 2*/
 console.log("6"/"2")/*Kết quả là : 3*/

Toán tử Gán (Assignment) Javascript

Bạn có thể hiểu nôm na là nó sẽ gán giá trị bên tay phải cho số hạng bên trái. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:

 let a = 2;
 let b = 2 * 2 + 4;

Chúng ta có thể gán giá trị cho nhiều biến bằng cách sau đây nhé:

 let a, b, c;
 a = b = c = 3 + 3;
 console.log(a)/*kết quả là: 6*/
 console.log(b)/*kết quả là: 6*/
 console.log(c)/*kết quả là: 6*/

Tiếp theo ta sẽ đi vào áp dụng toán tử cho biến và lưu kết quả mới vào cho biến đó. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

 let a = 2;
 a = a + 5;
 a = a * 2
console.log(a) // Kết quả là: 14

Ta có thể rút ngắn biểu thức a = a + 5 hay a = a * 2 trên bằng cách sử dụng toán tử += và *=. Để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

 let a = 2;
 a += 5; /*Nó sẽ bằng với biểu thức a = a + 5*/
 a *= 2; /*Nó sẽ bằng với biểu thức a = a * 2*/
 console.log(a) // Kết quả là: 14

Mình có đưa ra một bảng để miêu tả rõ các cách viết tắt cho biểu thức và các áp dụng để bạn tham khảo ở phía bên dưới nhé:

Toán TửÝ NghĩaCách Áp Dụnga = ba = bGán giá trị của b sang a.a += ba = a + bGán kết quả của a cộng b cho a.a -= ba = a - bGán kết quả của a trừ b cho a.a *= ba = a * bGán kết quả của a nhân b cho a.a /= ba = a / bGán kết quả của a chia b cho a.

Toán tử lấy số dư `%` Javascript

Đây là loại toán tử giúp chúng ta có thể lấy phần dư trong phép chia của hai số nguyên. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

 let soNguyen1 = 8;
 let soNguyen2 = 3;
 console.log(soNguyen1 % soNguyen2); // Kết quả trả về là 2

Toán tử lấy số mũ ``** Javascript

Trong việc tính toán đôi khi bạn muốn thực hiện biểu thức 2*2*2 thì việc ghi như vậy rất dài dòng và trông có vẻ không chuyên nghiệp. Trong Javascript có cung cấp cho chúng ta một toán tử ** để làm việc này. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

 console.log( 2 ** 2); /*Kết quả là 4. tương đương 2*2 */
 console.log( 2 ** 4); /*Kết quả là 16. tương đương 2*2*2*2 */

Toán tử Bitwise Javascript

Toán tử Bitwise là các phép toán được thực hiện trên Bit có nghĩa là nó sẽ chuyển các số hạng thành dạng 32 bits( số 0 và số 1) để tính toán. Nhưng toán tử này rất hiếm khi sử dụng và thường dùng trong lập trình nhúng. Nếu bạn muốn tham khảo thêm thì có thể xem ở đây nhé: Bitwise.

Toán tử Precedence Javascript

Lúc đi học thì ta thường được thầy cô dạy là nhân chia trước cộng trừ sau. Đây chính là mức độ ưu tiên của các loại toán tử trong biểu thức ví dụ như 1 + 2 * 2 thì chúng ta phải thực hiện phép nhân trước là 2*2 rồi mới thực hiện phép cộng 1+4 thì kết quả là 5.

Nhưng trong ngôn ngữ lập trình Javascript thì chúng ta còn nhiều loại toán tử khác nữa nên mỗi toán tử sẽ có một số ưu tiên(precedence) tương ứng để biểu thị mức độ ưu tiên được thực hiện trong biểu thức. Nếu hai toán tử có cùng số ưu tiên(precedence) thì sẽ thực hiện từ trái sang phải. Để hiểu rõ hơn bạn xem bảng phía dưới nhé:

Thứ Tư Ưu TiênTênKí hiệu………17Toán Tử Cộng Unary (Dành cho một số hạng)+17Toán Tử Trừ Unary (Dành cho một số hạng)-15Toán Tử Nhân*15Toán Tử Chia/13Toán Tử Cộng+13Toán Tử Trừ-………3Toán Tử Gán=………

Có một ví dụ phía trên có thể giúp chúng ta dễ hình dùng cách sử dụng mức độ ưu tiên là :

 let soHang1 = "2";
 let soHang2 = "3";
 let soTong = (+soHang1 + +soHang2);
 console.log(soTong);//Kết quả trả về: 5

Ở đây bạn có thể hiểu như sau +soHang1 và +soHang2 là toán tử cộng dành cho một số hạng với thứ tự ưu tiên là 17 và toán tử cộng còn lại có thứ tự ưu tiên 13 nên ta mới có thể ra được kết quả là 5.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn hiểu được khái niệm cũng như cách sử dụng toán tử trong ngôn ngữ Javascript và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!