Get a Random Property from an Object in JavaScript

avatar

Borislav Hadzhiev

Thu Oct 28 20212 min read

Get a Random Property from an Object #

To get a random property from an object:

  1. Call the Object.keys() method to get an array of the object's keys.
  2. Use the Math.floor() and Math.random() functions to get a random index of the array.
  3. Use the random index to access one of the object's properties.
index.js
const obj = { name: 'Tom', country: 'Chile', age: 30, }; function getRandomProperty(obj) { const keys = Object.keys(obj); return keys[Math.floor(Math.random() * keys.length)]; } console.log(getRandomProperty(obj)); // ๐Ÿ‘‰๏ธ name console.log(getRandomProperty(obj)); // ๐Ÿ‘‰๏ธ age console.log(getRandomProperty(obj)); // ๐Ÿ‘‰๏ธ name

We created a reusable function that returns a random property from an object.

The first step is to get the an array of the object's keys using the Object.keys method.

index.js
const obj = { name: 'Tom', country: 'Chile', age: 30, }; // ๐Ÿ‘‡๏ธ ['name', 'country', 'age'] console.log(Object.keys(obj));

The Math.floor function, rounds a number down if the number has a decimal, otherwise it returns the number as is.

index.js
console.log(Math.floor(2.99)); // ๐Ÿ‘‰๏ธ 2 console.log(Math.floor(2.01)); // ๐Ÿ‘‰๏ธ 2 console.log(Math.floor(2)); // ๐Ÿ‘‰๏ธ 2

The Math.random function returns a random number in the range 0 to less than 1. The function could return 0, but it could never return 1.

index.js
console.log(Math.random()); // ๐Ÿ‘‰๏ธ 0.1034543... console.log(Math.random()); // ๐Ÿ‘‰๏ธ 0.5438454... console.log(Math.random()); // ๐Ÿ‘‰๏ธ 0.5438483... // ๐Ÿ‘‡๏ธ Multiplied by keys.length const keys = ['name', 'country', 'age']; console.log(Math.random() * keys.length); // ๐Ÿ‘‰๏ธ 2.534... console.log(Math.random() * keys.length); // ๐Ÿ‘‰๏ธ 1.543... console.log(Math.random() * keys.length); // ๐Ÿ‘‰๏ธ 1.754... console.log(Math.random() * keys.length); // ๐Ÿ‘‰๏ธ 0.324...

The max value we could get is, if Math.random returns 0.999... and we multiply it by the array's length (3). We would get back a value of 2.997.

index.js
console.log(0.999 * 3); // ๐Ÿ‘‰๏ธ 2.997

However, because indexes are zero-based in JavaScript, the last element in the array has an index of array.length - 1. For this reason, we used the Math.floor() function to round the number down to the next integer, which is 2 (the last index in the array of keys).

Conversely, the min value we could get is, if Math.random() returns 0. In this case, we would multiply 0 by the array's length and get 0 back.

index.js
console.log(0 * 3); // ๐Ÿ‘‰๏ธ 0

Calling the Math.floor function with 0 returns the number as is. In this scenario, we would access the first element in the keys array.

The expression returns an index from 0 up to (but not including) array.length. This guarantees us that we could never access an index of out bounds.

Here's the complete code snippet.

index.js
const obj = { name: 'Tom', country: 'Chile', age: 30, }; // ๐Ÿ‘‡๏ธ ['name', 'country', 'age'] console.log(Object.keys(obj)); function getRandomProperty(obj) { const keys = Object.keys(obj); return keys[Math.floor(Math.random() * keys.length)]; } console.log(getRandomProperty(obj)); // ๐Ÿ‘‰๏ธ country console.log(getRandomProperty(obj)); // ๐Ÿ‘‰๏ธ age console.log(getRandomProperty(obj)); // ๐Ÿ‘‰๏ธ country

Further Reading #

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee