0

I have seen this <Tab label="Item One" {...a11yProps(1)} /> in Material UI where function is called with in the props with ... spread operator When i try speratly as

console.log(...a11yProps(3));

i get error ,anyone can tell what is happening here <Tab label="Item One" {...a11yProps(1)} /> how does spread operator used with function call ?

E_net4
  • 27,810
  • 13
  • 101
  • 139
Muhammad Mehdi
  • 531
  • 1
  • 5
  • 14
  • 3
    [See my answer here](https://stackoverflow.com/a/64612639). The beginning talks extensively about why "spread" is not an operator and why that matters. In short `...fn()` will do *different things* based on the context. Object spread `{...fn()}` ***must*** receive an object, while spreading into arguments `console.log(...fn())` ***must*** receive an iterable. Most of the times, these don't overlap. – VLAZ Jul 17 '21 at 18:24
  • @VLAZ I have read your answer but i didn't get the answer for spread syntax used with function call ? my asking this after along time because i'm facing this again ! – Muhammad Mehdi Sep 16 '21 at 17:40
  • Let me reiterate - spreading is not a single thing. Depends on the context. Within a function call, you can only spread *arrays* (or other iterables). Spreading *an object* is a completely different thing and does not work within a function call. Objects can be spread into other objects. So `...x` will vary in what happens both based on what `x` is and also what the context is `fn( ...x )` and `{ ...x }` are different operations because the context is different. – VLAZ Sep 16 '21 at 17:44
  • @VLAZ hmm sir any better demo ! please , sorry for interrupting . – Muhammad Mehdi Sep 16 '21 at 17:53
  • https://jsbin.com/cesicap/edit?js,console – VLAZ Sep 16 '21 at 18:00
  • @VLAZ so here`...fn()` first function is called which returns an object then thats is spread ,am i right ! – Muhammad Mehdi Sep 16 '21 at 18:07
  • `allyProps()` must be returning an object, hence why spreading that object into a function call throws an error. – VLAZ Sep 16 '21 at 18:10
  • I guess `console.log({...allyProps()}) ` this would be correct ! – Muhammad Mehdi Sep 16 '21 at 18:11

2 Answers2

0

Demo


function fn(x, y, z) {
  console.log("fn() called with", x, y, z);
}
let x;

x = ["a", "b", "c"];


fn( ...x ); //function call with spread of an array

console.log("spreading into an object", { ...x } ); // spreading into an object clones the properties of the array

x = {a: 1, b: 2, c: 3};

console.log("spreading into an object", { ...x } ); // spreading object into an object clones it

fn( ...x ); //spreading an object into a function call is an error



function fb2(){
  return obj = {object : 'new Object'}
}

console.log({...fb2()}.object);
Muhammad Mehdi
  • 531
  • 1
  • 5
  • 14
-1

Just do:

console.log(a11yProps(3));
Sowam
  • 1,674
  • 3
  • 12
  • 30
  • I know that what i'm asking is that spread operator used with fuction and passed as props `````` – Muhammad Mehdi Jul 17 '21 at 18:17
  • @MuhammadMehdi yes it is passed as a prop there, if you want to console.log it you have to log it without spread operator, what do you want to achieve here? did you even test my answer? – Sowam Jul 17 '21 at 18:36
  • I want to know that how did it call function with starting spread operator ! – Muhammad Mehdi Jul 17 '21 at 18:47