Objects and Arrays

Why is this important?

This workshop is relevant to developers because:

You will be able to identify the attributes and characteristics of objects.
Understanding primitive data types will enhance your coding decisions in terms of efficiency and code reuse

What are the objectives?

After this workshop, developers will be able to:

Identify primitive and reference data types in JavaScript
Manipulate data inside arrays and objects
Use iteration methods to loop over objects and arrays

Where should we be now?

Before this workshop, developers should already be able to:

Identify an array of elements
Open, edit, and save a .js file in Atom
Evaluate simple lines of code in the Chrome Developer Console or Node REPL

How to use this document:

This is a reading assignment. Please accomplish the following:

Read the entire document
Study the code samples
Evaluate the exercises, try implementing solutions, then check your code against the solutions.md

Primitive and Reference Data Types

When your computer looks up the value of a variable, you can think of that like asking a librarian for some information.

If the librarian knows the answer "off the top of their head," they'll give it to you immediately. Computer programming languages purposefully store some types of variables so that they'll immediately know what to give you when you access a variable. These are called the "primitive data types" of the language.

If a librarian doesn't know the answer to your question, they'll tell you where to look it up. Computer programming languages purposefully store some types of variables this way -- so your computer doesn't know the exact value but knows where to look up the information. These are called the "reference types" of a computer programming language.

###Primitive Data Types in JavaScript

Boolean (just true or false)
Null (no value - a placeholder: just null)
Undefined (empty/unassigned: just undefined)
Number (integers and floating point values: like 3, 9.5, -0.288)
String (words in quotes: like "hello", "AWESOME!")
Symbol (coming in the next version of JavaScript, known as ES6)

Many students wonder about the difference between null and undefined. As a rule of thumb, you should let JavaScript decide when something is undefined. You should use null wherever you want to "blank out" a variable so that it has no value.

Reference Data Types in JavaScript

Objects are a reference data type that allow us to group data together. There often isn't enough room in a variable to store an entire complex Object; instead, we store a reference to another location in memory, and the computer looks it up when needed.

You should recognize object literals, which are enclosed in curly braces:

var car = { make: "Tesla", model: "S", year: 2015 };

var shirt = { size: "L", color: 'green' };

Object is the most basic reference type in JavaScript. Every other non-primitive we'll use -- Array, Function, Date -- is actually built out from the basic Object type.

Objects

Objects are composed of key-value pairs. Keys usually represent properties of an object type. An object representing a person, for instance, might have keys like name, height, age. Values are the actual value of a key for a particular object, like 'Bill', '5 feet, 9 inches', 34. In JavaScript Objects, keys are always converted to strings.

Object Method Basics

Creating an object literal:

var person = { name: 'Bill', height: '5 feet, 9 inches', age: 34 };

Accessing the age value:

// this is called bracket notation:
person['age']; // 34
// this is called dot notation:
person.age;    // 34

Adding a key-value pair:

person["hairColor"] = 'blonde';
person.hairColor = 'blonde';
// { name: 'Bill', height: '5 feet, 9 inches', age: 34, hairColor: 'blonde' }

Changing the value for a key:

person.hairColor = 'green';
// { name: 'Bill', height: '5 feet, 9 inches', age: 34, hairColor: 'green' }

Semi-removing a value:

There's not a way to remove just a value. Use null as a marker for an empty value.

person.hairColor = null;

Fully removing a key-value pair:

delete person.height;
// { name: 'Bill', age: 34, hairColor: 'green' }

Checking if the object has a certain key:

person['height'];  // undefined
// undefined means the key doesn't exist

Finding keys in the object:

var keys = Object.keys(person);
// ['name', 'age', 'hairColor']

Looping through Objects

One way to loop through objects in JavaScript is to use for ... in loops:

  for (key in person){
    // this next condition is required because of the prototype chain, which we haven't talked about quite yet
    if (person.hasOwnProperty(key)){  
      console.log(key, ": ", person1[key]);
    }
  }
  // the order is not guaranteed, but this console logs:
  //   'name': 'Bill'
  //   'age': 34
  //   'hairColor': null

Arrays

Arrays are a special kind of ordered object. Instead of having keys that are strings, every key is a number called an "index", starting with 0. An array can contain lists of numbers, strings, Objects, or even other arrays! When discussing arrays, we say that they are collections of elements.

##Array Access Methods##

Creating an array:

var fruits = ["Apple", "Banana", "Cherry", "Durian", "Elderberry", 
"Fig", "Guava", "Huckleberry", "Ice plant", "Jackfruit"];

Accessing the first element:

fruits[0]; // "Apple"

Accessing the length:

fruits.length; // 10

Accessing the last element:

fruits[fruits.length-1]; // "Jackfruit

##Adding Elements to an Array

Adding an element to the front:

fruits.unshift("Apricot"); // 11

Adding an element to the end:

fruits.push("Kiwi"); // 12

##Removing Elements from an Array Removing an element from the front:

fruits.shift(); // "Apricot"

Removing an element from the end:

fruits.pop(); // "Kiwi"

##Other Array Manipulation Methods

Finding the index of an element:

fruits.indexOf("Jackfruit"); // 9
fruits[9]; // "Jackfruit"

Changing an element by index position:

var cherryPos = fruits.indexOf("Cherry");
fruits[cherryPos] = "Cantaloupe";
// ["Apple", "Banana", "Cantaloupe", "Durian", "Elderberry", 
// "Fig", "Guava", "Huckleberry", "Ice plant", "Jackfruit"];

Removing an element by index position:

var huckleBerryPos = fruits.indexOf("HuckleBerry");
var removedItem = fruits.splice(huckleBerryPos, 1); 
// ["Apple", "Banana", "Cantaloupe", "Durian", "Elderberry", 
// "Fig", "Guava", "Ice plant", "Jackfruit"]

Copying elements:

var commonFruits = fruits.slice(0,4);
// commonFruits is ["Apple", "Banana", "Cantaloupe"]
// fruits is ["Apple", "Banana", "Cantaloupe", "Durian", 
// "Elderberry", "Fig", "Guava", "Ice plant", "Jackfruit"]

##Array Iteration Methods

JavaScript has quite a few helper functions that implement common patterns. "Iteration methods" follow the pattern of looping through an array and do something with each element. Iteration methods take a function as one of their arguments. This "callback" function says what should be done with each element of the array.

Iteration methods are useful because they're generic and reusable. We don't have to write the same pattern over and over again, because the iteration methods take care of the details.

The most well-known iteration methods are each/forEach, map, and reduce.

The map iteration method does something to each element of the array, and forms a new array made up of the results. Here's how we'd use JavaScript's built-in map:

Fruity Example - pluralize all of our fruits

var pluralize = function(word){
  // if word ends in 'y', remove 'y' and add 'ies' to the end
  word = word.split('');  // turn the string into an array
  var lastLetter = word[word.length -1];
  if (lastLetter === 'y') { 
    word.pop();  // remove y
    word.push('i', 'e');  // add i and e
  } 
  word.push('s');
  word = word.join('');  // convert back to a string
  return word;
}

fruits = fruits.map(pluralize);

// [ "Apples", "Bananas", "Cantaloupes", "Durians", "Elderberries",
//   "Figs", "Guavas", "Ice plants", "Jackfruits" ]

Numbers Example - Square each number in an array

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var square = function(num){
  return Math.pow(num, 2);
}

numbers.map(square);
// [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

Here's how another version of a map iteration method might be coded in JavaScript:

// define the myMap function
var myMap = function(arr, callback){
  var outputArray = [];  // create a new array to hold output
  for (var i=0; i<arr.length; i++){
    outputArray.push(callback(arr[i], i));
  }
  return outputArray;
};

// call the myMap function
myMap(fruits, pluralize); 
// [ "Apples", "Bananas", "Cantaloupes", "Durians", "Elderberries",
//   "Figs", "Guavas", "Ice plants", "Jackfruits" ] 
myMap(numbers, square);
// [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

Other Array Methods

Check out Mozilla Developer Network's Array documentation for more information on arrays. In particular, all of the methods listed in the Array instances section are available to use with JavaScript arrays. Commonly used ones include join, sort, and reverse.

simongt / js-object-primitives