//An Array of fruits
const fruits = ['Apple', 'Banana', 'Watermelon'];

//Output the value of array using the spread operator
console.log(...fruits);

//Output -> Apple Banana Watermelon

//animals array initialized
const animals = ['dog', 'sheep', 'goat'];

//animalsCopy array is created with a Shallow copy of animals array values
const animalsCopy = [...animals];

//Display value on the console
console.log(animalsCopy);

//Output -> Array(3) ["dog", "sheep", "goat"]

console.log(animals === animalsCopy); //Output -> false

//Important thing to note here is that animals !== animalsCopy (Only a Shallow copy is made)

//Person object
const person = 
{ name : 'Skay', 
  age : 38 
}

//Shallow copy Person object using spread operator to create personCopy object
const personCopy = {...person};

console.log(personCopy); //Output -> { name: "Skay", age: 38 }

console.log(person === personCopy); //Output -> false (Shallow copy)

const maleActors = ['Brad Pitt', 'Chris Evans', 'Matt Damon'];

const femaleActors = ['Jennifer Aniston', 'Jennifer Lawrence', 'Emma Stone']; 

const movieActors = [...maleActors, ...femaleActors];

console.log(movieActors); 
//Output -> Array(6) [ "Brad Pitt", "Chris Evans", "Matt Damon", "Jennifer Aniston", "Jennifer Lawrence", "Emma Stone" ]

//Person1 Object containing the attributes name & age
const person1 = 
{ 
  name : "Skay", 
  age : 32 
};

//Person2 Object containing the attributes name, age & occupation
const person2 = 
{ 
    name : "Skay", 
    age: 38,
    occupation: "Web Developer" 
};

//Both objects are merged using the spread operator
//If key is not common between person1 & person2, then it's copied to the newPerson object
//However, for the age attribute, the value of 'person2' will be replaced with the value of 'person1'
const newPerson = {...person1, ...person2};
console.log(newPerson) ; // Output -> {name: "Skay", age: 38, occupation: "Web Developer"}

//'name' variable
const name = 'Skay';

//Spread Operator extracts the characters from the String and assigns to an array
const chars = [...name];

console.log(chars); //Output -> Array (4) ["S", "k", "a", "y"]

//Array of numbers
const arr = [1,2,3];

//Arrow Function to add numbers
const add = (a,b,c) => a+b+c;

//Passing the array as a spread operator to the function 'add'
//The values of the array are spread across the variables in the same order 
//they appeared in the array
console.log(add(...arr)); //Output -> 6

//Person Object
const person = 
{
    name : 'Skay',
  age: 38,
  occupation: 'Web Developer',
    skills: 'HTML, CSS, JavaScript'
};

//Destructuring the Person object and assigning the values to name & age
//The attributes occupation & skills are automatically assigned to 'others'
//By using the spread operator
const { name, age, ...others } = person;

console.log(`Name is ${name}`); //Output -> Name is Skay
console.log(`Age is ${age}`); //Output -> Age is 38
console.log(others); 
// Output -> {occupation: "Web Developer", skills: "HTML, CSS, JavaScript"}

/* Note: This is a sample code & will run with HTML code*/
//Assuming there's a number of list items with the className of 'items'
//It will return a NodeList 
let nodeList = document.querySelectorAll('.items');

//Using the spread operator, the nodeList is converted to an array
//This gives us the flexibility to use high-order array methods such as map, filter, etc.
var nodeArray = [...nodeList]