Introduction to JavaScript Objects and Arrays
Learn About JavaScript Arrays and Objects
When it comes to computer programming, data also has to be maintained and retrieved in a systematically effective manner. One of the key features of JavaScript is its ability to handle various forms of data structures. Out of all these, objects and arrays tend to be the most frequently used structures for data storage. Now both of these are basic parts of the JavaScript language, and are crucial in the development of active and user-friendly websites. In this article we are going to explain two Javascript data structures, their main features and how they are implemented using Javascript.What are JS objects?
In JavaScript, this data structure is called objects and is used for grouping information and data about an entity or a person. They are handy and let you bundle analogous items of data together using key-value pairs. A key which can be also called a property is always a string, while the value characterises all other types of data including numbers, strings, arrays and objects among others.Objects are models that imitate the real world and its aspects. For example, you can utilize an object to refer to a person with values such as: his or her name, age as well as occupation where those form the defining characteristics of the object.
An object in JavaScript is embodied in the form "{" using curly braces, containing key's and value's member separated by comma. Each key appears and is written with a colon. A value follows that colon.
To illustrate, a simple object with a book as its it may include:
Creating a Simple Object
let book = {
title: "To Kill a Mockingbird",
author:"Harper Lee",
year:1960
}; Accessing and Modifying Object Properties
When an object is made, its properties can be accessed with the help of its definitions with dot notation or bracket notation methods.1. Dot Notation : In this case, the property name is written immediately after a period (`.`).
Accessing Object Property with Dot Notation
console.log(book.title); // To Kill a Mockingbird Accessing Object Property with Bracket Notation
console.log(book["author"]); // Author: Harper Lee Modifying an Object Property
book.year=1961; // Changes Year to 1961
console.log(book.year); // Year : 1961 Adding a New Object Property
book.genre="Fiction"; // Creates new Property
console.log(book.genre); // Outputs: Fiction What are JavaScript Arrays?
In JavaScript an Array is used to store ordered collections of values. An array may consist of a number of elements and each of the elements may be either a number, a string, an object or even another array. Arrays are zero-based index collections meaning they begin with a numeric index of 0.Array structures in JavaScript can be represented using square brackets and separated by a comma. For example, one simple representation of an array in JavaScript is:
Creating a Simple Array
let colors = ["red", "blue", "green", "yellow"]; 
Thus, in this example it can clearly be observed that the `colors` array contains elements `red` `blue` `green` and `yellow`, which means this `colors` array comprises four items in it all of which can be accessed through their index positions with the first item `"red"` being zero index, the second item which is `"blue"` being first index and so on.
Accessing and Modifying Array Elements
The position of an item within an array is known as the index and based upon this index the individual elements in an array can be retrieved. However, with this there is a key difference between an array and an object with objects you can use both dot notation and bracket notation but in the case of arrays you will always have to use the bracket.Accessing Array Elements
console.log(colors[0]); // Results in red
console.log(colors[2]); // Answer is green Modifying Array Elements
colors[1] = purple; // New value is purple for the second aspect (blue)
console.log(colors[1]); // The answer is: purple Adding New Array Elements
colors[4] = 'orange'; // When combined with other colors makes orange fifth
console.log(colors[4]); // The answer is: orange Comparing Relation of Objects and Arrays
Both objects and arrays are used to store a chunk of data but the difference is how they retrieve that data or even the organization of data in the first place. An object should be used when you want to store key-value pairs, where the key is a string and the value can be any data type. Objects are great for representing real life objects with their properties and their characteristics. Whereas, arrays are best suited for ordered collection of items where each item is pointed to by a number. Arrays are perfect for storing a list which has items in it such as: numbers, names or even objects.Think about a situation when you are keeping records of a few books. Let's say you want to save information about these books in a key-value manner. For instance, the key could be `title`, `author`, `year`, etc. In that case, you would have to implement an array of objects. In this case, the array would contain the books and each element of the array would be one book. The properties of the array elements would be the details of the book.
Array of Objects Example
let books = [
{
title: "1984",
author: "George Orwell",
year: 1949
},
{
title: "Brave New World",
author: "Aldous Huxley",
year: 1932
}
] Iterating Over Arrays and Objects
In JavaScript, there are arrays and objects and you can access their values by looping them.1. Iterating over Arrays : The most common approach to run through an array is by using `for` statement or `forEach()`. For loop uses the index to run an array element and `forEach`, it automatically runs the entire array.
Looping Through an Array
for (let i = 0; i < colors.length; i++) {
console.log(colors[i]);
} Looping Through an Object
for (let key in book) {
console.log(key + ": " + book[key]);
} 
