Objects and Arrays

  • Objects

  • Challenge 1

    Make an obj named myObj with three properties: "foo", "bar", "baz". give foo the value "hello", bar the property "world" and give baz the value true
  • Challenge 2

    objects can be nested within eachother. Let's try it out by making our own nested object. make an object named myNestedObj with a property named "outer" with the value "outer value" and a property innerObj with the value of an object, and give this innerObj a property "inner" with the value "inner value"
  • Challenge 3

    Functions are objects as well, and can be added to objects under property names. Let's add a function to an object. (note: when a function is added to an object, it is refered to as a method)
    add the introduce function to the objWithName object. Assign it to a property called intro.
  • Challenge 4

    For loops allow us to repeat actions multiple times. A very specific type of for loop called a for.. in loop allows us to loop through the properties of an object. the for...in loop specifies a variable that is assign the value of a key on each interation. the general structure is as follows:
      for (var property in someObject) {
        //do something here
      } 
      
    Display the message contained in myLoopedObj by loging each property value using a for...in loop.
  • Challenge 5

    There is a useful functions for objects that you should be aware of: Object.keys(). This funciton takes in a object as its argument and returns an array of its keys. Log the keys of anotherOBj using Object.keys
  • Arrays

  • Challenge 6

    Arrays are special types of objects with sequential integers as keys (refered to as indices). They are are different from regular objects in that they reflect an ordering of their values. They are created using bracket syntax, with values being seperated by commas: const arr = [1, 2, "hello", "there", true] An array may contain values of any data type, even other arrays! (ex string, number, boolean, object, array, etc) make an array named myFirstArray and give it three elemets.
  • Challenge 7

    All items in an array have a sequential index starting at the number 0. This index may be used to access an element at a specific position in the array. arr[0] would return the first item in the array. Arrays have a special property called length that indicates the count of the number of items contained within the array. This length value is always one larger than the number of items contained in the array, because the length counts the number of items contained starting with 1. Knowing this, use the length property to log the last item in someArray. The element can be accessed using bracket notation array[someIndex]
  • Challenge 8

    Another type of for loop can be used to declare a iterator (most commonly named i) and increment it on each loop. This loop will stop when the index is equal to the length of the array. Use a for loop to print out the array values.
      for (var i = 0; i < array.length; i++) {
        // do something here
      } 
      
  • Challenge 9

    The for...of loop acts like the for in loop, but is specific for arrays. Instead of assigning the Object property to the supplied variable, it assigns the array value.
      for ( var value of someArray ) {
        //do something
      }
      
    Log the values of wordArr using a for... of loop
  • Challenge 10

    There are 4 array methods you should be aware of: pop, push, shift, unshift these methods add or remove items in certain ways.
    arr.pop() removes the last item from an array and returns this item
    arr.push() accepts one or more arguments and adds them to the end of the array
    arr.shift() removes the first item from an array and returns this item, shifting all other items down one.
    arr.push() accepts one or more arguments and adds them to the beginning of the array
    Use these methods in Challenge 10.
  • Challenge 11

    A important concept to grasp in javascript is that primative datatypes (numbers, booleans, and strings) are passed by value, while objects (such as objects and arrays) are passed by reference. This means when you manipulate an object, any changes to that object are reflected in all other references to that object. Sometimes we want to copy an array, so that we can augment its values without worrying about changing the object itself, That's where the array .slice() method comes in. .slice() makes a copy of an array, with two optional parameters: a begining index (inclusive) and an end index (exclusive). If no arguments are passed in, the slice method will just return an exact copy of the array. A sliced array copy will be a new object, and when compared with the equality operator == will not equal its original object. Uncomment the lines in the Challenge 11 and try and predict what will be return in the three equality expressions. Then in part two, slice the array in half and uncomment the last line to check;
  • Challenge 12

    Another useful array method is .splice(). Splice is used to add or remove elements from an array. It however mutates the original array, unlike slice(). This means items spliced out of or into an array will be reflected in all other references to this array. The splice method takes a first required parameter the start index, followed by an optional count parameter, reflecting the number of items to remove starting from the start index. Lastly, all other parameters passed to splice will be put into the array starting at the start index. Uncomment the first lines of code and try and predict how the array will change. Then, use the .splice() method to fix the two arrays.



  • Extension 1

    Use a for...in loop to move all of the values in initialArr to ObjFromArr, with their indices as keys.
  • Extension 2

    use a for in loop to delete the properties from deleteFromMe whose values when passed into isEven() equate to true.
  • Extension 3

    For this extension, you will preform a "shallow clone" of an object. This means you will copy all properties and values from firstObj to secondObj. But objects that are values will be merely be referenced by the new object. They will in sense, share this inner object. Uncomment the last line to check if you did it right!
Supported Browsers: