Hướng dẫn cách truyền tham số vào hàm trong JavaScript. Khi gọi một hàm trong JavaScript, chúng ta truyền các giá trị thực vào hàm thông qua các biến trong hàm. Các biến này sau khi được gán giá trị sẽ được sử dụng để tính toán với các lệnh được miêu tả trong hàm. Chúng ta gọi các giá trị thực truyền vào hàm gọi là đối số, các biến dùng để nhập các giá trị này gọi là tham số, và việc truyền giá trị thực vào biến gọi như vậy là truyền tham số vào hàm trong JavaScript.

Chúng ta có 5 phương pháp để truyền tham số vào hàm trong JavaScript như sau:

• Truyền tham số vào hàm trong JavaScript cơ bản
• Truyền tham số vào hàm trong JavaScript khi số lượng đối số và tham số khác nhau
• Truyền tham số vào hàm trong JavaScript bằng tham số mặc định (default parameter)
• Truyền tham số vào hàm trong JavaScript mà không giới hạn số lượng đối số | Rest parameters và toán tử 3 chấm trong JavaScript
• Truyền tham số vào hàm trong JavaScript kết hợp tham số xác định và phần tham số còn lại

Truyền tham số vào hàm trong JavaScript

Tham số là các biến có tên được sử dụng để định nghĩa một hàm trong JavaScript. Giống như Kiyoshi đã giải thích trong bài Function trong JavaScript với cách tạo và gọi hàm thì khi tạo hàm trong JavaScript chúng ta ghi các tham số vào giữa cặp dấu ngoặc (), và nếu có nhiều tham số trong hàm thì chúng ta sẽ ghi chúng cách nhau bởi một dấu phẩy , như sau:

Khi gọi hàm trong JavaSript, chúng ta sẽ ghi các giá trị thực cần truyền vào hàm vào giữa cặp dấu ngoặc (), và nếu có nhiều giá trị cần truyền vào, chúng ta sẽ ghi chúng cách nhau bởi dấu , . Chúng ta gọi các giá trị truyền vào hàm là đối số, và gán các giá trị này vào tham số để sử dụng khi tính toán trong hàm. Chúng ta viết cú pháp gọi hàm trong JavaScript như sau:

Quá trình chúng ta truyền giá trị thực (đối số) vào hàm thông qua tham số như trên được gọi là truyền tham số vào hàm trong JavaScript.

Ví dụ cụ thể, chúng ta khai báo hàm tính in tên và tuổi của một người như sau:

function printname(name, old){
  console.log('name : ' + name);
  console.log('old : ' + old);
}

Chúng ta gọi hàm và truyền tham số vào hàm bằng đối số như sau:

printname('Kiyoshi', 30);

Các đối số Kiyoshi và 30 sẽ được gán vào hai tham số name và old, sau đó được xử lý và và in ra màn hình như sau:

name : Kiyoshi
old : 30

Truyền tham số vào hàm trong JavaScript khi số lượng đối số và tham số khác nhau.

Khi số lượng đối số nhỏ hơn số lượng tham số

Trong hàm của JavaScript, kể cả khi số lượng đối số mà bạn truyền vào hàm có khác với số lượng tham số dùng để nhập đối số đi chăng nữa, thì lỗi cũng sẽ không xảy ra trong chương trình.

Điều này rất là khác biệt so với các ngôn ngữ khác, ví dụ như Python chẳng hạn, vốn yêu cầu nghiêm ngặt số giá trị truyền vào phải bằng số biến dùng để nhận giá trị đó.

Tuy nhiên, mặc dù lỗi chương trình không xảy ra nhưng giá trị của tham số không được truyền giá trị sẽ trở thành undefined, giống như ví dụ sau:

function printname(name, old){
  console.log('name : ' + name);
  console.log('old : ' + old);
}

printname('Kiyoshi', 30);
//>name : Kiyoshi
//>old : 30

printname('Honda');
//>name : Honda
//>old : undefined

Khi số lượng đối số lớn hơn số lượng tham số

Ngược với ví dụ trên khi mà chúng ta truyền vào hàm số lượng đối số lớn hơn số lượng tham số có thể dùng để chứa giá trị của đối số. Ngay cả trong trường hợp này, hàm trong JavaScript cũng sẽ không bị xảy ra lỗi như ví dụ sau:

function printname(name, old){
  console.log('name : ' + name);
  console.log('old : ' + old);
}

printname('Ajinomoto', 100, 'suzuki');
//>name : Ajinomoto
//>old : 100

Lúc này, hai đối số là Ajinomoto và 100 sẽ lần lượt được truyền giá trị vào 2 tham số là name và old. Còn đối số thứ 3 là suzuki thì đơn giản là không có tham số nào để chứa nó cả nên sẽ không được sử dụng trong chương trình mà thôi.

Truyền tham số vào hàm trong JavaScript bằng tham số mặc định (default parameter)

Trong trường hợp chúng ta truyền số lượng đối số vào hàm ít hơn số lượng tham số trong hàm, khi đó các tham số không được nhận giá trị đối số sẽ được gán giá trị mặc định là undefined.

Tuy nhiên chúng ta cũng có thể thay đổi giá trị mặc định gán vào tham số, bằng cách sử dụng tới tham số mặc định (default parameter) trong JavaScript.

Cách chỉ định tham số mặc định như sau:

Nếu chỉ định tham số mặc định trong hàm JavaScript, nếu khi gọi hàm mà tham số đó không được truyền giá trị vào thì giá trị mặc định sẽ được sử dụng để gán vào tham số.

Ví dụ cụ thể, chúng ta tạo một hàm tính giá hàng kèm thuế VAT như sau.

function find_value(price, tax = 10){
  value = price * (100 + tax )/100;
  console.log(value);
}

Với hàm trên, chúng ta có thể chỉ định thuế VAT thông qua tham số tax có giá trị mặc định là 10%. Điều đó có nghĩa là nếu chỉ định tax thì hàm sẽ dùng giá trị mà bạn truyền vào. Nếu không thì hàm sẽ sử dụng giá trị thuế VAT mặc định là 10% như sau:

//Chỉ định thuế VAT là 2%
find_value(20000,2);
//>20400

//Nếu không chỉ định thuế VAT, giá trị mặc định 10% sẽ được sử dụng
find_value(20000);
//>22000

Truyền tham số vào hàm trong JavaScript mà không giới hạn số lượng đối số | Rest parameters và toán tử 3 chấm trong JavaScript

Sự bất tiện khi truyền số lượng cực lớn giá trị vào một hàm JavaScript

Ở phần trên chúng ta đã biết cách mỗi tham số trong hàm JavaScript chỉ có thể nhận được giá trị từ đối số tương ứng của nó, và trong trường hợp không có đối số nào được chỉ định để truyền giá trị cho nó, giá trị defalt sẽ được gán vào nó.

Điều đó có nghĩa, trong trường hợp mà bạn muốn truyền số lượng lớn đối số vào hàm trong JavaScript, bạn cũng phải chuẩn bị đủ số lượng lớn tham số tương ứng để gán giá trị.

Và, trong những hàm mà bạn cần có sự linh hoạt hơn khi truyền giá trị, ví dụ như không giới hạn số lượng giá trị truyền vào hàm, chỉ định 2 đối số hay 10 đối số một lúc cũng OK chẳng hạn, thì cách truyền giá trị vào hàm thông thường sẽ cực kỳ bất tiện cho chúng ta.

Rest parameters (tham số còn lại) trong JavaScript

Để giải quyết vấn đề khi cần truyền một số lượng lớn giá trị vào hàm, hoặc là khi chúng ta không muốn giới hạn số đối số có thể nhập vào hàm, trong các phiên bản ES6 trở đi của JavaSript, rest parameters có tên tiếng Việt là tham số còn lại đã được ra đời.

Rest parameters (tham số còn lại) trong JavaScript là một tham số mà không giới hạn số lượng đối số có thể được truyền vào nó khi gọi hàm trong JavaScript. Rest parameters cho phép một hàm trong JavaScript chấp nhận một số lượng vô hạn đối số dưới dạng một mảng, và việc xử lý lệnh trong hàm bằng mảng sẽ giúp chúng ta linh hoạt hơn khi xử lý hàm trong JavaScript.

Toán tử 3 chấm trong JavaScript

Để làm việc với Rest parameters, chúng ta cần dùng đến toán tử 3 chấm trong JavaScript và viết hàm với cú pháp sau đây:

Trong đó, dấu 3 chấm ... được ghi trước tên tham số, biểu thị rằng tất cả các đối số cần truyền vào hàm đều được gán hết vào tham số này.

Sau khi gọi hàm trên, chúng ta có thể truyền một số lượng giá trị bất kỳ vào hàm, ví dụ như hàm số tính tổng một dãy số bất kỳ như sau:

function find_sum(...num){
  let sum = 0
  for (let i = 0 ; i < num.length ; i++){
    sum += num[i];
  }

  console.log(sum);
}

Chúng ta có thể truyền một số lượng bất kỳ giá trị khi gọi hàm như sau:

find_sum(1, 2, 3);
//> 6

find_sum(1, 2, 3, 4, 5);
//> 15

Truyền tham số vào hàm trong JavaScript kết hợp tham số xác định và tham số còn lại

Ở phần trên chúng ta đã biết cách truyền giá trị vào hàm không giới hạn số lượng đối số bằng cách sử dụng *rest parameters** và toán tử 3 chấm trong JavaScript rồi.

Tuy nhiên chúng ta cũng còn một cách ứng dụng nữa, đó chính là truyền giá trị vào hàm trong trường hợp có một phần tham số là tham số xác định, và phần còn lại là các tham số không giới hạn đối số trong JavaScript. Ví dụ như bạn muốn truyền các giá trị xác định số lượng như tên hoặc tuổi, và các tham số còn lại chưa xác định của người dùng như tình trạng hôn nhân, số xe số nhà v.v.. vào một hàm xác định danh tính người dùng trong JavaScript chẳng hạn.

Khi đó, chúng ta cũng sử dụng *rest parameters** và toán tử 3 chấm trong JavaScript, nhưng với cú pháp khác như sau:

Trong đó tham số 1, tham số 2 là các tham số đã xác định số lượng, và phần giá trị còn lại không giới hạn số lượng khi truyền giá trị vào hàm sẽ được gán vào tham số còn lại.

Ví dụ cụ thể, chúng ta có 2 tham số xác định là tên và tuổi, cùng với một tham số còn lại không giới hạn số giá trị nhập vào nó như sau:

function find_user(name, old, ...other){
  console.log("Name:", name);
  console.log("Old:", old);  
  for (let i = 0 ; i < other.length ; i++){
   console.log(other[i]);
  }
}

find_user('Kiyoshi', 30);
//> Name: Kiyoshi
//> Old: 30

find_user('Tèo', 20, 'đẹp trai', 'có xe đạp riêng');
//> Name: Tèo
//> Old: 20
//> đẹp trai
//> có xe đạp riêng

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về cách truyền tham số vào 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.

Lại nữa, việc truyền tham số vào hàm trong JavaScript có thể thay đổi giá trị của giá trị đó, tùy thuộc vào giá trị đó là có thể thay đổi hay không thể thay đổi. Đây là điểm chúng ta cần lưu ý để tránh gây ra sự nhầm lẫn giá trị một biến ở trong và ngoài một hàm JavaScript . Hãy cùng Kiyoshi tìm hiểu về vấn đề này trong bài viết Mutable và Immutable Objects trong hàm JavaScript nhé.

URL Link

https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/ham-trong-javascript/truyen-tham-so-vao-ham-trong-javascript/