JavaScript Array Manipulation Tutorial with Examples
The JavaScript Array class is a global object that is used in the construction of arrays; which are high-level, list-like objects.
Description
Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. Neither the length of a JavaScript array nor the types of its elements are fixed. Since an array’s length can change at any time, and data can be stored at non-contiguous locations in the array, JavaScript arrays are not guaranteed to be dense; this depends on how the programmer chooses to use them. In general, these are convenient characteristics; but if these features are not desirable for your particular use, you might consider using typed arrays.
What is an array in programming? The array is a data type consisting of a collection of elements (value or variable), and each element has an index. Simply, the array is a variable that more powerful. Why? because arrays can hold more than one value. The array can contain string, integer, boolean, and function in one variable.
see the following syntax:
var myArray = ['string', 2, false, myFunction];
or
var myArray = [];
myArray = ['string', 2, false, myFunction];
We can have an array in the array. It’s called the multidimensional array. Here’s the syntaxis:
var myArray = ['string', 2, false, myFunction, [1,2,3]];
Creating an Array
We have several ways to create an array in javascript. The same as an example before, we can directly give a value or variable into an array. Here’s the first way to create an array in javascript.
Example:
var myArray = ['a', 2, true];
we can use the console to see the result:
console.log(myArray);
here’s the full code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Javascript Array</title>
</head>
<body>
<script>
var myArray = ['a', 2, true];
console.log(myArray);
</script>
</body>
</html>
here’s the result:
But the console displays this as an object in javascript.
The number shown is as an index (index 0 - 2). The index is referring to the value that we have. The index always starts at 0 (zero).
If we want to the console only displaying one value, we can use the index to do it.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Javascript Array</title>
</head>
<body>
<script>
var myArray = ['a', 2, true];
console.log(myArray[3]);
</script>
</body>
</html>
result:
This is a second way to create an array.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Javascript Array</title>
</head>
<body>
<script>
var myArray = [];
myArray[0] = ['index 0'];
myArray[1] = ['index 1'];
myArray[2] = ['index 2'];
console.log(myArray);
</script>
</body>
</html>
result:
Important to note, if we want to use this way, the index must be sequential. If it not sequent, the value will become undefined or empty.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Javascript Array</title>
</head>
<body>
<script>
var myArray = [];
myArray[0] = ['index 0'];
myArray[1] = ['index 1'];
myArray[2] = ['index 2'];
myArray[5] = ['index 5'];
console.log(myArray);
</script>
</body>
</html>
result:
Removing Array Items
If we want to remove an item of the array in javascript, the index is needed.
Note: This is not the right way. I’ll show you in the next example.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Javascript Array</title>
</head>
<body>
<script>
var myArray = ['a', 2, true];
myArray[1] = undefined;
console.log(myArray);
</script>
</body>
</html>
result:
Displaying Array
We’ll try to display the array in the right way. First, we’ll use javascript looping and display the element of the array by one.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Javascript Array</title>
</head>
<body>
<script>
var myArray = ['index 0', 'index 1', 'index 2'];
for (var i = 0; i < myArray.length; i++) {
console.log(myArray[i]);
}
</script>
</body>
</html>
Now the array is shown in the right way. Not shown as an object like the example before:
The Method in Javascript Array
You can use a method in the array. The javascript has some methods that can be used in an array.
First, we’ll try to use the “join” method to join all the elements of an array, to make it as a string.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Javascript Array</title>
</head>
<body>
<script>
var arr = ['Tea', 'Coffee', 'Milk'];
console.log(arr.join());
</script>
</body>
</html>
result:
You can change the separators of the string if you don’t want to use the commas (“,”):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Javascript Array</title>
</head>
<body>
<script>
var arr = ['Tea', 'Coffee', 'Milk'];
console.log(arr.join(' - '));
</script>
</body>
</html>
result:
That’s the example of the “join” method. Now, let’s try the “push” & “pop” method. The “push” method is used to append an element that will be placed in the last of an array. To use it, we can use the simple way.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Javascript Array</title>
</head>
<body>
<script>
var arr = ['Tea', 'Coffee', 'Milk'];
arr.push('Boba');
console.log(arr.join(' - '));
</script>
</body>
</html>
result:
With the “push” method, you can append some elements like this:
arr.push('Boba', 'Yogurt', 'Lemon');
The “pop” method is the opposite of the “push” method. The “pop” will remove the last element from an array.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Javascript Array</title>
</head>
<body>
<script>
var arr = ['Tea', 'Coffee', 'Milk'];
arr.pop();
console.log(arr.join(' - '));
</script>
</body>
</html>
result:
Now, we’ll try to use the “shift” and “unshift” method.
The “shift” and “unshift” method is the same as “pop” and “push” but it works with the first element in an array.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Javascript Array</title>
</head>
<body>
<script>
var arr = ['Tea', 'Coffee', 'Milk'];
arr.unshift('Lemon');
console.log(arr.join(' - '));
</script>
</body>
</html>
result:
The “shift” will remove the first element.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Javascript Array</title>
</head>
<body>
<script>
var arr = ['Tea', 'Coffee', 'Milk'];
arr.shift();
console.log(arr.join(' - '));
</script>
</body>
</html>
result:
The “shift” and “pop” completely eliminate the array element. It’s not like the example before that using the “undefined” to removing an element.
That’s the basic usage example of the array in javascript. You can find the full source code of these examples on our GitHub.
Thanks!
#javascript #web-development
