Four Common Array Creation Syntax in JavaScript

<html>
<head>
  <meta charset="UTF-8">
  <title>Array Creation Demo</title>
  <script>
    // 1. Create an empty array with Array constructor
    var emptyArr = new Array();
    emptyArr[0] = 1;
    console.log(emptyArr);

    // 2. Create a fixed-length empty array
    var fixedLenArr = new Array(5);
    fixedLenArr[0] = "x";
    fixedLenArr[4] = true;
    console.log(fixedLenArr);

    // 3. Create array with pre-defined elements via constructor
    var preFilledArr = new Array("demo", 10, 20.3, true);
    console.log(preFilledArr);

    // 4. Array literal syntax (shorthand for pre-filled arrays)
    var literalArr = ["demo", 10, 20.3, true];
    console.log(literalArr);
  </script>
</head>
<body>
</body>
</html>

Array Eleemnts and Length Property

JavaScript arrays have unique behavior for elements and length that differs from many statically typed langauges:

<html>
<head>
  <meta charset="UTF-8">
  <title>Array Length Demo</title>
  <script>
    var sampleArr = [11, 22, 33];
    console.log(sampleArr);
    console.log(sampleArr[0]);
    console.log(sampleArr.length);

    // You can modify array length directly to resize the array
    sampleArr.length = 5;
    console.log(sampleArr);

    // Adding an element with an index larger than current length expands the array
    sampleArr[9] = 99;
    console.log(sampleArr);
  </script>
</head>
<body>
</body>
</html>

Common Array Traversal Methods

<html>
<head>
  <meta charset="UTF-8">
  <title>Array Traversal Demo</title>
  <script>
    var numList = [5, 7, 3, 1, 6, 2, 4, 9, 8];

    // 1. Standard for loop traversal
    for(var idx = 0; idx < numList.length; idx++){
      console.log(numList[idx]);
    }

    // 2. for...in loop traversal, where the loop variable stores the index
    for(var idx in numList){
      console.log(numList[idx]);
    }
  </script>
</head>
<body>
</body>
</html>

Frequently Used Array Methods

<html>
<head>
  <meta charset="UTF-8">
  <title>Array Methods Demo</title>
  <script>
    var valueArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    // Get the first index of a matching element
    var targetIndex = valueArray.indexOf(7);
    console.log(targetIndex);

    // Merge multiple arrays
    var groupA = ["Cecilie", "Lone"];
    var groupB = ["Emil", "Tobias", "Linus"];
    var mergedGroup = groupA.concat(groupB);
    console.log(mergedGroup);

    // Merge more than two arrays
    var parentArr = ["Jani", "Tove"];
    var siblingArr = ["Stale", "Kai Jim", "Borge"];
    var childArr = ["Cecilie", "Lone"];
    var fullFamily = parentArr.concat(siblingArr, childArr);
    console.log(fullFamily);

    // Join all array elements into a string
    var fruitArr = ["Banana", "Orange", "Apple", "Mango"];
    var joinedFruits = fruitArr.join();
    console.log(joinedFruits);

    // Remove the last element of the array
    var removedFruit = fruitArr.pop();
    console.log(fruitArr);
    console.log(removedFruit);

    // Add a new element to the end of the array
    fruitArr.push("Grape");
    console.log(fruitArr);

    // Reverse the order of all elements in the array
    fruitArr.reverse();
    console.log(fruitArr);

    // Remove the first element of the array
    var firstRemoved = fruitArr.shift();
    console.log(fruitArr);
    console.log(firstRemoved);

    // Add a new element to the start of the array
    fruitArr.unshift("Dragon Fruit");
    console.log(fruitArr);

    // Extract a subarray (start index inclusive, end index exclusive)
    var citrusSlice = fruitArr.slice(1, 3);
    console.log(citrusSlice);

    var numSequence = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    // Splice can add or remove elements at a specific position
    // Arguments: (start index, number of elements to delete, elements to add)
    numSequence.splice(2, 0, 100);
    console.log(numSequence);
  </script>
</head>
<body>
</body>
</html>

Array Sorting

<html>
<head>
  <meta charset="UTF-8">
  <title>Array Sorting Demo</title>
  <script>
    // Default lexicographical sort works for strings
    var fruitList = ["Banana", "Orange", "Apple", "Mango"];
    fruitList.sort();
    console.log(fruitList);

    // Custom comparator for descending numeric sort
    var numCollection = [5, 7, 9, 6, 1, 8, 3, 4, 2];
    numCollection.sort(function(a, b){return b - a});
    console.log(numCollection);
  </script>
</head>
<body>
</body>
</html>