A must learn JavaScript array methods
introduction to arrays
The proper organisation and storing of data is called a data structure.The use of data structure is very common in the field of software engineering.The use of data structures is applicable in almost all the programs and soft wares from eCommerce applications to puzzle gamesThe data is stored in a programmatic way hence can be used efficientlyData structures allows for efficiency in:
- searching data
- faster processing speed
- multitasking and requesting
Since the storing of data is made in an organised way,we can have various operations applied to the data structure such as adding,subtracting,etcData Structure comes hand in hand with algorithms which is a step by step procedure for solving a problem,The various algorithms applied on a data structure may include
- searching – searches for an item in a data structure
- inserting – inserts an item in a data structure
- deleting – deletes an item in a data structure
- sorting – sorts the items in the data structure
- updating – updates the items in the data structure
Hence its easier to solve computer problems.Data structures and algorithms is a very essential area of concern to computer scientists and software engineers.Since they aid in approaching a problem in a number of ways and solving the problem in an easier and faster way.Before we begin lets tackle one problem from code wars on the application of data structures and algorithm in order to have an in depth understanding
Problem
If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23.Finish the solution so that it returns the sum of all the multiples of 3 or 5 below the number passed in. Additionally, if the number is negative, return 0 (for languages that do have them).Note: If the number is a multiple of both 3 and 5, only count it once.Now here is our data structure problem that we need to tackle.
Program break down/data structure
- Our program here sorts the numbers and then returns those that are multiples of 3 or 5
- After getting those that are divisors of 3 or 5 we find their sum
solution/algorithm
- we first declare a function with the number as the parameter
- then we define a loop that is going to start form zero and end at the parameter given
- then we use an if statement to check whether the loop of number is divisible by 3 or 5
- if the condition is satisfied then we proceed to add the numbers generated
program
function solution(number){
let x =[]
for(let i=3; i<number; i++){
if(i % 3 == 0 || i % 5 ==0 ){
x.push(i)
}
}
return x.reduce((a,b)=> a+b,0)
}
From the above we see how data structure and algorithm is used to solve the programming problems.
Arrays
An array is one type of a data structure.This means that the data in the array can be:
- organised
- retrieved
- processed
- stored
Array
First lets get to know what an array is.An array is a variable that holds different values at different indexes holding items of the same data typeThe values may include numbers,strings,boolean values.We can access these arrays easily using their indexes.Lets have an array X holding different values containing numbers and strings.
Let x = ['house',34,'jesicah',true,34,67,8]
In our example above our array contains the different numbers,a boolean and strings and the name of the array is XThe values in the arrays contain different indexes i.e from 0 going onwards.The first index which is 0 is the first element from the left hand side that is ‘house’.The array X here stores and holds the different values.Now lets get back to our topic of discussion today.Since an array is a type of data structure , we can perform different operation in it such as addition,subtraction,multiplication etc.What are JavaScript array methods?First lets get to know what a method is.A method is an inbuilt array function applied to an array to easen our operation on the array.The work load here may include:
- getting the sum of an array
- removing an item from an array
- finding an item in an array
- sorting the array
- comparing the arrays
- joining two different arrays
So instead of writing the function from scratch we will use an array method to solve our problem.For example if we wanted to get the sum the numbers in an array we would create our function and loop in through the array in order to get the sum.But using an array method gives us an easier root to use to get our sum.
METHODS
The common methods include:Ill show you how to use these methods and their practical examples in the practical real world situationFirst lets create an array of numbers
let array = [1, 12, 3, 4, 5, 66, 1000, 56, 234, 24]
1 reverse() – returns the inverse of the array, the last index comes to the first and vice versa
let array = [1, 12, 3, 4, 5, 66, 1000, 56, 234, 24]
console.log(array.reverse()) // [
24, 234, 56, 1000,
66, 5, 4, 3,
12, 1
]
2 slice() – returns the selected items in an array as the new object
let array = [1, 12, 3, 4, 5, 66, 1000, 56, 234, 24]
//console.log(array.slice(start, end))
console.log(array.slice(2, 4)) // [ 3, 4, 5, 66 ]
3 push() – used to add an element into an array
let array = [1, 12, 3, 4, 5, 66, 1000, 56, 234, 24]
array.push('ian')
console.log(array) // [
1, 12, 3,
4, 5, 66,
1000, 56, 234,
24, 'ian'
]
4 concat() – used to join two or more arrays
let array = [1, 12, 3, 4, 5, 66, 1000, 56, 234, 24]
let array1 = [11, 112, 311, 41, 53, 636, 10, 5, 2]
console.log(array.concat(array1)) // [
1, 12, 3, 4, 5,
66, 1000, 56, 234, 24,
11, 112, 311, 41, 53,
636, 10, 5, 2
]
5 includes() – determines whether an array contains a specified element return type is a Boolean
let array = [1, 12, 3, 4, 5, 66, 1000, 56, 234, 24]
console.log(array.includes(5)) // true since 5 is an element of the array
6 map() – creates a new array with the result of calling the function provided
let array = [1, 12, 3, 4, 5, 66, 1000, 56, 234, 24]
console.log(array.map((array) => array * 10)) // [
10, 120, 30,
40, 50, 660,
10000, 560, 2340,
240
]
7 sort() – rearanges the array in the correct order
let array = [1, 12, 3, 4, 5, 66, 1000, 56, 234, 24]
console.log(array.sort((a, b) => a - b)) // sorts in an ascending order [
1, 3, 4, 5,
12, 24, 56, 66,
234, 1000
]
8 toString() – converts the array values to strings
let array = [1, 12, 3, 4, 5, 66, 1000, 56, 234, 24]
console.log(array.toString()) // 1,12,3,4,5,66,1000,56,234,24
9 forEach() – used to loops through each element in an array but uses a function
let array = [1, 12, 3, 4, 5, 66, 1000, 56, 234, 24]
array.forEach((array) => console.log(array)) /* 1
12
3
4
5
66
1000
56
234
24
*/
10 findIndex() – returns the index of an array satisfying the condition or -1 if not found
let array = [1, 12, 3, 4, 5, 66, 1000, 56, 234, 24]
console.log(array.findIndex(array => array === 4)) // 3
11 find() – returns the element in an array satisfying the condition or undefined if not found
let array = [1, 12, 3, 4, 5, 66, 1000, 56, 234, 24]
console.log(array.find(array => array === 4)) // 4
12 filter() – creates a new element with all arrays that pass the test
let array = [1, 12, 3, 4, 5, 66, 1000, 56, 234, 24]
console.log(array.filter(array => array % 2 !== 0)) // [ 1, 3, 5 ]
13 fill() – fills all array values with a static value defined
let array = [1, 12, 3, 4, 5, 66, 1000, 56, 234, 24]
console.log(array.fill(11)) // [
11, 11, 11, 11, 11,
11, 11, 11, 11, 11
]
14 every() – returns true if the condition is correct
let array = [1, 12, 3, 4, 5, 66, 1000, 56, 234, 24]
console.log(array.every(array => array == 3)) //false
15 join() – returns the elements separated by a specific separator
let array = [1, 12, 3, 4, 5, 66, 1000, 56, 234, 24]
console.log(array.join(' ')) // returns 1 12 3 4 5 66 1000 56 234 24
16 length – returns the length of an array
let array = [1, 12, 3, 4, 5, 66, 1000, 56, 234, 24]
console.log(array.length) // returns 10
From this article we see how the searching, sorting,inserting,deleting and updating of data in the array is possible since there is an implementation of a data structure : arraythe data in the array has been organised well hence the application of the above algorithms have been made easier, more efficient and more practicalThe combination of these methods is possible in one array in order to get the desired out put in a simpler way.You can keep on practicing more and more on data structures and algorithms to gauge your mind more
That’s all on A must learn JavaScript array methods
Learn more here