|
| 1 | +# JavaScript Arrays |
| 2 | + |
| 3 | +## Overview |
| 4 | + |
| 5 | +* Creation |
| 6 | +* Adding an Element |
| 7 | +* Accessing an Element |
| 8 | +* Replacing an Element |
| 9 | +* Removing an Element |
| 10 | +* Iteration |
| 11 | +* Resources |
| 12 | + |
| 13 | +## Creation |
| 14 | + |
| 15 | +JavaScript arrays can contain any types of values and they can be of mixed types. You can create arrays in two different ways, the most common of which is to list values in a pair of square brackets. These are called array literals. |
| 16 | + |
| 17 | +Syntax: |
| 18 | + |
| 19 | +```javascript |
| 20 | +var arrayName = [element0, element1, ..., elementN]; |
| 21 | +``` |
| 22 | + |
| 23 | +Examples: |
| 24 | + |
| 25 | +```javascript |
| 26 | +var primeNumbers = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37]; |
| 27 | + |
| 28 | +var tvShows = ["game of thrones", "true detective", "the good wife", "empire"]; |
| 29 | + |
| 30 | +var weirdGreeting = [ "he", 110, "w", 0, "r", {"1":"d"} ]; |
| 31 | + |
| 32 | +var empty = []; |
| 33 | +``` |
| 34 | + |
| 35 | +Array constructor is another approach to making a new JavaScript array. |
| 36 | + |
| 37 | +```javascript |
| 38 | +var evenNumbers = new Array(); |
| 39 | +``` |
| 40 | + |
| 41 | +## Adding an Element |
| 42 | + |
| 43 | +Ruby has two ways to add elements to the end of the array, `push` and `<<`. You're probably more familiar with the latter which is also known as the shovel method. JavaScript doesn't have the shovel method, but like Ruby, it does feature a push method. Take a look at the code below: |
| 44 | + |
| 45 | +```javascript |
| 46 | +var superheroines = ["catwoman", "she-hulk", "mystique"]; |
| 47 | + |
| 48 | +superheroines.push("wonder woman"); |
| 49 | +// superheroines is now ["catwoman", "she-hulk", "mystique", "wonder woman"] |
| 50 | +``` |
| 51 | + |
| 52 | +To add elements to an array at specific indexes, you use the bracket equals notation. This notation will also work for replacing values. |
| 53 | + |
| 54 | +Let's add three elements to our empty `evenNumbers` array. First, decide what index you want your element to have, remember the first element in an array has an index of 0. Then you wrap this desired index in brackets, place the array's variable name directly to the left. Remember to place an equal sign to the right of the closing square bracket, and put the value that you want your element to have after the equal sign. |
| 55 | + |
| 56 | +```javascript |
| 57 | +var evenNumbers = new Array(); |
| 58 | + |
| 59 | +evenNumbers[0] = 2; |
| 60 | +evenNumbers[1] = 4; |
| 61 | +evenNumbers[3] = 8; |
| 62 | + |
| 63 | +// evenNumbers is now [ 2, 4, undefined, 8 ] |
| 64 | +``` |
| 65 | + |
| 66 | +Notice that since we didn't tell JavaScript what value we wanted the third element to have, it defaulted to `undefined`. |
| 67 | + |
| 68 | +## Accessing an Element |
| 69 | + |
| 70 | +You can get elements out of arrays if you know their index. Just like in Ruby, array elements' indexes start at 0 and increment by 1, so the first element's index is 0, the second element's index is 1, the third element's is 2, etc. |
| 71 | + |
| 72 | +```javascript |
| 73 | +var entrepreneurs = ["Elizabeth Holmes", "Laurene Powell Jobs", "Arianna Huffington"]; |
| 74 | + |
| 75 | +// the line below will print the string "Elizabeth Holmes" |
| 76 | +console.log(entrepreneurs[0]); |
| 77 | + |
| 78 | +// the code below will print the string "Arianna Huffington is the co-founder and editress-in-chief of The Huffington Post" |
| 79 | +var bio = " is the co-founder and editress-in-chief of The Huffington Post"; |
| 80 | +console.log(entrepreneurs[2] + bio); |
| 81 | + |
| 82 | +// the line below will return undefined |
| 83 | +entrepreneurs[9]; |
| 84 | +``` |
| 85 | + |
| 86 | +## Replacing an Element |
| 87 | + |
| 88 | +Replacing the value of an element in a JavaScript array is very similar to the equivalent in Ruby. Say you have an array of author names, and you would like to replace the second element, J. D. Salinger, with the string "Harper Lee". Since the second element has an index of 1, you simply reassign using the index number: |
| 89 | + |
| 90 | +```javascript |
| 91 | +var authors = ["ray bradbury", "j. d. salinger", "maya angelou"]; |
| 92 | + |
| 93 | +authors[1] = "harper lee"; |
| 94 | +// authors is now ["ray bradbury", "harper lee", "maya angelou"]; |
| 95 | +``` |
| 96 | + |
| 97 | +## Removing an Element |
| 98 | + |
| 99 | +To remove an element in JavaScript, you can call on the `splice()` function. This function takes two required arguments and some optional arguments: |
| 100 | + |
| 101 | +1. index to start at (required) |
| 102 | +2. number of elements to remove (required) |
| 103 | +3. an element to add to the array (optional) |
| 104 | +4. an element to add to the array (optional) |
| 105 | +5. etc. |
| 106 | + |
| 107 | +```javascript |
| 108 | +var myFish = ['angel', 'clown', 'drum', 'mandarin', 'surgeon']; |
| 109 | + |
| 110 | +// removes 1 element from index 3 |
| 111 | +var firstRemovedFish = myFish.splice(3, 1); |
| 112 | + |
| 113 | +// myFish is now ['angel', 'clown', 'drum', 'surgeon'] |
| 114 | +// firstRemovedFish is ['mandarin'] |
| 115 | + |
| 116 | +// removes 1 element from index 2, and inserts 'trumpet' |
| 117 | +var secondRemovedFish = myFish.splice(2, 1, 'trumpet'); |
| 118 | +// myFish is ['angel', 'clown', 'trumpet', 'surgeon'] |
| 119 | +// secondRemovedFish is ['drum'] |
| 120 | + |
| 121 | +// removes 2 elements from index 0, and inserts 'parrot', 'anemone' and 'blue' |
| 122 | +var removedFishes = myFish.splice(0, 2, 'parrot', 'anemone', 'blue'); |
| 123 | +// myFish is ['parrot', 'anemone', 'blue', 'trumpet', 'surgeon'] |
| 124 | +// removedFishes is ['angel', 'clown'] |
| 125 | +``` |
| 126 | + |
| 127 | +## Iteration |
| 128 | + |
| 129 | +JavaScript's `forEach` function will help you to iterate through an array. The forEach method executes a provided function once per array element. The first argument that this provided function needs is the variable name for currentValue. In Ruby, this value is typically seen inside of the double pipes (ex. `letters.each do |letter|`). |
| 130 | + |
| 131 | +```javascript |
| 132 | +var letters = ["z", "y", "x", "w", "v", "u", "t", "s"]; |
| 133 | + |
| 134 | +letters.forEach(function(letter) { |
| 135 | + console.log("♫ " + letter + " ♬"); |
| 136 | +}); |
| 137 | +// this will print the following to the console: |
| 138 | +// ♫ z ♬ |
| 139 | +// ♫ y ♬ |
| 140 | +// ♫ x ♬ |
| 141 | +// ♫ w ♬ |
| 142 | +// ♫ v ♬ |
| 143 | +// ♫ u ♬ |
| 144 | +// ♫ t ♬ |
| 145 | +// ♫ s ♬ |
| 146 | +``` |
| 147 | + |
| 148 | +Like Ruby's `.each_with_index` method, you can also instruct JavaScript to keep track of the index number of the element it is currently on. To do this, pass the provided function a second argument: |
| 149 | + |
| 150 | +```javascript |
| 151 | +var letters = ["z", "y", "x", "w", "v", "u", "t", "s"]; |
| 152 | + |
| 153 | +letters.forEach(function(letter, index) { |
| 154 | + var number = index + 1; |
| 155 | + console.log(number + ". " + letter); |
| 156 | +}); |
| 157 | +// this will print the following to the console: |
| 158 | +// 1. z |
| 159 | +// 2. y |
| 160 | +// 3. x |
| 161 | +// 4. w |
| 162 | +// 5. v |
| 163 | +// 6. u |
| 164 | +// 7. t |
| 165 | +// 8. s |
| 166 | +``` |
| 167 | + |
| 168 | +## Resources |
| 169 | + |
| 170 | +* [MDN - Arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) |
| 171 | +* [Codecademy - Arrays](http://www.codecademy.com/glossary/javascript) |
0 commit comments