Increment a Value in an Object or a Map in JavaScript

Table of Contents #

1. Increment a Value in an Object in JavaScript
2. Increment a Value in a Map using JavaScript

Increment a Value in an Object in JavaScript #

To increment a value in an object:

1. Assign the value of the key to the current value + 1.
2. If the property exists on the object, its value gets incremented by 1.
3. If it doesn't, it gets initialized to 1.

Copied!
const obj = {
  num: 1,
};

// ✅ Using dot notation
obj.num = obj.num + 1 || 1;
console.log(obj.num); // 👉️ 2

// -------------------------------------

// ✅ Using bracket notation
obj['num'] = obj['num'] + 1 || 1;
console.log(obj.num); // 👉️ 3

The examples use bracket and dot notation to get the current value associated with the property.

Once we have the value, we use the addition (+) operator to increment it.

Copied!
const obj = {
  'my number': 1,
};

obj['my number'] = obj['my number'] + 1 || 1;
console.log(obj['my number']); // 👉️ 2

The logical OR (||) operator returns the value to the right if the value to the left is falsy.

The falsy values in JavaScript are: false, null, undefined, 0, "" (empty string), NaN (not a number).

All other values are truthy.

If the key doesn't exist in the object or contains a falsy value, the logical OR (||) operator returns the value to the right, setting the value of the key to 1.

Copied!
const obj = {};

obj.num = obj.num + 1 || 1;
console.log(obj.num); // 👉️ 1

Here are some examples of using the logical OR operator:

Copied!
console.log(0 || 1); // 👉️ 1
console.log(5 || 1); // 👉️ 5
console.log('test' || 1); // 👉️ "test"
console.log(undefined || 1); // 👉️ 1
console.log(null || 1); // 👉️ 1
console.log(NaN || 1); // 👉️ 1

The only scenario where the operator returns the value to the left is if it's truthy, e.g. a number other than 0.

Increment a Value in an Object using nullish coalescing #

To increment a value in an object:

1. Use the nullish coalescing operator to check if the property is defined.
2. If the property is defined, increment it by 1.
3. Otherwise, initialize it to 1.

Copied!
const obj = {
  num: 1,
};

obj['num'] = (obj['num'] ?? 0) + 1;

console.log(obj); // 👉️ { num: 2 }

If the value to the left of the nullish coalescing operator (??) is equal to null or undefined, the value to the right is returned, otherwise, the value to the left of the operator is returned.

The num property is set on the object and doesn't have a value of null or undefined, so its value is returned and then incremented by 1.

If the property in the object is not set, it will have a value of undefined, so the nullish coalescing (??) operator will return 0.

Copied!
const obj = {};

obj['num'] = (obj['num'] ?? 0) + 1;

console.log(obj); // 👉️ { num: 2 }

The 0 gets incremented by 1 and the property gets initialized to 1.

Increment a Value in a Map using JavaScript #

To increment a value in a Map:

1. Use the set() method on the Map, passing it the name of the key and value as parameters.
2. If the key exists in the Map, its value gets increment, otherwise, it gets initialized to 1.

Copied!
const map1 = new Map([['num', 1]]);

console.log(map1.get('num')); // 👉️ 1

map1.set('num', map1.get('num') + 1 || 1);

console.log(map1.get('num')); // 👉️ 2

We used the Map.set method to increment a value in a Map.

The Map.set method adds or updates an entry in a Map with the specified key and value.

The method takes the key and value that should be added to the Map as parameters.

We used the Map.get() method to get the value that corresponds to the key, so we can increment it by 1.

Copied!
const map1 = new Map([['num', 1]]);

console.log(map1.get('num')); // 👉️ 1

map1.set('num', map1.get('num') + 1 || 1);

console.log(map1.get('num')); // 👉️ 2

The logical OR (||) operator returns the value to the right if the value to the left is falsy.

The falsy values in JavaScript are: false, null, undefined, 0, "" (empty string), NaN (not a number).

All other values are truthy.

If the key doesn't exist in the Map or contains a falsy, value, the logical OR (||) operator will return the value to right, initializing the key with a value of 1.

Copied!
const map1 = new Map();

console.log(map1.get('num')); // 👉️ undefined

map1.set('num', map1.get('num') + 1 || 1);

console.log(map1.get('num')); // 👉️ 1

The only scenario where the operator returns the value to the left is if it's truthy, e.g. a number other than 0.

Increment a Value in a Map using the nullish coalescing operator #

To increment a value in a Map:

1. Use the nullish coalescing operator to check if the Map element exists.
2. If the element with the key exists, increment the value.
3. Otherwise, add the element, initializing its value to 1.

Copied!
const map1 = new Map([['num', 1]]);

console.log(map1.get('num')); // 👉️ 1

map1.set('num', (map1.get('num') ?? 0) + 1);

console.log(map1.get('num')); // 👉️ 2

If the value to the left of the nullish coalescing operator (??) is equal to null or undefined, the value to the right is returned, otherwise, the value to the left of the operator is returned.

Notice that we wrapped the expression in parentheses - (map1.get('num') ?? 0).

If the call to the get() method returns undefined or null, the expression returns 0.

Otherwise, the expression returns the value of the num key in the Map.

We then increment the returned value by 1.

If the specified key doesn't exist in the Map, it would have a value of undefined.

Copied!
const map1 = new Map();

console.log(map1.get('num')); // 👉️ undefined

map1.set('num', (map1.get('num') ?? 0) + 1);

console.log(map1.get('num')); // 👉️ 1

The key doesn't exist in the Map, so the nullish coalescing (??) operator returns 0.

We add 1 to 0 and initialize the key to 1.