Career Pivot into Development Journal, Day 3: Arrays & Array Methods

Key Points:

• Damn, array methods are pretty powerful!
• An array is a special type of variable, an ordered collection of items (strings, numbers, or other things)
• Array indexes start with 0. [0] is the first element. [1] is the second element.
• Arrays allow us to deal with a large quantity of strings and numbers.
• Array methods allow us to manipulate arrays.

Arrays

This is how we declare an array:

const cars = ['Saab', 'Volvo', 'BMW'];

Arrays are also unaffected by spaces and line breaks:

const cars = [
  'Saab',
  'Volvo',
  'BMW'
];

Change an Array Element

We can target a specific element by its index and change it:

const cars = ['Saab','Volvo', 'BMW'];
cars [0] = 'Toyota';

Accessing the First Array Element

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits[0];

Accessing the Last Array Element

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits[fruits.length - 1];

fruits.length gives us the number of elements in the array. In the case, there are 4 elements. However, the 4th index in this array is non-existent since the indexes are from 0-3. Therefore, we must subtract 1 to access the last array element.

Adding Array Elements

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.push('Kiwi');

Difference Between Arrays and Objects

Arrays are a type of object. However, the difference is that array items are indexed with numbers, whereas objects are indexed with names.

---

Array Methods

toString()

Converts an array to a string of (comma separated) array values:

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.toString() // Banana,Orange,Apple,Mango;

join()

Behaves like toString() but we can specify a separator:

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.join(', '); // 'Banana', 'Orange', 'Apple', 'Mango'

pop()

Popping in Javascript means taking out elements. Think of it like "popping" out elements from an array. This method "pops" out the last element:

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.pop(); // 'Mango'
fruits; // ['Banana', 'Orange', 'Apple']

push()

Pushing in Javascript means adding element. Think of it like "pushing" in a new element into an existing array. This method pushes a new element to the end of the array:

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.push('Kiwi'); // 5
fruits; // ['Banana', 'Orange', 'Apple', 'Mango', 'Kiwi']

shift()

Similar to popping, but works on the first element instead of the last:

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.shift(); // 'Banana'
fruits; // ['Orange', 'Apple', 'Mango']

unshift()

Similar to pushing, but adds elements to the beginning instead of end of array:

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.unshift('Lemon'); // 5
fruits; // ['Lemon', 'Banana', 'Orange', 'Apple', 'Mango']

concat()

Allows us to combine (concatenate) multiple arrays together:

const arr1 = ['Apple', 'Microsoft', 'Amazon'];
const arr2 = ['Netflix', 'Google', 'Facebook'];

arr1.concat(arr2); // ['Apple', 'Microsoft', 'Amazon', 'Netflix', 'Google', 'Facebook']

We can combine as many arrays as we want:

const arr1 = ['Apple', 'Microsoft', 'Amazon'];
const arr2 = ['Netflix', 'Google', 'Facebook'];
const arr3 = ['Tesla', 'Samsung', 'Huawei'];

arr1.concat(arr2, arr3); // ['Apple', 'Microsoft', 'Amazon', 'Netflix', 'Google', 'Facebook', 'Tesla', 'Samsung', 'Huawei']

splice()