Giter Club home page Giter Club logo

lesson-w01-d04-js-arrays's Introduction

General Assembly Logo

JavaScript Arrays

Objectives

By the end of this, developers should be able to:

  • Define an array
  • Store, access, and update data values in arrays
  • Iterate over items in an array

Preparation

  1. Fork and clone this repository
  2. Create a new branch, training, for your work and change into it.

images/arrays1

images/arrays2

images/arrays3

images/arrays4

images/arrays5

images/arrays6

images/arrays7

images/arrays8

Code Along: Arrays

In JavaScript to represent a list we can use an Array. Elements in an Array or items in our list are ordered. JavaScript arrays are zero-indexed: the first element of an array is at index 0, and the last element is at the index equal to the value of the array's length property minus 1. Using an invalid index number returns undefined.

// Create an empty array literal
const list = [];

// Create an array literal with values
const anotherList = ['Nelly', 100, false, 2];

// Read value from an Array, use index
anotherList[0]; // 'Nelly'
anotherList[2]; // false

// Update value in an Array, use index
anotherList[2] = true;
anotherList; // ['Nelly', 100, true, 2]

// Add value to an Array, use index
anotherList[5] = 'Add Me';
anotherList; // ['Nelly', 100, true, 2, undefined, 'Add Me']

Array Methods

images/arrays9

images/arrays10

images/arrays12

images/arrays13

images/arrays14

images/arrays15

Iterating through Arrays

Code Along: Iterate through an Array

const developers = ['Ahmad', 'Mike', 'Sami']

// Individually print message for each item in array
console.log('Hello ' + developers[0])
console.log('Hello ' + developers[1])
console.log('Hello ' + developers[2])

// Loop through array using i as the index
for (let i = 0; i < developers.length; i++) {
  console.log('Hello ' + developers[i])
}

Array Practice

Create a file named practice.js to save your solutions.

  1. Using push and unshift, make this array contain the numbers from zero through seven:
const arr = [2, 3, 4];

// your code here

arr; // => [0, 1, 2, 3, 4, 5, 6, 7]
  1. What is returned by push? Before throwing this into the console, form a hypothesis about what you think the return value will be:
const arr = [5, 7, 9];
arr.push(6); // returns ???
  1. Change all odd numbers to be those numbers multiplied by two:
const numbers = [4, 9, 7, 2, 1, 8];

  // your code here

numbers; // => [8, 18, 14, 4, 2, 16]
  1. Change all odd numbers to be those numbers multiplied by two:
const numbers = [4, 9, 7, 2, 1, 8];

  // your code here

numbers; // => [4, 18, 14, 2, 2, 8]
  1. Create an array to hold your favorite colors. For each choice, log to the screen a string like: My #1 choice is blue.

  2. Create an array of ages. Loop through and log only the ages that are over 21.

  3. Starting with an empty array called rainbowColors:

    • Add "orange" to the end of the array
    • Add "red" to the start of the array
    • Add "yellow" to the end
    • Add "green", "blue", "indigo", and "violet" to the end of the array
      • Try and do this using one method
    • Print the length of the array
    • Print the second item
    • Print the last item (make this flexible/dynamic!)
    • Print the index of the string "blue"
  4. Find out the difference between .slice and .splice

    • Create an array called twoColors using one method - don't change the rainbowColors array! Essentially pull two colors out of the array (say, between the index of 1 and 3)
    • Starting with this array var nums = [0, 1, 2, 2, 2, 3, 3, 4, 5];, remove the duplicates destructively using slice or splice (whichever one is appropriate)
  5. Work with arrays of arrays

    • Starting with this array var arrOfArrs = [["inner array first item", "inner array second item"], ["first", "second", "third"]];
    • Access "inner array first item" and print it out"
    • Print "third" by using a dynamic index
  6. Create an array to hold your top five choices of something (music, books, movies, whatever).

    • For each choice, log to the screen a string like: "My #1 choice is blue."
    • Bonus: Change it to log "My 1st choice, "My 2nd choice", "My 3rd choice", picking the right suffix for the number based on what it is.

Array Resources

lesson-w01-d04-js-arrays's People

Contributors

marcwright avatar micfin 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.