Vlastnosti

V předchozím článku, kde jsme vás seznámili s konceptem objektů, jsme viděli příklad toho, jak může objekt obsahovat jednu nebo několik vlastností. V tomto článku chci hlouběji proniknout do konceptu vlastností objektu a jejich využití.

Vlastnosti jsou jako proměnné: Deklarují se s názvem a slouží k uchování kusu dat. Zatímco proměnné obvykle existují v globálním prostoru, vlastnost je deklarována na objektu. Vlastnosti mohou, stejně jako proměnné, obsahovat jednoduché typy jako řetězce a čísla, ale také složité hodnoty ve formě dalších objektů.

Pojmenování vlastností

Pojďme si nyní trochu promluvit o tom, jak mohou být vlastnosti pojmenovány. Zřejmě chcete používat názvy, které budou odrážet data, která by měla vlastnost obsahovat. Viděli jsme příklad toho v předchozím článku, kde jsme na našem objektu uživatele měli vlastnosti pro uchování jména a věku:

let user = 
{
	name: "John Doe",
	age: 42
};

Samozřejmě, že to jsou velmi jednoduché názvy a často se u sebe nacházíte používání delších a popisnějších názvů pro složitější data. Nicméně, pro běžné použití existuje několik pravidel, kterých byste se mohli držet při pojmenovávání vašich vlastností:

• Musí začínat nečíselným znakem
• Nesmí obsahovat žádné mezery
• Nesmí obsahovat žádné speciální znaky kromě $ a _

Tato pravidla jsou zde, aby zajistila, že můžete ve skutečnosti deklarovat a přistupovat k vlastnostem bez toho, abyste narušili parsování JavaScriptu.

Hranaté závorky

Nicméně protože objekty jsou v podstatě jen sbírka dvojic klíč/hodnota, jak jsme již probírali, můžeme se tomuto pravidlu snadno vyhnout. Specifikováním názvu vlastnosti jako řetězce místo identifikátoru můžeme použít prakticky jakýkoli znak, který chceme:

let user = 
{
	"full name": "John Doe",
	"a^g^e": 42
};

Samozřejmě to nyní brání použití tečkové notace pro přístup k vlastnosti - JavaScript nerozumí, pokud se pokusíme odkazovat na "user.full name", protože nebude interpretovat mezeru jako součást názvu vlastnosti. Místo toho musíme použít hranaté závorky při přístupu k těmto vlastnostem, takto:

let user = 
{
	"full name": "John Doe",
	"a^g^e": 42
};
alert(user["full name"] + " is " + user["a^g^e"] + " years old");

Jak vidíte na příkladu, je možné téměř cokoli, pokud jde o název vlastnosti.

Vypočítané vlastnosti

Hranaté závorky lze použít také při specifikaci názvu vlastnosti. To se označuje jako vypočítané vlastnosti, protože nám to umožňuje nechat název vlastnosti dynamický, např. na základě vstupu z jiného zdroje, místo aby byl pevně zadán programátorem.

Zde je příklad použití vypočítaných vlastností:

let prefix = "user";

let user = 
{
	[prefix + "_name"]: "John Doe",
	[prefix + "_age"]: 42
};
alert(user[prefix + "_name"] + " is " + user[prefix + "_age"] + " years old");

Všimněte si, jak používáme hodnotu proměnné prefix ke generování názvů vlastností. Vzhledem k tomu, že vše mezi hranatými závorkami je jednoduše vyhodnoceno jako skutečný JavaScriptový kód, jsou možnosti využití vypočítaných vlastností prakticky neomezené. Zde je další příklad toho, co můžeme dělat:

let user = {};
for(let i = 1; i <= 5; i++)
{
	user["prop" + i] = "User property #" + i;
}
console.log(user);
/* Example output:
{
  prop1: "User property #1",
  prop2: "User property #2",
  prop3: "User property #3",
  prop4: "User property #4",
  prop5: "User property #5"
}
*/

V tomto příkladu používáme smyčku ke generování číslovaných vlastností pro objekt, čímž vám jednou více ukazujeme, že vypočítané vlastnosti jsou opravdu flexibilní.

Manipulace s vlastnostmi

Doposud jsme viděli pouze příklady čtení hodnot našich vlastností. Nicméně samozřejmě můžete měnit hodnoty, které obsahují, po deklaraci objektu, jako by to byla normální proměnná:

let user = 
{
	name: "John Doe",
	age: 42
};
user.age = 43;
// John Doe is 43 years old
alert(user.name + " is " + user.age + " years old");

Přidávání vlastností

Objekty v JavaScriptu jsou velmi dynamické. To znamená, že nemusíte nutně deklarovat všechny vlastnosti při vytváření objektů - můžete je později přidat, pokud je to potřeba. Ve skutečnosti je to tak dynamické, že můžete jednoduše přiřadit hodnotu neexistující vlastnosti a JavaScript tuto vlastnost jednoduše přidá do objektu. Zde je příklad:

let user = {};
user.name = "John Doe";
user.age = 42;
alert(user.name + " is " + user.age + " years old");

Všimněte si, jak vytvořím prázdný objekt a poté jednoduše přiřadím hodnoty vlastnostem nazvaným "name" (jméno) a "age" (věk). Poté je mohu použít přesně stejným způsobem, jako kdyby vlastnosti byly deklarovány při vytváření objektu.

Mazání vlastností

Pokud potřebujete odstranit vlastnost z objektu, můžeme použít operátor delete. Dělá přesně to, co název napovídá: Odstraní vlastnost z objektu. Zde je příklad:

let user = 
{
	name: "John Doe",
	age: 42
};
delete user.name;
// Result: undefined is 42 years old
alert(user.name + " is " + user.age + " years old");

Všimněte si, jak odstraňuji vlastnost name (jméno) těsně před pokusem o její použití, což má za následek, že user.name (uživatel.jméno) je "undefined" (nedefinováno).

Kontrola, zda vlastnost existuje

Možná budete potřebovat zkontrolovat, zda vlastnost existuje, zejména nyní, když víme, že mohou být odstraněny po vytvoření objektu. JavaScript obsahuje operátor in právě k tomuto účelu:

let user = {};
// false
alert("age" in user);

user.age = 42;
// true
alert("age" in user);

Jak vidíte, syntaxe je velmi jednoduchá a přímá, což nám usnadňuje testování existence vlastnosti na našem objektu.

Syntaxe zkráceného zápisu hodnoty vlastnosti

Jak bylo několikrát zmíněno, objekty jsou jen páry klíč/hodnota. Dosud jsme specifikovali vlastnosti zadáním klíče (názvu) a hodnoty. Nicméně často se setkáte s tím, že vytváříte objekty, kde jako hodnotu použijete proměnnou, přičemž název proměnné použijete jako klíč/název pro vlastnost.

To zní trochu složitě, ale zvažte následující příklad, kde vytváříme náš objekt uživatele na základě vstupu z funkce:

function NewUser(name, age)
{
	let user = 
	{
		name: name,
		age: age
	};
	return user;
}

To je běžný způsob, jak to dělat. Všimněte si, jak používám stejná jména pro parametry (name, age) a jaká používám při přidávání vlastností do nově vytvořeného objektu uživatele. To nám dává dvě řádky s "name: name" a "age: age".

Nicméně abychom ušetřili několik stisknutí kláves a možná dokonce kód trochu zpřehlednili, JavaScript nám umožňuje vynechat název vlastnosti, když jej založíme na jiné proměnné (v tomto případě parametru). To nám umožňuje přepsat výše uvedený příklad takto:

function NewUser(name, age)
{
	let user = 
	{
		name,
		age
	};
	return user;
}

Vlastnosti jsou nyní vytvořeny s názvem a hodnotou z parametrů, jak ilustruje tento kompletní příklad:

function NewUser(name, age)
{
	let user = 
	{
		name,
		age
	};
	return user;
}
let newUser = NewUser("John Doe", 42)
alert(newUser.name + " is " + newUser.age + " years old");

Není to nic zásadního, jen pěkná syntaktická zkratka.

Shrnutí

Vlastnosti jsou jako proměnné, ale pro objekty - mohou být použity k ukládání jednoduchých typů jako čísla a řetězce, nebo dokonce složitých typů jako jsou jiné objekty. Mohou dokonce držet odkaz na funkci, což vám v podstatě umožňuje přidávat metody k objektu, jak uvidíme v dalším článku.