3 Keys Introduction To Objects Arrays

If you are a web developer, and I assume you are since you landed here reading this, you know that one of the most used programming languages is JavaScript. The key to creating complex and efficient programs in JavaScript is the ability to work with objects and arrays.

Arrays

An array is a collection of values, similar to a list or an array in other programming languages. You can think of an array as a box with many compartments, where each compartment holds a value. I wrote a more elaborate article about it here. In JavaScript, you can create an array using square brackets and separate each value with a comma. For example, let’s say we want to create an array of letters:

let letters = [A, B, C, D];

In this example, we’ve created an array called “letters” that contains four values. We can access each value in the array using its index, which is the position of the value in the array. Remember that in JavaScript, arrays are zero-indexed, which means the first value is at index 0, the second value is at index 1, and it goes on. For example, to access the first value in the “letters” array, we would use the following code:

console.log(letters[0]); 

// Output: A

Objects.

Objects are collections of key-value pairs, also known as properties. An object is like a dictionary, where each key represents a word and the value represents its definition. In JavaScript, you can create an object using curly braces { } and separating each key-value pair with a comma. For example, let’s say we want to create an object that represents a person:

let person = {
  name: 'Luc', //this is a string
  age: 45, //this is a number
  gender: 'male' //this is a string
};

In this example, we’ve created an object called “person” that has three properties: “name”, “age”, and “gender”. We can access each property in the object using dot notation. For example, to access the “name” property, we would use the following code:

console.log(person.name); // Output: 'Luc'

Arrays and objects can also be combined to create more complex data structures. For example, let’s say we want to create an array of users, where each user is an object with a “first” and “last” name:

let users = [
  { first: 'Luc', last: 'Constantin' },
  { first: 'John', last: 'Macintosh' },
];

In this example, we’ve created an array called “users” that contains two objects, each representing a user. We can access the “first” property of the second user using the following code:

console.log(users[1].first); // Output: 'John'
//Arrays are zero-indexed, which means the first value starts at index 0(zero)

Console.table()

For an improved way to debug, we can use the console.table() method to display arrays and objects in a tabular format, which is useful for visualizing complex data structures. For example, to display the “users” array in a table, we would use the following code:

  let user = {
      first: 'Luc',
      last: 'Constantin',
      occupation: 'web developer',
      loggedin: true,
      hobbies: ['hiking', 'running', 'tennis']
        } 
     document.getElementById('title').innerText = user['first']
     console.table(user)

the result in the console will be as seen in the

If you want to know more about console.table() see this article.

Let’s briefly recap:

• arrays and objects are fundamental data structures in JavaScript they are essential for creating complex and efficient programs
• console.table() is great way method to display arrays and objects in a tabular format

As a final thought I believe that by understanding how to work with arrays and objects, you can unlock the full potential of JavaScript and create amazing web applications, like shopping lists, to-do lists, and much more.

Is this helpful for you? Why not subscribe to the monthly newsletter and receive an email with all the articles I write about coding, and dev things, mainly JavaScript?

Subscribe to Newsletter