Mục tiêu bài viết
- Hiểu được cú pháp khai báo hàm
- Hiểu được cách sử dụng hàm trong Javascript
Nội dung bài viết
Hàm trong JavaScript là một khối mã được thiết kế để thực hiện một tác vụ cụ thể.
Cú pháp khai báo hàm trong javascript
Một hàm JavaScript được định nghĩa bằng từ khóa function, theo sau là tên hàm, theo sau là dấu ngoặc đơn ().
Dấu ngoặc đơn có thể bao gồm tên tham số được phân tách bằng dấu phẩy.
Tên hàm có thể chứa các chữ cái, chữ số, dấu gạch dưới và dấu đô la (quy tắc giống như các biến). Ví dụ:
|
1 2 3 4 |
<span class="token keyword">function</span> <span class="token function">name</span><span class="token punctuation">(</span><span class="token parameter">parameter1<span class="token punctuation">,</span> parameter2<span class="token punctuation">,</span> parameter3</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// code được viết ở đây</span> <span class="token punctuation">}</span> |
- Các tham số của hàm được liệt kê bên trong dấu ngoặc đơn ().
- Các đối số của hàm là các giá trị mà hàm nhận được khi nó được gọi.
- Bên trong hàm, các đối số (các tham số) hoạt động như các biến cục bộ.
Khi nào hàm được gọi
Hàm được gọi:
- Khi một sự kiện xảy ra (khi người dùng nhấp vào một nút)
- Khi nó được gọi từ mã JavaScript.
- Tự động gọi.
Return hàm
Khi JavaScript gặp từ khóa return, hàm sẽ ngừng thực thi. Các hàm thường tính ra giá trị và trả về. Ví dụ:
|
1 2 3 4 5 6 |
<span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Hàm được gọi, trả về giá trị bằng x</span> <span class="token keyword">function</span> <span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> a <span class="token operator">*</span> b<span class="token punctuation">;</span> <span class="token comment">// hàm trả về tích của a và b</span> <span class="token punctuation">}</span> |
Tại sao cần sử dụng hàm?
Hàm giúp chúng ta có thể tái sử dụng code để code dễ đọc, dễ bảo trì hơn. Bạn có thể sử dụng hàm nhiều lần và với các tham số khác nhau thì sẽ trả ra kết quả khác nhau. Ví dụ:
|
1 2 3 4 5 |
<span class="token keyword">function</span> <span class="token function">toCelsius</span><span class="token punctuation">(</span><span class="token parameter">fahrenheit</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token number">5</span> <span class="token operator">/</span> <span class="token number">9</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>fahrenheit <span class="token operator">-</span> <span class="token number">32</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"demo"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token function">toCelsius</span><span class="token punctuation">(</span><span class="token number">77</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Kết quả trả về : function toCelsius(f) { return (5/9) \* (f-32); }