JavaScript Basics
JavaScript Objects
In real life, objects are things like: houses, cars, people, animals, or any other subjects.
Object Properties
car has properties like weight and color:
car.name = Fiat, car.model = 500, car.weight = 850kg, car.color = white.
Object Methods
car has methods like start and stop:
car.start(), car.drive(), car.brake(), car.stop().
JavaScript Variables
JavaScript variables are containers for data values.
let car = "Fiat";
JavaScript Objects
Objects are variables too. But objects can contain many values.
const car = {type:"Fiat", model:"500", color:"white"};
How to Define a JavaScript Object
Using an Object Literal
Using the new Keyword
Using an Object Constructor
object literal is a list of name:value pairs inside curly braces {}.
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
// Create an Object
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
// Create an Object
const person = {};
// Add Properties
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
Using the new Keyword
This example create a new JavaScript object using new Object(), and then adds 4 properties:
Example
// Create an Object
const person = new Object();
// Add Properties
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
Accessing Object Properties
You can access object properties in two ways:
objectName.propertyName
objectName["propertyName"]
JavaScript Object Methods
Methods are actions that can be performed on objects.
Methods are function definitions stored as property values.
onst person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
Objects are containers for Properties and Methods.
Properties are named Values.
Methods are Functions stored as Properties.
Properties can be primitive values, functions, or even other objects.
JavaScript defines 7 types of primitive data types:
string
number
boolean
null
undefined
symbol
bigint
JavaScript Objects are Mutable
Objects are mutable: They are addressed by reference, not by value.
//Create an Object
const person = {
firstName:"John",
lastName:"Doe",
age:50, eyeColor:"blue"
}
// Create a copy
const x = person;
// Change Age in both
x.age = 10;
An Object is an Unordered Collection of Properties
Properties are the most important part of JavaScript objects.
Properties can be changed, added, deleted, and some are read only.
Accessing JavaScript Properties
The syntax for accessing the property of an object is:
// objectName.property
let age = person.age;
Adding New Properties
You can add new properties to an existing object by simply giving it a value:
Example
person.nationality = "English";
Deleting Properties
The delete keyword deletes a property from an object:
Example
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
delete person.age;
Nested Objects
Property values in an object can be other objects:
Example
myObj = {
name:"John",
age:30,
myCars: {
car1:"Ford",
car2:"BMW",
car3:"Fiat"
}
}
You can access nested objects using the dot notation or the bracket notation:
Examples
myObj.myCars.car2;
myObj.myCars["car2"];
Object methods are actions that can be performed on objects.
A method is a function definition stored as a property value.
const person = {
firstName: "John",
lastName: "Doe",
id: 5566,
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
Accessing Object Methods
You access an object method with the following syntax:
objectName.methodName()
Accessing Object Methods
You access an object method with the following syntax:
objectName.methodName()
Adding a Method to an Object
Adding a new method to an object is easy:
Example
person.name = function () {
return this.firstName + " " + this.lastName;
};
Using JavaScript Methods
This example uses the JavaScript toUpperCase() method to convert a text to uppercase:
Example
person.name = function () {
return (this.firstName + " " + this.lastName).toUpperCase();
};
How to Display JavaScript Objects?
Displaying a JavaScript object will output [object Object].
Example
// Create an Object
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML = person;
How to Display JavaScript Objects?
Displaying a JavaScript object will output [object Object].
Example
// Create an Object
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML = person;
Displaying Properties in a Loop
The properties of an object can be collected in a loop:
Example
// Create an Object
const person = {
name: "John",
age: 30,
city: "New York"
};
// Build a Text
let text = "";
for (let x in person) {
text += person[x] + " ";
};
// Display the Text
document.getElementById("demo").innerHTML = text;
Using Object.values()
Object.values() creates an array from the property values:
// Create an Object
const person = {
name: "John",
age: 30,
city: "New York"
};
// Create an Array
const myArray = Object.values(person);
// Display the Array
document.getElementById("demo").innerHTML = myArray;
Using Object.entries()
Object.entries() makes it simple to use objects in loops:
Example
const fruits = {Bananas:300, Oranges:200, Apples:500};
let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
text += fruit + ": " + value + "<br>";
}
Using JSON.stringify()
JavaScript objects can be converted to a string with JSON method JSON.stringify().
JSON.stringify() is included in JavaScript and supported in all major browsers.
Note:
The result will be a string written in JSON notation:
{"name":"John","age":50,"city":"New York"}
Example
// Create an Object
const person = {
name: "John",
age: 30,
city: "New York"
};
// Stringify Object
let myString = JSON.stringify(person);
// Display String
document.getElementById("demo").innerHTML = myString;
Comments
Post a Comment