Video học lập trình mỗi ngày

Trong ECMAScript 2015 hay còn gọi là ES6, default function parameters đã được giới thiệu trọng ngôn ngữ lập trình JavaScript. Cho phép những developers khởi tạo function có những default value nếu như chúng được định nghĩa sai. Đồng nghĩa với việc, khi sử dụng chức năng này thì giúp những function của chúng ta dễ control và ít error hơn.

Yêu cầu người đọc

- Hiểu về ES6 - Hiểu về cách initialize a function

Trong bài viết này, chúng ta sẽ phân biệt được parameters và arguments. Và làm thế nào sử dụng default parameters trong functions. Và chúng ta sẽ trải qua những ví dụ, để hiểu hơn về Default Parameters.

Phân biệt Arguments và Parameters

Để phân biệt được arguments và parameters thì chúng ta cùng xem xét ví dụ dưới đây

// Define a function to cube a number
function cube(x) {
  return x * x * x
}

Biến x chính là một parameters của ví dụ trên, một biến được đặt tên và truyền vào một function, và một parameters luôn luôn chứa ít nhất một biến.

Tiếp theo xem thử function cude() chạy thế nào?

// Invoke cube function
cube(10)

//Ouput: 1000

Đi tiếp đoạn code tiếp theo

// Assign a number to a variable
const number = 10

// Invoke cube function
cube(number)

number chính là một arguments hay là một giá trị được truyền cho hàm khi nó được gọi. Thường thì giá trị cũng sẽ được chứa trong một biến, chẳng hạn như trên bạn đã thấy. Giả sử chúng ta có một sai lầm là không truyền vào một parameters hay arguments nào cho hàm cube thì chuyện gì xảy ra?

// Invoke the cube function without passing an argument
cube()

//Output: NaN

NaN: Chính là 'Not a Number', lý do khi chúng ta không pass một arguments thì function hiểu ngầm mặc định là undefined. Để điều đó không xảy ra thì Default Parameter ra đời.

Cú pháp Default Parameter trong JavaScript

Trước kia khi chưa được ES6 giới thiệu về Default Parameter thì chúng ta thường check một cách điển hình như thế này, còn ai không check thì kệ nó, và kết thúc bài viết tại đây.

Tipjs: Tổng hợp tính năng javascript mới nhất kể từ ES6 đến ES11

// Check for undefined manually
function cube(x) {
  if (typeof x === 'undefined') {
    x = 5
  }

  return x * x * x
}

cube()

Bạn sử dụng check điều điện trong JavaScript để check nếu x = undefined thì gán cho nó = 5. Tuyệt vời, nhưng giờ đây bạn không cần phải sử dụng như trên nữa, thay vào đó chúng ta sẽ sử dụng cách dưới đây.

// Define a cube function with a default value
function cube(x = 5) {
  return x * x * x
}

Sử dụng:

// Invoke cube function without an argument
cube()

Ouput: 125:

Thậm chí set undefined cũng có kết quả tương tự.

// Invoke cube function with undefined
cube(undefined)

Ouput: 125:

Đến đây bạn có thể check xem Default Parameter support được bao nhiêu kiểu định dạng:

Default Parameter Data Types trong JavaScript

Ví dụ :

// Create functions with a default value for each data type
const defaultNumber = (number = 42) => console.log(number)
const defaultString = (string = 'Shark') => console.log(string)
const defaultBoolean = (boolean = true) => console.log(boolean)
const defaultObject = (object = { id: 7 }) => console.log(object)
const defaultArray = (array = [1, 2, 3]) => console.log(array)
const defaultNull = (nullValue = null) => console.log(nullValue)

// Invoke each function
defaultNumber()
defaultString()
defaultBoolean()
defaultObject()
defaultArray()
defaultNull()

//Ouput: 

42
"Shark"
true
{id: 7}
(3) [1, 2, 3]
null

Nhưng chưa hết bạn có nhớ ES6-2019122141422037">Destructuring JavaScript" , điều này cũng có thể làm tương tự với destructuring

// Define a settings function with a default object
function settings(options = {}) {
  const { theme, debug } = options

  // Do something with settings
}

Sử sụng Multiple Default Parameters

Đến đây, tôi nghĩ các bạn cũng đã hiểu hơn rồi, và cùng xem những ví dụ để hiều hơn về set multiple

// Define a function to add two values
function sum(a = 1, b = 2) {
  return a + b
}

sum()

//Output: 3

Ngoài ra, giá trị được sử dụng trong một tham số có thể được sử dụng trong mọi tham số mặc định tiếp theo, từ trái sang phải.

// Define a function to create a user object using parameters
function createUser(name, rank, userObj = { name, rank }) {
  return userObj
}

// Create user
const user = createUser('Jean-Luc Picard', 'Captain')

//Ouput: 

{name: "Jean-Luc Picard", rank: "Captain"}

Đến đây chưa phải là hết mà mới là bắt đầu của bài viết này thôi, quan trọng là phần này

Set Default Parameters cho một function

Trong đoạn mã dưới này, bạn sẽ tạo một hàm để trả về một số ngẫu nhiên, sau đó sử dụng kết quả làm giá trị tham số mặc định trong cube() function:

Ví dụ :

// Define a function to return a random number from 1 to 10
function getRandomNumber() {
  return Math.floor(Math.random() * 10)
}

// Use the random number function as a default parameter for the cube function
function cube(x = getRandomNumber()) {
  return x * x * x
}


// sử dụng
cube()
cube()

//Output:
512
64

Kết luận

Trong bài viết này, bạn đã tìm hiểu các tham số chức năng mặc định là gì và cách sử dụng chúng. Bây giờ bạn có thể sử dụng các tham số mặc định để giúp giữ cho các chức năng của bạn tránh bị những error ngớ ngẩn. Bạn cũng có thể gán các objects and arrays cho các tham số trả trước để giảm cả độ phức tạp và dòng mã khi xử lý các tình huống như truy xuất giá trị từ một object hay Array.

Resource: digitalocean.com