How to use object diagrams as problem solving tools
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]];
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 arrayArrays 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 DiagramCode example
The matrixArray object diagram makes it easier to manipulate the matrixArray elements:
Code explanation
- Lines 1: We represent the
matrixArrayas 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"],},];
We can represent this array of objects diagrammatically in the following way:
Contact list object diagramAn object diagram representation of JSON objects is as follows:
JSON object diagram representationWith 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.
