Design Development JavaScript

JavaScript 101-#10 – Arrays Pt2

In the first part we practiced creating arrays and took a look at some of the methods you can use. The last one we practiced was splice() method. Today we will continue exploring the rest of methods available for arrays to finish this topic so we can close it and move forward to objects. Let’s start!

slice()

First method we will start with is slice(). This method is used to slice an array by extracting piece of it. It takes two parameters. First one is for starting index – position of the first item you want to have in extracted piece. Second parameter says at which index the method will stop. Pay attention when using this method because the item on index used as second parameter (ending position) is not included in result array. When you omit the second index, whole array is returned. You can also use “length” method to define second parameter.

JavaScript:

var arr1 = [“Universe”, 0.618, “spore”, 3, true, “Kyoto”]; // creating array to work with
console.log(arr1.slice(1, 4)); // result - [0.618, “spore”, 3]
console.log(arr1.slice(3, 5)); // result – [3, true]
console.log(arr1.slice(3, 5)); // result – [3, true]
// without second index
console.log(arr1.slice(0)); // result - [“Universe”, 0.618, “spore”, 3, true, “Kyoto”]
// using .length method for second parameter
console.log(arr1.slice(4, arr1.length)); // result – [true, “Kyoto”]
console.log(arr1.slice(0, arr1.length)); // result - [“Universe”, 0.618, “spore”, 3, true, “Kyoto”]
// when second parameter is lower than first
console.log(arr1.slice(3,1)); // result - []
// using same index for both parameters
console.log(arr1.slice(1, 1)); // result - []
// create new array with slice
var arr2 = arr1.slice(0,1);// result - [“Universe”]

– note: Because we used the same index to both, starting and ending position, empty array is returned – item on the last position is not included.

concat()

concat() method is used for joining individual arrays. If you read post about strings, you are already familiar with this method. It uses the same syntax and also works in the same fashion like in case of strings. To use it, write name of the first array, followed by dot and concat(). Paramaters are names of another arrays you want to join the first array with. Arrays will be joined in the exact order you wrote declare it.

JavaScript:

var arr3 = [“Language”, “syntax”, “semantics”];
var arr4 = [60, 75, 1.3];
var arr5 = [“paragraph”, “sentence”, “word”, “letter”];
// creating new array – order: arr3, arr4, arr5
var arr6 = arr3.concat(arr4, arr5); // result - [“Language”, “syntax”, “semantics”, 60, 75, 1.3, “paragraph”, “sentence”, “word”, “letter”]
// creating new array – order: arr5, arr4, arr3
var arr6 = arr5.concat(arr4, arr3; // result - [“paragraph”, “sentence”, “word”, “letter”, 60, 75, 1.3, “Language”, “syntax”, “semantics”]
// creating new array – order: arr4, arr5, arr3
var arr6 = arr4.concat(arr5, arr3); // result - [60, 75, 1.3, “paragraph”, “sentence”, “word”, “letter”, “Language”, “syntax”, “semantics”]
// creating new array – order: arr4, arr3, arr5
var arr6 = arr4.concat(arr3, arr5); // result - [60, 75, 1.3, “Language”, “syntax”, “semantics”, “paragraph”, “sentence”, “word”, “letter”]

toString()

This method will convert any array into string. It takes no parameters, simply write name of array followed by dot and “toString()” method. Individual items will be divided by commas.

JavaScript:

var arr7 = [“France”, “Czech Republic”, “Australia”, “Denmark”, “Netherlands”];
console.log(arr7.toString()); // result - “France,Czech,Republic,Australia,Denmark, Netherlands”
var arr8 = [65323, 169, 179, 230, 48];
console.log(arr8.toString()); // result - “65323,169,179,230,48”

sort() and reverse()

The last methods to practice are sort() and reverse(). sort() will sort all the items inside array in alphabetical order. If you use sort on array containing different data types, the priority is following: numbers, strings, Boolean. However, it is not a good idea to sort() method on array containing only numbers because of its alphabetical sorting principle. For example, 1 is before 2 so 100 will be before 25. On the other hand, revers() will simply reverse order of items inside the array according to their original order. This function does not use alphabetical order or similar things in default.

JavaScript:

// sorting
var arr9 = [“stres”, “les”, “pes”, “ves”];
console.log(arr9.sort()); // result - [“les”, “pes”, “stres”, “ves”]
var arr10 = [180, 65, 983, 0, 560];
console.log(arr10.sort()); // result - [0, 180, 560, 65, 983]
// different data types
var arr11 = [“check”, 8, “club”, 9, false, 518];
console.log(arr11.sort()); // result - [518, 8, 9, “check”, “club”, false]
// reverse
console.log(arr9.reverse()); // result - [“ves”, “pes”, “les”, “stres”]
console.log(arr10.reverse()); // result - [560, 0, 983, 65, 180]
console.log(arr11.reverse()); // result - [518, false, 9, “club”, 8, “check”]

Advanced sorting

You can modify the default behavior of sort() if you want by using function as a parameter. By doing this, you can customize it for example to sort number array properly. The function will be only parameter for sort() method. It will take two parameters – x and y – and will return -1, 0 and 1. Thanks to these values it will create new order.

JavaScript:

var arr12 = [0,87, 40, 2, 18, 16, 95, 100];
// use function to sort numbers from lowest to highest
arr12 = arr12.sort(function(x, y) {return x – y});
console.log(arr12); // result - [0, 2, 16, 18, 40, 87, 95, 100]
// use function to sort numbers from highest to lowest
var arr12 = [0,87, 40, 2, 18, 16, 95, 100];
arr12 = arr12.sort(function(x, y) {return y – x});
console.log(arr12); // result - [100, 95, 87, 40, 18, 16, 2, 0]

Summary

Great job ladies and gentlemen! To close it … We practiced the rest of methods including slice(), concat(), toString(), sort(), reverse() and advanced ways to sort items inside arrays. I hope you enjoyed it, had fun and learned something new. By this, arrays are behind us and we can dive into objects. AD

If you liked this article, then please consider subscribing.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.