Function trong JavaScript với cách tạo và gọi hàm | Laptrinhcanban.com

Function trong JavaScript với cách tạo và gọi hàm

Có 4 phương pháp tạo hàm trong JavaScript là sử dụng từ khóa function, sử dụng biểu thức, sử dụng hàm tạo (constructor) và sử dụng hàm Arrow. Trong bài học này, chúng ta sẽ cùng học về cách tạo hàm JavaScript đầu tiên và căn bản nhất là tạo hàm trong Javascript bằng từ khóa function. Ngoài ra bạn cũng sẽ học được cách gọi hàm trong JavaScript sau bài học này.

function trong JavaScript

function trong JavaScript là gì

function trong JavaScript là một từ khóa (keyword) dùng để xác định một hàm. Chúng ta sử dụng function khi khai báo hàm trong JavaScript.
function trong JavaScript

Trong bài viết Hàm trong JavaScript bạn đã biết có 2 loại hàm trong JavaScript, trong đó có một loại hàm mà chúng ta có thể tự tạo hàm để sử dụng trong chương trình, đó chính là hàm JavaScript do người dùng định nghĩa.

Trong chương trình JavaScript, để sử dụng một hàm do chúng ta tự định nghĩa, trước tiên bạn cần tạo ra nó. Bạn cần quyết định hàm sẽ mô tả giá trị mà nó nhận được từ người gọi thế nào, nó làm gì khi được gọi và giá trị nào nó trả về cho người gọi.

Tạo hàm trong JavaScript bằng từ khóa function

Khi muốn tạo một hàm JavaScript, chúng ta khai báo hàm trong JavaScript bằng cách sử dụng từ khóa function trong JavaScript với cú pháp hàm như sau:

function tên hàm (tham số 1, tham số 2, …) {:
    Câu lệnh 1 trong hàm
    Câu lệnh 2 trong hàm
    …

    return giá trị trả về
}

Trong đó:

  • function là từ khóa mặc định dùng để khai báo hàm trong JavaScript
  • tên hàm là một chuỗi ký tự dùng để đặt tên đại diện cho hàm.
  • tham số là các biến sử dụng trong khai báo hàm, cũng như để nhập đối số khi chúng ta sử dụng hàm.
  • return là từ khóa dùng để trả giá trị trả về từ hàm trong JavaScript

Ví dụ, chúng ta sử dụng function để tạo ra một hàm tính tổng hai số và trả về kết quả trong chương trình như sau:

function add(a, b){
x = a + b;
return x;
}

Chúng ta đã tạo ra hàm add với hai tham số a và b. Hàm sẽ nhận giá trị thực truyền vào hàm thông qua tham số, sau đó tính toán tổng, gán tổng vào biến x và trả về giá trị của x bằng câu lệnh return.

Chỉ định hoặc lược bỏ tham số khi tạo hàm trong JavaScript

Khi tạo hàm trong JavaScript chúng ta có thể chỉ định tham số hoặc là lược bỏ đi tham số. Trong trường hợp có nhiều tham số trong hàm, chúng ta sẽ đặt chúng cách nhau bởi dấu phẩy. Nếu hàm không chứa tham số, chúng ta để trống giá trị trong giữa cặp ngoặc () như sau:

function add(){
x = 1 + 2;
return x;
}

Viết câu lệnh xử lý trong hàm JavaScript

Các lệnh xử lý trong hàm sẽ được viết vào giữa cặp dấu {}. Bạn có thể viết một lệnh, hoặc nhiều lệnh, hoặc cũng có thể lược bỏ, không cần viết một lệnh nào trong hàm cả mà không sợ lỗi xảy ra.

Hàm không có lệnh trong nó gọi là một hàm trống hay còn gọi là hàm giữ chỗ, khi bạn chỉ muốn tạo hàm để giữ chỗ và sẽ viết các lệnh trong hàm sau này, hoặc đơn giản là chưa muốn làm gì với nó cả. Việc bỏ trống không ghi lệnh mà không bị lỗi hàm là điều rất khác biệt với các ngôn ngữ khác, ví dụ như Python chẳng hạn, vốn cần phải thêm lệnh Pass để đảm bảo cú pháp tạo hàm và tránh lỗi.

Ví dụ chúng ta tạo một hàm trống trong JavaScript như sau:

function blank_fuct(){
}

Giá trị trả về từ hàm trong JavaScript

Nếu bạn muốn tạo hàm trả về giá trị trong JavaScript, hãy sử dụng tới câu lệnh return và ghi giá trị trả về từ hàm sau đó. Hàm chứa lệnh return được gọi là hàm trả về giá trị trong JavaScript.
Ví dụ:

function add(a, b){
x = a - b;
return x;
}

Tuy nhiên nếu trong trường hợp không có giá trị nào cần trả về từ hàm thì chúng ta cũng có thể bỏ qua lệnh này. Ví dụ:

function hello(){
console.log('Hello');
}

Lưu ý, nếu bạn chỉ tạo một hàm mà không gọi nó ra, thì sẽ không có điều gì xảy ra cả. Do đó, khi cần sử dụng hàm, chúng ta cần thiết phải gọi hàm trong JavaScript.

Gọi hàm trong JavaScript

Cú pháp gọi hàm trong JavaScript

Sau khi khai báo hàm bằng từ khóa function trong JavaScript, chúng ta có thể sử dụng hàm đó nhiều lần bằng cách gọi hàm trong JavaScript với cú pháp sau đây:

tên hàm ( đối số 1, đối số 2,…)

Chúng ta viết tên hàm, sau đó đặt các đối số sử dụng trong hàm ở giữa cặp dấu ngoặc đơn () và cách nhau bởi dấu phẩy ,. Các giá trị của đối số sẽ được dùng để truyền tham số trong JavaScript.

Ví dụ, chúng ta có một hàm JavaScript như sau:

function add(a, b){
x = a + b;
return(x);
}

Khi cần sử dụng hàm này, chúng ta đơn giản gọi tên nó cùng với các đối số truyền vào là xong:

add(1, 2);

Sau khi gọi hàm trong JavaScript, một giá trị là kết quả của hàm sẽ được trả về. Bạn có thể sử dụng trực tiếp giá trị này, hoặc là gán giá trị trả về từ hàm vào biến để sử dụng như sau:

console.log(add(1,2));
//3

ketqua = add(1, 2);
console.log(ketqua);
//3

Gọi hàm không chứa tham số trong JavaScript

Trong trường hợp trong hàm được khai báo không chứa tham số, chúng ta cũng không thể truyền tham số vào hàm được. Khi đó chúng ta sẽ chỉ gọi hàm trong JavaScript bằng cách lược bỏ đối số đi.
Ví dụ, hàm sau đây không chứa tham số trong hàm, do đó khi sử dụng chúng ta cũng không thể ghi đối số như sau:

function hello():
print('Hello');

hello();
//> Hello

Ngược lại, nếu trong một hàm có chứa tham số, nhưng bạn lại chỉ định thiếu đối số khi sử dụng nó, một giá trị lỗi NaN sẽ bị trả về từ hàm như sau:

function add(a, b){
x = a + b;
return(x);
}

console.log(add(1));
//NaN

Gọi hàm không chứa giá trị trả về trong JavaScript

Lại nữa, nếu như một hàm không phải là hàm trả về giá trị trong JavaScript, có nghĩa là nó không chứa câu lệnh trả về giá trị return bên trong hàm, thì về mặc định, giá trị undefined sẽ được trả về. Ví dụ:

function sample(a,b){
x = a + b;
}
console.log(sample(1,2));
//undefined

Lưu ý cuối cùng khi gọi hàm trong JavaScript, nếu như bạn gọi một hàm mà hàm đó vốn chưa được khai báo, lỗi ReferenceError sau đây sẽ xảy ra:

sample2();

//ReferenceError: sample2 is not defined

Các cách tạo hàm khác trong JavaScript

Ngoài cách khai báo hàm trong JavaScript bằng từ khóa function mà Kiyoshi đã hướng dẫn ở trên, chúng ta còn có 3 phương pháp khác dưới đây để tạo hàm trong JavaScript.

Tạo hàm trong JavaScript bằng constructor (hàm tạo)

Bằng cách sử dụng constructor (hàm tạo) trong class Function, chúng ta có thể tạo hàm trong JavaScript như sau:

let tên_biến = new Function ( tham_sô_1, tham_sô_2, tham_sô_3…,các xử lý trong hàm )

Tạo hàm trong JavaScript bằng biểu thức

Chúng ta dùng biểu thức để tạo các hàm không có tên như sau:

let tên_biến = function ( tham_sô_1, tham_sô_2, tham_sô_3.. ){
    Câu lệnh 1 trong hàm
    Câu lệnh 2 trong hàm
    …

    return giá trị trả về
}

Tạo hàm trong JavaScript bằng hàm arrow

Chúng ta cũng có thể sử dụng hàm arow khi tạo hàm trong JavaScript như sau:

let tên_biến = ( tham_sô_1, tham_sô_2, tham_sô_3.. ) => {
    Câu lệnh 1 trong hàm
    Câu lệnh 2 trong hàm
    …

    return giá trị trả về
}

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về cách khai báo hàm bằng từ khóa function trong JavaScript, cũng như cách gọi hàm trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.