JAVASCRIPT ARRAY
What is Array? An array is a collection of elements or items. Array's store data as elements and retrieve them when needed. Think of an array as a collection of variables of the same type or an ordered collection of data. You can store different elements like strings, numbers, booleans in an array. An example of an ordered collection of things you may not know is an array; songs in your music playlist, the comment section of a social media page. We'll go over some examples that'll enlighten beginners on arrays in JavaScript.
How do we create an array in JavaScript? To create an array in JavaScript, we use square brackets[]. All elements in the array are separated by a comma(,).
Example: const ballsColor = [“blue”, “green”, “red”, “pink”];
The position an element takes in an array is called INDEX. We use the index to refer to a specific element. In JavaScript, the array index starts with 0, and it increases by one with each element. In the above array, blue is at the index of 0, green is 1, red is 2 e.t.c
How do we check the length of an array?
You can check the length of an array using .length. Note, the array's length starts from 1 as opposed to the index of an array that starts from 0.
const ballsColor = [“blue”, “green”, “red”, “pink”]; ballsColor.length // the result is 4
We can use the index to access a value out : ballsColor[2] // the result is “red”
We can also use the index to change and update elements in the array: You can change from a string to boolean or number e.t.c
const ballsColor = [“blue”, “green”, “red”, “pink”]; ballsColor[0] = true The above array becomes: [true, “green”, “red”, “pink”]
We can use the index to modify elements in array: const ballsColor = [“blue”, “green”, “red”, “pink”]; In this array, we have four colors, we can add more colors to this array. ballsColor[4] = “purple” The array then becomes: const ballsColor = [“blue”, “green”, “red”, “pink”, “purple”]; A better way to add elements in the array without having to figure out the the last index before adding an element is to use array built-in methods.
ARRAY METHODS: Push/Pop, Shift/Unshift
Push and Pop: Allow us to add and remove elements from the end of an array. If we want to maintain the order of an array, we add or remove it from the end.
Push: const ballsColor = [“blue”, “green”, “red”, “pink”]; We have an array with 4 colors, if we want to add a new color to the array, we use .push ballsColor.push(“purple”) const ballsColor = [“blue”, “green”, “red”, “pink”, “purple”]; // Purple has been added/updated to the array Also Note, that you can push more than one element at a time.
Pop: Pop allows us to remove an element or item from the end of an array. You const ballsColor = [“blue”, “green”, “red”, “pink”, “purple”]; ballsColor.pop The result becomes [“blue”, “green”, “red”, “pink”] Pop does not require any argument, unlike push, where we have to pass a value in it.
Shift and Unshift: These pair operate at the beginning of an array, they add and remove elements from the beginning of an array.
Shift: Shift removes from the beginning of an array. const ballsColor = [“blue”, “green”, “red”, “pink”, “purple”]; ballsColor.shift() const ballsColor = [“green”, “red”, “pink”, “purple”]; // “blue” has been removed from the begining of the array.
Unshift: Unshift adds elements to the beginning of an array. const ballsColor = [ “green”, “red”, “pink”, “purple”]; ballsColor.unshift(“blue”) const ballsColor = [“blue”, “green”, “red”, “pink”, “purple”]; // “blue” has been added to the begining of the array.
Concat Array This method merges two or more arrays, it does not change the existing arrays but instead returns a new array.
Example: let male = [“James”, “Brain”]; let female = [“Sandra”, “Christine”]; male.concat(female); [“James”, “Brain”,“Sandra”, “Christine” ]; // This is the new array You can save it in a variable. let jointPersons = male.concat(female); The male and female array arent modified, they remain the same.
Slice and Splice
Slice: is a way of getting a portion or a copy of an array. const ballsColor = [“blue”, “green”, “red”, “pink”, “purple”]; You can provide a start and stop point. newArray=ballsColor.slice(2) [ “red”, “pink”, “purple”]; // This will start from the index of 2 to the end of the array.
newArray=ballsColor.slice(1,3) [“green”, “red”]; // This will start from the index of 1 and stop at the index of 3.
Splice: Splice changes the content of an array. It removes or replaces existing elements or adds new elements in its place. Note: splice doesn't duplicate the content of the array, changes made are modified on the original array. The basic syntax for a splice is: splice(start) splice(start, deleteCount) splice(start, deleteCount, item1)
const months = ['Jan', 'March', 'April', 'June']; months.splice(1, 0, 'Feb'); // inserts at index 1 console.log(months); // expected output: Array [“Jan”, “Feb”, “March”, “April”, “June”]
months.splice(4, 1, 'May'); // replaces 1 element at index 4 console.log(months); // expected output: Array [“Jan”, “Feb”, “March”, “April”, “May”]
These are just a few core things we can do in an array. For more information on other methods in a JavaScript array, you can check out the docs. There are lots of information with examples that'll be helpful to your learning process, visit the link below for more information. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map