JavaScript Arrays

JavaScript Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations.

JavaScript Arrays

Neither the length of the JavaScript arrays 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.

JavaScript arrays are used to store multiple values in single variables at the same time.

Creating a String Array

  • Just use the array literal that is the easiest way to create an array.
  • JavaScript new keyword can be use in array name however there is no need to use this because it works same as the array literal do.
  • Spaces and line breaks are ignored in arrays. A declaration span multiple lines in code. As given below:
<!DOCTYPE html>
<html>
<body>

<script>
var lan = [
  "Python",
  "R",
  "C++"
];
document.write(lan);
</script>


</body>
</html>

Output:

Capture 38

Accessing Array Elements

The array elements can be accessed by referring to the index. Array index starts with 0 i.e, the first element have the index 0, the second element has index 1.

<!DOCTYPE html>
<html>
<body>

<script>
var lan = [
  "Python",
  "R",
  "C++"
];
document.write(lan[0]);
</script>


</body>
</html>

Output:

Capture 39

Adding Elements in Array

The best way to add an element to the array is to use the push() method.

<!DOCTYPE html>
<html>
<body>

<script>
var lan = ["Python", "R", "C++"];
lan.push("Java");
document.write(lan);
</script>


</body>
</html>

Output:

Capture 40
  • Elements can also be added in an array by using length property.
  • If we add elements with high indexes it can create “holes” as undefined.

Changing an Array Element

You can change the elements of an array by assigning the new element to the array index where you want to place the new element.

<!DOCTYPE html>
<html>
<body>

<script>
var lan = ["Python", "R", "C++"];
lan[0] = "Java";
document.write(lan);
</script>


</body>
</html>

Output:

Capture 41

Accessing the Full Array

JavaScript Arrays support to access the full array by the array name.

<!DOCTYPE html>
<html>
<body>

<script>
var lan = ["Python", "R", "C++"];
document.write(lan);
</script>


</body>
</html>

Output:

Capture 42

Arrays are Objects

In JavaScript Arrays can be objects, when you apply typeof() operator it returns data type object for arrays. JavaScript Arrays uses the index number to access its elements while on the other hand object use names to access its members.

String Arrays with Numbers

<!DOCTYPE html>
<html>
<body>

<script>
var lan = ["Python", "R", "C++", 44];
document.write(lan[0]);
</script>


</body>
</html>

Output:

Capture 44

Objects use names 

<!DOCTYPE html>
<html>
<body>

<script>
var std= {fn:"Hira", ln:"mani", age:25};
document.write(std["fn"]);
</script>


</body>
</html>

Output:

Capture 45

Looping An Array

The best way to loop an array is to use a for loop.

<!DOCTYPE html>
<html>
<body>

<script>
var lan, t, l, i;
var lan = ["Python", "R", "C++"];
l = lan.length;

t = "<ul>";
for (i = 0; i < l; i++) {
  t += "<li>" + lan[i] + "</li>";
}
t += "</ul>";
document.write(t);
</script>


</body>
</html>

Output:

image
  • We can also use Array.forEach() function to loop the array.

Associative Arrays

  • Many other programming languages support arrays by names this is called associative arrays.
  • But JavaScript does not support associative arrays.
  • It just support arrays by index numbers.
  • If you use named arrays in JavaScript Arrays it will consider array as a standard object.
  • And it will produce incorrect result for other properties and methods.

Avoid new Array()

  • There is no need to use JavaScript Array constructor new.
  • It will create conflicts in results.