PROPERTY OF JAVASCRIPT OBJECTS

PROPERTY OF THE OBJECTS

Properties are the most important part of any JavaScript object. An object is a collection of unsorted properties. Properties can usually be edited, added, and deleted, but some are read-only. The syntax for accessing the property of an object is:

objectName.property // person.age

or:

objectName[“property“] // person[“age”]

or:

objectName[expression] // x = “age”; person[x]

The expression must return a property name.

const person = {
  firstName: “John”,
  lastName: “Doe”,
  age: 50,
  eyeColor: “blue”
};

person.firstname + ” is ” + person.age + ” years old.”;

person[“firstname”] + ” is ” + person[“age”] + ” years old.”;

FOR IN LOOP

The JavaScript for … in statement iterates through the properties of an object.

for (let variable in object) {
// code to be executed
}

The block of code inside the for … in loop will be executed once for each property:

const person = {
fname: “John”,
lname: “Doe”,
age: 25
};

for (let x in person) {
txt += person[x];
}

//return John Doe 25

ADD PROPERTIES

You can add new properties to an existing object simply by assigning it a value. Let’s assume that the person object already exists – you can then assign it new properties:

person.nationality = “English”;

REMOVE A PROPERTY

The delete keyword deletes a property from an object:

const person = {
firstName: “John”,
lastName: “Doe”,
age: 50,
eyeColor: “blue”
};

delete person.age;

delete person[“age”];

The delete keyword deletes both the property value and the property itself. After deletion, the property cannot be used before being added again. The delete operator is designed to be used on object properties. It has no effect on variables or functions. delete should not be used on the properties of predefined JavaScript objects. It can crash your application.

NESTED OBJECTS

const myObj = {
  name:“John”,
age:30,
  cars: {
    car1:“Ford”,
    car2:“BMW”,
    car3:“Fiat”
  }
}

You can access nested objects using dot notation or bracket notation:

myObj.cars.car2;

or:

myObj.cars[“car2”];

or:

myObj[“cars”][“car2”];

or:

let p1 = “cars”;
let p2 = “car2”;
myObj[p1][p2];

NESTED OBJECTS AND ARRAY

Values in objects can be arrays and values in arrays can be objects:

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 += “<h1>” + myObj.cars[i].name + “</h1>”;
for (let j in myObj.cars[i].models) {
x += myObj.cars[i].models[j] + “<br>”;
}
}

All properties have a name. In addition, they also have value. The value is one of the property’s attributes. Other attributes are: enumerable, configurable, and writable. These attributes define how the property can be accessed (is it readable? Is it writable?) In JavaScript, all attributes can be read, but only the value attribute can be changed (and only if the property is writable). (ECMAScript 5 has methods for both getting and setting all property attributes)

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Proprietà degli oggetti</title>
</head>
<body>
    <h2>PROPRIETA' DEGLI OGGETTI</h2>
    <p id="demo"></p>
    <script type="rocketlazyloadscript">
        //DEFINIZIONE DI OGGETTO
        const persona = {
            nome: 'Mario',
            cognome: 'Rossi',
            età: 50,
            coloreCapelli: 'neri',
            coloreOcchi: 'blu'   
        }
        //ACCESSO ALLE PROPRIETA'
        const denominazione = persona.nome + ' ' + persona.cognome;
        console.log(denominazione);
        //DOT NOTATION
        console.log(persona.età);
        //PARENTESI
        console.log(persona['età']);
        //ESPRESSIONE
        let x = 'età';
        console.log(persona[x]);
        //SCORRERE LE PROPRIETA' CON UN CICLO FOR....IN
        let text = '';
        for(let x in persona)
        {
            text += persona[x] + ' ';
        }
        console.log(text);
        //ARRAY NIDIFICATI
        const myObj = {
            name: "John",
            age: 30,
            cars: [
              {name:"Ford", models:["Fiesta", "Focus", "Mustang"]},
              {name:"BMW", models:["320", "X3", "X5"]},
              {name:"Fiat", models:["500", "Panda"]}
            ]
          }
          x = '';
          for (let i in myObj.cars) {
            x += "<h3>" + myObj.cars[i].name + "</h3>";
            for (let j in myObj.cars[i].models) {
              x += myObj.cars[i].models[j] + "<br>";
            }
          }
          document.getElementById('demo').innerHTML=x;
    </script>
</body>
</html>

LINKS TO JAVASCRIPT

JAVASCRIPT

LINK TO THE CODE ON GITHUB

GITHUB

PROPERTY OF JAVASCRIPT OBJECTS