JavaScript Objects
JavaScript Objects
{
key: value
property: value
method: function () {}
}
Object is a value type that contains key value pairs inside curly barces. Keys are also known as properties and everything in JavaScript that isn’t a primitive type is an object. Primitive types are Strings, Numbers, Booleans, Undefined, Null and Symbols (ES6). Yes, arrays are objects. Functions are objects too. The difference between functions and objects is that functions can be called.
When variables are used in objects they’re called properties and when functions are used inside and object they’re called methods.
to create an object, we assign a variable to an object literal
var students = {};
NOTE: [ ]
create an array, { }
create an object. Pay attention if you’re a beginner, i have already mixed these in code, code didn’t work..
var students = {
name: "Dave"
};
property/key doesn’t need to be in quotes.
var students = {
name: "Dave",
grades: [99, 85, 80, 79]
};
separate each key:value pair with a ,
the last pair doesn’t need one.
FYI, there are multiple ways in which you can create an object
- the literal way
myObj = {}
- with
Object.create()
the method - with constructor functions and the
new
keywordnew Car()
Accessing and Modifying data
You access values by their property names:
person['name']
person.name
You create and modify data the same way, with an =
sign
person.name = "Anna"
person.age = 27
if a property exists, it’ll update the value. if it doesn’t, it’ll create the property AND update the value.
You can use array methods (like .join()
) on an object property
Loops (for .. in)
for (var key in object) {
// do something
}
key
is the property name, this will change every time it loops. this doesn’t have to called key
, you can call it jojo
, x
, k
, prop
or whatever. object
is the object name, the object you want to loop through.
You need bracket notation person[key]
to access property values in a for in
loop. person.
inside a for in loop will look for a property that is literally named key
in the object.
person[key]
CORRECTperson.key
WRONG - will look for one property literally calledkey
instead of looping through propertiesperson["key"]
WRONG - will get thekey
property if it exists
FYI, you can console.log()
multiple strings separated with a ,
console.log(key, ' : ', person[name]);
or just use template strings
console.log(`${key} : ${person[name]}`;
Constructor functions
Constructor functions create objects. They are used with the new
keyword, which creates the objects, sets this
within the function to the object (i.e. this
refers to the new object), and return the object.
// Object constructor function
function Vehicle(year, make, model) {
this.year = year;
this.make = make;
this.model = model;
this.getFullDescription = function() {
return `${this.year} ${this.make} ${this.model}`
}
}
// create a new instance of the object using the `new` keyword
let myCar = new Vehicle('2016', 'Honda', 'Civic')
Factory functions
Factory functions return objects but they don’t need to use the new
keyword and they don’t set this
inside the function to the object being created. They just create and return an object
// Factory function (using ES6 enhanced object literal syntax)
function createVehicle(year, make, model) {
return {
year,
make,
model,
getFullDescription() {
return `${year} ${make} ${model}`
}
}
}
// create a new instance of the object
let myCar = createVehicle('2016', 'Honda', 'Civic')
JSON
JSON is just a string that is formatted as a JS Object. Servers are really good at sending and receiving strings (like HTML/CSS). Once a browser gets the string, it converts it to a pure JS object.
Examples
// Object literal
let car = {
make: 'Honda',
model: 'Civic',
year: 2016
}
// Bracket notation
console.info(`I have a ${car['year']} ${car['make']} ${car['model']}`)
// Dot notation
console.info(`I have a ${car.year} ${car.make} ${car.model}`)
// When property key is a variable (e.g. inside loops)
// console.info(`I have a ${car[year]} ${car[make]} ${car[model]}`)
// Object literal
let employee = {
// properties
firstName: 'Harry',
lastName: 'Denver',
//method
fullName: function () {
return `${this.firstName} ${this.lastName}` // this refers to the object that owns the function
}
}
// reference a property
console.info(`Our manager is ${employee.firstName}`)
// call a method
console.info(`His full name is ${employee.fullName()}`)
// Object constructor function
function Vehicle(year, make, model) { // notice the capital V? it's convention for constructor functions
this.make = make; // notice the semicolons and equal signs
this.model = model;
this.year = year;
this.getFullDescription = function () {
return `${this.year} ${this.make} ${this.model}`;
}
}
// create new instances with the new keyword
let myCar = new Vehicle('2015', 'Honda', 'City')
let mySistersCar = new Vehicle('2013', 'Toyota', 'Corolla Fielder')
console.info(`${myCar.getFullDescription()}`)
console.info(`${mySistersCar.year} ${mySistersCar.make} ${mySistersCar.model}`)
// factory functions?
function createVehicle(year, make, model) {
return {
make: make,
year: year,
model: model,
getFullDescription: function () {
return `${year} ${make} ${model}`
}
}
}
let myCar2 = createVehicle('2015', 'Honda', 'Civic') // no `new` keyword
let mySistersCar2 = createVehicle('2013', 'Toyota', 'Corolla Fielder')
console.info(`${myCar2.getFullDescription()}`)
console.info(`${mySistersCar2.getFullDescription()}`)
// ES6 Enhanced Object literal syntax
function createVehicle(year, make, model) {
return {
make, // if the property name and value variable name are the same, you don't have to type both
year,
model,
getFullDescription() { // we can remove the function keyword
return `${year} ${make} ${model}`
}
}
}