Keys and Values Shortcuts

Greetings, friends! Hidden inside the browser's DevTools are shortcuts to the Object.keys and Object.values methods.

The Object.keys method returns an array of all the keys on an object. More specifically, this method returns an array of strings corresponding to the enumerable properties found directly upon the given object.

const person = {
  name: 'nate',
  books: 100,
  favoriteFood: '🍕'
}

console.log(Object.keys(person));
// OUTPUT: ['name', 'books', 'favoriteFood']

As a shortcut, popular browsers including Chrome, Firefox, and Safari let you use the keys function inside the DevTools console. This function is an alias to the Object.keys method.

If you're using Google Chrome, you can open the Google Chrome console using the keyboard shortcut Option + Command + J on a Mac or Ctrl + Shift + J on Windows. Then, paste the following code into the console.

const person = {
  name: 'nate',
  books: 100,
  favoriteFood: '🍕'
}

keys(person);
// OUTPUT: ['name', 'books', 'favoriteFood']

After executing this code in the console, you should see that it results in the same output.

The Object.values method returns an array of the given object's own enumerable property values. Let's use the same object as the previous example.

const person = {
  name: 'nate',
  books: 100,
  favoriteFood: '🍕'
}

console.log(Object.values(person));
// OUTPUT: ['nate', 100, '🍕']

Similar to the keys shortcut function, the browser lets you use the values shortcut function inside the DevTools console as an alias to the Object.values method.

const person = {
  name: 'nate',
  books: 100,
  favoriteFood: '🍕'
}

values(person);
// OUTPUT: ['nate', 100, '🍕']

Pretty cool! The keys and values functions are just helper functions that help speed up the debugging process. These special shortcuts are only available in the DevTools console though. In your actual JavaScript files, you should still use Object.keys and Object.values.