JavaScript Objects

Objects in Javascript

• An object stores related data in a structured format
• An object is a container that groups different information together

Key Components of an Object

• Attributes (Properties) describe the characteristics of an object
  • A Car object has attributes like color, brand, model, and speed
• Behaviors (Methods) define actions an object can perform
  • A Car object can have behaviors like start(), stop(), and accelerate()

Real-Life Object Example: A Car

• A car has a brand (e.g., "Dodge")
• A car has a color (e.g., "Red")
• A car has a speed (e.g., 120 km/h)
• A car can start the engine (start())
• A car can accelerate (accelerate())
• A car can stop (stop())

Real-Life Object Example: A Person

• A person has a name (e.g., "Ahmed")
• A person has an age (e.g., 25 years old)
• A person has a job (e.g., "Teacher")
• A person can speak or walk

Representing a Person in Javascript

• Objects are used to represent a person in JavaScript
• Example:

const person = {
name: "John",
age: 50,
job: "Programmer",
speaking: function() {
return "I am talking";
}
};

Objects vs Simple Variables

• A variable in JavaScript holds a single value
• An object groups everything together in one place
• All the related information is in one structured unit

Accessing Object Properties

• Object property values can be referenced in two ways:
  • Dot Notation: objectName.propertyName
  • Bracket Notation: objectName['propertyName']

Calling Object Methods

• Use dot notation to call methods: objectName.methodName()

Extending Objects

• Objects in JavaScript are dynamic
• New properties can be added at any time
• Existing properties can be modified easily
• Properties can be removed when needed
• Update an object’s properties by assigning a new value
• If a property doesn’t exist, it will be added dynamically
• To delete a property use the keyword delete object.property;

Built-in Objects

• Most built-in objects (except Math) have a constructor method
• Use new only with Date and Error
• Avoid using new with String, Number, or Boolean as JavaScript recognizes their types automatically
• All built-in objects inherit from Object.prototype

Create Arrays

• An Array is a built-in JavaScript object that stores multiple values in a single variable
• The easiest way to create a JavaScript Array is using an array literal
• Arrays can store different data types such as numbers, strings, and objects
• Arrays uses square brackets [] for declaration
• Array elements are automatically indexed starting from 0 (zero-based index)
• It is possible to create an array and then populate the array elements
• The JavaScript keyword new may also be used to create an Array and assign values to it

Unexpected Array Behaviour

• Using new Array(n) with a single number creates an empty array with n slots, instead of storing the number
• JavaScript interprets n as the length of the array, not as an element
• This results in n empty, uninitialized slots

Loop Elements

• Loops are used to efficiently fill an array, even for large datasets
• A loop is a programming construct that allows you to repeat a set of instructions multiple times
• A for loop can populate an array
• A for loop with a length property can loop through Arrays

Extract Calendar

• The JavaScript Date object provides methods to extract date components for the year, month name, day of the month, and the day name
• getFullYear() returns the Year as four digits (yyyy)
• getMonth() returns the Month as index number (0-11)
• getDate() returns the Day as number (1-31)
• getDay() returns the Weekday as index number (0-6)

Get Dates

• The JavaScript Date object represents date, time, and timezone information
• Use the keyword new to create a new Date object
• A new Date captures the system’s local time without ensuring accuracy to UTC or GMT

Extract Time

• The JavaScript Date object provides methods to extract each of its time components i.e. hour, minute, second, and the millisecond:
• getHours() returns the Hour as number (0-23)
• getMinutes() returns the Minute as number (0-59)
• getSeconds() returns the Second as number (0-59)
• getMilliseconds() returns the Millisecond as number (0-999)