JS beginner to expert, study notes-3 (sec-8 arrays)

Arrays are essential structure and field of study for any programming languages…

1. array structure

   var products = [ "html", "php"];
   
   //adding a element to end of an array
   products[products.length] = "jquery";
   products.push("jquery");

2. In js associative arrays are just objects

   var products = [];
   
   products["name"] = "pen";
   products["price"] = 20;
   
   // accessing array elements by both array & objective way
   alert( products["name"] );
   
   // accessing by "." , this is usually used to access object property
   alert( products.name);

3. Practical example of arrays

   //HTML
   
   <ul id="myList">
       <li>php</li>
       <li>html</li>
       <li>css</li>
       <li>mysql</li>
       <li>java</li>
   </ul>
   
   //JS
   
   var myList = document.getElementById("myList");
   alert(myList);              // [Object HTMLULListElement]
   
   var items = myList.getElementsByTagName("li");
   alert(items);               // [Object HTML collection] :- a collection of HTML elements
   alert(items.length);        // returns number of li items
   
   var item = items[0];
   alert(item);                // [Object HTML Li Element ]
   
   alert(item.innerHTML);      // content of that li
   
   
   

    

4. join() : it joins an array into a string

   var places = ["dhk", "ctg", "syl"];
   alert(places.join(","));    // it is dhk,ctg,syl a string converted from an array

    

5. length : returns the length of an array 

   alert(places.length);// 3

    

6. concat() : concatenates two arrays

   var places = ["dhk", "ctg", "syl"];
   var places2 = ["raj", "bar"];
   
   var newPlace = places.concat(places2);
   alert(newPlace);   // alerts all cities

    

7. pop() : returns the last element of array and deletes it from original array also

   var places = ["dhk", "ctg", "syl"];
   
   alert(places.pop());   // alerts the last element and also deletes it from original array
   alert(places);

    

8. push() : pushes and element in the last place of array
9. shift() : Opposite of pop(). Unlike pop() it just removes and returns first element.
10. unshift() : Simillar to push(). push() puts an item at the end whereas unshift() puts an element at the beginning and also shifts all other elements to the right.
11. sort()  & reverse():

    var alpha = ["a", "z", "b"];
    
    alert(alpha.sort());   // a,b,z
    alert(alpha);          // a,b,z
    
    alert(alpha.reverse());   // z,b,a
    alert(alpha);             // z,b,a

     

12. sorting numbers

    var num = [50, -5, 65, 20, 1];
    
    alert(num.sort());   // works on updated ES
    
    alert(num.sort(function(a, b){
        return a-b;  // using b-a will return descending sorting
    } 
    ) );   // but it is safer and ensured

13. slice(indexInc, indexExclusive) : This method doesnt affects original array. slice(1, 3) means return elements startign from index 1 and upto 3 (index 3 will be excluded).

    var alpha = ["a", "b", "c", "d", "e"];
    
    alert(alpha.slice(1, 3));   // b,c
    alert(alpha);               // a,b,c,d,e

14. splice(indexIncluding, Items) : returns specified number (the 2nd arg) element from starting index. It modifies original array.

    var alpha = ["a", "b", "c", "d", "e"];
    
    alert(alpha.splice(1, 3));   // b,c,d
    alert(alpha);               // a,e

     

15. splice(indexIncluding, Items, moreParams) : if we send more than two args to splice(), then the extra params will be put in place of removed elements.

    var alpha = ["a", "b", "c", "d", "e"];
    
    alert(alpha.splice(1, 3, "x", "y", "z"));   // b,c,d
    alert(alpha);                               // a,x,y,z,e