Ever seen some data in square brackets and curly brackets in JavaScript? These are Arrays and Objects respectively.

// arrays
[]

// objects
{}

We will be discussing Objects and Arrays in JavaScript. You probably know data types in JavaScript such as:

  • String
  • Number
  • Boolean
  • Null
  • Undefined

Objects and Arrays are no different, but have a little more complex data structure. They can be visualized as containers for other datatypes in JavaScript, thus the term: data structures.

Table of Contents

    What is an Object?

    A JavaScript Object is similar to a natural object you know; for example, a cup, a house, a car etc.

    These objects can:

    • contain several things
    • have unique features
    • can contain other objects
    • can be used for several purposes
    • be able to accept several actions done on them

    For example, a cup can have a smaller cup in it, drinking water from a cup, breaking a cup, driving a car, putting a kid or a toy car in a car and the list goes on.

    JavaScript Objects are no different, only that they look like this:

    const myObject = {};

    The curly brackets denote the object and elements in the Object make up the object. Object values come in Key: Value pairs and these values can either be properties of the object or methods (functions). Properties are features or attributes of the Object, whereas methods are functions or actions that can be performed on the Object.

    Note: Object methods have to be defined in the object in order to be usable or recognized by the object.

    Objects are represented as such:

    const myObject = {
        myKey1: 'ObjectValue1',
        myKey2: 'ObjectValue2',
        mykeyN: 'ObjectValueN',
        objectMethod: function() {
          // Do something on this object
        }
    };

    Basically, almost everything in JavaScript is an Object. For this reason, JavaScript is seen as an object-oriented language by many. In the browser, once a window loads, an instance of the Document object is created and every other thing displayed on the browser is a child of the document object and document methods are used to manipulate the parent object.

    Objects can also be nested:

    const myObject = {
      first:  { key:  'thing', key2: 2 },
      second: { key3: 'otherThing' }, 
      third:  { key4: 'my string' }
    };

    Everything is an Object

    When we say everything is an object, that means that JavaScript wraps all of types with an object that provides methods for that type. To clarify this, let's look at the following code:

    // create a message with a string value
    const myMessage = 'look at me go!';
    
    // convert to uppercase
    myMessage.toUpperCase();

    How were we able to call a method .toUpperCase() on this string? We usually are only able to call methods on objects. When we create a string, JavaScript actually wraps that string with the object of type string. The following is the same

    // simple way to create a string
    const myMessage = 'look at me go!';
    
    // what javascript sees
    const myOtherMessage = String('look at me go!');
    
    myMessage == myOtherMessage; // true
    For more info on this, check out our video on JavaScript Objects: [Getting Started with JavaScript for Web Development: Objects](https://scotch.io/courses/getting-started-with-javascript/objects)

    Creating Objects

    There are a few ways to create objects:

    Using Object Initializers

    This is done as shown above by placing the key: value pairs and methods in curly brackets. This is also known as literal notation.

    const obj = {
        firstName: 'William',
        lastName:  'Imoh',
        married:   true,
        greet:     function() {
          alert("Hello everyone, i'm " + this.firstName);
        }
    };

    From the code above, we can access these properties and methods by calling:

    obj.firstName;   // William
    obj.lastName;    // Imoh
    obj.greet();     // Will alert, Hello everyone, i'm William 

    You may wonder why we used this in our code instead of obj.firstName. Well, this serves like a pronoun that refers to the parent object in which it is called. We will learn more about this in the next lesson.

    Using Object Constructor

    This involves creating an object instance using the new keyword:

    const house     = new Object();
    
    house.color     = 'red';
    house.houseType = 'bungalow';
    house.location  = 'Lagos';

    All we did was create an object instance, assign it to the variable house, then edit its properties and their individual values.

    Also, a function constructor can be used to make the creation of objects or multiple similar objects easier.

    function University(name, location, size) {
      this.name     = name;
      this.location = location;
      this.size     = size;
    }
    
    const theUniversity = new University('caritas', 'enugu', 20000);
    
    theUniversity.name;     // caritas
    theUniversity.size;     // 20000

    Here, a function was constructed with arguments. Notice that the function name is in Capital case which is a convention for constructor functions. The function is passed arguments, these arguments are the primary values of the object’s properties as defined by this.property.

    A new Object is constructed with the new keyword calling the function and passing it parameters matching the parameters defined in the function. Run this;

    console.log(theUniversity)

    and we get this:

    University {
      name:     'caritas',
      location: 'enugu',
      size:     '20000'
    }

    Accessing an Object

    The properties of Objects can be accessed in two ways using:

    Dot notation

    In the dot notation, the value of an object’s property is accessed as thus:

    const objectName = {
      objectProp: 'my super duper value',
    };
    
    objectName.objectProp; // my super duper value

    Square Bracket Notation

    The square bracket notation is an alternative to the dot notation and is written as such:

    const objectName = {
      objectProp: 'super cool yo!',
    };
    
    objectName['objectProp']; // super cool yo!

    In cases where the property name starts with a special character like a dash or a number, or you'd like to use a variable as the key, the square bracket notation can only be used.

    Since the beginning of modern programming languages, using the for-loop to traverse data sets has been priceless, in Objects, there are a number of ways to traverse or iterate through object properties and they are:

    • for…in loop: This is the most common one and is used to iterate over each enumerable property of the object and its prototype chain.
    • Object.keys(o): The object.keys(o) method is used to traverse an object o and returns an array containing all enumerable property names.
    • Object.getOwnPropertyNames(o): A lesser known method, it iterates over an object o and returns an array of all natural property names of the object, enumerable or not.

    Arrays

    Arrays are a special kind of JavaScript Object.

    const a = [];
    
    typeof a; // returns object

    Arrays are data structures that take in multiple variables, singularly say, 300 chickens! Unlike the Object data structure, they do not have the key: value pairs but singular data in them. How do you identify an array? It looks like this:

    const myArray = ['hi', 'i', 'am', 'chief'];

    The data in arrays are enclosed by square brackets and can contain as many variables as you want as well as other arrays. Arrays are objects and can contain objects too.

    const myArray = [
      { name: 'chris', location: 'racoon city' }
    ];

    Creating Arrays

    Arrays are created in two ways:

    Array Literal

    Using the array literal is the most common way of creating arrays. Array values are enclosed in square brackets.

    const arr = [];
    const bar = ['drinks', 'music', 'dance', 'beer', 'more beer'];
    
    // an array of objects
    const coocoo = [
      { key:  'thing', key2: 2 },
      { key3: 'otherThing' }, 
      { key4: 'my string' }
    ];

    Array Constructor

    This is another way of creating arrays using the new keyword, it is considered bad practice by many as it could bring about unforeseen behaviors in your script. The array values are passed as arguments to the constructor.

    const bar = new Array('beer', 'music', 'beer', 'more beer');
    
    console.log(bar);  // ['beer', 'music', 'beer', 'more beer']

    In cases like:

    const fig = new Array(10, 20);
    
    console.log(fig);   // [10, 20]

    What if a figure is removed? We have:

    const fig = new Array(10);
    
    console.log(fig);   // returns 10 empty arrays!

    We get 10 empty arrays! Using the array literal [] is always advised as it's more readable, requires less writing, and behaves how we'd expect.

    Accessing Arrays

    Unlike objects, array values are accessed using their index position starting from zero (arrays are zero-indexed). Objects use lettered indexes while arrays use numbered indexes. Arrays are accessed like this:

    const myArr = [10, 40, 50, 70, 20, 2, 100];
    
    myArr[0] // 10
    myArr[3] // 70
    myArr[7] // 100

    Trying to use lettered indexes on an array such as arr.firstNumber will throw an error message.

    Array Methods

    Just like Objects, arrays also have methods which can be used to manipulate them. These methods are built-in or can be constructed. There are several array methods and they can be found here.

    const fig = [2, 5, 10, 30, 20];
    
    arr.length;   // returns the length of the array = 5

    Iterating over an array is quite seamless using the for-loop. Using the above example:

    const fig = [2, 5, 10, 30, 20];
    
    for (let i = 0; i < fig.length; i++) {
      console.log(fig[i]);
    }
    
    // 2
    // 5
    // 10
    // 30
    // 20

    Other array methods include:

    • pop(): removes the last element from an array and returns that element
    • slice(): returns a shallow copy of a portion of an array into a new array
    • shift(): removes the first element from an array and returns that element
    • unshift(): adds one or more elements to the beginning of an array and returns the new length of the array

    When looking to work with arrays, always look to the built-in methods. You'll usually find what you need there.

    Array methods can be grouped into mutator methods, accessor methods and iteration methods. Mutator methods are those methods that actually alter or modifies the array, for example, the array.push() method adds a specified element to an array and returns the modified array.

    const fig = [10, 20, 30, 40];
    
    fig.push(80);
    console.log(fig);    // [10, 20, 30, 40, 80]

    Accessor methods are those that do not alter the array but rather create an image of the array based on the effect of the method, for example array.slice()

    const fig = [10, 20, 30, 40];
    const b   = fig.slice(1);
    
    console.log(b);      // [20, 30, 40]
    console.log(fig);    // [10, 20, 30, 40]

    Iteration methods as the name implies are used to iterate over an array while sampling the length of the array and evaluating each element of the array with a callback function as defined in the method. This includes .forEach() and .map() methods.

    const fig = [10, 20, 30, 40];
    
    const newFig = fig.map(function(val) { //calls a function on each element of the array
      return val + 10;
    });
    
    console.log(newFig) // [20,30,40,50]

    Lastly, arrays have properties which include the length and arrays can have objects created in them.

    Conclusion

    We clearly understand what objects are, how they can be created, what makes them special by handling properties and values. Objects have various applications ranging from database architecture to server responses.

    An array, on the other hand, is a collection of data more like in a container. Its uses are also vast. Feel free to play around with the numerous methods available to both arrays and objects and always remember that they usually go hand in hand. Many times you'll be creating an array of objects; for example, you may have a list of user objects.

    Chris Nwamba

    102 posts

    JavaScript Preacher. Building the web with the JS community.