DEV Community

Cover image for Working with Common Data Structures In JavaScript
sawincp
sawincp

Posted on

Working with Common Data Structures In JavaScript

When starting your journey into software engineering it may be intimating when it comes to learning about data structures and data manipulation. Even so, it's a must know topic for anyone looking to work in the software development word.

In this article I will try to give a simple explanation of some of the fundamental data structures (Arrays and Objects), what they are, when are they useful, and how we can implement them using JavaScript.

What is a Data Structure?

In programming, a data structure is a way to organize, manage and store data in a program so that we can efficiently access and modify that data in a specific way.

Specifically, a data structure is a collection of data and their values, the relationship between them and any functions or operations that can be applied to that data.

We will discuss the two most common types of data structures in JavaScript, Arrays and Objects.

Arrays

An array is simply a list of data when it comes to JavaScript. It can be a list of any data type such as numbers, strings, or even other arrays. To access a value within an array we simply use the index (position) of the value we want. Remember that the index of an array always starts at zero (0) and goes up from there.

// array is a list of items
const array1 = ['a','b','c']

// array can contain multiple data types
const array2 = ['a', 1, 'hello!', 56]

// access string 'hello!' in array2
console.log (array2[2]) // hello!
Enter fullscreen mode Exit fullscreen mode

Unlike other programming languages, the JavaScript array can be any size with any type of data type contained within it. This allows the array to be dynamic, meaning it can grow and shrink as necessary to meet our needs.

In JavaScript, arrays come with many methods we can use for different purposes, such as adding or deleting items from the array, sorting the array, filtering its values, finding its length, etc. These tools allow us to work with the dynamic nature of the JavaScript array and create dynamic engaging programs.

Arrays are useful when we have to store individual values and add/delete values from the beginning or end of the data structure. The array is one of fundamental data structures used in JavaScript and understanding when and how to incorporate them into your programs is essential to building your programs.

Objects

In JavaScript, an object is a collection of key-value pairs. We use curly braces to declare the object then declare the key followed by a colon and then the corresponding value and each key must be unique within the object. This means you cannot have two keys with the same name.

const object = {
      key1: value1
      key2: value2
      key3: value3
}

Enter fullscreen mode Exit fullscreen mode

To access values in an objects we are able to use two different methods. We can use the dot (.) notation method or the bracket ([]) notation method.

console.log(object.key1) // value1

console.log(object[key1]) // value1
Enter fullscreen mode Exit fullscreen mode

Objects can store different data types (like arrays!), other objects and even functions!

Just like arrays, the JavaScript object has many methods we can use to manipulate the object data.

We use objects when we need a way to group together data that have something in common or are somehow related (think of an address book). A persons address book may contain contain the person's name, their address, phone number and their email.

const addressBook = {
      name: "John Smith"
      address: "123 Main Street"
      phoneNumber: "123-4567-8910"
      email:"john@example.com"
}

Enter fullscreen mode Exit fullscreen mode

This allows us to group certain data together for easy access when creating our programs.

Conclusion

I hope I've helped clarify some of the mystery surrounding JavaScript Array's and Objects. I've tried to put each of these subjects in general terms as to better understand what they are, when they are useful and when you may implement them in your programs. If you're interested in learning more I have put links at the bottom to MDN and w3School reference documents on these topics.

Happy Coding!

MDN Array

MDN Object

w3School Array

w3School Object

Top comments (0)