Home>

Since I didn't understand what the spread operator meant,
I tried to output the value received in Json from the server side in console.log,
The result when outputting using the splead operator and when outputting without using the splead operator did not change.

console.log ({... data});// [object Object]
console.log (data);// [object Object]
console.log (JSON.parse (JSON.stringify ({... data})));
// {user1: {...}, user2: {...}, ...}
console.log (JSON.parse (JSON.stringify (data)));
// {user1: {...}, user2: {...}, ...}

I understand that the spread operator expands the contents of an array,
If i use console.log as described above, why is the same result as when not using the spread function?

Since there is a lack of basic knowledge of Javascript, it may be an unreasonable question
If there is someone who can answer, please.

  • Answer # 1

    {... data}is intended to declare a new object and copy all the data keys and values.

    Implementing object instances like JavaScript objects, arrays, and functions
    Because it distinguishes between the same or different addresses in the memory space,
    The result ofdata === {... data}is false, confirming that a new object has been created.

    var data = {name: "taro"};
    console.log (data === data);// true
    console.log (data === {... data});// false

    This has two meanings.

    Cut object reference (shallow copy)

    I want to put another property

    If you assign a JavaScript object to a variable,
    The address in the memory space is stored in the variable.
    So if you setdata2 = data;as shown below, both refer to objects in the same memory space.

    var data = {name: "taro", age: 18};
    var data2 = data;
    data2.name = "jiro";
    console.log (data);// {name: "jiro", age: 18}

    The terrible part of this is where you pass it as a function argument,
    If you change the property value of the argument object,
    This may cause a problem that the object that should have been the caller of the function is altered without your knowledge.

    I don't want to change the data, but ...
    If you make a copy in this way, even if someone rewrites the property without permission, the original object is not changed.

    var data = {name: "taro", age: 18};
    var data2 = {... data};
    data2.name = "jiro";
    console.log (data);// {name: "taro", age: 18}

    In addition, this code can be simplified as follows.
    This is the second usage.

    var data = {name: "taro", age: 18};
    var data2 = {... data, name: "jiro"};
    console.log (data);// {name: "taro", age: 18}

  • Answer # 2

    var o = {a: 1};
    console.log (o);// {a: 1}
    console.log ({... o});// {a: 1}

    In the above code, the object initializer{}is initialized in the same way, so if you look at it as a collection of properties and values, it will be the same.
    It will change depending on the contents of variable data

    What is in variabledata

    data .__ proto__ === ({}) .__ proto __is true

    How about checking this area?

    Re: Oskata-san

  • Answer # 3

    I don't know where I'm stuck
    Is it difficult to understand here?