Hướng dẫn javascript function parameter

A JavaScript function does not perform any checking on parameter values [arguments].

Function Parameters and Arguments

Earlier in this tutorial, you learned that functions can have parameters:

function functionName[parameter1, parameter2, parameter3] {
  // code to be executed
}

Function parameters are the names listed in the function definition.

Function arguments are the real values passed to [and received by] the function.

Parameter Rules

JavaScript function definitions do not specify data types for parameters.

JavaScript functions do not perform type checking on the passed arguments.

JavaScript functions do not check the number of arguments received.

Default Parameters

If a function is called with missing arguments [less than declared], the missing values are set to undefined.

Sometimes this is acceptable, but sometimes it is better to assign a default value to the parameter:

Example

function myFunction[x, y] {
  if [y === undefined] {
    y = 2;
  }
}

Try it Yourself »

The Arguments Object

JavaScript functions have a built-in object called the arguments object.

The argument object contains an array of the arguments used when the function was called [invoked].

This way you can simply use a function to find [for instance] the highest value in a list of numbers:

Example

x = findMax[1, 123, 500, 115, 44, 88];

function findMax[] {
  let max = -Infinity;
  for [let i = 0; i < arguments.length; i++] {
    if [arguments[i] > max] {
      max = arguments[i];
    }
  }
  return max;
}

Try it Yourself »

Or create a function to sum all input values:

Example

x = sumAll[1, 123, 500, 115, 44, 88];

function sumAll[] {
  let sum = 0;
  for [let i = 0; i < arguments.length; i++] {
    sum += arguments[i];
  }
  return sum;
}

Try it Yourself »

If a function is called with too many arguments [more than declared], these arguments can be reached using the arguments object.

Arguments are Passed by Value

The parameters, in a function call, are the function's arguments.

JavaScript arguments are passed by value: The function only gets to know the values, not the argument's locations.

If a function changes an argument's value, it does not change the parameter's original value.

Changes to arguments are not visible [reflected] outside the function.

Objects are Passed by Reference

In JavaScript, object references are values.

Because of this, objects will behave like they are passed by reference:

If a function changes an object property, it changes the original value.

Changes to object properties are visible [reflected] outside the function.

Hướng dẫn cách sử dụng arguments object trong javascript. Bạn sẽ học được cách sử dụng arguments để lấy các giá trị đã truyền vào hàm, cũng như các chú ý khi sử dụng arguments object trong javascript sau bài học này.

• Bài liên quan: Function trong JavaScript với cách tạo và gọi hàm.
• Bài liên quan: Truyền tham số vào hàm trong JavaScript

Arguments object là gì trong javascript

Arguments trong JavaScript [dịch sang tiếng việt là các đối số] là một đối tượng có tính chất giống như mảng trong JavaScript, có khả năng truy cập được vào bên trong hàm và chứa các giá trị của các đối số đã được truyền cho hàm đó.

Nói nôm na thì arguments chính là một mảng chứa các đối số đã truyền vào hàm trong JavaScript.

Ví dụ chúng ta có hàm tính tổng sau đây:

function sum[a,b,c]{
  return a + b + c;
}

Giả sử chúng ta gọi hàm và truyền 3 đối số vào hàm như sau:

sum[10,20,30];

Sau khi gọi hàm, các đối số đã truyền vào hàm là 10, 20 và 30 sẽ được lưu vào arguments theo thứ tự, và chúng ta có thể lấy chúng ra tương tự như khi sử dụng mảng, ví dụ như arguments[0] = 10, arguments[1] = 20, arguments[2] = 30 chẳng hạn.

Lưu ý là chúng ta chỉ có thể sử dụng Arguments object ở bên trong hàm JavaScript mà thôi. Và chúng ta cũng không thể sử dụng Arguments ở bên trong các hàm được tạo ra bởi hàm arrow trong JavaScript.

• Xem thêm: Arrow function trong JavaScript và cách tạo hàm

Các đối số truyền vào hàm sẽ được lưu giữ theo thứ tự trong Arguments, và chúng ta có thể lấy chúng ra bằng cách truy cập vào các phần tử trong arguments. Chúng ta cũng có thể truy xuất các thuộc tính của arguments object này, ví dụ như số lượng giá trị đã truyền vào hàm thông qua thuộc tính length chẳng hạn.

Arguments object thường được sử dụng trong các hàm mà chúng ta không quyết định số lượng đối số truyền vào hàm, và tất cả các đối số đều được lưu giữ hết trong Arguments mà không cần quan tâm tới số lượng của chúng là bao nhiêu. Tuy nhiên trong các phiên bản JavaScript mới đã được thêm vào Rest parameters với toán tử ba chấm, do đó ngoài Arguments thì chúng ta cũng có thêm lựa chọn khác khi muốn truyền tham số vào hàm trong JavaScript mà không giới hạn số lượng đối số.

• Xem thêm: Truyền tham số vào hàm trong JavaScript

Sau đây chúng ta sẽ cùng tìm hiểu các cách sử dụng Arguments object trong JavaScript.

Tìm số đối số đã truyền vào hàm bằng Arguments object trong JavaScript

Trong JavaScript, số lượng đối số truyền vào hàm và số lượng tham số dùng để nhận đối số không nhất thiết cần phải giống nhau. Giả sử số đối số truyền vào có lớn hơn số tham số sử dụng trong hàm chăng nữa, thì số đối số thừa sẽ không được sử dụng. Hoặc là nếu số đối số có nhỏ hơn số tham số sử dụng trong hàm, thì giá trị mặc định là undefined cũng sẽ được gán vào tham số, và lỗi cũng sẽ không xảy ra.

• Xem thêm: Truyền tham số vào hàm trong JavaScript

Giống như thế, khi chúng ta gọi hàm trong JavaScript, số đối số chúng ta truyền vào hàm không nhất định bằng với số tham số chỉ định trong hàm. Trong trường hợp này, chúng ta có thể sử dụng thuộc tính length của Arguments object và tìm số đối số đã truyền vào hàm.

Ví dụ chúng ta tìm số đối số đã truyền vào hàm sau trong JavaScript:

function find_user[name,old]{
  console.log['arguments.length : ' + arguments.length];
}

find_user['Kiyoshi', 30];


find_user['Honda', 20, 'tokyo'];


find_user['Suzuki'];

Giống như trên, số lượng đối số thực tế mà chúng ta đã truyền vào hàm sẽ được truy xuất thông qua thuộc tính arguments.length.

Lấy các giá trị truyền vào trong hàm bằng Arguments object trong JavaScript

Giá trị của các đối số truyền vào trong hàm JavaScript sẽ được gán vào các biến có tên [tham số] ở bên trong hàm đó. Tuy nhiên nó cũng còn được lưu giữ một cách riêng biệt trong Arguments object dưới dạng arguments[0],arguments[1]…

Ví dụ chúng ta có thể lấy giá trị truyền vào hàm thông qua Arguments object như sau:

function find_user[name,old]{
  console.log['name : ' + arguments[0]];
  console.log['old : ' + arguments[1]];
}

find_user['Kiyoshi', 30];

Tất nhiên chúng ta có thể lấy giá trị truyền vào hàm thông qua cả tham số lẫn Arguments object như sau:

function find_user[name,old]{
  console.log['Lấy name bằng arguments : ' + arguments[0]];
  console.log['Lấy name bằng tham số : ' + name;
}

find_user['Kiyoshi', 30];

Chúng ta cũng có thể sử dụng arguments trong JavaScript khi cần truyền tham số vào hàm trong JavaScript mà không giới hạn số lượng đối số, do tất cả các đối số này không giới hạn số lượng đều được lưu cả vào trong arguments rồi. Ví dụ:

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

  console.log['sum = ' + sum];
}

find_sum[1, 3, 5];


find_sum[7, 12, 3, 2, 8];

Chú ý khi sử dụng Arguments trong JavaScript

Trong các hàm được khai báo bởi từ khóa fucntion, bằng hàm tạo [constructor] cũng như là bằng biểu thức hàm với các hàm ẩn danh, chúng ta đều có thể sử dụng Arguments với các cách mà Kiyoshi đã hướng dẫn bạn ở trên.

Tuy nhiên, bạn cần chú ý là chúng ta KHÔNG THỂ sử dụng Arguments trong các hàm được tạo bởi hàm mũi tên [arrow function] JavaScript.

Lỗi Uncaught ReferenceError sẽ xảy ra khi chúng ta vô ý sử dụng Arguments trong hàm tạo bởi arrow function.

let sum_arrow_func = [] => {
  let sum = 0;
  for [let i = 0; i < arguments.length; i++]{
    sum += arguments[i];
  }

  console.log['sum = ' + sum];
};

sum_arrow_func[1, 3, 5];

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về arguments trong javascript và việc lấy các giá trị đã truyền vào hàm 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.

Viết bởi Kiyoshi. Đã đăng ký bản quyền tác giả tại <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" rel="license noopener" target="_blank" href="//creativecommons.org/licenses/by-nc-nd/4.0/">Creativecommons</a>&nbsp;và <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" target="_blank" rel="noopener" href="//www.dmca.com/Protection/Status.aspx?ID=1631afcd-7c4a-467d-8016-402c5073e5cd" class="dmca-badge">DMCA</a><script src="//images.dmca.com/Badges/DMCABadgeHelper.min.js">

Bài viết liên quan

• Function object trong JavaScript

• Hàm ẩn danh [Anonymous Function] trong JavaScript

• Callback trong JavaScript

• Hàm đệ quy [recursive function] trong JavaScript và cách gọi một hàm bên trong chính nó

• Mutable, Immutable Objects và sự biến đổi của giá trị trong hàm JavaScript

• Arrow function - hàm mũi tên trong JavaScript

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

• Chuyển chữ hoa thành chữ thường và ngược lại trong JavaScript [toLowerCase, toUpperCase]