Introduction to Arrays in JavaScript
In JavaScript, objects serve as an effective method for storing keyed collections of values. However, there are instances when an ordered collection is essential, particularly when the arrangement of elements—first, second, and third—must be preserved. For instance, if we require a list of items such as user information or product details, relying solely on an object would be inadequate, as it lacks the capability to accurately maintain the order of its elements.
To achieve this objective, JavaScript provides a specific data structure known as an Array, which is ideally designed for storing ordered lists. An array enables you to gather multiple values within a single variable, while preserving an ordered sequence of elements that share the same type.
In JavaScript, arrays are viewed as a collection of data that are particularly useful for handling a set of variables that share the same data type. They are instrumental in organizing a series of attributes. An array can be thought of as a single variable that stores multiple elements, making it advantageous for keeping a list of attributes that can be accessed via this one variable.
In contrast to many other programming languages that treat arrays merely as references to variables, JavaScript arrays stand out due to their capability to hold multiple elements within a single variable. The array object in JavaScript functions as a global object designed for the purpose of constructing arrays, which can be characterized as "high-level, list-like objects."
How do arrays work in JavaScript?
In JavaScript, an array serves as a method to hold several elements within a single variable in memory. The indexing of arrays begins at 0. This zero-based indexing indicates that the index for the initial element is 0. Consequently, there is always a positional shift of one: the first element is designated index 0, the second element is given index 1, and the pattern continues in this manner.
How might arrays be declared in JavaScript?
Array objects allow for the storage of multiple values within a single variable, commonly referred to as the array object. This structure is a fixed-size collection of elements that share the same data type. While arrays serve the purpose of holding a group of elements, it can often be more beneficial and practical to view them as a collection of variables of the same type. In JavaScript, array literal notation simplifies the creation of arrays. Specifically, this notation is composed of two square brackets that encapsulate a list of elements separated by commas. The types of elements that can be included in an array are quite diverse, encompassing numbers, strings, booleans, null, undefined, objects, functions, regular expressions, and various other structures.
In JavaScript, an array can be instantiated using the following syntax:
var country = [ "India", "England", "Srilanka" ];
In the subsequent illustration, the array is set up with the names of countries: "India," "England," and "Sri Lanka." The respective indices for these entries are 0 for "India," 1 for "England," and 2 for "Sri Lanka." Additional elements can be incorporated into the country array, as demonstrated below:
country[3] = "New Zealand" ;
country[4] = "Australia"
var country = new Array ( "India", "England", "Srilanka" );
var country = new Array ();
country[0] = "India" ;
country[1] = "England" ;
country[2] = "Srilanka" ;
<html>
<head>
<title>Example for creation of Array in JavaScript</title>
</head>
<body>
<p id= "myarray" ></p>
<script>
var my_array=[ "England", "Australia", "India" ];
document.getElementById ( "myarray" ).innerHTML = my_array;
</script>
</body>
</html>
Output
JavaScript Array Functions
This document provides a comprehensive examination of JavaScript Array functions, highlighting the essential array methods and properties found in JavaScript, along with illustrative examples.
concat method
The concat function enables the creation of a fresh array by merging two or more existing arrays.
Syntax
array.concat ( val1, val2, ..., valN );
<html>
<head>
<title>Example for JavaScript Array Method</title>
</head>
<body>
<script>
var chars = [ "A", "B", "C" ];
var num = [0 , 1 , 2];
var concat_res = chars.concat ( num );
document.write( "Result : " + concat_res );
</script>
</body>
</html>
Output
every
The every function assesses if the designated elements within an array comply with the stipulations defined by the condition. It yields true when the condition is fulfilled; conversely, it returns false if the condition is not met.
Syntax
Array. every( callback, thisArg )
The callback acts as a standard for assessing the function, whereas thisArg is an optional parameter used while executing the callback.
<html>
<head>
<title>Example for JavaScript Array Method</title>
</head>
<body>
<script>
var value=[100, 200, 300, 400, 500];
function check_num( values )
{
return values>100;
}
document.writeln( value.every( check_num ));
</script>
</body>
</html>
Output
fill
The fill function assigns specific static values to the elements of a given array, modifying the initial values contained within that array.
Syntax
array.fill ( value )
<html>
<head>
<title>Example for JavaScript Array Method</title>
</head>
<body>
<script>
var array=[ "Canada", "India", "USA" ];
var array_result=array.fill( "Example" );
document.writeln( array );
</script>
</body>
</html>
Output
filter
The filter function operates on an array of elements, choosing only those that fulfill the defined conditions.
Syntax
array.filter( callback, thisArg )
<html>
<head>
<title>Example for JavaScript Array Method</title>
</head>
<body>
<script>
var num=[134, 670, 765, 123];
function check_nums( value )
{
return value>160;
}document.writeln( num.filter( check_nums ));
</script>
</body>
</html>
Output
forEach
The forEach function is designed to carry out a defined operation on each element present in an array.
Syntax
array.forEach( callback , thisArg )
<html>
<head>
<title>Example for JavaScript Array Method</title>
</head>
<body>
<script>
var array = ['India', 'Andaman', 'Australia'];
array.forEach( function ( fetch ) {
document.writeln( fetch );
});
</script>
</body>
</html>
Output
includes
The includes function is utilized to check if a designated element is found within an array. If the element is indeed present in the array, it yields true; if not, it returns false.
Syntax
array.includes( element) //In this context, "element" refers to a value that is intended to be located within the array.
<html>
<head>
<title>Example for JavaScript Array Method</title>
</head>
<body>
<script>
var array=[ "Google", "Browser", "Yahoo", "Bing"]
var arr_output=array.includes( "Yahoo" );
document.writeln ( arr_output );
</script>
</body>
</html>
Output
join
The join function combines the components of an array into one cohesive string, thereby producing a new string.
Syntax
array.join( separator )
<html>
<head>
<title>Example for JavaScript Array Method</title>
</head>
<body>
<script>
var array=['CSE', 'ECE', 'MECH']
var arr_output=array.join ( '-' )
document.write( arr_output );
</script>
</body>
</html>
Output
pop
The pop function is utilized to eliminate and retrieve the last element from the designated array.
Syntax
array.pop( operator )
<html>
<head>
<title>Example for JavaScript Array Method</title>
</head>
<body>
<script>
var array=[ "Java", "HTML", "CSS" ];
document.writeln( "Main array elements: "+array+"<br>" );
document.writeln( "Deleted element from array: "+array.pop ()+"<br>" );
document.writeln( "Final elements in array: "+ array );
</script>
</body>
</html>
Output
push
The push function is utilized to append an item to the end of an array.
Syntax
array.push ()
<html>
<head>
<title>Example for JavaScript Array Method</title>
</head>
<body>
<script>
var array=[ "JavaScript", "Java", "HTML" ];
array.push( "CSS" );
document.writeln( array );
</script>
</body>
</html>
Output
reverse
The reverse function is designed to change the sequence of the elements in a given array. As a result, the last element will be positioned first, and conversely, the first element will move to the last position.
Syntax
array.reverse()
<html>
<head>
<title>Example for JavaScript Array Method</title>
</head>
<body>
<script>
var array=[ "Development", "Support", "Technical" ];
var reverse_val=array.reverse ();
document.writeln( reverse_val );
</script>
</body>
</html>
Output
shift
The shift method is used to obtain the first element of an array.
Syntax
array.shift()
<html>
<head>
<title>Example for JavaScript Array Method</title>
</head>
<body>
<script>
var array=[ "Java", "Development", "Technical", "HTML", "CSS" ]
var arr_output=array.shift ();
document.writeln( arr_output );
</script>
</body>
</html>
Output
slice
The slice function extracts a portion of elements from the designated array while leaving the original array unchanged.
Syntax
array.slice( start, end )
<html>
<head>
<title>Example for JavaScript Array Method</title>
</head>
<body>
<script>
var array=[ "Datastructures", "Java", "Development", "Ruby", "HTML" ];
var array_result=array.slice ( 1, 3 );
document.writeln( array_result );
</script>
</body>
</html>
Output
sort
The sort method organizes the elements within the array in a non-decreasing sequence.
Syntax
array.sort()
<html>
<head>
<title>Example for JavaScript Array Method</title>
</head>
<body>
<script>
var array=[ "Kohli", "Hardik", "Dhoni", "Sachin", "Dhawan" ];
var array_result=array.sort ();
document.writeln( array_result );
</script>
</body>
</html>
Output
unshift
The unshift method is employed to add new elements to the beginning of an array.
Syntax
array.unshift( "element" )
<html>
<head>
<title>Example for JavaScript Array Method</title>
</head>
<body>
<script>
var array=[ "Dhawan", "Dhoni", "Kohli", "Sachin" ];
var array_result=array.unshift( "Sachin" );
document.writeln( array );
</script>
</body>
</html>
Output
indexOf
The indexOf method is employed to identify the position of a particular item within an array.
Syntax
array.indexOf( "element" )
<html>
<head>
<title>Example for JavaScript Array Method</title>
</head>
<body>
<script>
var array=[ "Rohit", "Sachin", "Kohli", "Dhawan" ];
var arr_output=array.indexOf( "Rohit" );
document.writeln( arr_output );
</script>
</body>
</html>
Output
Conclusion
To summarize, an array is a distinct kind of object that is specifically crafted for the organization and handling of data elements. This object arranges a set of elements, which proves to be especially beneficial for storing large volumes of data that share a common type. The different attributes and functions linked with array objects enable developers to manipulate them with ease. As a universal object, the JavaScript Array plays a crucial role in the development of advanced arrays.