22. Objects and arrays in Javascript

Objects and arrays in JavaScript are fundamental for manipulating data and building dynamic web applications. They are data structures that allow you to store multiple values ​​in a single variable.

Objects in JavaScript

In JavaScript, an object is a collection of properties where each property is made up of a name (or 'key') and a value. The value of a property can be a function, in which case the property is known as a method. Object in JavaScript can be created using object literal syntax, which is the simplest and most common.

var object = {
    key1: "value1",
    key2: "value2",
    key3: function() {
        // method code
    }
};

Objects in JavaScript can be manipulated in many ways. You can access, add, modify, and remove properties of an object. To access a property of an object, you can use dot notation or bracket notation.

var value1 = object.key1; // dot notation
var value2 = object["key2"]; // bracket notation

Arrays in JavaScript

An array in JavaScript is a special object that is used to store multiple values ​​in a single variable. Each value (also called an element) in an array has a position, known as an index, which is used to access it. The index of an array starts at 0, which means the first element is at index 0, the second element is at index 1, and so on.

var array = ["element1", "element2", "element3"];

Arrays in JavaScript can also be manipulated in several ways. You can access, add, modify and remove elements from an array. To access an element of an array, you use square bracket notation with the element index.

var element1 = array[0];

To add an element to an array, you can use the push method. To remove an element from an array, you can use the pop (removes the last element), shift (removes the first element) or splice (removes one or more elements from a specific position) methods.

array.push("element4"); // add to end
array.pop(); // remove from end
array.shift(); // remove from beginning
array.splice(1, 2); // remove 1, 2 elements from index

Conclusion

Objects and arrays in JavaScript are powerful tools for manipulating data. They allow you to store and manipulate multiple values ​​in a single variable, which is essential for building dynamic web applications. Learning to work with objects and arrays is a fundamental step towards becoming a proficient front-end developer in JavaScript.

We hope this chapter has provided you with a solid understanding of the basic concepts of objects and arrays in JavaScript. In the next chapter, we will explore advanced concepts of objects and arrays, including manipulating nested objects and multidimensional arrays.

Next page of the Free Ebook:

73DOM and HTML element manipulation with Javascript

3 minutes