JavaScript Object Properties
Properties are crucial components of every JavaScript object.
JavaScript Properties
Properties refer to the values linked with a JavaScript object.
A JavaScript object is a bunch of disordered characteristics.
You can often modify, add, or remove properties, but certain ones can only be read and not altered.
Accessing JavaScript Properties
To get information from an object, use this syntax:
or
or
The statement should result in a property name.
JavaScript for...in Loop
The JavaScript for...in statement goes through the properties of an object in a loop.
Syntax
for (let variable in object) {
}
The piece of code within the for...in loop runs for each property, executing its instructions.
Iterating through the characteristics of an object:
Adding New Properties
You can easily give a value to add new properties to an object that already exists.
Suppose there's already a "person" object, and you can add new characteristics to it.
Deleting Properties
The word delete removes a feature from an object.
or delete person["age"];
The keyword delete removes both the value and the property itself.
After removing, the property cannot be utilized until it is re-added.
The delete operator is meant for removing object properties. It doesn't impact variables or functions.
Avoid using the delete operator on pre-existing properties of JavaScript objects, as doing so may lead to application crashes.
Nested Objects
An object can contain another object's values.
Example
myObj = {
name:"John",
age:30,
cars: {
car1:"Ford",
car2:"BMW",
car3:"Fiat"
}
}
You can get into nested objects using either the dot notation or the bracket notation in HTML.
or:
or:
or:
Nested Arrays and Objects
Objects can contain arrays, and arrays can hold objects.
Example
const myObj =
{
name: "John",
age: 30,
cars: [
{name:"Ford",
models:["Fiesta", "Focus", "Mustang"]},
{name:"BMW", models:["320", "X3", "X5"]},
{name:"Fiat", models:["500", "Panda"]}
]
}
To get into arrays within arrays, employ a for-in loop for each array.
Property Attributes
Every property has a name and a corresponding value.
The value is a characteristic of the property.
Additional characteristics include: countable, adjustable, and editable.
These characteristics determine how we can interact with a property, such as whether we can read or write to it.
In JavaScript, you can read all attributes, but you can only change the value attribute, and that too, only if the property is writable.
ECMAScript 5 provides ways to both retrieve and update property attributes using methods.
Prototype Properties
JavaScript objects get their characteristics from their prototype.
The delete keyword doesn't remove properties inherited from a parent, but deleting a prototype property will impact all objects inherited from that prototype.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Properties</h2>
<p>Access a property with .property:</p>
<p id="demo"></p>
<script>
const person = {
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue"
};
document.getElementById("demo").innerHTML = person.firstname + " is " + person.age + " years old.";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Properties</h2>
<p>Access a property with ["property"]:</p>
<p id="demo"></p>
<script>
const person = {
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue"
};
document.getElementById("demo").innerHTML = person["firstname"] + " is " + person["age"] + " years old.";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Properties</h2>
<p>Looping object property values:</p>
<p id="demo"></p>
<script>
const person = {
fname: "John",
lname: "Doe",
age: 25
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Properties</h2>
<p>Add a new property to an existing object:</p>
<p id="demo"></p>
<script>
const person = {
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue"
};
person.nationality = "English";
document.getElementById("demo").innerHTML = person.firstname + " is " + person.nationality + ".";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Properties</h2>
<p>Deleting object properties.</p>
<p id="demo"></p>
<script>
const person = {
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue"
};
delete person.age;
document.getElementById("demo").innerHTML = person.firstname + " is " + person.age + " years old.";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Properties</h2>
<p>Deleting object properties.</p>
<p id="demo"></p>
<script>
const person = {
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue"
};
delete person["age"];
document.getElementById("demo").innerHTML = person.firstname + " is " + person.age + " years old.";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>
<p id="demo"></p>
<script>
const myObj = {
name: "John",
age: 30,
cars: {
car1: "Ford",
car2: "BMW",
car3: "Fiat"
}
}
document.getElementById("demo").innerHTML = myObj.cars.car2;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>
<p id="demo"></p>
<script>
const myObj = {
name: "John",
age: 30,
cars: {
car1: "Ford",
car2: "BMW",
car3: "Fiat"
}
}
document.getElementById("demo").innerHTML = myObj.cars.car2;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>
<p id="demo"></p>
<script>
const myObj = {
name: "John",
age: 30,
cars: {
car1: "Ford",
car2: "BMW",
car3: "Fiat"
}
}
document.getElementById("demo").innerHTML = myObj["cars"]["car2"];
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>
<p id="demo"></p>
<script>
const myObj = {
name: "John",
age: 30,
cars: {
car1: "Ford",
car2: "BMW",
car3: "Fiat"
}
}
let p1 = "cars";
let p2 = "car2";
document.getElementById("demo").innerHTML = myObj[p1][p2];
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Nested JavaScript Objects and Arrays.</h2>
<p id="demo"></p>
<script>
let x = "";
const myObj = {
name: "John",
age: 30,
cars: [{
name: "Ford",
models: ["Fiesta", "Focus", "Mustang"]
}, {
name: "BMW",
models: ["320", "X3", "X5"]
}, {
name: "Fiat",
models: ["500", "Panda"]
}]
}
for (let i in myObj.cars) {
x += " <h2> " + myObj.cars[i].name + " </h2>";
for (let j in myObj.cars[i].models) {
x += myObj.cars[i].models[j] + " <br> ";
}
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery