Cách viết hàm trong Javascript

1. Định nghĩa hàm (function) trong javascript

Một hàm là một tập hợp các cấu trúc lệnh (dòng lệnh) và cuối cùng cho ra một giá trị. Nếu bạn phải thực hiện những tính toán khá dài dòng, phức tạp và phải thực hiện nhiều lần cùng một tính toán như vậy, thay vì mỗi lần tính bạn viết một đống dòng lệnh, bạn chỉ cần viết một lần và đặt tên cho nó là một hàm, rồi sau đó gọi lại hàm này bất cứ lúc nào bạn muốn, không cần phải viết lại một đống dòng lệnh nữa .

Tiện lợi của hàm trong JavaScript

Có hai ưu điểm chính của hàm JavaScript.

1. Tái sử dụng code: Chúng ta có thể gọi một hàm nhiều lần để tiết kiệm code.
2. Giảm code trong chương trình: Hàm làm cho chương trình của chúng tôi nhỏ gọn. Chúng tôi không cần phải viết nhiều dòng mã mỗi lần để thực hiện một tác vụ chung.

Cú pháp khai báo hàm:

function name_of_funtionc(var1, var2, var33,...) {
    Khối mã lệnh Javascript
}

Trong đó:

• function: là từ khóa của javascript nên bắt buộc phải như vậy
• name_of_function: là tên của function, thông thường chúng ta tạo những tên có ý nghĩa như find_max, find_min, ...
• var1, var2 var3, ... là các tham số truyền vào hàm. Ví dụ viết hàm kiểm tra số chẵn hay lẽ thì ta sẽ có một tham số đó là số cần kiểm tra.

Trả về giá trị là một chức năng của hàm, khi thực hiện trả về giá trị hàm sẽ ngừng hoạt động. Để trả về giá trị trong hàm sử dụng khóa return

Ví dụ: hàm kiểm tra chẵn, lẻ sau:

<script>
function check_number(number)
{
    if (number % 2 == 0){
        alert(number + ' là số chẵn');
    }
    else {
        alert(number + 'Số lẻ');
    }
}
 
// Sử dụng hàm kiểm tra cho 5 số
check_number(1);
check_number(2);
check_number(3);
check_number(4);
check_number(5);
</script>

Xem ví dụ

2. Hàm có return và hàm không có return

Hàm có return là hàm có sử dụng từ khóa return để đặt ở cuối hàm với mục đích trả kết quả về để sử dụng tiếp ở những đoạn code bên ngoài.  Ví dụ ta cần viết một hàm tính tổng của hai số a và b thì hàm này phải trả về giá trị là tổng của hai số a, b. Xem ví dụ sau: 

<script>
// Khai báo hàm
function sum(a, b)
{
    // trả về kết quả là a + b
    return a + b;
}
 
// Sử dụng
var a= 1;
var b= 2;
 
// truyền so1 và so2 vào hàm
var result= sum(a, b);
 
document.write(result);
</script>

Xem ví dụ

Hàm không có return là hàm không có sử dụng từ khóa return đặt trong hàm. Ví dụ viết chương trình in ra tổng của hai số a và b.

<script>
function sum(a, b)
{
    document.write('Tổng là ' + (a + b));
}
 
// Sử dụng
var a= 1;
var b= 2;
 
// truyền so1 và so2 vào hàm
sum(a, b);
</script>

Xem ví dụ

Như vậy tùy vào mục đích mà ta dùng có return hay không có return. Nhưng thông thường ta sử dụng return ở những trường hợp cần lấy kết quả đó để xử lý tiếp, như ở ví dụ trên đó là mình lấy kết quả để in thông báo.

3. Giá trị mặc định của tham số

Có một số trường hợp bạn muốn một tham số nào đó có thể được truyền hoặc không cần truyền vào đều được, lúc này chúng ta phải sử dụng nó như một tham số mặc định. Javascript không có cú pháp gán giá trị mặc định như PHP mà thay vào đó chúng ta sử dụng toán tử ||.

Ví dụ: Hàm hiển thị một thông báo. 

<script>
function showMessage(message)
{
   // Nếu message không được truyền vào hoặc giá trị nó là rỗng
   // thì sẽ được thay thế bằng giá trị 'Không có tin nhắn'
   message = message || 'Không có tin nhắn <br/>';
   document.write(message);
}
 
// Cách 1: không truyền tham số
showMessage();
 
// Cách 2: Truyền tham số
showMessage('Chào mừng bạn đến với hiệp sĩ it dot com');
</script>

Xem ví dụ

4. Hàm đệ qui trong Javascript

Một hàm được gọi là đệ quy nếu bên trong thân nó có một lời gọi đến chính nó. Nghe có vẻ vô lý nhỉ ? Một hàm làm sao có thể gọi nó mãi được, vì nếu như vậy sẽ sinh ra một vòng lặp vô tận. Nhưng trong thực tế, một hàm đệ quy luôn có điều kiện đừng được gọi là “điểm neo”. Khi đạt tới điểm neo, hàm sẽ không gọi chính nó nữa.

<script>    
function display(number) {    
    if(number<=5){    
     document.write(number+"<br>");    
     display(number+1);    
    }  
}    
    
display(1);    
</script>    

Xem ví dụ

5. Các hàm có sẳn

JavaScript có một số hàm có sẵn, gắn trực tiếp vào chính ngôn ngữ và không nằm trong một đối tượng nào: eval, parseInt, parseFloat
5.1. Hàm eval
Chuyển đổi giá trị chuỗi thành giá trị số.
Cú pháp:  

returnval=eval (biểu thức)

Ví dụ:

<HTML> <Head><Title>Eval Example </Title>
<script Language= "JavaScript">
	var string="10+ Math.sqrt(64)";
	document.write(string+ "="+ eval(string));
</script>
</Head>
<Body> </Body>
</HTML>

Xem ví dụ

5.2. Hàm parseInt
Hàm này chuyển một chuỗi số thành số nguyên với cơ số là tham số thứ hai.
Cú pháp:  

parseInt (string, [, radix])

Ví dụ:

<HTML> <Head><Title>ParserInt Example </Title><Body>
<Script Language= "JavaScript">
document.write("Converting 0xC hex to base-10: " + parseInt(0xC,10) + "<BR>");
document.write("Converting 1100 binary to base-10:" + parseInt(1100,2) + "<BR>");
</Script>
</Body></HTML>

Xem ví dụ

5.3. Hàm parseFloat
Hàm này giống hàm parseInt nhưng nó chuyển chuỗi thành số biểu diễn dưới dạng dấu phẩy động.
Cú pháp:

 parseFloat (string)

Ví dụ:

<Body> 
<script language= "JavaScript">
document.write("This script will show how diffrent strings are ");
document.write("Converted using parseFloat<BR>");
document.write("137= " + parseFloat("137") + "<BR>");
document.write("137abc= " + parseFloat("137abc") + "<BR>");
document.write("abc137= " + parseFloat("abc137") + "<BR>");
document.write("1abc37= " + parseFloat("1abc37") + "<BR>");
</Script>
</Body>

Xem ví dụ