Frugence Fidel

Posted on May 5, 2018 • Edited on Jul 15, 2022

Understanding basics of array in javascript

#beginners #javascript #webdev

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';

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'];

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'];

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'];

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'];

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'

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
  }

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'];

Array can hold any data type and can be nested.

  const data = [24, true, ['orange', null], undefined];

Top comments (10)

Mehdi Benmessaoud • May 8 '18

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

Frugence Fidel • May 8 '18

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
 }

Olimpio • May 9 '18

Then their aren't same anymore...

Mehdi Benmessaoud • May 8 '18

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.

Frugence Fidel • May 8 '18

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

Frugence Fidel • May 8 '18

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'

Pafnut • May 6 '18

How to delete some item from array?

Frugence Fidel • May 6 '18

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']