Data Structures

freeCodeCamp.org

1. Debugging

2. Basic Data Structure

3. Object Oriented Programming

What is a data structure?

In computer science, a data structure is a format to organize, manage and store data in a way that allows efficient access and modification.

More precisely, a data structure is a collection of data values, the relationships among them, and the functions or operations that can be applied to that data.

These definitions might sound a bit abstract at first, but think about it. If you've been coding for a little while, you must have used data structures before.

Have you used arrays and objects? Those are all data structures. All of them are a collection of values that relate to each other, and can be operated on by you.😉

// A collection of the values 1, 2 and 3
const arr = [1, 2, 3]

// Each value is related to one another, in the sense that each is indexed in a position of the array
const indexOfTwo = arr.indexOf(2)
console.log(arr[indexOfTwo-1]) // 1
console.log(arr[indexOfTwo+1]) // 3

// We can perform many operations on the array, like pushing new values into it
arr.push(4)
console.log(arr) // [1,2,3,4]

JavaScript has primitive (built in) and non-primitive (not built in) data structures.

Primitive data structures come by default with the programming language and you can implement them out of the box (like arrays and objects). Non-primitive data structures don't come by default and you have to code them up if you want to use them.

Different data structures exist because some of them are better suited for certain kind of operations. You will probably be able to tackle most programming tasks with built-in data structures, but for some very specific tasks a non-primitive data structure may come in handy.

Now let's go through the most popular data structures out there, and see how each of them works, in what occasions they're useful, and how we can code them up in JavaScript.

Arrays

An array is a collection of items stored at contiguous memory locations.

Each item can be accessed through its index (position) number. Arrays always start at index 0, so in an array of 4 elements we could access the 3rd element using the index number 2.

const arr = ['a', 'b', 'c', 'd']
console.log(arr[2]) // c

The length property of an array is defined as the number of elements it contains. If the array contains 4 elements, we can say the array has a length of 4.

const arr = ['a', 'b', 'c', 'd']
console.log(arr.length) // 4

In some programming languages, the user can only store values of the same type in one array and the length of the array has to be defined at the moment of its creation and can't be modified afterwards.

In JavaScript that's not the case, as we can store values of any type in the same array and the length of it can be dynamic (it can grow or shrink as much as necessary).

const arr = ['store', 1, 'whatever', 2, 'you want', 3]

Any data type can be stored in an array, and that includes arrays too. An array that has other arrays within itself is called a multidimensional array.

const arr = [
    [1,2,3],
    [4,5,6],
    [7,8,9],
]

In JavaScript, arrays come with many built-in properties and methods we can use with different purposes, such as adding or deleting items from the array, sorting it, filtering its values, know its, length and so on. You can find a full list of array methods here. 😉

As I mentioned, in arrays, each element has an index defined by its position in the array. When we add a new item at the end of the array, it just takes the index number that follows the previous last item in the array.

But when we add/delete a new item at the beginning or the middle of the array, the indexes of all the elements that come after the element added/deleted have to be changed. This of course has a computational cost, and is one of the weaknesses of this data structure.

Arrays are useful when we have to store individual values and add/delete values from the end of the data structure. But when we need to add/delete from any part of it, there are other data structures that perform more efficiently (we'll talk about them later on).

Objects (hash tables)

In JavaScript, an object is a collection of key-value pairs. This data structure is also called map, dictionary or hash-table in other programming languages.

A typical JS object looks like this:

const obj = {
    prop1: "I'm",
    prop2: "an",
    prop3: "object"
}

We use curly braces to declare the object. Then declare each key followed by a colon, and the corresponding value.

An important thing to mention is that each key has to be unique within the object. You can't have two keys with the same name.

Objects can store both values and functions. When talking about objects, values are called properties, and functions are called methods.

const obj = {
    prop1: "Hello!",
    prop3: function() {console.log("I'm a property dude!")
}}

To access properties you can use two different syntaxes, either object.property or object["property"]. To access methods we call object.method().

console.log(obj.prop1) // "Hello!"
console.log(obj["prop1"]) // "Hello!"
obj.prop3() // "I'm a property dude!"

The syntax to assign new values is quite similar:

obj.prop4 = 125
obj["prop5"] = "The new prop on the block"
obj.prop6 = () => console.log("yet another example")

console.log(obj.prop4) // 125
console.log(obj["prop5"]) // "The new prop on the block"
obj.prop6() // "yet another example"

Like arrays, in JavaScript objects come with many built-in methods that allow us to perform different operations and get information from a given object. A full list can be found here.

Objects are a good way to group together data that have something in common or are somehow related. Also, thanks to the fact that property names are unique, objects come in handy when we have to separate data based on a unique condition.

An example could be counting how many people like different foods:

const obj = {
    pizzaLovers: 1000,
    pastaLovers: 750,
    argentinianAsadoLovers: 12312312312313123
}