JavaScript Arrays and Objects

Working with data is a big part of programming, and in JavaScript, arrays and objects are two key ways to store and organize information. Let’s break them down step by step so you can start using them in your code.

What Are Arrays?

Arrays are like lists that hold multiple values. Each item in an array has a position, called an index, starting from 0. They’re great for when you have a collection of similar items.

If you’re new to JavaScript, you might want to review JavaScript variables first, since arrays are often stored in variables.

Creating Arrays

You can create an array using square brackets []. Here’s how:

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits); // Outputs: ['apple', 'banana', 'orange']

You can also use the Array constructor, but the bracket way is more common:

let numbers = new Array(1, 2, 3, 4);
console.log(numbers); // Outputs: [1, 2, 3, 4]

Accessing Array Elements

To get a specific item, use its index in brackets:

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits[0]); // Outputs: apple
console.log(fruits[2]); // Outputs: orange

Remember, arrays start at index 0, so the first item is fruits[0].

Common Array Methods

Arrays come with built-in methods to make working with them easier. Here are some you should know:

Adding and Removing Items

• push() adds items to the end:

let fruits = ['apple', 'banana'];
fruits.push('orange');
console.log(fruits); // Outputs: ['apple', 'banana', 'orange']

• pop() removes the last item:

let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop();
console.log(lastFruit); // Outputs: orange
console.log(fruits); // Outputs: ['apple', 'banana']

• unshift() adds to the beginning:

let fruits = ['apple', 'banana'];
fruits.unshift('grape');
console.log(fruits); // Outputs: ['grape', 'apple', 'banana']

• shift() removes from the beginning:

let fruits = ['grape', 'apple', 'banana'];
let firstFruit = fruits.shift();
console.log(firstFruit); // Outputs: grape
console.log(fruits); // Outputs: ['apple', 'banana']

For a full list of array methods, check out the MDN Array reference.

What Are Objects?

Objects are collections of key-value pairs. They’re perfect for representing real-world things with multiple properties. Think of an object like a person’s profile with name, age, and email.

Creating Objects

Use curly braces {} to create an object:

let person = {
  name: 'John',
  age: 30,
  email: '[email protected]'
};
console.log(person); // Outputs: {name: 'John', age: 30, email: '[email protected]'}

Accessing Object Properties

You can access properties using dot notation or bracket notation:

let person = {
  name: 'John',
  age: 30,
  email: '[email protected]'
};

console.log(person.name); // Outputs: John
console.log(person['age']); // Outputs: 30

Bracket notation is useful when the property name is in a variable:

let property = 'email';
console.log(person[property]); // Outputs: [email protected]

Modifying Objects

You can change property values or add new ones:

let person = {
  name: 'John',
  age: 30
};

// Change existing property
person.age = 31;

// Add new property
person.city = 'New York';

console.log(person); // Outputs: {name: 'John', age: 31, city: 'New York'}

Object Methods

Objects can have functions as values, called methods:

let person = {
  name: 'John',
  age: 30,
  greet: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

person.greet(); // Outputs: Hello, my name is John

The this keyword refers to the object itself. Learn more about this in advanced JavaScript guides.

When to Use Arrays vs Objects

• Use arrays for lists of similar items where order matters
• Use objects for collections of different properties that describe something

For example, a shopping cart might be an array of product objects:

let cart = [
  { name: 'Apple', price: 1.00, quantity: 2 },
  { name: 'Banana', price: 0.50, quantity: 3 }
];

Arrays and objects are fundamental to JavaScript, so practice using them in your code. If you want to learn about JavaScript functions, you can combine them with arrays and objects to create powerful programs.

For more in-depth information, the MDN JavaScript Guide is an excellent resource.