Objects use strings to access elements. These strings are called keys OR properties. The elements they point to are called values. Together these are called key-value pairs.
Similar to Array: Use both arrays and objects to hold lots of pieces of information in one unit
Different from Array: Objects use strings to access elements and arrays use numbers. Arrays are ordered and objects aren't. So JavaScript doesn't store objects w/ keys in any particular order Arrays are used to represent lists of multiple things, objects often represent single things with multiple charactistics or attributes
Use {} instead of straight brackets, : separates key and value like this --> key : value. Put a comma between each key-value pair but don't put a comma after the last key-value pair.
var cat = {
"legs" : 3,
"name" : "Chairman Meow",
"color": "orange"
};
Also acceptable but harder to read:
var cat = { legs: 3, name: "Chairman Meow", color: "Orange"};
Keys: Quotes around keys aren't necessary because JavaScript knows that object keys will always be strings. If you don't use quotes make sure to follow naming conventions for variables (no spaces).
Values: The value of the key can be any kind of value.
Object / Array Literal: Whole value written at once – not built in multiple steps. Exp: array literal[1,2,3] or empty array then push method to add 1,2,3. You don't always know what's going to be in your array or object which is why you can't always use literals to build arrays/objects.
Access values using square brakcets – just like an array, but instead of index use the key (a string). Quotes optional:
cat["name"]; OR cat.name;
Instead of typing the key name in quotes just use a period followed by the key w/o quotes. This only works if the key doesn't have special car such as spaces. You can only use this with objects NOT arrays
Return an array of keys for any object:
Object.keys(cat);
RETURNS: ["name", "age", "color"]
Add items to an object just like you did for an array but use strings instead of numbers:
var cat = {};
cat["legs"] = 3;
cat["color"] = "orange";
cat;
RETURNS: Object {legs: 3, color: "orange"}
var cat = {};
cat.legs = 3;
cat.color = "orange";
cat;
RETURNS: Object {legs: 3, color: "orange"}
If you ask for an undefined property, it will return undefined:
cat.isAwesome;
undefined
var dinosaurs = [
{name: "trex", time: "Late Cretaceous"},
{name: "stegasaurus", time: "Late Jurasic"}
]
Get first object in array:
dinosaurs[0]; Object {name: "trex", time: "Late Cretaceous"}
Get key of first object:
dinosaurs[0]["name"]; OR dinosaurs[0].names
Step 1. Make three objects
var fox = { name: "fox", age: 3, luckyNumbers: [3, 4]}; var wren = { name: "wren", age: 4, luckyNumbers: [7, 9]}; var wolfie = { name: "wolfie", age: 5, luckyNumbers: [11, 14]};
Step 2. Store friends in an array
var friends = [fox, wren, wolfie];
Step 3. Retrieve Data
friends[2]; { name: "fox", age: 3, luckyNumbers: Array[2]};
Chrome prints out Array[2] for luckyNumbers which translates to: "this array has two elements".
friends[2].name; "wolfie"
friends[2].luckyNumbers[1]; 14
Add new friend
var ralph = { name: "ralph", age: 3, luckyNumbers: [3, 4]}; friends["ralph"] = ralph; object.keys(friends);
A way to design and write programs so that all the important parts are represented by objects
When you save a function as a property in an object that property is called a method. This can be added to an object w/ dot notation:
var cat = { name: "Chairman Meow" }
cat.sound = function() { console.log("meow my name is " + this.name + "!"); }
cat.sound(); Meow. My name is Chairman Meow.
Use the this keyword inside a method to refer to the object on which the method is currently being called. So in the cat object this refers to the cat object and this.name refers to cat.name
The keyword this makes methods versitle – allowing you to add the same method to multiple objects and access properties of whatever object is currently being called
Create new function to use a method on multiple objects
var speak = function () {
console.log(this.sound + "! My name is " + this.name + "!");
}
Create object to add speak as a method
var dog = {
sound: "Woooof:,
name: "Barky",
speak: speak
}
Set speak property and assign it speak function. dog.speak can be called by entering dog.speak() because we used this keyword in the method. It retrieves two proeprtioes from the dog object: this.sound and this.name
dog.speak();
Wooof! My name is Barky!