Array, Object Methods

Array.from()

You can do amazing things with Array.from. Here are just a few.

range

Lodash users may be familiar with _.range, which builds an array of numbers for you. Use Array.from instead!

const range = Array.from({ length: 5  }, (val, key) => key);
console.log(range);

repeater

const repeater = Array.from({ length: 4 }, () => 'jack');
console.log(repeater);

split()

Array.from splits the data into invidual pieces, so you can use it in place of split().

const split = Array.from('Nicolas');
console.log(split);

morph

You can also use it like map() to build a new array of morphed values.

const morph = Array.from([1,2,3], num => 'student '+num);
console.log(morph);

Array.of()

create array

Takes whatever you throw at it, and turns it into an array. This can be helpful for a variety of cases that are a bit technical, when you cannot write a literal.

const kids = {boys: ['nico', 'will', 'pete']};
const repeater = Array.of(kids);
console.log(repeater);

const array = Array.of('Nicolas', 'Julia');
console.log('array length: '+array.length);

Array entries()

Easy way to convert your array into key value pairs for iteration. Please Note this returns an Array Iterator object, not a new array.

const students = ['Greg', 'Aidan', 'Eric', 'Daniel'];
const pairs = students.entries();
console.log(pairs);
for (let student of pairs) {
  console.log('key is '+student[0]+ ' name is '+student[1]);
}

Object.entries()

An outright superhero, as it converts your object into an iterable array. I like to keep my data in objects as it's more concise - but my template system needs arrays to show things like a list of images, for example. It offers a quick and painless way to make that iterable, so my template will display these images without having the parse the data first.

const imageData = {
  flower: {
    width: 100,
    baseColor: 'red',
    keyword: 'spring'
  },
  mountain: {
    width: 250,
    baseColor: 'navy',
    keyword: 'winter'
}
}
const images = Object.entries(imageData);
console.log('our first image is '+images[0][0]);
console.log('our image color is '+images[0][1].baseColor);

Array keys()

Converts your array into an Array Iterator object of keys. Please Note this returns an Array Iterator object, not a new array.

const students = ['Greg', 'Aidan', 'Eric', 'Daniel'];
const keysIndex = students.keys();
for (let key of keysIndex) {
  console.log('key is '+key);
}

// let's turn the student keys into an actual Array now...
const array = Array.from(students.keys());
console.log('this will output your array '+array);

// note that if you try performing this on the keysIndex variable, it fails
const array2 = Array.from(keysIndex);
console.log('this will not output your array '+array2);

Object.keys()

You may already be using _.keys from Lodash, which you don't need. I use this frequently, as I makes it easy to build menus and other lists from JSON objects. This allows me to capture the data for any student just by knowing their name, rather than having to loop through and array.

const students = {
  nicolas: {age: 11, seat: 1, hair: 'brown'},
  pete: {age: 10, seat: 5, hair: 'blonde'},
  will: {age: 12, seat: 3, hair: 'red'}
}

const names = Object.keys(students);
console.log('our keys are '+names);

Array values()

This converts your array into an Array Iterator object. You might want to do this in order to create a pausable iteration, as it gives you access to the next() method and the done property.

const students = ['Greg', 'Aidan', 'Eric', 'Daniel'];
const iterator = students.values();

// if you wanted to create a pausable iteration, this would give you access to iterator.next() 
console.log(iterator.next());

Object.values()

This is a quick way to get just the values from your object, returned as a new array.

const classroom = {captain: 'greg', geek: 'cameron', funnyboy: 'aidan', president:'nicolas'};
const values = Object.values(classroom);
console.log(values);