Warum Objekt.property ==> undefined?

[Ida Dieda]

Hallo,

brüte gerade über folgender Herausforderung: ich habe ein Objekt mit verschiedenen Properties, welche ich via Checkbox ansteuern möchte. Allerdings loggt die Konsole statt einem Wert nur "undefined" - warum? Und vor allem: - WIE LÖSE ICH DAS?

Danke für Eure Hilfe!

Javascript:

const objekt = {
	"property_1": "value_1",
	"property_2": "value_2",
	"property_3": "value_3"	
}

 function fiddle_with_Property(element) {
	var checkiBox = document.getElementById(element);
	if (checkiBox.checked == true) {
		console.log(objekt.property_1); // ==> "value_1"
		console.log(objekt.element); // ==> "undefined" -- Warum?
		}
}

HTML:

<form>
 <input type='checkbox' id="property_1" onclick='fiddle_with_Property("property_1")'><label>Property 1</label>
 </form>

[1unitedpower]

console.log(objekt.element); // ==> "undefined" -- Warum?

objekt.element sucht in dem Objekt nach einer Eigenschaft namens "element". element ist bei dir aber eine Variable und du willst in dem Objekt nach der Eigenschaft suchen, deren Name gleich dem Wert dieser Variablen ist. Du willst objekt[element].

[Ida Dieda]

Danke für die Hilfe!

Vielleicht kleine Verständnisfrage…

Wieso wird die Variable als array zur Eigenschaft?

[dedlfix]

Tach!

Wieso wird die Variable als array zur Eigenschaft?

Wirds nicht. Es ist so in den Syntaxregeln von Javascript definiert, dass man in eckigen Klammern einen Ausdruck angeben kann, der wenn ausgewertet, einen Eigenschaftenzugriff darstellt. Mit Array hat das nichts zu tun, es ist nur dieselbe Syntax.

dedlfix.

[Ida Dieda]

Danke für die Klarstellung!

[Rolf B]

Hallo dedlfix,

Mit Array hat das nichts zu tun, es ist nur dieselbe Syntax.

Jain. Ein „klassisches“ JavaScript Array ist ein Objekt. Objekte haben beliebig benannte Eigenschaften und können zur Laufzeit beliebig viele Eigenschaften hinzu bekommen^[1]. Der Zugriff auf diese Eigenschaften erfolgt über die Punkt-Notation, wenn der Name der Eigenschaft ein gültiger JavaScript-Name ist, und sonst über die [] Notation.

Auftritt Array: Es tut all das. Der einzige Unterschied ist eine Eigenschaft length und eine Modifikation des [] Operators bei Schreibzugriffen: Er prüft, ob da ein Eigenschaftsname zugewiesen wird, der einen Array-Index darstellt, also einen unsigned integer (in Google V8 zumindest). Wenn ja, wird die length Eigenschaft auf den höchsten verwendeten Index gesetzt. GESPEICHERT werden alle Werte als reguläre Objekteigenschaften (man teste das mit Object.getOwnPropertyNames und einer Beobachtung des Speicherverhaltens bei einer Zuweisung an someArray[500000000])

Die neumodischen getypten Arrays sind anders. Das sind keine Objekte mit freien Eigenschaften, sondern Objekte mit einem Datenpool à la C für die Index-Eigenschaften. Man muss angeben, wie groß sie sein sollen, und bekommt dann einen Block RAM der genau das aufnehmen kann. Der [] Operator ist bei getypten Arrays modifiziert, dass er bei Index-Zugriffen auf den Datenpool zugreift. Mit new Int32Array(500000000) blase ich den RAM meines Chrome auf 2GB auf (und weil er bei mir 32-bittig läuft, ist new Int32Array(600000000) nicht drin). Vorteil ist aber, dass jeder Eintrag nur 4 Bytes braucht. Im „klassischen“ Array ist es deutlich mehr (Property-Objekt, Name, Wert). Aber auch getypte Arrays sind immer noch Objekte; greife ich auf Eigenschaften zu, die keinen Index darstellen, werden sie klassisch als Object Property gespeichert.

Rolf

---

1. Für einen gewissen Wert von „beliebig“ ↩︎

[Orlok]

Hallo

		console.log(objekt.element); // ==> "undefined" -- Warum?

Dein object hat keine Eigenschaft mit dem Namen element.

Wenn du auf die Eigenschaft zugreifen möchtest, mit deren Namen der Parameter element beim Aufruf der Funktion initialisiert wurde, dann kannst du das so notieren:

const value = object[element];

Davon abgesehen noch ein paar Anmerkungen:

const object = {
  "property_1": "value_1",
  "property_2": "value_2",
  "property_3": "value_3"
}

Die Eigenschaftsnamen kannst du auch ohne Anführungszeichen notieren und du möchtest hinter die Deklaration vermutlich ein Semikolon setzen.

function fiddle_with_Property(element) { /* ... */ }

Der Parametername ist ungünstig gewählt: Ich würde hier erwarten, dass ein Element übergeben wird, also ein Objekt und kein String.

Benutze die Methode addEventListener und registriere deine Eventhandler nicht direkt im Markup. Dem Handler wird ein Eventobjekt übergeben dessen Eigenschaft target eine Referenz auf das Element enthält, welches das Ereignis ausgelöst hat.

if (checkiBox.checked == true) { /* ... */ }

„Ist es wahr, dass checked wahr ist?“ – Das kannst du auch kürzer schreiben, indem du nur checkiBox.checked als Ausdruck für die Bedingung notierst.

Viele Grüße,

Orlok

[Ida Dieda]

Hallo, danke, Vor allem für den Hinweis, das Element via target zu referenzieren.

…und - ja - checked == true ist tatsächlich ein wenig Overkill 😂

[beatovich]

hallo

Hallo,

brüte gerade über folgender Herausforderung: ich habe ein Objekt mit verschiedenen Properties, welche ich via Checkbox ansteuern möchte. Allerdings loggt die Konsole statt einem Wert nur "undefined" - warum? Und vor allem: - WIE LÖSE ICH DAS?

Danke für Eure Hilfe!

Javascript:

const objekt = {
	"property_1": "value_1",
	"property_2": "value_2",
	"property_3": "value_3"	
}

 function fiddle_with_Property(element) {
	var checkiBox = document.getElementById(element);
	if (checkiBox.checked == true) {
		console.log(objekt.property_1); // ==> "value_1"
		console.log(objekt.element); // ==> "undefined" -- Warum?

So

console.log(objekt[element]);

  }

}