To understand the difference between arguments and "...args", first we need to know the features of arrow functions , without getting into much details here are some brief points about arrow functions:

Arrow Functions key features :

1.) Arrow functions depend upon the closest non-arrow parent function for the "arguments" keyword and the binding of "this".

2.) Arrow functions can never be used as constructor with 'new' keyword as they don't have any binding of 'this'.

3.) The value of "this" inside arrow function is fixed throughout and can't be changed with call , apply and bind like borrowing methods.

4.) '.prototype' property doesn't exist for the arrow function.

5.) Duplicate parameters in arrow function giver error(strict and non-strict mode). In regular function, it's allowed (except in strict mode).

So, from the above points, we can gather that arrow functions don't have the "arguments" keyword . But in order to further examine this behaviour, it's important to understand what is "arguments" keyword in javascript.

Psuedo Array : It is a type of object that looks like an array but it's actually an object under the hood. It doesn't have all the methods like we have for arrays like push, pop, reverse etc. Some examples of this psuedo array are - "arguments" keyword , 'document' in window object etc.

An abstract view of this array type of object would be something like this :

function print() {
    console.log(arguments.length)
}

print(0)

Abstract view

{0 : true , length : 1 , push : undefined}

'arguments' keyword references every argument for the function as the pseudo array. A work around of this would be to convert the psuedo array into an actual array.

Array.prototype.slice.call(arguments)

This turns an array-like object into an actual array.

Another way is to use the 'from' method which does the same thing under the hood.

Array.from(arguments)

what is "...args" ?

Arrow functions don't have the 'arguments' keyword because the "arguments" array-like object was a workaround to begin with, which ES6 has solved with a rest parameter:

var bar = (...arguments) => console.log(arguments);

Here "..." is the rest parameter which takes all the remaining parameters for the function and stores it in an array. But unlike the arguments keyword here we can perform all the operations that we would perform in an javascript array.

But with '...args' we also have cons like we had with the 'arguments keyword'.

Take a look a this code :

const print2 = (name ,...args) => {
    console.log(args)    
}

print2('john', 'doe')

Here the output would be an array that contains a string 'doe'. But what about the 'john' parameter, here it will not be stored because

The rest parameter, when present, may not capture all the function’s arguments, especially when it is used together with named parameters. However, when it is the only function parameter, it captures all function arguments. On the other hand, the arguments object of the function always captures all the function’s arguments.

This is an important point to keep in mind before you trying to access all the arguments in your arrow function.