
OMG! Objects
What are objects
Objects are a data type. JavaScript follows an ‘object based paradigm’. Which means in JS an object is a stand-alone entity (object) with properties. Properties come in key: value pairs. They are like variables. In the sense that variables reference some value in memory. The same way, in objects the property key: value pairs are akin to variables.
Why?
Think about it… In the real world most things are “objects”. For example your car, the food you eat, the bed you sleep on etc. So the objects in your real life have properties (example red car, thin mattress) and there is some functionality associated with the objects. The car has “driving” functionality and the “mattress” has the “sleep” functionality.
Isn’t the whole point of JS to mimic real life stuff (objects) so that you can make apps example Uber
Properties
Just like real life objects have characteristics example a “red” car. The same way in JavaScript we can create objects that have certain characteristics. Except in JS these are called “properties” and not characteristics.
Objects have properties. A property is a “key” : “value” pair. This association may be familiar to you from attributes and values in HTML. Example a div class=”myDiv”. The values can be of any data type example strings, numbers, booleans, an array.
Example:
name: “Rocko”
Method
A method refers to a function of an object. It is a the value of a property in an object. Think of a method as an “action” of an object. Example the method/action of a car object is driving.
Example:
like: function(){
console.log(“I love treaties!”)
}
How?
Object Literal Syntax
const employee = {
firstName : ‘Jane’,
lastName : ‘Doe’
};
The “new” keyword with an Object constructor()
const employee = new Object();
employee.firstName = ‘Jane’;
employee.lastName = ‘Doe’
The “new” keyword with an constructor function
function employee(firstName, lastName){
this.name = firstName;
this.surname = lastName;
}
let employee1 = new employee (‘Jane’, ‘Doe’);
Using the Object.create() method
let employee = {
position: “developer”,
hourly: 45,
language: “JavaScript”,
snack: “”,
details(){
console.log(this.position + ” likes ” + this.snack)
}
};
const projectManager = Object.create(employee);projectManager.position = “Project manager”;
projectManager.snack = “Chocolate”;
projectManager.details();
Using Objects
Accsessing an object’s properties
An object’s properties can be accessed in 2 ways:
- Dot notation
- Bracket notation
Dot notation
objectName.propertyName
Bracket notation
objectName[propertyName]
Deleting an object’s properties
- Deleting an object’s property with the “delete” keyword
-
delete objectName.propertyName
Modifying an object’s property
- Dot notation
objectName.newProperty = “Hello”;
- Bracket notation
objectName[newProperty] = “Hello”;
Note: You can also change an existing property’s value with the above. Simply re-assign the new value
Looping through an object
for-in loop
The for-in loop is used to iterate through an object’s properties
for (let key in objectNAme) {
console.log(objectName[key]);
}
Try this!
- Use object constructor function to code a function called “aboutMe”
- This function will include the following properties:
- name
- lastName
- likes
- dislikes
- method called “activities” which will alert your likes
- Declare a variable “person” and use the “new” keyword to create a new “aboutMe”. With all the above properties