Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript
algorithm
diagrams

How to use object diagrams as problem solving tools

Emmanuel Demilade Adebayo

Overview

Object diagrams are visual representations of arrays, JSON objects, and the data they contain. Navigating complex objects could be difficult, hence the need for object diagrams.

In the two samples below, object diagrams are used to visualize the data structures and data they hold, simplifying the process of accessing their elements.

const matrixArray = [
    [1, 0, 0, 1],
    [1, 1, 1, 1],
    [0, 1, 0, 1],
    [1, 0, 1, 1]
];
Matrix Array

It is difficult to navigate this matrix and manipulate its individual elements, especially for inexperienced programmers. Object diagrams can be used to deconstruct this seemingly complex array of arrays. It shows how elements are connected to the parent object visually.

Object diagram for a simple 2D arrayObject diagram for a simple 2D array

Arrays are represented in object diagrams as vertical or horizontal rectangular blocks with clear indexing and populated with the appropriate elements, allowing for easy navigation and element manipulation.

This pictorial representation makes it easier to navigate the matrix, referencing elements as needed via indexes.

Array Object DiagramArray Object Diagram

Code example

The matrixArray object diagram makes it easier to manipulate the matrixArray elements:

Console
The matrix array demo

Code explanation

  • Lines 1: We represent the matrixArray as a grid of arrays.
  • Lines 10 and 11: We print the element at specific indexes of arrays that belong to the grid.
  • Lines 14 and 15: We modify the value of the elements at specific indexes of some arrays in the grid.
  • Lines 19 and 20: We print the modifications made to array elements.

The following shows how to represent an array of JSON objects as object diagrams:

const contacts = [
    {
        firstName: "Akira",
        lastName: "Laine",
        number: "0543236543",
        likes: ["Pizza", "Coding", "Brownies"],
    },
    {
        firstName: "Harry",
        lastName: "Potter",
        number: "0994372684",
        likes: ["Hogwarts", "Magic", "Hagrid"],
    },
    {
        firstName: "Sherlock",
        lastName: "Holmes",
        number: "0487345643",
        likes: ["Cases", "Bees", "Violin"],
    },
];
contact list

We can represent this array of objects diagrammatically in the following way:

Contact list object diagramContact list object diagram

An object diagram representation of JSON objects is as follows:

JSON object diagram representationJSON object diagram representation

With object diagrams, it is possible to clearly visualize how keys and values of objects are paired and properly mapped. With this clear illustration, solving problems involving complex objects has become much easier.

RELATED TAGS

javascript
algorithm
diagrams

CONTRIBUTOR

Emmanuel Demilade Adebayo
RELATED COURSES

View all Courses

Keep Exploring