Trong bài viết này chúng ta sẽ tìm hiểu khái niệm hàm và cách sử dụng hàm trong JavaScript nhé 😁.
Tóm Tắt
Hàm trong JavaScript
Hàm (function) là đoạn mã được viết ra để thực thi một nhiệm vụ cụ thể.
Giả sử bạn cần tạo một chương trình để tạo một hình tròn và tính chu vi của nó. Bạn có thể tạo hai hàm để giải quyết vấn đề này:
- Một function để vẽ hình tròn
- Một function để tính chu vi hình tròn
Khi sử dụng function, nó giúp chúng ta chia một vấn đề phức tạp thành các phần nhỏ hơn giúp chương trình dễ hiểu và đặc biệt là có thể sử dụng lại (reusable).
JavaScript hay các ngôn ngữ lập trình khác cũng có một lượng lớn các hàm có sẵn (Built-in Functions). Ví dụ: Math.random()
trong JavaScript là một hàm để trả về số ngẫu nhiên, hay Math.max()
trong JavaScript dùng để tìm số lớn nhất trong các số đã cho.
Trong bài viết này này, chúng ta cùng tìm hiểu về các hàm do chúng ta định nghĩa.
Khai báo hàm
Cú pháp để khai báo một hàm như sau:
function
tenCuaFunction
(
)
{
}
- Một hàm được khai báo bằng cách sử dụng từ khóa
function
. - Quy tắc cơ bản của việc đặt tên cho một
function
tương tự như đặt tên cho một biến. Để code dễ đọc thì chúng ta nên đặt một tên ngắn gọn mô tả cho chức năng của hàm. Ví dụ: nếu một hàm được sử dụng để thêm hai số, bạn có thể đặt tên cho hàm là addNumbers. Hoặc hàm sử dụng để kiểm tra số nguyên dương –isPositiveInteger
- Phần thân của hàm được viết trong
{}
.
Ví dụ:
function
greet
(
)
{
console.
log
(
"Xin chào mọi người 😁!"
)
;
}
Gọi hàm
Ở ví dụ trên, chúng ta đã khai báo một hàm có tên là greet
. Để sử dụng hàm đó, chúng ta cần gọi hay làm cho nó chạy.
Chúng ta sẽ gọi hàm greet()
ở trên bằng cách sử dụng ()
với tên hàm để gọi hàm:
greet
(
)
;
Ví dụ:
function
displayName
(
)
{
console.
log
(
"Xin chào mình là Trang 😋"
)
;
}
displayName
(
)
;
Sau khi gọi hàm displayName()
chúng ta sẽ được kết quả như sau:
Xin chào mình là Trang 😋
Function Parameters
Một hàm cũng có thể được khai báo với các tham số (parameters). Tham số là giá trị được truyền khi khai báo một hàm. Ví dụ như bạn đến ngân hàng vào đưa các thông tin cá nhân của mình (parameters) để yêu cầu ngân hàng tạo cho bạn một thẻ ngân hàng.
Cú pháp:
function
tenCuaHam
(
param1
,
...
,
pramN)
{
}
Trong đó: param1 -> pramN
là các tham số mà các bạn muốn truyền vào hàm.
Ví dụ:
Ở ví dụ trên mình có tạo một hàm displayName()
để hiển thị tên. Tuy nhiên chúng ta chỉ có thể hiển thị một tên duy nhất mỗi khi bạn gọi hàm. Chúng ta có thể viết lại hàm một chút để viết một hàm mà hiển thị được tên theo ý muốn nhé ^^.
function
displayName
(
name
)
{
console.
log
(
"Xin chào mình là "
+
name)
;
}
let
input =
prompt
(
"Nhập một tên: "
)
;
displayName
(
input)
;
Ta nhập thử tên theo ý mình nhé:
Nhập một tên:
H
à
Xin chào mình là H
à
Thử nhập tên khác xem có tái sử dụng hàm được không 😃:
Nhập một tên:
T
ú
Xin chào mình là T
ú
Trong chương trình trên, hàm displayName()
được khai báo với một tham số name. Người dùng được nhắc nhập tên và giá trị sau khi nhập lưu vào biến input
. Sau đó, khi ta gọi hàm, một đối số được truyền vào hàm là input
.
Khi một giá trị được truyền khi khai báo một hàm, nó được gọi là tham số – parameter. Và khi gọi hàm, giá trị được truyền vào được gọi là đối số – argument. Tên tham số và đối số không cần phải đặt giống nhau.
Ví dụ:
Giờ ta sẽ thử tính tổng hai số với tham số là 2 số tùy chọn nhé.
function
add
(
a
,
b)
{
console.
log
(
`
Tổng hai số là:
${
a +
b}
`
)
;
}
add
(
1
,
2
)
;
add
(
4
,
-
5
)
;
Kết quả chúng ta được:
T
ổng hai số là:
3
T
ổng hai số là:
-
1
Trong chương trình trên, hàm add
dùng để tính tổng của hai số.
- Hàm được khai báo với hai tham số a và b.
- Hàm được gọi bằng cách sử dụng tên của nó và truyền hai đối số 1 và 2 ở
(1)
, 4 và -5 ở(2)
.
Chúng ta có thể gọi một hàm bao nhiêu lần tùy thích, chúng ta còn có thể viết một hàm và sau đó gọi nó nhiều lần với các đối số khác nhau. Đây chính là cái hay khi chúng ta sử dụng hàm 😁😁😁.
Hàm có tham số mặc định
Chúng ta có thể đặt mặc định một giá trị cho tham số nếu muốn ^^.
function
add
(
a
,
b =
5
)
{
console.
log
(
`
Tổng hai số là:
${
a +
b}
`
)
;
}
add
(
1
)
;
add
(
4
,
-
5
)
;
Kết quả:
T
ổng hai số là:
6
T
ổng hai số là:
-
1
Khi gọi hàm với tham số mặc định, như ví dụ trên thì (1)
không cần truyền đối số thứ hai (mình để mặc định là 5) thì JavaScript tự biết a + b
là 1 + 5
. Ở (2)
chúng ta truyền -5 vào đối số thứ hai và JavaScript sẽ sử dụng -5 thay vì giá trị mặc định để tính toán ^^.
Function Return
Câu lệnh return
có thể được sử dụng để trả về giá trị cho một lời gọi hàm. Mình lấy lại ví dụ về thẻ ngân hàng, bạn đến và đưa thông tin cá nhân (parameter) để làm thẻ tại ngân hàng, ngân hàng chấp nhận thông tin của bạn và sau đó thẻ ngân hàng được làm và đưa cho bạn (return).
Câu lệnh return
có nghĩa là hàm đã kết thúc. Bất kỳ đoạn code nào sau return
đều không được thực thi.
Nếu không có gì được return
, hàm sẽ trả về một giá trị undefined
.
Ví dụ:
function
add
(
a
,
b)
{
return
a +
b;
}
let
result =
add
(
1
,
99
)
;
console.
log
(
"Tổng hai số là "
+
result)
;
Chúng ta xem kết quả ở ví dụ trên:
T
ổng hai số là 100
Trong chương trình trên, kết quả phép tính tổng được trả về bởi hàm sử dụng câu lệnh return
. Và giá trị đó được lưu trữ trong biến result
.
Giả sử chúng ta không sử dụng lệnh return thì kết quả như sau:
function
add
(
a
,
b)
{
a +
b;
}
let
result =
add
(
1
,
99
)
;
console.
log
(
"Tổng hai số là "
+
result)
;
Kết quả chúng ta được: Tổng hai số là undefined 😣. Lý do là chúng ta không return về kết quả tính tổng. Do đó function sẽ mặc định return undefined;
.
Qua các ví dụ trên chúng ta có thể thấy được lợi ích khi sử dụng hàm như sau ^^.
Function
làm cho các đoạn code có thể được sử dụng lại. Chúng ta có thể khai báo một lần và sử dụng nhiều lần.Function
giúp chúng ta tạo chương trình dễ dàng hơn vì mỗi nhiệm vụ nhỏ được chia thành một chức năng.Function
giúp tăng khả năng đọc.
Function Expressions
Trong Javascript, các hàm cũng có thể được định nghĩa dưới dạng các biểu thức (expressions).
Ví dụ:
let
dienTichHinhChuNhat
=
function
(
a
,
b)
{
return
a *
b }
;
console.
log
(
dienTichHinhChuNhat
(
8
,
4
)
)
;
let
dienTichHinhChuNhat2 =
dienTichHinhChuNhat
(
3
,
8
)
;
console.
log
(
dienTichHinhChuNhat2)
;
Trong chương trình trên, biến dienTichHinhChuNhat
được sử dụng để lưu khai báo hàm. Ở đây hàm được coi như một biểu thức. Và hàm được gọi bằng cách sử dụng tên biến.
Hàm trên chúng ta không đặt tên cho nó, hàm này được gọi là hàm ẩn danh (anonymous function). Trong ES2015, các biểu thức trên còn được viết dưới dạng các arrow functions hay “hàm mũi tên”. chúng ta sẽ tìm hiểu về chúng trong các bài viết sau 😄😄😄.
Cảm ơn các bạn đã đọc bài viết này. Chúng ta sẽ gặp lại nhau trong các bài viết sắp tới nhé ^^.