---
title: "Các câu trúc lệnh điều khiển trong Javascript"
description: "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 nhé."
canonical: "https://200lab.io/blog/cac-cau-truc-lenh-dieu-khien-trong-javascript"
published: "2021-07-21T01:53:06Z"
updated: "2026-08-21T07:17:37Z"
authors: ["TỪ QUỐC HƯNG"]
tags: ["Javascript", "Frontend"]
reading_minutes: 4
access: "public"
---

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ư sau:

```
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ư sau:

```
Đ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 `case` bê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 🤗!

## Đọc thêm

- [Event Loop là gì? Cơ chế hoạt động của Event Loop trong JavaScript](https://200lab.io/blog/event-loop-la-gi.md): Event Loop là một cơ chế cho phép xử lý các tác vụ bất đồng bộ trong JavaScript, sử dụng một vòng lặp vô tận để kiểm tra, quản lý các tác vụ.
- [So sánh Golang và NodeJS chi tiết](https://200lab.io/blog/so-sanh-golang-vs-nodejs.md): Golang và NodeJS khác nhau như thế nào? Golang và Nodejs từ lâu đã trở thành chủ đề sôi nổi. Nodejs đã chiếm ưu thế trong một khoảng thời gian dài. Golang liệu có đủ sức thuyết phục để chuyển đổi?
- [ReactJS Tutorial for Beginners Phần 2](https://200lab.io/blog/reactjs-tutorial-for-beginners-phan-2.md): Trong bài viết này chúng ta sẽ đi qua năm nội dung đầu tiên của tutorial
- [ReactJS vs React Native - Gà cùng một mẹ liệu có giống nhau?](https://200lab.io/blog/reactjs-vs-react-native.md): Bạn có đang rối giữa ReactJS vs React Native? Nên chọn cái nào thì tốt hơn? Có thể tái sử dụng code của ReactJS cho React Native hay không? Hãy khám phá câu trả lời thông qua bài viết so sánh ReactJS vs React Native này bạn nhé!
- [Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 7](https://200lab.io/blog/netflix-clone-voi-reactjs-styled-components-va-firebase-firestore-auth-phan-7.md): Nối tiếp phần 6 của series, trong phần này, chúng ta sẽ bắt tay vào code Sign Up page,config lại phần router để đáp ứng được vấn đề Authentication kèm theo tạo custom hook để listening for Authentication. Không dài dòng nữa, Chúng ta bắt đầu thôi 😁.
- [Mọi bài viết chủ đề Javascript](https://200lab.io/blog/tags/javascript.md)

Toàn bộ nội dung: https://200lab.io/llms.txt