What is an array in programming? The array is a data type consisting of a collection of elements (values or variables), and each element has an index. The array is a variable that is more powerful. Why? because arrays can hold more than one value. The array can contain a string, an integer, a boolean, and a 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 syntax:
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 a variable to 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 an index (index 0 - 2), which refers to our value. The index always starts at 0 (zero).
If we want the console only to display 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 is 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 from 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 elements of the array one 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 on the array. JavaScript has some methods that can be used on an array.
First, we'll try to use the "join" method to join all the elements of an array to make it 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 an 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 at 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" methods.
The "shift" and "unshift" methods are the same as "pop" and "push", but they work 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" eliminate the array element. It's not like the example before that using the "undefined" to remove 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.
That's just the basics. If you need more deep learning about HTML, CSS, JavaScript, or related, you can take the following cheap course:
- HTML & HTML5 For Beginners (A Practical Guide)
- Web - HTML
- Learn HTML, CSS, JAVASCRIPT
- JavaScript:
- Learn JavaScript Fundamentals
- Learning JavaScript Shell Scripting
Thanks!