Skip to content

Commit c94bbc5

Browse files
committed
add description of creating, adding, removing, changing, iterating through JS array
0 parents  commit c94bbc5

File tree

2 files changed

+178
-0
lines changed

2 files changed

+178
-0
lines changed

LICENSE.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
#Learn.co Educational Content License
2+
3+
Copyright (c) 2015 Flatiron School, Inc
4+
5+
The Flatiron School, Inc. owns this Educational Content. However, the Flatiron School supports the development and availability of educational materials in the public domain. Therefore, the Flatiron School grants Users of the Flatiron Educational Content set forth in this repository certain rights to reuse, build upon and share such Educational Content subject to the terms of the Educational Content License set forth [here](http://learn.co/content-license) (http://learn.co/content-license). You must read carefully the terms and conditions contained in the Educational Content License as such terms govern access to and use of the Educational Content.
6+
7+
Flatiron School is willing to allow you access to and use of the Educational Content only on the condition that you accept all of the terms and conditions contained in the Educational Content License set forth [here](http://learn.co/content-license) (http://learn.co/content-license). By accessing and/or using the Educational Content, you are agreeing to all of the terms and conditions contained in the Educational Content License. If you do not agree to any or all of the terms of the Educational Content License, you are prohibited from accessing, reviewing or using in any way the Educational Content.

README.md

+171
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
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

Comments
 (0)