CODEWITHSUNDEEP
javascript
Alwaysblue
Alwaysblue

Reputation: 11830

Understanding .map and Stringify with objects

I was trying different thing on JS to understand how they perform.

For my test I wanted to understand what happens if I do JSON.stringify(something) directly vs doing it with Map.

With JSON.stringify(something) directly

var rockets = [
    { country:'Russia', launches:32 },
    { country:'US', launches:23 },
    { country:'China', launches:16 },
    { country:'Europe(ESA)', launches:7 },
    { country:'India', launches:4 },
    { country:'Japan', launches:3 }
];

console.log(JSON.stringify(rockets))

Where I am getting this in my console

[{"country":"Russia","launches":32},{"country":"US","launches":23},{"country":"China","launches":16},{"country":"Europe(ESA)","launches":7},{"country":"India","launches":4},{"country":"Japan","launches":3}]

Vs with Map I got this 

var rockets = [
    { country:'Russia', launches:32 },
    { country:'US', launches:23 },
    { country:'China', launches:16 },
    { country:'Europe(ESA)', launches:7 },
    { country:'India', launches:4 },
    { country:'Japan', launches:3 }
];

console.log(rockets.map(d => JSON.stringify(d)))

Where I am getting something like this 

["{"country":"Russia","launches":32}", "{"country":"US","launches":23}", "{"country":"China","launches":16}", "{"country":"Europe(ESA)","launches":7}", "{"country":"India","launches":4}", "{"country":"Japan","launches":3}"]

Now, I was trying to comprehend both the code and JSON.stringify(something)does make sense but when I look at Map , I see a " being added after [ which I am unable to understand from where does it come?

Also, The result from chrome console and stackoverflow comes out to be different, can someone also explain me why am I seeing \ before " in stackoverflow result

example [ "{\"country\":\"Russia\",\"launches\":32}",

To summarise, my Prime Question is how does .map work with json stringify?

Upvotes: 0

Views: 48

Answers (2)

CertainPerformance
CertainPerformance

Reputation: 370729

The first JSON.stringify(rockets) results in a single long string, which contains serialized data that can be turned back into an array of objects with JSON.parse.

The second rockets.map(d => JSON.stringify(d) results in an array, each of whose items is a string that can be deserialized back into a small object.

The backslashes before the "s in the lower code are a bit confusing, they're because the stack console delimits strings with ". It would be clearer if it used ' - with 's, the bottom result would look like

[
  '{"country": "Russia","launches": 32}',
  '{"country": "US","launches": 23}',
  '{"country": "China","launches": 16}',
  // ...
]

This is the exact same array that results from your second snippet

var rockets = [
    { country:'Russia', launches:32 },
    { country:'US', launches:23 },
    { country:'China', launches:16 },
    { country:'Europe(ESA)', launches:7 },
    { country:'India', launches:4 },
    { country:'Japan', launches:3 }
];

console.log(rockets.map(d => JSON.stringify(d)))

except that it's displayed in a format that's easier to read, because the array items (strings) are delimited with 's, so the literal "s in the strings don't need to be escaped with a backslash first.

(just like a line

const str = 'foo'

is equivalent to using

const str = "foo"

, and how

const str2 = 'fo"o'

is equivalent to

const str2 = "fo\"o"

: that is, to denote the same character that you're using as the string's delimiter, you must put a backslash in front of it first)

Note that JSON strings require keys and string values to be surrounded with double quotes ", but object literals (such as displayed above) do not.

Upvotes: 1

Arno Gau
Arno Gau

Reputation: 49

So what you are trying to differentiate between JSON.stringify(something) and .map(JSON.stringify) is that the first one makes a string, and the second one makes a list of strings.

The " afer [ in the result of using .map is because your console is trying to say that what you have in your console.log is a list of strings. Whereas in the result of JSON.stringify(something), the entire output is a string so the entire output is prepended and appended by a ".

The difference between StackOverflow and Chrome's output, the \, is just is just an escape character.

Upvotes: 1

Related Questions