Javascript `...` syntax meanings

js-triple-dot-syntax-variations.js

// See https://rainsoft.io/how-three-dots-changed-javascript/ for more detail on some of these

// ES6 arrays

// Array spread operator
const newArray = [...oldArray, newItem];

// Array destructuring
const [first, second, ...everythingElse] = someArray;


// ES6 functions

// Function rest arguments
function functionWithManyArgs(firstArg, secondArg, ...allOtherArgs) {}

// Function application
const otherArgs = ["c", "d", "e"];
someFunction("a", "b", ...otherArgs);


// Object Spread syntax (currently a Stage 3 proposal)

// Object spread operator
const newObject = {...oldObject, {someKey : someValue}};

// Rest spread operator
const {a, b, ...allOtherFields} = someObject;


// JSX object prop spread syntax (not an actual standard)

const someObject = {a : 42, b : "some string", c : [1, 2, 3] };
return <SomeComponent {...someObject} />