Unable to pass two arrays into single JavaScript function parameter from html file

As it is my first task, instead of doing directly in the Online Editor, I am doing it in my Visual Studio Code Editor. Below are my .js file, and .html file.

From the below javascript code, sym([1, 2, 3], [5, 2, 1, 4]); is showing alert for 1,2, and 3 only. But, I thought that, this code will show two alerts as there are two arrays inside the argument.

I want args to accept my two arrays as two different items. How can I modify the code to achieve this requirement?

function sym(args) {
    args.forEach(element => {
        alert(element);
    });
    return args;
}

sym([1, 2, 3], [5, 2, 1, 4]);

Below is my .html file

<html>
    <head>
        <script src="Test.js"></script>
    </head>
    <body>
        <button id="Button1" onclick="Sym();">
            Click!
        </button>
    </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0.

Challenge: Find the Symmetric Difference

Link to the challenge:

The function sym takes one argument. You are passing two arrays not an array of two elements (which are also arrays). If you want the function to accept two different arrays try using spread parameter.

   function sym (...args){ }

Hi Nibble,

Thank you very much for your quick reply. I am not perfect in JavaScript. Could you please give me one example on how to use spread parameter this case!

I think You have capitalizing mistake.You write “Sym()” in html.But in Javascript you wrote it"sym"

spread parameter is used if you want to pass variable number of arguments to the function. e.g:

function foo(...args){
       console.log(args) // This will console.log an array. Entries of the array are the values passed as argument to the function.
}

You can then invoke foo with any number of arguments. It will console.log an array of your arguments like

foo(1,2) // [1, 2]
foo([1,2,3], [10,4]) // [[1,2,3], [10,4]]