es2015-arrays.md

Arrays

Reading Values With Array Destructuring

We can use destructuring to assign multiple values from an array to local variables.

let users = ["Sam", "Tyle", "Brook"];
let [a, b, c] = users; // Easy to understand and less code
console.log(a, b, c); // > Sam Tyler Brook

Values can be discarded

let [a, , b] = users;
console.log(a, b); // Sam Brook

Combining Destructuring With Rest Params

We can combine destructuring wiht rest parameters to group values into other arrays.

let users = ["Sam", "Tyle", "Brook"];
let [first, ...rest] = users; // Groups remaining arguments in an array
console.log(first, rest); // > Sam ["Tyler", "Brook"]

Destructuribng Arrays From Return Values

When returning arrays from functions, we can assign to multiple variables at once.

function activeUsers() {
  let users = ["Sam", "Alex", "Brook"];
  return users;

Returns an array, as expected...

let active = activeUsers();
console.log(active) // > ["Sam", "Alex", "Brook"]

...or assigns to individual variables. Handy!

let [a, b, c] = activeUsers();
console.log(a, b, c); // > Sam Alex Brook

Using for ...of to Loop Over Arrays

The for ...of statement iterates over property values, and it's a better way to loop over arrays and other iterable objects.

let users = ["Sam", "Alex", "Brook"];

for (let index in names) { // Uses index to read actual element
  console.log(names[index]); // > Sam Tyler Brook
}

for (let name of names) { // Reads element directly and with less code involved
  console.log(name); // > Sam Tyler Brook
}

Limitations for for ...of and Objects

The for ..of cannot be used to iterate over properties in plain JavaScript objects out-of-the box.

let post = {
  title: "New Features in JS",
  replies: 19,
  lastReplyFrom: "Sam"
};

for (let property of post) {
  console.log("Value: ", property); // > TypeError: post[Symbol.iterator] is not a function
}

How do we know when it's okay to use for ...of?

Objects That Work With for ...of

In order to work with for ...of, objects need a special function assigned to the Symbol.iterator property. The presence of this property allows us to know whether an object is iterable.

let users = ["Sam", "Alex", "Brook"];

// Symbols are a new data type guaranteed to be unique
console.log(typeof names[Symbol.iterator]); // > function

// Since there's a function assigned, then the names array will work just fine with `for ...of`
for (let name of names) {
  console.log(name); 
}

Objects That Don't Work With for ...of

No function assigned to the Symbol.iterator property means the object is not iterable.

let post = {
  title: "New Features in JS",
  replies: 19,
  lastReplyFrom: "Sam"
};

// Nothing assigned to Symbol.iterator, so the `post` object will not work with `for ...of`
console.log(typeof post[Symbol.iterator]); // > undefined

for (let property of post) {
  console.log(property); // > TypeError:post[Symbol.iterator] is not a function
}

Finding an Element in an Array

Array.find returns the first element in the array that satisfies a provided testing function.

let uses = [
  { login: "Sam",   admin: false },
  { login: "Brook", admin: true  }, 
  { login: "Tylor", admin: true  }
];

// How can we find an admin in this array of users?
let admin = users.find((user) => {
  return user.admin; // Return first object for which `user.admin` is `true`
});

console.log(admin); // > {"login":"Brook","admin":true}

// One-liner arrow function
let admin = user.find(user => user.admin);
console.log(admin);