Propiedades de JavaScript


Tabla de contenido

    Mostrar tabla de contenidos


Las propiedades son la parte más importante de cualquier objeto JavaScript.


Propiedades de JavaScript

Las propiedades son los valores asociados con un objeto JavaScript.

Un objeto JavaScript es una colección de propiedades desordenadas.

Las propiedades normalmente se pueden cambiar, agregar y eliminar, pero algunas son de solo lectura.


Accediendo a las propiedades de JavaScript

La sintaxis para acceder a la propiedad de un objeto es:

objectName.property      // person.age

o

objectName["property"]   // person["age"]

o

objectName[expression]   // x = "age"; person[x]

La expresión debe evaluarse como un nombre de propiedad.

Ejemplo 1

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

Pruébelo usted mismo →

<!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>

Ejemplo 2

person["firstname"] + " is " + person["age"] + " years old.";

Pruébelo usted mismo →

<!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>


JavaScript para... en bucle

La instrucción for...in de JavaScript recorre las propiedades de un objeto.

Sintaxis

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

El bloque de código dentro del bucle for...in se ejecutará una vez para cada propiedad.

Recorriendo las propiedades de un objeto:

Ejemplo

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

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

Pruébelo usted mismo →

<!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>

Agregar nuevas propiedades

Puede agregar nuevas propiedades a un objeto existente simplemente dándole un valor.

Supongamos que el objeto persona ya existe. Luego puedes darle nuevas propiedades:

Ejemplo

person.nationality = "English";

Pruébelo usted mismo →

<!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>

Eliminar propiedades

La palabra clave delete elimina una propiedad de un objeto:

Ejemplo

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

delete person.age;

Pruébelo usted mismo →

<!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>

o eliminar persona["edad"];

Ejemplo

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

delete person["age"];

Pruébelo usted mismo →

<!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>

La palabra clave delete elimina tanto el valor de la propiedad como la propiedad misma.

Después de la eliminación, la propiedad no se puede utilizar antes de que se vuelva a agregar.

El El operador delete está diseñado para usarse en propiedades de objetos. No tiene ningún efecto sobre variables o funciones.

El operador delete no debe usarse en objetos JavaScript predefinidos propiedades. Puede bloquear su aplicación.


Objetos anidados

Los valores de un objeto pueden ser otro objeto:

Ejemplo

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

Puede acceder a objetos anidados utilizando la notación de puntos o la notación de corchetes:

Ejemplo

myObj.cars.car2;

Pruébelo usted mismo →

<!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>

o :

Ejemplo

myObj.cars["car2"];

Pruébelo usted mismo →

<!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>

o :

Ejemplo

myObj["cars"]["car2"];

Pruébelo usted mismo →

<!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>

o :

Ejemplo

let p1 = "cars";
let p2 = "car2";
myObj[p1][p2];

Pruébelo usted mismo →

<!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>

Matrices y objetos anidados

Los valores de los objetos pueden ser matrices y los valores de las matrices pueden ser objetos:

Ejemplo

const myObj =
  {
  name: "John",
  age: 30,
    
  cars: [
    {name:"Ford", 
  models:["Fiesta", "Focus", "Mustang"]},
    
  {name:"BMW", models:["320", "X3", "X5"]},
      
  {name:"Fiat", models:["500", "Panda"]}
    ]
}

Para acceder a matrices dentro de matrices, utilice un bucle for-in para cada matriz:

Ejemplo

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];
  }
}

Pruébelo usted mismo →

<!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>

Atributos de propiedad

Todas las propiedades tienen un nombre. Además también tienen un valor.

El valor es uno de los atributos de la propiedad.

Otros atributos son: enumerable, configurable y escribible.

Estos atributos definen cómo se puede acceder a la propiedad (¿es legible?, ¿es ¿Se puede escribir?)

En JavaScript, se pueden leer todos los atributos, pero solo se puede leer el atributo de valor. cambiarse (y sólo si la propiedad se puede escribir).

(ECMAScript 5 tiene métodos para obtener y configurar todas las propiedades atributos)


Propiedades del prototipo

Los objetos JavaScript heredan las propiedades de su prototipo.

La palabra clave delete no elimina las propiedades heredadas, pero si elimina una propiedad prototipo, afectará a todos los objetos heredado del prototipo.