tjf91/looping-destructuring-arrowfns-code-along

Mini Project Practice Problems from the JavaScript Day 3 Lecture

Project Summary

In this project, we'll provide a variety of JavaScript problems to help improve your skills. We would like you to push yourselves as much as possible.

Setup

• Fork this repository.
• Clone your fork.
• Open ./index.html with your browser.

Tips and Tricks

One of the biggest tools at the developer's disposal is the browser's built-in debugger. To use it, open ./index.html with your browser. Another great tool for small and isolated pieces of code is Python Tutor. Just make sure to change the code to JavaScript ES6.

Resources

Higher Order Functions

• Map
• Filter
• Reduce
• ForEach

Destructuring

// Destructuring is a short hand way to access properties as an object and store them as usable variables.
// Consider the following object:

let user = {
  name: 'John',
  age: 33,
  appearance: {
    hairColor: 'Blonde',
    eyeColor: 'Hazel',
    height: {
      onTinder: '6ft. 4in.',
      offTinder: '6ft. 2in.'
    }
  }
}

// Accessing properties off this object might look something like this

let userName = user.name; // 'John'
let userAge = user.age; // 33
let userHairColor = user.appearance.hairColor; // 'Blonde'
let userEyeColor = user.sppearance.eyeColor; // 'Hazel'

// Or, using object destructuring

let { name, age } = user;

// notice here that we have to declare a new destructured object.
// That's because we're pulling values off two separate objects,
// even though they're on the same parent object.

let { hairColor, eyeColor } = user.appearance;

// Destructuring is a shorter, more concise way to access the properties from objects.
// -------------------------

// You can also destructure functional parameters that are objects,
// capturing only the object properties we care about.

let user = {
  name: 'Steven',
  age: 26
}

function greeting(user) {
  return 'Hello ' + user.name;
}

// Or, with destructuring

function greeting({ name }) {
  return 'Hello ' + name;
}

greeting(user); // 'Hello Steven';

Spread

• Spread Syntax
• In Arrays
• In Objects

For...In/Delete

• For...In
• Delete

Nesting

• Nesting Loops

Contributions

If you see a problem or a typo, please fork, make the necessary changes, and create a pull request so we can review your changes and merge them into the master repo and branch.

Copyright

© DevMountain LLC, 2017. Unauthorized use and/or duplication of this material without express and written permission from DevMountain, LLC is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to DevMountain with appropriate and specific direction to the original content.