Pass Multiple Arguments to a Function

You learned that you can pass information called an argument to a function. 0:00 The function stores that value in a parameter and uses it within the function. 0:04 Functions can accept more than one argument. 0:09 When calling a function, you're able to pass multiple arguments to the function. 0:12 Each argument gets stored in a separate parameter and 0:16 used as a separate variable within the function. 0:19 Let's revisit the example of you and 0:21 your assistant in the useful goToCoffeeShop function. 0:23 Perhaps you not only want to order a drink but 0:27 also get something to eat when your assistant runs off to the coffee shop. 0:29 Currently, the goToCoffeeShop function is limited to just one item. 0:33 You can another parameter in the function definition by typing a comma, 0:37 followed by the parameter name. 0:41 Let's call it pastry. 0:43 Then update the programming inside the function to use the new pastry perimeter. 0:45 Now this function expects two arguments. 0:49 When you call the function, 0:52 pass the second argument by typing a comma followed by a value. 0:53 croissant, for instance. 0:57 This function is now flexible enough for you to order a different drink and 0:59 pastry each time it's called. 1:02 All right, now let's create a function that uses multiple parameters and 1:05 arguments. 1:09 This time, open the file named multiple-args.js. 1:10 And as usual, update the script tag in index.html so 1:14 that it points to multiple-args.js. 1:18 The function we'll create is going to calculate the area of a rectangle. 1:25 Define a function named getArea, and the math for 1:30 calculating the area is pretty straightforward. 1:33 Multiply the length of a rectangle by its width. 1:37 Let's have this function accept a length value and 1:40 a width value via the parameters width and length. 1:44 Inside the function, declare a variable named area. 1:49 Its value is the result or product of width times length. 1:54 And let's have the function returned the value of area using a return statement. 2:01 Now to use this function, you call it and pass it a width and 2:07 length value, let's say 10 and 20. 2:12 Let's view the value in the console. 2:16 Once the browser loads JavaScript, 2:18 you can call any functions in your JavaScript file directly from the console. 2:20 For example, I'll test the getArea function by cutting the function call 2:24 out of the file, saving the file, and pasting it in the console. 2:29 The function returns an area of 200, but 200 what? 2:35 I want to return a value that includes a unit of measurement, like square feet and 2:39 square meters. 2:44 For example, a value like 200-square feet. 2:45 To do that, I'll add a third parameter to the function called unit. 2:48 Remember, a function can only return a single value. 2:54 So I'll need to adjust the return statement to return a string holding 2:58 the area and unit. 3:01 I'll replace area with a template literal that uses the ${} syntax, 3:03 or string interpolation, to insert the values of area and unit into the string. 3:09 I'll save this file, refresh the page and back in the console, 3:20 I'll press the up arrow key wants to bring back the getArea function call. 3:25 This time I'll pass the unit value as a string. 3:31 Now the console output's 200 sq ft. 3:38 I'll try a different set of values. 3:41 Let's say 5, And 3:44 17.5, sq m. 3:48 That returns 87.5 sq m, good. 3:56 You're able to pass any number of arguments to a function. 4:00 Too many arguments, however, can make your functions difficult to manage. 4:03 For instance, passing 12 arguments to a function and adding 12 parameters to 4:07 a function definition makes it challenging to track each value. 4:11 In a future course, you'll learn more efficient ways to pass lots of 4:15 pieces of information to a function with something called an array, 4:18 as well as an object literal that holds multiple values. 4:21 For now, keep in mind that passing more than four or five arguments to a function 4:24 can make your function tedious to use and harder to read. 4:28