Extracting Properties and Values

Object Methods

Do you remember earlier when we used theObject()constructor function to create (i.e., instantiate) new objects with thenewkeyword?

const myNewFancyObject = new Object();

TheObject()function actually includes a few methods of its own to aid in the development of your applications. These methods are:

• Object.keys()
• Object.values()

Whether you're building logic in your code, or just writing a utility "helper" function, feel free to use these methods as necessary. Let's see how each of these work!

Object.keys() and Object.values()

At its core, an object is just a collection of key/value pairs. What if we want to extract _only _the keys from an object? Say we have this object representing a real-life dictionary:

const dictionary = {
  car: 'automobile',
  apple: 'healthy snack',
  cat: 'cute furry animal',
  dog: 'best friend'
};

Having a collection of just the words (i.e., thedictionaryobject's keys) may be particularly useful. While we _could _use afor...inloop to iterate through an object and build our own list of keys, it can get a bit messy and verbose. Thankfully, JavaScript provides an abstraction just for this!

WhenObject.keys()is given an object, it extracts just the _keys _of that object, then returns those keys in an array:

Object.keys(dictionary);


// [car, apple, 'cat', 'dog']

SoObject.keys()gives returns an array of the provided object's property names. Likewise, if we want a list of the _values _of an object, we can useObject.values():

Object.values(dictionary);


// ['automobile', 'healthy snack', 'cute furry animal', 'best friend']

Excellent! Let's see it all in action.

VIDEO

Here's the code from the preceding video.

Support forObject.keys()andObject.values()

Object.keys()has been around for quite a long time, so it is fully supported by every browser.

Object.values(), on the other hand, is significantly newer. It was officially added to the language specification in 2017. However, just because it's been added to the specification, it necessarily doesn't mean your browser supports it yet!

How do you know if your browser _does _supportObject.values()? Check out the Browser Compatibility table!

QUESTION 1 OF 3

What is true aboutObject.keys()? Select all that apply.

• The resulting array's elements are strings

• The method is used simply by calling.keysonto any given object

• In some environments, the return value ofObject.keys()is actually an object.

• The order of the array's elements are in the same order as using aforloop.

SUBMIT: Object.keys() will return an array of strings and will return them in the same order as they would be when using a for loop.

QUESTION 2 OF 3

What is true aboutObject.values()? Select all that apply.

• The resulting array's elements are strings.

• The method is used simply by calling.valuesonto any given object.

• In some environments, the return value ofObject.values()is actually an object.

• The order of the array's elements are in the same order as using aforloop.

SUBMIT: Object.values() will return the items in the same order as when using a for loop.

Write an expression usingObject.keys()to extract the keys (i.e., property names) from thetriangleobject:

const triangle = {
  type: 'polygon',
  sides: 3,
  sumOfAngles: 180,
  equilateral: true,
  equiangular: true
};

SUBMIT: Object.keys(triangle); will output an array of strings that representing triangle 's keys.

Summary

The Object() constructor function has access to several methods to aid in development. To extract property names and values from an object, we can use:

• Object.keys() returns an array of a given object's own keys (property names).
• Object.values() returns an array of a given object's own values (property values).

Further Research

• Object.keys() on MDN
• Object.values() on MDN
• Browser Compatibility