Spread Syntax vs Rest Parameter in ES2015 / ES6

I am confused about the spread syntax and rest parameter in ES2015. Can anybody explain the difference between them with proper examples?

When using spread, you are expanding a single variable into more:

var abc = ['a', 'b', 'c'];
var def = ['d', 'e', 'f'];
var alpha = [ ...abc, ...def ];
console.log(alpha)// alpha == ['a', 'b', 'c', 'd', 'e', 'f'];

When using rest arguments, you are collapsing all remaining arguments of a function into one array:

function sum( first, ...others ) {
    for ( var i = 0; i < others.length; i++ )
        first += others[i];
    return first;
}
console.log(sum(1,2,3,4))// sum(1, 2, 3, 4) == 10;

ES6 has new feature three dots ...

Here is how we can use these dots:

1. As Rest/Collector/Gather

var [c, ...m] = [1,2,3,4,5]; // m -> [2,3,4,5]

Here ...m is a collector, it collects the rest of the parameters. Internally when we write:

var [c, ...m] = [1,2,3,4,5]; JavaScript does following

var c = 1,
    m = [2, 3, 4, 5];

2. As Spread

var params = [ "hello", true, 7 ];
var other = [ 1, 2, ...params ]; // other => [1,2,"hello", true, 7]

Here, ...params spreads so as to adding all of its elements to other

Internally JavaScript does following

var other = [1, 2].concat(params);

Hope this helps.