JavaScript ES6 — Learn Array.keys, Array.values, and Array.entries
Learn these three Array methods in three minutes.
Keys, Values, Entries
Last week I published an article on JavaScript ES 2017: Learn Object.keys, Object.values, and Object.entries. It’s only fair to Arrays that I publish an article on their methods as well.
Disclaimer: Please note that browser support for these methods is still minimal. I’ve included links to MDN below for further reading. These three methods in general are also not nearly as useful as the Object.keys/values/entries methods either.
Array?
As a refresher, an Array is simply a list like object that we can use to store multiple values in a single variable. Here are a couple examples:
let cars = ['ford', 'chevy', 'mazda'];let ages = [24, 53, 28];
Iterator?
In order to understand these three methods, you must also understand what an iterator is.
- An iterator is an object that keeps track of its current position, while accessing items in a collection one at a time.
- An iterator returns an object with two properties:
doneandvalue. - In JavaScript, an iterator provides a
next()method which returns the next item in the sequence. - When the sequence completes, the
valuewill equalundefined, anddonewill equaltrue.
It’s okay if this doesn’t make complete sense yet. Once we go through the below methods, everything should be clearer!
Array.keys
This method returns a new Array Iterator object. The object contains keys for each item in the Array, and can be advanced with next():
let arr = ['a', 'b', 'c'];
let iterator = arr.keys();iterator.next(); // {value: 0, done: false}
iterator.next(); // {value: 1, done: false}
iterator.next(); // {value: 2, done: false}
iterator.next(); // {value: undefined, done: true}
Array.keys is not supported in Internet Explorer:
Array.values
This method returns a new Array Iterator object. The object contains values for each item in the Array, and can be advanced with next():
let arr = ['a', 'b', 'c'];
let iterator = arr.values();iterator.next().value(); // a
iterator.next().value(); // b
iterator.next().value(); // c
iterator.next().value(); // undefined
Unfortunately, Array.values doesn’t work in many browsers:
Array.entries
This method returns a new Array Iterator object. The object contains the entries for each item in the Array, and can be advanced with next():
let arr = ['a', 'b', 'c'];
let iterator = arr.entries();iterator.next().value(); // [0, 'a']
iterator.next().value(); // [1, 'b']
iterator.next().value(); // [2, 'c']
iterator.next().value(); // undefined
Unfortunately, Array.entries is not fully supported in all browsers yet:
Want more advanced JavaScript?
Check out: A Beginners Guide to Advanced JavaScript
I publish a few articles and tutorials each week, please consider entering your email here if you’d like to be added to my once-weekly email list.
