Javascript Lists – Building A List Data Structure In Javascript

If you are searching the internet for how to implement lists in javascript, here is the one for you. In this tutorial, I am going to explain how to build javascript lists.

Javascript list is a data structure which stores the data in chronological order.
If you are coming from traditional programming languages like C, C++, and Java, you might familiar with the data structures.

A data structure is a structured format which is designed for selecting and organizing data in a specific format.
Javascript is an excellent programming language. Due to it’s simpler syntax and great features you can easily build any type of data structures compare to other programming languages.

I am using Javascript Arrays and Es6 classes to build a list data structure. So, you should familiar with both of these. If you have any experience with OOP’s concept, this article will be dead easy to you.

Below is the reference link for learning classes in Javascript

Understanding the concept of classes in javascript

Ok. Enough dragging. Let’s start building our list data structure.

Building Javascript Lists

Open your favorite text editor and create a file and name it as list.js

In ths list.js file create a class with the name List.

list.js

class List{

}

Now create a constructor in the List class.

class List{
   constructor(){
   }
}

Now add some properties to the constructor.

class List{
    constructor(){
       this.items = [];
       this.currentPosition = 0;
    }
}

Here the this.items array is to add the items to the list and the this.currentPosition is to add the current position of a list item.

Till now, we build the core part of our list data structure. Next, we need to implement the methods to make our function dynamic.

The following methods should be added to the List class to make it more functional.

1.add
2.show
3.size
4.remove
5.first
6.last
7.find
8.insert
9.clear
10.prev
11.next
12.current

Let’s build one by one.

1.add

The add method is to add items to the list. The items in the list were organized in sequential order. When you add a new item to the list it will be added after the last item of a list.

add(item){
    this.items.push(item);
}

Code Explanation:

Here we are pushing the argument to the this.items array.

2.show

The show method is to display all the items of a list.

show(){
    if(this.items.length === 0){
        console.log("List was empty");
    }else{
        this.items.forEach(function(elm){
          console.log(elm);
        });
    }     
  }

Code Explanation:

  • In the above code first, we have checked if the this.items.length is equal to 0 or not.
  • If the this.items.length is equal to 0, then we print “No items found in the list”.
  • If the this.items.length is not equal to 0, then we iterate the this.items array and prints each item in the array.

3.size

The size method is to display the size of a list.

size(){
  return this.items.length;
}

Code Explanation:

  •  Here we simply return the length of this.items array.

4.remove

The remove method is to delete the item in the list at a particular position.

remove(item){
   this.items.forEach((elm,key)=>{
     if(this.items[key] === item){
       this.items.splice(key,1);
     }
   });
 }

Code Explanation:

  •  In the above code first, we pass the item in the remove method.
  •  Then we iterate through the this.items array.
  •  Then we compare the passed item with each item of this.items array.
  •  If the item is found, we remove that item using array splice method.

5.first

The first method is to traverse the list to the first item of a list.

first(){
   this.currentPosition=0;
   return this.items[0];
 }

Code Explanation:

  • In the above code, first set the this.currentPosition to the 0.
  • Then we return the this.items array using this.currentPosition

6.last

The last method is to traverse the list to the last item of a list.

last(){
  this.currentPosition=this.items.length-1;
  return this.items[this.items.length-1];
}

Code Explanation:     

  • In the above code first, we set the value of this.currentPosition to the length of the this.items array by decrementing one value.
  • Then we return the this.items array using this.currentPosition.

7.find

The find method is to find an item in a list.

find(item){
    var itemIndex=this.items.indexOf(item);
    if(itemIndex === -1){
      return "Not Found";
    }else{
       return this.items[itemIndex];
    }
  }

Code Explanation:

  • In the above code, first we pass the item into find method.
  • Then we find the index of item using this.items.indexOf method and stored it in a itemIndex.
  • If itemIndex is equals to -1, then we return “Not Found”.
  • If itemIndex not equals to -1, then we return the item.

8.insert

The insert method is to insert an element at a particular position.

insert(item,position){
    this.items.forEach((elm,key)=>{
      if(this.items[key] === position){
        var temp = this.items[key+1];
        this.items[key+1] = item;
        this.items[key+2] = temp;
      }
    });

    return this.items;
  }

Code Explanation:

  • In the above example, we passed two parameters to the function. One is the item to be added to the list and the second one is the position of an existing item to be added after that.
  • Next, we iterate through the this.items array.
  • Then we check whether the value of a position exists in the this.items array or not.
  • If it exists, we store the value of this.items array by incrementing the index value of it.
  • Next, we assign the value item to this.items array by incrementing their index.
  • Then we store the temp value in this.items array in by incrementing their index double times.

9.clear

The clear method is to delete all the items of a list.

clear(){
   this.items=[];
 }

Code Explanation:

In the above code, we simply re-declare the array this.items array.

10.prev

The prev method is to traverse the list to the previous item.

prev(){

    if(this.currentPosition === 0){
      this.currentPosition=this.items.length-1;
      return this.items[this.currentPosition];
    }else{
      return this.items[this.currentPosition--]
    }

  }

Code Explanation:

  •  In the above code first, we check the this.currentPosition equals to 0 or not.
  • If it 0, we set the value of this.currentPosition to lenght of the this.items array by decrementing its value by one.
  •  Next, we return this.items array using this.currentPosition as it’s index.
  •  If it values not equals to 0, then we return the this.items array using this.currentPosition as it’s index by decrementing its value.

11.next

The next method is to traverse the list to the next item.

next(){

    if(this.currentPosition === this.items.length){
      this.currentPosition = 0;
      return this.items[this.currentPosition];
    }else{
      return this.items[this.currentPosition++];
    }
  }

Code Explanation:

  • In the above code first, we check this.currentPosition equals to this.items.length.
  • If it returns true, we set this.currentPosition to 0 and return the this.items array using this.currentPosition as it’s index.
  • If it returns false, we return the this.items array using this.currentPosition as it’s index by incrementing its value.

12.current

The current method is to display the current item of a list.

current(){
    return this.items[this.currentPosition];
  }

Code Explanation:

Here we are simply returning the this.items array using this.currentPosition as it’s index.

Ok. Now we have finished our javascript list. If you put everything together you list.js file seems like below.

list.js

//creating class List
class List{

  //initializing consturctor method
  constructor(){
    
    this.items=[];
    //creting varible for holding current position of a list
    this.currentPosition=0;
  }

  //method to add a element to list.
  add(item){
    this.items.push(item);
  }

  //method to displaying all the elements of a list
  show(){
    if(this.items.length === 0){
        console.log("List was empty");
    }else{
        this.items.forEach(function(elm){
          console.log(elm);
        });
    }     
  }

  //method to display the size of a list
  size(){
    return this.items.length;
  }

  //method to remove a particular element from a list
  remove(item){
    this.items.forEach((elm,key)=>{
      if(this.items[key] === item){
        this.items.splice(key,1);
      }
    });
  }

  //prints the first element of a list
  first(){
    this.currentPosition=0;
    return this.items[0];
  }

  //prints the last element of a list
  last(){
    this.currentPosition=this.items.length-1;
    return this.items[this.items.length-1];
  }

  //finding an item
  find(item){
    var itemIndex=this.items.indexOf(item);
    if(itemIndex === -1){
      return "Not Found";
    }else{
       return this.items[itemIndex];
    }
  }

  //inserting an item into a list at particular position
  insert(item,position){
    this.items.forEach((elm,key)=>{
      if(this.items[key] === position){
        var temp = this.items[key+1];
        this.items[key+1] = item;
        this.items[key+2] = temp;
      }
    });

    return this.items;
  }

  //removing all the items of list
  clear(){
    this.items=[];
  }

  //traverse list to previous item.
  prev(){

    if(this.currentPosition === 0){
      this.currentPosition=this.items.length-1;
      return this.items[this.currentPosition];
    }else{
      return this.items[this.currentPosition--]
    }

  }

  //traverse list to next item
  next(){

    if(this.currentPosition === this.items.length){
      this.currentPosition = 0;
      return this.items[this.currentPosition];
    }else{
      return this.items[this.currentPosition++];
    }
  }

  //display the current item
  current(){
    return this.items[this.currentPosition];
  }

}

Conclusion:

Ok. Today you learned about lists in javascript. Using data structures may give a significant boost to your coding experience. Lists are the basic data structures in any programming language. You can apply this javascript lists data structure to any List based applications.

Hoping this article may worth you. If you have any doubts feel free to comment below.

Thanks for reading!

Happy [email protected]

Was this post helpful?
Let us know if you liked the post. That’s the only way we can improve.
Yes0
No0
Powered by Pixelbart

Leave a Reply

Your email address will not be published. Required fields are marked *