Bất kỳ một ngôn ngữ lập trình nào cũng có các câu lệnh được xây dựng sẵn dùng để thực thi các dòng code theo các yêu cầu được chỉ định, JavaScript cũng không ngoại lệ. Không dài dòng nữa, chúng ta cùng nhau tìm hiểu cấu trúc lệnh điều khiển hay if...else và switch...case trong JavaScript sẽ như thế nào nè, bắt đầu thôi .
I. Câu lệnh if…else
1. Câu lệnh if
Đối với câu lệnh if...else không nhất thiết phải có else khi có if nhé , mà ta có thể sử dụng if độc lập nè.
if(condition){
//code ở đây
}
Condition hay điều kiện ở đây là một đoạn code hay một mệnh đề mà kết quả của nó trả về true/false . Ở đây, nếu condition mà trả về true thì sẽ thực thi đoạn code bên trong block code của if nè .
let a = 5, b = 10;
if(a < b) {
console.log('a < b');
}
2. Câu lệnh else
Với else thì hơi khác if một chút là muốn có else thì phải có if trước đó, tức là khi điều kiện của mệnh đề if trước nó không đúng thì câu lệnh else mới được thực thi nè , cấu trúc sẽ như sau.
if(condition) {
// condition = true thì code ở đây sẽ chạy
} else {
// condition = false thì code ở đây sẽ chạy
}
Ví dụ:
let a = 5, b = 10;
if(a > b) {
console.log('a > b');
} else {
console.log('a <= b');
}
// --> result: a <= b
3. Kết hợp if…else lồng nhau
Với ví dụ trên thì kết quả cuối cùng vẫn không được rõ cho lắm đúng không nè , ta vẫn chưa biết được khi nào a thực sự bằng b hay khi nào a thực sự nhỏ hơn b. Đừng quá lo lắng, ta có thể lồng câu lệnh if...else nhiều lần để có thể ‘cover’ hết được các trường hợp có thể xảy ra nè.
Để cover được hết các trường hợp của ví dụ trên, ta làm như sa
let a = 5, b = 10;
if(a > b) {
console.log('a > b');
} else {
if(a === b) {
console.log('a = b');
} else {
console.log('a < b');
}
}
// --> result: a < b
Đơn giản phải không nào .
4.If…else rút gọn
Chúng ta còn có thể rút gọn câu lệnh if...else bằng toán tử 3 ngôi mà mình có giới thiệu trong bài trước, cấu trúc như sa
Điều kiện ? block code 1 : block code 2
Nếu điều kiện đúng thì thực hiện block code 1, ngược lại thì thực hiện block code 2, cùng đi vào ví dụ nhé
let a = 2;
a % 2 == 0 ? console.log("a là số chẵn") : console.log("a là số lẻ")
//--> result: a là số chẵn
II. Câu lệnh switch…case
switch...case hay còn được gọi là câu lệnh rẽ nhánh, nó thường được dùng để giải quyết các bài toán có các điều kiện cố định, cấu trúc của nó như sau:
switch(condition) {
case value 1:
//block code
break;
case value 2:
//block code
break;
case value 3:
//block code
break;
default:
//block code
break;
}
Giải thích tý nè :
- condition: là biến mà ta muốn kiểm tra để rẽ nhánh.
- value1, value2,…: là các giá trị tại các nhánh điều kiện mà ta muốn kiểm tra.
- default: là trường hợp mặc định sẽ trả về nếu không thỏa các
casebên trên. - break: có tác dụng dừng vòng lặp hay câu lệnh kiểm tra điều kiện trong chương trình.
Cùng đi vào ví dụ cho dễ hiểu nè
let a = 5;
switch(a) {
case 0:
console.log("Không");
break;
case 1:
console.log("Một");
break;
case 2:
console.log("Hai");
break;
case 3:
console.log("Ba");
break;
case 4:
console.log("Bốn");
break;
case 5:
console.log("Năm");
break;
default:
console.log("Không thỏa mãn");
break;
}
//--> result: Năm
Đơn giản, dễ hiểu phải không nè 🤣.
III. Tổng kết
Bài viết này mình đã giới thiệu cho các bạn về câu lệnh if...else hoạt động như thế nào, cách tùy biến nó, if...else rút gọn, câu lệnh rẻ nhánh switch...case và cách sử dụng rồi nè. Hy vọng các bạn sẽ hiểu rõ về chúng hơn và có thể áp dụng vào các bài tập hay dự án của các bạn. Bài tiếp theo chúng ta sẽ cùng nhau tìm hiểu Vòng lặp trong JavaScript nhé . Cảm ơn các bạn đã đọc!
const nameFunction = () => {
//code ở đây
}
Ví dụ:
//Function expression
var multiply = function(a, b) {
return a * b;
};
//Arrow <a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a>
var multiply = (a, b) => {return a * b};
//Arrow function rút gọn hơn
var multiply = (a, b) => a * b;
7. Anonymous function
Anonymous function hay hàm ẩn danh hay nôm na là hàm không tên. Nghe tên nó ngầu vậy thôi chứ thật ra nếu bạn để ý thì ở function expression, vế bên phải dấu bằng là một anonymous function đó 😉 hoặc IIFE nó cũng là một anonymous function.
Ví dụ:
setTimeout(function(){
console.log('Được 1s rồi!')
} ,1000);
8. Closures
Closures là một feature khá hay trong JavaScript, nó cho phép ta lồng các function vào nhau. Các function con có thể truy cập đến các biến cũng như các function được định nghĩa bên trong function cha chứa nó.
Mặc khác function cha lại không thể truy cập đến các biến hay function mà được định nghĩa bên trong function con được 😅. Tuy nhiên điều này giúp bảo mật cho các biến bên trong function con.
Do function con có thể truy cập đến các biến hay function được định nghĩa bên trong function cha nên dù function cha có thực thi xong thì các biến hay function được định nghĩa bên trong function cha vẫn tồn tại, nếu function con vẫn còn thời gian sống lâu hơn function cha.
Ví dụ cho dễ hiểu hơn nè
function autoGeneratorNumber() {
let num = 0;
function checkNumber() {
console.log(num);
}
num++;
return checkNumber;
}
var number = autoGeneratorNumber();
number();
//-->output: 1
function autoGeneratorNumber() có một biến num là biến local và một function con là checkNumber(). Như hình thì ta xác định được autoGeneratorNumber() là một closures, do đó function con là checkNumber() có thể truy cập đến biến num và log ra console được.
9. Callback function
Callback function là hàm nhận hàm khác làm đối số. Ví dụ như ta có function A và B, ta truyền function A vào function B, tới một thời điểm nào đó function A được function B gọi lại thì được gọi là callback.
Ví dụ cho dễ hiểu tý nhé
function result(values) {
console.log(values);
}
function getSum(a, b, callback) {
let total = a + b;
callback(total);
}
getSum(5, 10, result);
//-->Output: 15
Đơn giản phải không nào 😁, Vậy khi nào ta dùng callback function?
Callback function được dùng trong các trường hợp như:
- Xử lý bất đồng bộ. Bản thân JavaScript là ngôn ngữ lập trình hướng sự kiện và bất đồng bộ, do đó callback ra đời nhằm giải quyết vấn đề này.
- Tạo event, ta sẽ truyền một callback vào để khi người dùng click chuột hoặc hover thì sẽ thực thi hàm xử lý event đó.
III. Tổng kết
Bài hôm nay tuy hơi dài nhưng đã khái quát những kiến thức cần nhớ và cần phải lưu ý khi sử dụng function trong JavaScript, hy vọng các bạn khi đọc cần lưu ý những điều đó và cố gắng thực hành càng nhiều càng tốt. Cảm ơn các bạn đã đọc
