JavaScript #17 ~ Array

When we have a mass amount of data, we not only need to know how to use the data, but also where to store them. This is where data structures come into play. At least in JavaScript, the two most important data structures are Arrays and Objects. Before thinking about objects, it is easier to first start understanding arrays. Simply put, an array is like a huge container where we can store vast amount of data. After storing some data, we can access the container anytime for re-use.

When we create arrays in code, we use brackets([ ]) to store various data types. We could also use the new Array keywords to create an array. In this case, we can omit the bracket functionality.

// bracket method
const friends = ["Michael", "Steven", "Peter"];

// 'new Array' method
const friends = new Array("Michael", "Steven", "Peter");

After storing the values inside an array, we also need to know how to access them. How would we do that? Just like functions, we take the name of an array and simply call them. In this case, however, if we want to just select one data from an array, we also need to know which data we are using. To make this happen, we need to write the number in which the data is stored in. In arrays, the first data starts from '0' and counts onward.

console.log(friends); // shows the whole array
console.log(friends[0]); // outputs the value at position '0'
console.log(friends[2]); // outputs the value at position '2'
console.log(friends.length); // shows the number of values stored in an array
console.log(friends[friends.length - 1]); // outputs the last value stored in an array

To change an existing data in an array, we choose the position in which we want to change the data and write out the new data.

friends[2] = "Jay"; // write new data
console.log(friends); // data is changed to "Jay"

Besides data types, we could also store variables, functions, objects and even arrays themselves inside arrays.

// array can hold values with different types
const firstName = "John";
const person = [firstName, "Smith", 2037 - 1991, "teacher", friends];
console.log(person);

Example

// Using arrays to calculate age
const calcAge = function (birthYear) {
  return 2037 - birthYear;
};
const years = [1990, 1967, 2002, 2010, 2018];
// --
const age1 = calcAge(years[0]);
const age2 = calcAge(years[1]);
const age3 = calcAge(years[years.length - 1]);
console.log(age1, age2, age3); // 47, 70, 19
// --
const ages = [
  calcAge(years[0]),
  calcAge(years[1]),
  calcAge(years[years.length - 1]),
];
console.log(ages); // [47, 70, 90]
// function calls can also be stored in an array

Basic Array Methods

There are various methods that we can use within arrays to add or remove values including push(), pop(), shift(), and unshift(). Additionally, we can also find the length of an array and whether a certain value exists within an array.

const friends = ['Michael', 'Steven', 'Peter'];

// push (add elements at the 'end')
const newLength = friends.push('Jay'); // returns the length of all the elements in the array
console.log(friends); // ['Michael', 'Steven', 'Peter', 'Jay']
console.log(newLength); // 4

// unshift (add elements at the 'beginning')
friends.unshift('John');
console.log(friends); // ['John', 'Michael', 'Steven', 'Peter', 'Jay']

// pop (remove elements at the 'end')
friends.pop(); // returns the element that is removed
const popped = friends.pop();
console.log(friends); // ['John', 'Michael', 'Steven', 'Peter']
console.log(popped); // ['John', 'Michael', 'Steven']

// shift (remove elements at the 'beginning')
friends.shift();
console.log(friends); // ['Michael', 'Steven']

// indexOf (finding the index of a certain element)
console.log(friends.indexOf('Steven')); // 1
console.log(friends.indexOf('Bob')); // if the element does not exist, it returns -1

// includes (ES6 method: returns either 'true' or 'false' whether the element exists)
console.log(friends.includes('Steven')); // true
console.log(friends.includes('Bob')); // false