Object

:dart: Learning Objectives

By the end of this lesson, you will be able to:

• Understand what JavaScript objects are and why we use them
• Create your own objects with properties and methods
• Access object properties using dot notation
• Recognize objects in everyday JavaScript code
• Group related data together using objects

:information_source: Info Object Definition An object is like a container that holds related information together. Think of it as a box with labeled compartments - each compartment (property) has a name and can store different things (values).

• Groups related data - Keeps information that belongs together in one place
• Uses key-value pairs - Each piece of data has a name (key) and a value
• Stores any data type - Can hold strings, numbers, arrays, booleans, and even functions
• Foundation of JavaScript - Almost everything in JavaScript is an object!

Real Life Example

An example of object in real life:

var studentCard = {
    name: ["John", "Doe"],
    image: "image.png",
    program: "D",
    intake: 2021
};

This is a student card. The name, image, program and intake year are called properties. Every student card has these properties.

Every student has different values but will still have the same properties. Each student will have their unique name, image, specific program and intake year.

JavaScript Objects

JavaScript objects are variables that contain multiple data values.

Each property has a value. The values can be of any data type such as Strings, Numbers, Boolean and even Functions (methods).

var myObject = {
    fruits: ["Banana", "Apple", "Orange"],
    numbers: 360,
    string: "Hello World",
    boolean: true,
    method: () => {
        return "This is a function.";
    }
};

Accessing Object Properties and Methods

After the object is created, we can access the properties and methods of the object with simple syntax:

Object Syntax

The general syntax that made up an object:

var objectName = {
    name1: value1,
    name2: value2,
    name3: () => {
        // function for object to do something
    }
};

Important rules:

• name and value separated by a colon (:)
• name:value pairs separated by a comma (,)
• All the name:value pairs are enclosed inside a pair of curly brackets

Objects in JavaScript

Going through the above examples, you are probably wondering about the object dot notation such as myObject.fruits because it looks very familiar.

That's because every time you use DOM or any other methods, you are actually working with JavaScript objects.

Document Object Methods

Using methods available on the document object:

var myDiv = document.createElement('div');

Element Object Properties

Accessing properties available on p1 object:

var p1 = document.querySelector('p');
p1.textContent = "This is a paragraph.";

Console Object Methods

Using methods available on the console object:

console.log("Hello World");

Math Object Methods

Using methods available on the Math object:

Math.random();

Summary

Objects are fundamental to JavaScript programming:

Objects allow you to group related data and functions together, making your code more organized and easier to work with.

Key Concepts Summary

• Objects are containers that hold multiple related values in name-value pairs called properties
• Object properties can contain any data type including strings, numbers, booleans, arrays, and functions
• Properties are accessed using dot notation (object.property)
• Methods are functions that belong to an object and are called with parentheses
• Object syntax uses curly braces with colon-separated name-value pairs
• Many built-in JavaScript features like DOM, console, and Math are actually objects
• Objects help organize code by grouping related data and functionality together