Khái niệm về hàm, cách sử dụng và cách tối ưu hàm (function) trong Javascript
09:29 | 03.09.2021 | Posted By: admin

|Hi ! Xin chào anh em , hôm nay tụi mình cùng bàn về chủ đề hàm (function) trong Javascript nhé !
Bây giờ, với các ứng dụng hiện đại, cho dù code bằng ngôn ngữ nào cũng phải nắm rõ kiến thức về hàm vì hàm giúp tối ưu source code, giúp tối ưu cho các phần mềm, website hay game. Và hàm được sử dụng rất nhiều trong code để tối ưu thời gian code cho lập trình viên.


1. Cách khai báo truyền thống
Cú pháp hàm không có tham số truyền vào:

function tenHam(){
    //Đoạn code mà bạn muốn xử lý
}

Hãy thử ví dụ chạy 1 hàm chào bằng Javascript nhé:

function chao(){
    console.log("Xin chào ! Tôi là Javascript !");
}
//Để chạy hàm ta chỉ cần gọi tên của hàm
chao(); //Xin chào ! Tôi là Javascript

Quá đơn giản đúng không anh em!

- Câu hỏi: Nhưng bây giờ mình muốn chào An, Dũng, Hiếu thì chẳng lẽ mình lại phải viết 3 hàm sao?
- Trả lời: Không ! Ở đây chúng ta không làm như thế, để giải quyết vấn đề đó thì cái khái niệm "tham số truyền vào" được sinh ra. Đây mình sẽ ví dụ cho các bạn xem !


Cú pháp hàm có tham số truyền vào:

function tenHam(tham_so_1, tham_so_2,...){
    //Đoạn code mà bạn muốn xử lý
}


Bây giờ mình thử chào 3 bạn An, Dũng, Hiếu bằng 1 hàm nhé.

function chao(con_nguoi){
    console.log("Xin chào "+con_nguoi);
}
//Và mình sẽ gọi lại hàm như sau
chao("An")
chao("Dũng");
chao("Hiếu");
// Chương trình sẽ trả về kết quả :
//Xin chào An;
//Xin chào Dũng;
//Xin chào Hiếu;


- Đến đây các anh em có thể thấy hàm có thể gọi lại nhiều lần để chào 3 bạn đúng không (người ta gọi đây là tái sử dụng lại hàm)
- Nhưng anh em sẽ nghĩ tại sao tui hong dùng console.log("Xin chào An"); console.log("Xin chào Dũng"); console.log("Xin chào Hiếu"); mà phải làm kiểu này ?

Mình xin trả lời rằng nếu một tác vụ nào đó phức tạp hơn thì việc code lại sẽ rất mất thời gian và không tối ưu source code của mình. Sau đây là ví dụ để anh em hiểu rõ:

Đặt bài toán là hãy tính số tiền phải trả cho sản phẩm nhé !
Yêu cầu cụ thể như sau, hãy tính tiền sản phẩm A biết giá, số lượng và phần trăm khuyến mãi của sản phẩm đó.
Nếu việc giải bằng tay ta sẽ giải bài toán có ví dụ sau: bàn phím cơ giá 2.000.000, mình mua 2 cái và khuyến mãi giảm 20%
Ta sẽ lấy 2.000.000 x 2 - (2.000.000x20/100) = 3.600.000 <= Đây là tiền phải thanh toán cho bàn phím đó, ta sẽ có đoạn code sau.

let gia = 2.000.000;
let so_luong = 2;
let khuyen_mai = 20;
let thanh_tien = gia x so_luong - (giaxkhuyen_mai/100);
console.log('Thành tiền: '+ thanh_tien);


Nhưng đặt câu hỏi nếu ta tính thành tiền cho nhiều sản phẩm thì chỉ cần copy đoạn code trên và paste ra đổi giá trị thì có phải là quá lãng phí thời gian, lãng phí tài nguyên đúng không. Ta sẽ có cách giải quyết như sau:

function thanhTien(ten_san_pham,gia_san_pham,so_luong,khuyen_mai){
    let thanh_tien = gia x so_luong - (giaxkhuyen_mai/100);
    console.log("Giá sản phẩm "+ten_san_pham+" cần thanh toán là: "+thanh_tien);
    return thanh_tien;
}
//Để tính cho sản phẩm ta chỉ cần gọi như sau:
thanhTien("Bàn phím cơ",1000,2,10);
thanhTien("Chuột không dây",10000,5,15);
thanhTien("Laptop",100000,1,0);
//Kết quả thì anh em thử chạy để xem nhé !

 

2. Cách khai báo dạng Arrow Function(Kiểu hiện đại)
- Arrow functions là một trong những tính năng mới rất hay của ES6. Việc sử dụng đúng cách arrow function giúp code trở nên ngắn gọn và dễ hiểu hơn.

Cú pháp:

let ten_function = (tham_so_1,tham_so_2)=>{
    //Code xử lý
}

Ví dụ tính tổng a+b:

let tong = (a,b)=>{
    console.log('Tổng: '+(a+b));
    return a+b;
}    
tong(1,1);
tong(2,5);

Ngoài ra mình còn có thể inline code như sau giúp nó ngắn gọn hơn.
 

let tong = (a,b) => return a+b;


Bài viết đến đây là hết rồi cảm ơn anh em đã theo dõi nhé !  
Mọi thắc mắc liên hệ zalo mình 0365.774.667

Bài Viết Khác
  • blog-img
    Dịch vụ thiết kế Website
    Ngày nay, khi mà hàng trăm triệu người Việt Nam nói riêng và thế giới nói chung đều sử dụng internet và xem đây là nơi lý tưởng để tìm kiếm thông tin thì việc sở hữu một website không còn là điều xa lạ gì thậm chí trong một số trường hợp nó còn là tiêu chuẩn bắt buộc đối với doanh nghiệp – công ty trong thời điểm cạnh tranh mang tính toàn cầu như hiện nay.
  • blog-img
    Dịch vụ thiết kế phần mềm
    Với sự phát triển của công nghệ như hiện nay thì việc chuyển đổi số trong các doanh nghiệp là đều tất yếu, là tiêu chí sống còn của doanh nghiệp, để thực hiện được điều này thì không thể thiếu các phần mềm hỗ trợ
  • blog-img
    Giải pháp CNTT cho Doanh nghiệp
    chúng tôi là những chuyên gia có nhiều kinh nghiệm, hiểu biết sâu về nhiều sản phẩm, giải pháp, chúng tôi đặt nhu cầu của khách hàng ở vị trí quan trọng nhất, giúp khách hàng tìm được giải pháp phù hợp nhất.
  • blog-img
    Về chúng tôi
    Trải qua hơn 3 năm hình thành và phát triển Công ty Nmsoft đã có những bước phát triển không ngừng trong việc thiết kế, hỗ trợ và phát triển website cho cá nhân, doanh nghiệp.
  • blog-img
    Liên hệ
    Liên với chúng bằng các thông tin sau
  • blog-img
    Bài 1: Giới thiệu ngôn ngữ Lập trình Python
    NGÔN NGỮ PYTHON được Guido van Rossum tạo ra cuối năm 1990.
messenger