As we know, an array is a variable that is used to store different data in JavaScript.
An array has some methods that help us to work with its data, for instance adding, deleting, sorting… or any operations that support our requirements.
In this weekly blog post, we will together, learn how to use 7 array methods commonly used in Javascript.
Let’s start!!!
- every() method
This method checks the array with a function passed as a parameter.
It will return true if every element in the array matches test and otherwise (only one element of the array does not match) it will return false
Syntax:
array.every(function(currentValue,index,array),thisValue)
Parameter:
| function | a function to be run for each element in the array (REQUIRED) |
| currentValue | the value of the current element (REQUIRED) |
| index | the index of the current element (OPTIONAL) |
| array | the array of the current element (OPTIONAL) |
| thisValue | a value passed to the function as this value, default undefined (OPTIONAL) |
For example:
EXPECTED RESULT: FALSE
- concat() method
This method concatenates two or more arrays, it will return a new array, containing the joined arrays, it does not change the existing arrays.
Syntax:
array1.concat(array2, array3, …, arrayN)
Parameter:
| array1 | the array to be concatenated (REQUIRED) |
For example:
EXPECTED RESULT: [‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘9’, ’10’]
Explanation: The function returns a new array that contains all the elements of 3 joined arrays.
- filter() method
This method creates a new array filled with the elements that passed a test provided by the function. It does not execute the function for empty elements. It does not change the original array.
Syntax:
array.filter(function(currentValue,index,arr),thisValue)
Parameter:
| function | a function to run for each array element (REQUIRED) |
| currentValue | the value of the current element (REQUIRED) |
| index | the index of the current element (REQUIRED) |
| arr | the array of the current element (REQUIRED) |
| thisValue | a value passed to the function as this value, default undefined (OPTIONAL) |
For example:
EXPECTED RESULT:
[
{name: ‘Silver’, isMarried: ‘Yes’},
{name: ‘Kevin’, isMarried: ‘Yes’}
]
- forEach() method
This method calls a function for each element in an array, it is also not executed for an empty array
Syntax:
array.forEach(function(currentValue,index,arr),thisValue)
Parameter:
| function | a function to run for each array element (REQUIRED) |
| currentValue | the value of the current element (REQUIRED) |
| index | the index of the current element (REQUIRED) |
| arr | the array of the current element (REQUIRED) |
| thisValue | a value passed to the function as this value, default undefined (OPTIONAL) |
For example:
EXPECTED RESULT: 17
- map() method
This method creates a new array from calling a function for every array element. It calls a function once for each element in an array. It does not execute the function for empty elements. It does not change the original array.
Syntax:
array.map(function(currentValue,index,arr),thisValue)
Parameter:
| function | a function to run for each array element (REQUIRED) |
| currentValue | the value of the current element (REQUIRED) |
| index | the index of the current element (REQUIRED) |
| arr | the array of the current element (REQUIRED) |
| thisValue | a value passed to the function as this value, default undefined (OPTIONAL) |
For example:
EXPECTED RESULT: [‘2300000’, ‘4600000’, ‘6900000’]
- slice() method
This method returns selected elements in an array, as a new array. It selects from a given start, up to a (not inclusive) given end. It does not change the original array.
Syntax:
array.slice(start, end)
Parameter:
| start | start position. Default is 0. Negative numbers select from the end of the array. (OPTIONAL) |
| end | End position. Default is the last element. Negative number select from the end of the array. (OPTIONAL) |
For example:
EXPECTED RESULT:
[‘Silver’, ‘Happy’]
[‘Silver’, ‘Happy’, ‘Xan’, ‘Kevin’]
[]
- splice() method
This method adds and/or removes array elements. It overrides the original array.
Syntax:
array.splice(index, howMany, item1, … , itemX)
Parameter:
| index | The position to add and/or remove items. Negative value defines the position from the end of the array |
| howMany | Number of items to be removed |
| item1, … , itemX | New element(s) to be added |
For example:
EXPECTED RESULT: [‘Silver’, ‘Happy’, ‘Aiya’, ‘Dung’, ‘Xan’, ‘Kevin’]
This week, we have learned about 7 array methods that usually are used when coding Javascript or TypeScript. I hope that, with these tutorials and my introduction, you will be able to handle all of these and apply them into reality.
See you soon in the next weekly tech blog post.
Previous post