So far we have talked about the basic building blocks in JavaScript – the primitive types – String, Number, Boolean – but just using these types doesn't allow our application to be that sophisticated. A typical business application usually involves some sort of data – apartments for rent, customer profiles, orders, or whatever your business is all about – so we have to learn about a couple of more advanced types that allow us to hold and manipulate data.
We'll begin by talking about the Object – the Object is the the base type of thing in JavaScript; it turns out that everything else is a type of Object. All the types of things we've talked about so far – String, Number, etc. are types of Objects. Objects can either have attributes (properties) or behaviors (methods).
let myString = `brian`
// attributes (properties)
// we access the properties of an object by using the dot notation and the name of the property
myString.length // => 5
// behaviors (methods)
// we access the methods of an object by using the dot notation with parentheses
myString.toUpperCase() // => `BRIAN`
To elaborate on the difference between properties and methods – for example, if we had a "car" object, it could have properties like color (red), make (Toyota), model (Prius); and it could have methods like "drive" or "park". Properties describe an object's attributes, and methods are a way to ask an object to do something, or return an output.
This becomes a bit more clear when we create our own objects. In the above example, we are accessing the properties and methods of a built-in object in JavaScript – the String. We can also create our own custom objects, and use those objects to describe our universe, in the context of our application.
Let's create an object. This object will only feature properties for now – we'll get to creating an object's methods later.
let profile = {
name: `Brian`,
location: `Chicago`,
status: `Teaching MBA students how to code in JavaScript!`
}
profile.name // => `Brian`
profile.location // => `Chicago`
Yes, the curly braces ({}) have two meanings in JavaScript. We've seen how they're used to separate conditionals in if statements – they are also used to define objects. Once the object is defined and stored in a variable, we can access its properties using dot notation – just like we did with the String in the first example.
An Array is a special type of Object that is meant to hold lists of information. We define an Array using the square brackets – [] – then we have access to its elements, properties, and methods.
let burgerIngredients = [`buns`, `ground beef`, `american cheese`]
// getting or setting value - zero-based
burgerIngredients[1] // => `ground beef`
burgerIngredients[3] // => undefined
burgerIngredients[1] = `ground chuck`
burgerIngredients[1] // => `ground chuck`
// array properties
burgerIngredients.length // => 3
// array methods
output = burgerIngredients.sort() // => [`american cheese`, `buns`, `ground chuck`]
burgerIngredients.push(`ketchup`)
burgerIngredients.length // => 4
Basic objects and arrays (and later, methods/functions) are meant to be used in conjunction with each other, to ultimately define more complex objects used in our applications. For example, if we were building a simple social networking application, we might define an object that looks like this:
let profile = {
name: `Brian`,
location: `Chicago`,
timeline: [
`Teaching MBA students how to code in JavaScript!`,
`Eating tacos`,
`Riding a unicorn`
]
}
// Grab the user's name, location, and current status
profile.name // => `Brian`
profile.location // => `Chicago`
profile.timeline[0] // => `Teaching MBA students how to code in JavaScript!`
Just to have a taste of what something like this would work in practice – this object might be generated by a back-end API or come from a database of some kind. A front-end developer would be tasked with retrieving this object and traversing its structure in order to grab the pieces of data needed for the user interface.