JavaScript Arrays A to Z

Note: No Back Ticks, Yes to Double Quotes sometimes?

A pair of square brackets [ ] represents an array in JavaScript.
All the elements in the array are comma(,) separated.

To String

Array Elements Can Be Objects

    // empty array with no elements
    var empty = [];   
                        
    // array with 2 string elements
    var days = ["Sunday", "Monday"];   
       
    // array with elements of different types
    var mixed = [false, 2.70, "Hello"];   
    
    // elements can be arbitrary expressions
    var suffix = "tree";
    var trees = ["Oak" + suffix, "Elm" + suffix];  
    
    // 2 dimensional array with object literals
    var array2 = [[1,{x:1, y:2}], [2, {x:3, y:4}]];  
      
    // the 3rd element is undefined
    var colors = ["Red", "Green", undefined];   
     
    // no value in the 1st element, it is undefined
    var hobbies = [,"Art"];   
    
  

Array-like Objects

You’ll come across these more often than you might expect. A common one is the arguments variable that is present inside of every js function.

Also included in the category are the HTML node sets returned by document.getElementsByTagName(), document.forms,
and basically every other DOM method and property that gives a list of items.

Array.Length

Arrays have a length property that tells how many items are in the array and is automatically updated when you add or remove items to the array.

    var arr = [];
arr[0] = "cat"; // this adds to the array
arr[1] = "mouse"; // this adds to the array
arr.length; // returns 2

arr["favoriteFood"] = "pizza"; // this DOES NOT add to the array. Setting a string parameter adds to the underlying object
arr.length; // returns 2, not 3

--------------------------------------------------------

var arr = [];
arr.length; // returns 0;

arr[100] = "this is the only item in the array";
arr.length; // returns 101, even though there is only 1 object in the array
  

Array-like Objects

Array: Array is an indexed collection that can hold data of any type. They are created with [ ].
Example: let arr = [1, 2, 'capscode', true, null, ,12]; we can access element as arr[2] // 'capscode'

Object: Object are the Keyed Collection that hold the properties in key: value pair. They are created with { }.
Example: let person = { first_name: "John", last_name: "Doe", company: "capscode" }

Array-like objects look like arrays. They have various numbered elements and a length property. But that’s where the similarity stops.
Array-like objects do not have any of Array’s functions, and for-in loops don’t even work!

You’ll come across these more often than you might expect. A common one is the arguments variable that is present inside of every js function.

Also included in the category are the HTML node sets returned by document.getElementsByTagName(), document.forms,
and basically every other DOM method and property that gives a list of items.

    document.forms.length; // returns 1;
    document.forms[0]; // returns a form element.
    document.forms.join(", "); // throws a type error. this is not an array.
    typeof document.forms; // returns "object"
  

LETS HAVE A LOOK ON SOME MORE INTERESTING EXAMPLES OF ARRAY, OBJECT, ARRAY LIKE OBJECT

    // simple array
const arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // ['0', '1', '2']

// array-like object
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // ['0', '1', '2']

// array-like object with random key ordering
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // ['2', '7', '100']

const object1 = {
  "a": 'somestring',
  "b": 42,
  "c": false
};

console.log(Object.keys(object1));
// expected output: ["a", "b", "c"]
  

    // simple array
    const arr = ['a', 'b', 'c'];
    console.log(Object.keys(arr)); // ['0', '1', '2']
    
    // array-like object
    const obj = { 0: 'a', 1: 'b', 2: 'c' };
    console.log(Object.keys(obj)); // ['0', '1', '2']
    
    // array-like object with random key ordering
    const anObj = { 100: 'a', 2: 'b', 7: 'c' };
    console.log(Object.keys(anObj)); // ['2', '7', '100']
    
    const object1 = {
      "a": 'somestring',
      "b": 42,
      "c": false
    };
    
    console.log(Object.keys(object1));
    // expected output: ["a", "b", "c"]

  

JavaScript Arrays, Creating an Array, Using the JavaScript Keyword new, Accessing Array Elements
Changing an Array Element, Access the Full Array, Arrays are Objects, Array Elements Can Be Objects
The length Property, Accessing the First Array Element, Accessing the Last Array Element
Looping Array Elements, Adding Array Elements, Associative Arrays, The Difference Between Arrays and Objects
When to Use Arrays. When to use Objects.
JavaScript new Array(), How to Recognize an Array 1 Main and 17 Sub-Categories Topics

JavaScript Array Methods Converting Arrays to Strings Popping and Pushing Popping Pushing Shifting Elements Changing Elements Deleting Elements Splicing an Array Using splice() to Remove Elements Merging (Concatenating) Arrays Example (Merging Three Arrays) Slicing an Array Automatic toString() Finding Max and Min Values in an Array Sorting Arrays Complete Array Reference 1 Main and 16 sub cats

Last Updated

Wednesday December 08 2021 0802 AM

Tuesday November 09 2021 0709 AM

Tuesday November 02 2021 0704 AM

Tuesday October 26 2021 0713 AM