JavaScript Data Structures (Simplified)

JavaScript Data Structures (Simplified)

Data structures are a way of organizing data in a computer so that it can be used effectively.

Data Structures

  • The 2 most basic and used data structures in JavaScript are Objects and Arrays

Arrays

  • Arrays are container that are used to store data of a single value
    • Although in JavaScript, Arrays can hold data of any value

Syntax

const commonVariables =[x, y, z]
  • Using the new keyword

      const years = new Array (x, y, z)
    

Index of an Array

  • arrays are 0-indexed, which means they start from zero
  • Elements can be accessed from the array using the

    • Array Name
    • index surrounded by square brackets {}

        const myArray = [100, 200, 300];
        console.log(myArray[0]); // 100
        console.log(myArray[1]); // 200
        console.log(myArray[2]); // 300
      

.length

  • we can use the .length property to get the number of elements in an array
    • to get the last element of an array we can write myarray[myarray.length - 1]

.indexOf

  • the index of methods tells us the index of the element in the array
  • if we try the index of an element that it dosent include we will get -1

.includes

  • The modern aproach to check if an element is present in an array
  • this method uses stric equality

Array Methods

  • Adding Methods

    • .push
      • the push method adds an element as the last element
      • const newLength = friends.push("Bayak, Jhon");
    • .unshift
      • The unshift method adds an array as the first element in the array
        • friends.unshift("Jhon"
  • Removing Methods

    • .pop
      • The pop method removes the last element from the array
      • friends.pop()
    • .shift
      • The shift method removes the first element of the array
        • friends.shift()
    • Notice that we do not need to provide any arguments to the pop and shift method
  • JavaScript arrays are mutable

    • Even if they are declared using const, the contents can be manipulated by reassigning internal values or using methods like .push() and .pop().

Objects


  • Objects are basically code used to represent things in your code, these things are defined by a set of characteristics known as properties that consist of keys and value
  • the order of the properties doesn't matter

Syntax

const person = {
  name: 'Bayak',
  age: 33,
  likesCoding: true
  };`
  • A JavaScript object literal is enclosed with curly braces {}.
  • Values are mapped to keys in the object with a colon (:), and
  • The key-value pairs are separated by commas.

Retrieve Data

  • Bracket notation
    • console.log(jonas[last name])
  • Dot notation

    • console.log(jonas.lastname)`
  • When to use the Bracket notation and when to use the Dot notation

    • The difference between the dot notation and the bracket notation is we can include expressions inside the bracket like this:
      • const nameKey = 'Name'
      • console.log["last" + namekey]
      • While we can't using the dot notation
    • The dot notation looks cleaner than the bracket notation
  • So when to use the dot and the bracket notation?

    • use the dot notation by default, and only use the bracket notation when you need to include an expression

Object Methods

  • We can add function expressions as key-value pairs

    • These key-value pairs are known as methods

      calcAge: function(birthyear){
        return 2040 - birthyear
      }
      
  • To access methods we can use either the bracket notation or the dot notation

    • jonas.calcAge(1994)

this keyword

  • this is a reference to the object

      calcAge: function () {
      return 2040 - this.birthyear
      }