DEV Community

Frugence Fidel
Frugence Fidel

Posted on • Updated on

Understanding basics of array in javascript

This post is originally posted to my blog.

In the post I will share some basics about Array.

Array

Array is the way of storing group or list of data.

Let say, we want to store group of colors without using array.

  const color1 = 'purple';
  const color2 = 'black';
  const color3 = 'yellow';
  const color4 = 'aqua';
Enter fullscreen mode Exit fullscreen mode

As we see, our codes are not DRY(Don't Repeat Yourself) at all. They are WET(Write Everything Twice), this is not a good practice for writing good code. We can use Array to solve this problem.

  const colors = ['purple', 'black', 'yellow', 'aqua'];
Enter fullscreen mode Exit fullscreen mode

How to create Array

You can start with empty Array and then add data later, or you can start with it's data;

  // empty array
  const colors = [];

  // with data
  const colors = ['purple', 'black', 'yellow', 'aqua'];
Enter fullscreen mode Exit fullscreen mode

Add data into array

There two way I known for adding data into the Array, 'bracket notation' and array methods.

i. By bracket notation

Array are indexed starting from 0.

  const colors = [];

  // Add first data
  colors[0] = 'purple';

  // So the second item
  colors[1] = 'black';

  console.log(colors); // ['purple', 'black'];
Enter fullscreen mode Exit fullscreen mode

ii. By Array methods

If you want to add item at very first position of Array use unshift method, at very end use push method.

  const colors = ['purple', 'black'];

  // use unshift method to add to front
  colors.unshift('aqua');
  console.log(colors); // ['aqua', 'purple', 'black'];

  // use push method to add to end
  colors.push('yellow');
  console.log(colors); // ['aqua', 'purple', 'black', 'yellow'];
Enter fullscreen mode Exit fullscreen mode

Access data from Array

You can access data from Array by using bracket notation.

  const colors = ['purple', 'black', 'yellow', 'aqua'];

  // black and aqua
  colors[1]; // 'black'
  colors[3]; // 'aqua'
Enter fullscreen mode Exit fullscreen mode

Also you can access array's item by loop over it.

  const colors = ['purple', 'black', 'yellow', 'aqua'];

  for(const color of colors) {
    console.log(color);  // purple black yellow aqua
  }
Enter fullscreen mode Exit fullscreen mode

Update data of Array

Also you can use bracket notation to update array's data.

  const colors = ['purple', 'black'];

  // update black to yellow
  colors[1] = 'yellow';
  console.log(colors); // ['purple', 'yellow'];
Enter fullscreen mode Exit fullscreen mode

Array can hold any data type and can be nested.

  const data = [24, true, ['orange', null], undefined];
Enter fullscreen mode Exit fullscreen mode

Top comments (10)

Collapse
 
mhdbnmsd profile image
Mehdi Benmessaoud

I think you should be using for(let color of colors) not for(const color of colors). What do you think !?

Collapse
 
frugencefidel profile image
Frugence Fidel

In most case let and const are almost same, the only difference I known, const cannot be updated but let can.

Let use this example for demonstration

  const colors = ['purple', 'black', 'yellow', 'aqua'];

 // const

 for(const color of colors) {
    color = 'white';
    console.log(color);  // Uncaught TypeError: Assignment to constant variable.
 }

 // Let

 for(let color of colors) {
    color = 'white';
    console.log(color);  // white white white white
 }
Collapse
 
mhdbnmsd profile image
Mehdi Benmessaoud

Yes i agree with you on that, but i think that’s a miss use of const because inside the loop the variable color is changing at each iteration.

Thread Thread
 
frugencefidel profile image
Frugence Fidel

When use const in for of loop, in each iteration you get a new variable, which is scoped only to that iteration.

Thread Thread
 
frugencefidel profile image
Frugence Fidel

I use let only when i want to modify variable's value.

In below example you can't use const because the value of variable is modified by increment one until the condition is false.

  for(let i = 1; i < 3; i++) {
    console.log(i); // 1 and 2
  }

In below example, the constant variable(random) hold each values of that array.

  for(const random of ['a', 'b', 1, 2]  ) {
    // Here it print values that held by constant random without modify it
    console.log(random); // a b 1 2
  }

Remember, to be constant does not mean to hold only single data. const can also hold list of data. Good example is array.

 // Here constant colors is holding two color
 const colors = ['purple', 'black'];

 // First color is purple
 console.log(colors[0]); // 'purple'

 // Second color is black
 console.log(colors[1]); // 'black'
Collapse
 
rnrnshn profile image
Olimpio

Then their aren't same anymore...

Collapse
 
pafnut profile image
Pafnut

How to delete some item from array?

Collapse
 
frugencefidel profile image
Frugence Fidel

You can delete by using splice method

// Syntax
yourArray.splice(index, numberOfItemsTodelete)

// Real example
const colors = ['purple', 'black'];

// let say you want to delete purple color
colors.splice(0, 1);
console.log(colors); // ['black']
Collapse
 
straleb profile image
Strahinja Babić

Hey, really nice and useful article, great job !!

Collapse
 
frugencefidel profile image
Frugence Fidel

Thanks friend