Objects
Objects are collections of properties and actions that can be used in code and have more complex behaviors. In JavaScript, almost everything is an object, but there are a few exceptions, like the primitive data types, so an object is considered a data type by itself.
Objects are declared as a collection of key-value pairs separated by
:and surrounded by the{}characters, calling this structure a block
let a = { // Declaration of an object
name: "Joe"
};
let b = {id: 1, name: "Sara"}; // Can also be declared in a single lineThere are also some special built-in objects and types. Here is an example:
[1, 2, 3] // Array, an ordered list-like collection with special behavior
function f() {} // Function, reusable sets of statements
2024-06-21T17:55:33.711Z // Date, for storing date and time value
Math..random() // Built-in Object with mathemathical functionsAttributes and Methods
These are the main characteristics that define objects in JavaScript.
Attributes are named properties associated with an object that store data or states related to that object. They can be understood as variables in the scope of an object. Their values are accessed with the name of the object and the Dot Operator. For example:
let user = {
name: "Joe",
age: 30
};
console.log(user.age); // Access the value of the attribute age, prints 30The Dot Operator also lets us modify and add attributes to an object. For removing a property from an object, we use the
deleteoperator. For example:
let user = { name: "Joe", age: 30};
console.log(user); // Original object
user.newAttribute = "new"
console.log(user); // Object with new attribute
user.age = 40
console.log(user); // Object with modified attribute
delete user.name;
console.log(user); // Object with deleted attributeWe can also use bracket notation instead of the Dot Operator to access the properties of an object. This lets us also pass variables as keys for accessing values. For example:
let user = { name: "Joe", age: 30};
console.log(user['name']); // Key-value notation like in arrays
console.log(user[name]); // The ' are mandatory or it will return undefined
let myAge = 'age'
console.log(user[myAge]); // Passing variable as key
user[myAge] = 70; //Assigning new value
console.log(user[myAge]); // Modified attributeMethods are properties whose value is a function. They define actions or behaviors for the object that, when called, can operate on its attributes. They are also accessed with the name of the object, the Dot Operator, and the
()characters like functions. For example:
let user = {
name: "Ana",
hello: function() {
console.log("Hello");
}
};
user.hello(); // This accesses the method hi and executes it, prints "Hello"
let user2 = {
name: "Ana",
hi(){ // Define the method directly instead of assigning a function
console.log("Hi");
}
};
user2.hi(); // This works the sameIn the same way that attributes, the Dot Operator also lets us modify and add methods to an object. For example:
let user = { name: "Ana", hi: function() { console.log("Hello"); } };
user.hi(); // Using original method
user.newMethod = () => console.log("Greetings");
user.newMethod() // Using new method
user.hi = () => console.log("Hi");
user.hi() // Using modified methodObjects can also be nested, and in the same way, we can use the Dot operator and the key-value notation multiple times, or even combine them. For example:
let obj = { // Object that contains other objects
data:{
name: "Joe"
}
};
console.log(obj.data.name); // Multiple Dot operator
console.log(obj['data']['name']); // Multiple key-value
console.log(obj.data['name']); // Combining themObjects are modified permanently even when they are passed to a function
let car = {
'Fuel Type' : 'Diesel',
terrain : 'Land'
};
let changeFuel = obj => {obj['Fuel Type'] = 'Oil';}
changeFuel(car); // This function modify the object
console.log(car) // Modified objectWe can iterate through the attributes of an object with loops
let spaceship = {
crew: {
captain: {
name: 'Lily',
degree: 'Computer Engineering',
cheerTeam() { console.log('You got this!') }
},
'chief officer': {
name: 'Dan',
degree: 'Aerospace Engineering',
agree() { console.log('I agree, captain!') }
},
}
};
for (let crewMember in spaceship.crew) { // For iteration with data of an object
console.log(`${crewMember}: ${spaceship.crew[crewMember].name}`);
}All JavaScript built-in objects have their own attributes and methods. For example:
let text = "hello";
console.log(text.length); // Attribute length, prints 5
console.log(text.toUpperCase()); // Method toUpperCase, prints "HELLO"
let numbers = [1, 2, 3];
console.log(numbers.length); // Attribute length (returns 3)
numbers.push(4); // Method push(), adds 4 to array
console.log(numbers); // Prints [1, 2, 3, 4]
let car = {model:'Jeep',year:'2000',fuel:'oil'}
console.log(Object.keys(car)); // Built-in methods for objectFactory Functions and Destructured Assignment
Factory Functions are used to create objects easily and quickly. They receive as parameters all attributes of the object, set them, and return a new object to be used
const carFactory = (model, year, fuel) => {
return {
model: model,
year, //If the parameter name is the same as the attribute, this works too
fuel,
presume() {
console.log(`This car is a ${this.model} from year ${this.year} and use ${this.fuel}`)
}
}
}
car1 = carFactory('Bugatti',2010,'diesel');
car1.presume();
car1 = carFactory('Mercedes',2015,'oil');
car1.presume();When we want to extract key-value pairs from objects and save them as variables, we can use a notation called Destructured Assignment, which lets us do it quickly. This works to assign multiple properties, nestes properties, and event methods
const car = {model:'Jeep',year:'2000',fuel:'oil',color:{base:'blue',tone:'dark'}}
const { model } = car; // We select a property and assign the entire object
console.log(model); // Prints 'Mercedes'
const { year, fuel } = car; // Done with multiple properties
console.log(year); // Prints '2000'
console.log(fuel); // Prints 'oil'
const { base, tone } = car.color; // Done with nested properties
console.log(base); // Prints 'blue'
console.log(tone); // Prints 'dark'The this Keyword
The this keyword is used to point to the attributes and methods that are defined in an object. This makes the execution flow to search for the variables/functions needed in the defined attributes and methods of the object, instead of the ones defined or passed from the outside.
We use the this keyword to specify that the variables are attributes from the object
let user = {
name: "Joe",
hi: function(name) { // Recieve the external name
console.log(this.name); // Use the name attribute from the object
}
};
let name = "Sara";
user.hi(name); // We are passing name "Sara", but this prints "Joe"If we don´t use the
thiskeyword, the attributes are not recognized in other parts of the object, and this will cause an error
const user = {
name: 'Joe',
age: 40,
hi(){
console.log(age); // Attributes are not recognize unless specified
}
};
user.hi(); // This will cause a reference errorThe
thiskeyword does not work for arrow functions as they use their own scope and not the object scope. Trying to access an attribute from the object will just returnundefined
const user = {
name: 'Joe',
age: 40,
hi: () => {
console.log(this.age); // Attributes are not recognize unless specified
}
};
user.hi(); // This will print undefinedGetters and Setters
Getters are methods that get and return the internal properties of an object. They can be used to retrieve properties of an object safely, doing validations in the data stored
const person = {
_firstName: 'John',
_lastName: 'Doe',
get fullName() { // We use the keyword get to indicate a getter function
if (this._firstName && this._lastName){ // We can do validations on getters
return `${this._firstName} ${this._lastName}`;
} else {
return 'Missing a first name or a last name.';
}
}
}
person.fullName; // It's called as an attribute rather than as a methodSetters are methods that reassign values of existing properties within an object. They can be used to modify properties of an object safely, doing validations in the data to be inserted
const person = {
_age: 37,
set age(newAge){ // We use the keyword set to indicate a setter function
if (typeof newAge === 'number'){ // We can do validations on setters
this._age = newAge;
} else {
console.log('You must assign a number to age');
}
}
};
person.age = 70; // It's called as an attribute rather than as a method
console.log(person._age); // The object with the modified valueLast updated