Terminology
-
Array: A collection of items grouped inside
[]. - Collection: A computer programming term for a list of items. An array is just one kind of collection.
- Element: An item in an array.
Examples
Arrays can have just about anything as elements, even other arrays:
["string", 123, true, ["another string", 456], 321, 52 / 3]
Methods
Common array method:
-
Array.prototype.push(): Add an element to the end of an array.
Tip: Use let when you plan to modify an array and const when the array won't be modified. However, be aware that const won't actually stop you from modifying an array!
Bracket Notation
Index: The index of an element in an array is its numerical position. The first element has an index of 0.
OBOE: An off-by-one error. Watch out for these!
Access elements using square brackets:
const letters = ['a', 'b', 'c'];
letters[0]; // returns 'a'
Start counting elements at 0.
You can check the length of an array like this:
> letters.length
3
You can get elements from the end of an array like this:
> letters[letters.length - 1]
'c'
Cheatsheet
Index: The index of an element in an array is its numerical position. The first element has an index of 0.
OBOE: An off-by-one error. Watch out for these!
Access elements using square brackets:
const letters = ['a', 'b', 'c'];
letters[0]; // returns 'a'
Start counting elements at 0.
You can check the length of an array like this:
> letters.length
3
You can get elements from the end of an array like this:
> letters[letters.length - 1]
'c'
Array Methods
- Destructive methods modify the receiver (the thing they are called on). Non-destructive methods don't. For non-destructive methods, you'll need to store the return value of the method in a variable.
Methods
-
Array.prototype.push(): Push elements to the end of an array. -
Array.prototype.concat(): Concatenate elements to the end of an array. Similar toArray.prototype.push()except it doesn't modify the original array. -
Array.prototype.unshift(): Add an element to the beginning of an array. -
Array.prototype.shift(): Remove an element from the beginning of an array. -
Array.prototype.pop(): Remove an element from the end of an array. -
Array.prototype.join(): Turn an array into a string. You can pass an optional separator in as an argument.""is a common separator. -
Array.prototype.slice(): Slice elements from the beginning and (optionally) the end of an array.
Modify Elements in an Array with Bracket Notation
> let array = [1,2,3]
> array[0] = "We just modified the array at position zero."
> array
["We just modified the array at position zero.",2,3]
See the list of array methods in the left-hand pane of the Mozilla array documentation.
Comparing and Cloning Arrays
- Pointer: A reference to an object in memory but not the object itself; for example, a variable that is set to an array does not contain the array itself but rather a pointer to the saved array.
Tips
- No two arrays are the same even if they have the exact same contents inside!
- Arrays cannot be compared with the
===operator. However, they may be transformed into strings with.toString(), and those strings may be compared with===. - Arrays cannot be cloned by setting a new variable name to the original array (ie:
let cloneArray = originalArray;). This will only create a pointer to the original array.
Examples
To properly clone array (ie: not simply create a pointer to existing array):
const cloneArray = originalArray.slice()
To compare arrays by transforming them into strings:
const a = [1,2,3]
const b = [1,2,3]
a.toString() === b.toString();
Introduction to Looping
Loop: A piece of code that repeats until a condition is met.
Callback: A function that calls another function.
Anonymous function: An unnamed function. They can be stored using a function expression or used as a callback in another function such as Array.prototype.forEach().
Example
const languages = ['HTML', 'CSS', 'JavaScript'];
languages.forEach(function(language) {
alert('I love ' + language + '!');
});
forEach Loops
Examples
Logging values to the console:
const array = [0,1,2,3,4,5];
array.forEach(function(number) {
console.log(number * 2);
});
Creating a New Array with Modified Elements
const array = [0,1,2,3,4,5];
let doubledArray = [];
array.forEach(function(element) {
doubledArray.push(element * 2);
});
Using a Loop to Sum
const array = [0,1,2,3,4,5];
let sum = 0;
array.forEach(function(element) {
sum += element;
});
Using a Loop to Make a String
let thingsILike = "I like...";
const arrayOfThingsILike = ["bubble baths", "kittens", "good books", "clean code"];
arrayOfThingsILike.forEach(function(thing) {
thingsILike = thingsILike.concat(" " + thing + "!");
});
Using A Loop to Add Elements to the DOM
const arrayOfThingsILike = ["bubble baths", "kittens", "good books", "clean code"];
arrayOfThingsILike.forEach(function(thing) {
$("#likable-things").append(" " + thing + "!")
});
Top comments (6)
Two minor vocabulary nitpicks:
It's the other way around: Lists are a type of Collection. There's also collections that aren't lists, like sets or maps, but all lists are collections.
In that case, the first element would have the index
1. In JS, the index isn't the numerical position but the offset from the first element.Thanks for the info!
Hey Saoud, I hope you are excellent, I thank you for providing such valuable programming content, I would like to talk about programming with you, are you willing
Hey Emanuel! Sure thing! Just drop me a line and I will get in touch with you.
Would you like to speak on LinkedIn, did I send you a message?
Sure go ahead and message me on LinkedIn and nope you haven’t sent me a message as of yet.