Git Product home page Git Product logo

javascript-2-afternoon-2's Introduction

Project Summary

In this project, we'll provide practice JavaScript problems to help you better understand Arrays.

Setup

  • Fork this repository.
  • Clone your fork.
  • Open ./practice.js with your code editor.
  • Open ./index.html with your browser.

Directions

Complete the first 5 activities inside of ./practice.js to make the spec runner pass it's tests. In order to check the progress of the spec runner, open ./SpecRunner.html with your browser. Remember to commit and push your code often. Good luck!

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 Pyton Tutor. Just make sure to change the code to JavaScript ES6.

Resources

Arrays
// declare an empty array
let myThings = [];

// declare an array with items
let myThings = ['Bike', 7, {name: 'Jeff'}, ['Catfish']]

// Arrays have index to access the contents inside
// they start at 0 and end at the length of the array - 1

myThings.length === 4 // true

myThings[0] === 'Bike' // true

myThings[3] === ['Catfish'] // true

myThings[4] === undefined // true

// if you don't know how long an array is, you can access the last value like so

myThings[myThings.length - 1] === ['Catfish'] // true
Array Methods
// Arrays have many built in methods (functions) that we can use to interact with the array and it's contents
// These method's include ways to add items, remove items, sort the array, filter values, etc.
// Each method has a value that is returned when you invoke it. Some of the methods include:
For Loops
// A for loop is a common pattern to use in JavaScript when you need to execute a block of code a certain number of times.

// This can be an arbitrary number of times, or more commonly when wanting to execute a block of code on each item in the array or searching an array. A typical for loop will look like the following:

for (var i = 0; i < 10; i++) {
  console.log(i);
}

/*
a for loop statement is comprised of 3 parts:

1. The iterator (count)
2. Condition (when should it stop looping)
3. Increment Expression (how should it add to the count?)
*/

// In the above example, we start our count at 0, loop as long as the count is less than 10 and add one to the count after each time the loop runs. This will log 0-9 to the console, respectively. You can swap the console log with any valid javascript and it will run 10 times

// You can change the values in the for statement to fit your needs, e.g.:

for (var i = 10; i > 0; i--) {
  console.log('The iterator is ' + i);
}

// In the above example we start at 10 and work our way down to 1 by decrementing the iterator

// A for loop to access array items

var myThings = ['Bike', 'Car', 'Hat'];

for (var i = 0; i < myThings.length; i++) {
  console.log(myThings[i]);
}

// In the above example we start our loop at 0 (or the first index in the array) and we loop as long as the iterator (count, i) is less than the length of myThings (remember, arrays start at 0, so the length will always be 1 larger than the last items index), add one to the iterator on each loop and look at the next item in the array. This will print 'Bike', then 'Car', then 'Hat'. 
Nesting
// The following will be several examples of accessing properties in normal structured data

var users = [{name: 'Steven', age: 26, friends: ['John', 'Kate']}, {name: 'Kate', age: 27, friends: ['John', 'Steven']}];

users[0].name === 'Steven' // true
users[1].name === 'Kate' // true
users[0].friends[1] === 'Kate' // true
users[1].friends[0] === 'John' // true

var user1 = {
  name: 'John',
  age: 33,
  appearance: {
    hairColor: 'Blonde',
    eyeColor: 'Hazel',
    height: {
      onTinder: '6ft. 4in.',
      offTinder: '6ft. 1in.'
    }
  }
}

user1.name === 'John' // true
user1.appearance.hairColor === 'Blonde' // true
user1.appearance.height // { onTinder: '6ft. 4in., offTinder: '6ft. 1in.' }
user1.appearance.height.onTinder === '6ft. 4in.' // true

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.

javascript-2-afternoon-2's People

Contributors

tylermcginnis avatar asbrettisay avatar jrobber avatar devlemire avatar maninacan avatar mahburg avatar steven-isbell avatar tramynn avatar cahlan avatar joeblank avatar r-walsh avatar jasondawson avatar zacanger avatar rasbandit avatar npm1514 avatar joshualeduc avatar dougglez avatar brackcarmony avatar barbaraliau avatar yurovant avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.