DEV Community

Ranjith Jr
Ranjith Jr

Posted on • Updated on

Js | Array |

An array is a data structure that can hold multiple values at once.
These values can be of any type, including numbers, strings, objects, or even other arrays.
Arrays in JavaScript are zero-indexed, meaning the first element is at index 0.

syntax:


            index 0      1      2
let ArrayName =[item1, item2, item3];

Enter fullscreen mode Exit fullscreen mode

Using square brackets :


let fruits = ["apple","cherry"."banana"];

console.log(fruits);

output:

[apple","cherry"."banana"]


Enter fullscreen mode Exit fullscreen mode

Accessing Array Elements:


console.log(fruitsh[0]);  //apple
console.log(fruitsh[1]);  // cherry
console.log(fruitsh[2]);  // banana
console.log(fruitsh[3]);   // undifined

Enter fullscreen mode Exit fullscreen mode

Change Value in Array :


fruits[1]='orange';  //replace
console.log(fruits);

Enter fullscreen mode Exit fullscreen mode

output:
        //orange
["apple","cherry"."banana"]

        //indx 1
["apple","orange"."banana"]

Enter fullscreen mode Exit fullscreen mode

Using for loop to print array with hard-coded condition it will create issue if condition is like i < 5


debugger;

for (let i =0; i<3; i++){
  console.log(fruits[i]);
}

output:

apple
orange 
cherry

Enter fullscreen mode Exit fullscreen mode

To avoid hard-coded condition switch to array methods

We can use array length


//console.log(fruits.length); 3

Enter fullscreen mode Exit fullscreen mode

for (let i =0; fruits< length; i++){
  console.log(fruits[i]);
}

Enter fullscreen mode Exit fullscreen mode

More Array Methods


let box =["books",'toys'.'pen'];
console.log(box);

Enter fullscreen mode Exit fullscreen mode

Add element to array :

Adds one or more elements to the end of an array
and returns the new length of the array.


box.push("diary");  endlaa store agum
console.log(box);

output:
["books",'toys'.'pen'.diary];

Enter fullscreen mode Exit fullscreen mode

Remove element from array :

Removes the last element from an array and returns that element.


box.pop( );  endlaa remove agum
console.log(box);

output:

["books",'toys'.'pen'.diary];
["books",'toys'.'pen'];

Enter fullscreen mode Exit fullscreen mode

Adds one or more elements to the beginning of an array and returns the new length of the array.


box.unshift("map");  1stlaa store agum
console.log(box);

output:
["map","books",'toys'.'pen'.diary];

Enter fullscreen mode Exit fullscreen mode

Removes the first element from an array and returns that element.


box.shift("map");  1stlaa remove agum
console.log(box);
console.log(box);

output:
["map","books",'toys'.'pen'.diary];
["books",'toys'.'pen'];
['toys'.'pen']


Enter fullscreen mode Exit fullscreen mode

Anonymous Functions


    //itreation
box.forEach(function(x)){         // arraylaa ulla default loops methed ithu
  console.log(x);                  // var name illa call pannalaa but run agum
}

output 

["books",'toys'.'pen'];

Enter fullscreen mode Exit fullscreen mode

shorthand


box.forEach((x)) =>{        
  console.log(x);                  
}

output 

["books",'toys'.'pen'];

Enter fullscreen mode Exit fullscreen mode

Combining Arrays


let containerOne =["tv"."laptop"];
let containerTwo =["watch"."phone"];

console.log(containerOne);
console.log(containerTwo);

let container = containerOne.concat(containerTwo);
console.log(container);


output:

let container =["tv"."laptop","watch"."phone"];

Enter fullscreen mode Exit fullscreen mode

Finding an Element Index, If not found it will return -1

                          //jghfy
let index = container. indexof("laptop");    //illadha value kuduthal output -1 vaarum.

console.log(index);  //1  index  value eduthuttu vaarum

Enter fullscreen mode Exit fullscreen mode

Array with mixed data types


let mixedData =[10,3.45, "STR,",true,false,null,nan,undefined];
console.log(miedData);

                      // array ulla indha value irukka illayaa...check pannum
let result - mixdata.includes("STR");     //true  
console.log(result);

Enter fullscreen mode Exit fullscreen mode

shorthand:

console.log(miedData.includes(48)); //false
                               //null  true
output:

true
Enter fullscreen mode Exit fullscreen mode

Array of Employee Objects


let employees =[

  { id: 1, name:"john", age:30},
  { id: 2, name:"jack", age:30},

];

console.log(employees);

Enter fullscreen mode Exit fullscreen mode

loop in array


employee .forEach ((employee) =>{

console.log("Employee id: ${employee.id}");
console.log("Employee name: ${employee.name}");
console.log("Employee age: ${employee.age}");


  output

 employee  id:1
 employee  name:john
      "      age: 40


Enter fullscreen mode Exit fullscreen mode

Fliters



      //variable        //array name          // array id
  let employee  =employees.find(x) => x.id ===2);  //paticular iteam ah access pannraathukku
  console.log(employee);                              // 2 vaa irundha  veliya edukkum

  output:

    { id: 2, name:"jack", age:10},
                                     // age 30 filter pannu
  let x =employees.filter(x) => x.age>30);    //particulare raa onna select panni print seiyaa (age)
  console.log(x); 

output:

 { id: 1, name:"john", age:30},
  { id: 2, name:"jack", age:30},

Enter fullscreen mode Exit fullscreen mode

Map //loop marri data manipulate pannalaam


let y = employee.map((employee) =>{                                     // age vechu dob kanndu pudikkum
    console.log("name:${employee.name},dob:${new date().getFullYear() - employee.age}); 
});

output:

name: john ,dob:1994
name: jack ,dob:1996

Enter fullscreen mode Exit fullscreen mode

Top comments (0)