# JSON.stringify removes undefined, how to keep it

DevFeed: [JSON.stringify removes undefined, how to keep it](<https://devfeed.tech/articles/json-stringify-removes-undefined-how-to-keep-it-37304.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/json-stringify-removes-undefined/>)

Author: Stanko

Published: 2018-10-01T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [JSON](<https://devfeed.tech/topics/json.md>), [React](<https://devfeed.tech/topics/react.md>)

Tags: [function](<https://devfeed.tech/tags/function.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [json](<https://devfeed.tech/tags/json.md>), [null](<https://devfeed.tech/tags/null.md>), [parameter](<https://devfeed.tech/tags/parameter.md>)

## AI overview

This tutorial explains that JSON.stringify omits object properties whose values are undefined. It shows how this can prevent a server from detecting removed form fields and demonstrates using a replacer function to convert undefined values to null.

## Source excerpt

This is something I keep rediscovering, because I keep forgetting it. JSON.stringify will omit all object attributes that are undefined. In most cases, it doesn't really matter, because if we parse that string back, and try to access that attribute - it will be undefined by design. Check the example below: const user = { name: 'Stanko', phone: undefined }; user.phone; // -> undefined const stringifiedUser = JSON.stringify(user); // -> "{\"name\":\"Stanko\"}" const parsedUser = JSON.parse(stringifiedUser) // -> { name: "Stanko" } // At the end it behaves the same parsedUser.phone; // -> undefined Why should we care then? # In most scenarios you shouldn't. But for me, one case keeps popping up - sending http requests. Request body is a string, so we need to stringify our data. In certain cases we want server to be aware that some data has been explicitly removed, so it can be removed from the database as well. This is where dropping undefined can cause problems. Few days ago, one of my clients had a question about React Final Form. Problem was that Final Form returns undefined for the values that have been removed by the user. As you can imagine, this was a problem, when they stringified form values undefined fields were omitted and server wasn't aware that the field was removed. Using replacer parameter # Luckily JSON.stringify accepts replacer function as a second parameterThird one is space, number of spaces or a string to be used for indentation. Function accepts two parameters, current key and value being stringified. This allows us to replace any value, in our case undefined. We just need to check if the value is undefined and return null: const user = { name: 'Stanko', phone: undefined }; const replacer = (key, value) => typeof value === 'undefined' ? null : value; const stringified = JSON.stringify(user, replacer); // -> "{\"name\":\"Stanko\",\"phone\":null}" This is one example where replacer comes in handy. It can also be practical when stringifying complex