How to set all values in an object to Null using JavaScript

Posted on by Davis Cole
Set all Values in an Object to Null using JavaScript

In this article, you’ll learn how to set all values in an object to null using JavaScript by setting the values directly when iterating over the object or using the Array class’ .reduce() function alongside the Object class’ static Object.keys() function.

Set all values in an object to Null using JavaScript

Iterating over the Object (using .forEach() or for…of loops)

The general idea of the method is by iterating over an Object and setting each value to null. You can do so with either a for...of loop or the Object class’ static function Object.keys() and the Array class’ .forEach() function.

If you want to iterate an object with a for...of loop, you require a combination of the for...of loop and the Object class’ static Object.entries() function.

The for...of loop is specifically used to iterate over any iterable collections (e.g., an Array).

Syntax: for (const value of collection) { … }

The static Object.entries() function takes an object and returns an array containing key-value pairs (i.e., an array containing a key as its 1st value and a value as its 2nd value).

Syntax: Object.entries(obj);

With both functions, we have the syntax:

Syntax: for (const [key,value] of Object.entries(obj)) { … }

Code:

const obj = {
	a: 123,
	b: "LearnShareIT",
	c: 325,
};

function objToNull(obj) {
	for (const [key, value] of Object.entries(obj)) {
		obj[key] = null;
	}
}

objToNull(obj);
console.log(obj);

Output:

{a: null, b: null, c: null}

Another way of doing this is using a combination of the Object class’ static Object.keys() and the Array class’ .forEach() function.

The static Object.keys() function takes an object and returns an array containing all of the Object’s keys.

Syntax: Object.keys(obj);

The .forEach() function, similarly to the for...of loop, iterates over something while still being readable but with the downside of only being able to iterate over arrays. The function takes in a callback function, which is a function that is used as a parameter of another function. The callback function has three parameters, those being: element (the current value), index (the current index), and array (the array getting iterated). However, you will only really need to care about the element parameter for this.

Syntax: Array.prototype.forEach(function (element,index,array) {...});

Note that since a callback function is generally an anonymous function (i.e., a function without a name), it is generally replaced by ()=>{}. So the syntax can be written as:

Syntax: Array.prototype.forEach((element,index,array) => {...});

The idea of this is to iterate over the Array created by the Object.keys() function then setting the value accessed by the current key to null. For example:

const obj = {
	a: 123,
	b: "LearnShareIT",
	c: 325,
};

function objToNull(obj) {
	const keys = Object.keys(obj); // ["a","b","c"]
	keys.forEach((key) => {
		obj[key] = null;
	});
}

objToNull(obj);
console.log(obj);

Output:

{a: null, b: null, c: null}

Using the .reduce() function

The .reduce() function method is a faster, shorter way of doing this but with the downside of being less readable and more difficult to understand.

The Array class’ .reduce() function takes an array and “reduces” it; or more specifically, it takes 2 parameters: A callback function and initialValue. The callback function has 4 parameters: accumulator, element (the current value), index (the current index), and array (the array getting iterated). The accumulator the parameter is the value that was returned after the previous iteration, will default to the initialValue parameter at the beginning.

 Syntax: Array.prototype.reduce((acumulator,element,index,array) => {...}, initialValue);

While this is the case, the function can be understood like this:

Syntax:

function reduce(array, callbackFunc, initialValue) {
	var accumulator = initialValue;

	// Iterate over the entire Array
	for (index = 0; index < array.length; index++) {
		const element = array[index];
		// The accumulator becomes the value of the callback function in the current iteration
		accumulator = callbackFunc(accumulator, element, index);
	}

	return accumulator;
}

With this in mind, we have:

const obj = {
	a: 123,
	b: "LearnShareIT",
	c: 325,
};

function objToNull(obj) {
	const keys = Object.keys(obj);
	return keys.reduce((pv, v) => {
		return {
			...pv,
			[v]: null
		};
	}, {});
}

console.log(objToNull(obj));

Output:

{a: null, b: null, c: null}

A thing to note about the code in line 9, the value that is returned is an object containing every key-value pair of the pv or accumulator parameter plus the current iterated value. The code does this by using a Spread Syntax (...) which, put simply, deconstructs something; and, in this case: Deconstructs an object into key-value pairs.

Summary

To set all values in an Object to null using JavaScript, you can set the values directly when iterating over the Object by using a for...of loop or a combination of Object.keys() and .forEach() or using the  .reduce() function alongside the Object.keys() function.

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *