Using the rest operator to pass in a variable amount of arguments

If you don't know how many parameters you will need in your function you can use the rest operator to pass them in. ...

Demo

Video

JS


// adding to an array
someBits = [ "bit two", "bit three"];
someMoreBits = [ "bit one", ...someBits, "bit four"]; // this shows how the operator can be used to insert the elements of the someBits array into this array, without the operator it will add the full array
console.log("----- [someMoreBits] -----");
console.log(someMoreBits);

someMoreBitsArray = [ "bit one", someBits, "bit four"]; // this array will have the someBits nested array rather than the elements.
console.log("----- [someMoreBitsArray] -----");
console.log(someMoreBitsArray);

// using for function
function add_nums(x,y,z) {
  console.log(x+y+z);
}

// use function manually
console.log("----- [use add_nums function manually] -----");
add_nums(1,2,3);
args = [1,2,3];

// use function with spread operator
console.log("----- [use add_nums function with args array] -----");
add_nums(...args);

// concatonate arrays
console.log("----- [concatonate (join/merge) arrays ] -----");
array_one = [1,2,3];
array_two = [4,5,6];
array_three = array_one.concat(array_two); // using the concat function
array_four = [...array_one, ...array_two]; // using spread
console.log(array_three);
console.log(array_four);

// REST: passing in multiple elements
function multirest(multi, ...args) {
    return args.map(function(element) {
        return multi * element;
    });
}
console.log("----- [ using rest to pass in multiple element and a multiplier ] -----");
var multi_array = multirest(2, 3, 4, 5);
console.log(multi_array);

function run_function(...args) {
  //const nums.map(args);
  result = args.length;
  // const nums = args.map(); // how to use map function? -- https://www.w3schools.com/jsref/jsref_map.asp
  write_result(result);
  return result;
}

// this is a common function just to write the content into the result div
function write_result(result) {
  var result_html = document.getElementById("result");
  result_html.innerHTML = result;
}

HTML

<div id='result' class='mb-3 alert alert-primary'>..</div>
<button onclick='run_function(1,2,3,4,5,6,7);' class='btn btn-primary mb-1'>Run Function</button>

Working Result

..

External Link for Using the rest operator to pass in a variable amount of arguments

Other Items in javascript
Page Views

This page has been viewed 67 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹