JavaScript Objects

• Objects in JavaScript consist of multiple pieces of related data in a structured format, acting as a container.

Key Components of an Object

• Attributes (Properties): Describe the characteristics of an object.
  • A "Car" object can have attributes like color, brand, model, and speed.
• Behaviors (Methods): Define actions that an object can perform.
  • A "Car" object can have behaviors like start(), stop(), and accelerate().

Real-Life Examples of Objects

• Car:
  • A car has a brand such as "Dodge".
  • A car has a color, such as "Red".
  • A car has a speed, such as 120 km/h.
  • A car can start the engine, accelerate, and stop.
• Person:
  • A person has a name such as "Ahmed".
  • A person has an age, such as 25 years old.
  • A person has a job, such as "Teacher".
  • A person can perform actions like speaking or walking.

Representing a Person Object in JavaScript

• Created using const keyword:
  • The object "person" has properties like name ("John"), age (50), and job ("Programmer").
  • It also has a method called "speaking" that returns "I am talking".

Objects vs Simple Variables

• Variables in JavaScript hold a single value.
  • Example of variables: name = "John", age = 25, job = "Programmer"
• Managing data separately becomes hard with many people, so objects are used instead.
• Objects group everything together 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

• Dot notation is used to call object methods: objectName.methodName()

Sample Car Object and Property Access

• A "car" object is defined with properties like brand, model, year, and a start function.
  • The brand can be accessed through console.log(car.brand), outputting "Dodge".
  • The model can be accessed through console.log(car["model"]), outputting "Challenger".
  • The start function can be called using car.start(), outputting "Car started!".

Extending Objects in JavaScript

• Objects are dynamic and can be extended and updated easily.
  • New properties can be added at any time.
  • Existing properties can be easily modified.
  • Properties can be removed when needed.
• An object's properties can be updated by assigning a new value.
  • For example, car.year = 2025; would update the year property of the car object.
• If a property does not exist, adding it will dynamically add it:
  • For example, car.color = "Red"; would add a color property to the car object
• The "delete" keyword is used to remove properties.
  • For example, delete car.color; would remove the color property. console.log(car.color) would then output "undefined".

Built-in JavaScript Objects

• String: An object only if created using the new keyword.
• Number: An object only if created using the new keyword.
• Boolean: An object only if created using the new keyword.
• Object: Defined by the user.
• Date: Contains date and time components.
• Array: Stores indexed items of data.
• RegExp: Describes a regular expression pattern.
• Math: Provides math properties and methods.
• Error: Supplies details of an error.
• 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.

JavaScript Prototype Inheritance

• All built-in objects inherit from Object.prototype.

Arrays

• An Array is a built-in JavaScript object that stores multiple values in a single variable.
• The easiest way to create an Javascript Array is using array literal
• Different data types (numbers, strings, objects, etc.) can be stored.
• Square brackets [] are used for declaration.
• Elements are automatically indexed starting from 0 (zero-based index).
  • For example: let colors = ["Red", "Blue", "Yellow"];
• An array can be also created and the elements can be specified afterwards:
  • For example: const cars = []; cars[0]= "Saab"; cars[1]= "Volvo"; cars[2]= "BMW";
• An array can be also created using the Javascript keyword "new":
  • For example: const cars = new Array("Saab", "Volvo", "BMW");
• Using new Array(n) with a single number creates an empty array with n slots, instead of storing the number.
  • JavaScript interprets the single number passed to the Array constructor as the length of the array, resulting in empty, uninitialized slots.

Loops

• Loops efficiently fill an array, even for large datasets.
• Use a for loop to efficiently populate an array.
  • Example:

const numbers = [];
for (let i = 0; i < 10; i++) {
numbers[i] = i * 2;
}
console.log(numbers);

• A for loop with length property can be also used:

const numbers = [10, 20, 30, 40,50];
for (let i = 0; i < numbers.length; i++) {
console.log('Index', i, numbers[i]);
}

JavaScript Date Object

• The Javascript Date object represents date, time and timezone information
• Date objects have methods for getting the date and time components.
• A new Date object is created using the new keyword:
  • const currentDate = new Date();
• By default, it captures the system's local time without ensuring accuracy to UTC or GMT.

Methods extracting date

• getFullYear(): Year as four digits (yyyy)
• getMonth(): Month as index number (0-11)
• getDate(): Day as number (1-31)
• getDay(): Weekday as index number (0-6)

Methods extracting time

• getHours(): Hour as number (0-23)
• getMinutes(): Minute as number (0-59)
• getSeconds(): Second as number (0-59)
• getMilliseconds(): Millisecond as number (0-999)