Objects are made with two {}
That is their home.
{} - this is called the object literal syntax
{
key: 'theValue'
}
Example of a nested key
{
key: {
nestedKey: 'nestValue'
}
}
You can put a funciton in an object
{
functionName(parameter) {
console.log('literally whatever')
}
}
This is also a good syntax
const value1 = 'value1's value'
const value2 = 'value2's value'
const value3 = 'value3's value'
const values = {value1, value2, value3}
you can log out...
console.log(values.value1) -- this returns value1's value
If you wanted to throw a method into the object you would have the following syntax
const values = {value1, value2, value3, function() {console.log('whatever you want'}}
Top comments (5)
Object Destructuring
It allows us to take just the elements we want from our object.
You take the object.
You can set a new const equal to the variables you want to destructure... for example, you have the object
const person = {
username: "bob123",
details: {
title: "head person"}
email: "bob123@example.com";
}
const { username, email } = person;
function getPerson() {
console.log(`${username}'s email is ${email}
}
getPerson()
Now if you wanted to get at the title, you have a few options
const {name, details} = person;
function getTitle() {
console.log(
${name} is a ${details.title})}
getTitle()
This is okay, but you are still a little more verbose, especially if there are a lot of items in the details object that you want to return. In this case you are better off with the following syntax
const {name, details: {title} } = person;
function getTitle() {
console.log(
${name} is a ${title})}
getTitle()
If you would like to pass the data as a parameter as opposed to using it as part of the global scope:
function getTitle(name, details: {title}) {
console.log(
${name} is a ${title})}
getTitle(person)
Assign values to objects
If you want to assign values from one object to another, you can use the
Object.assign() method.
Object.assign(user, newUser)
This would take the parameters assigned in the creation from the object newUser and put those values into user. user would be updated with the values from newUser, for any values that are not included in newUser but are for user, user retains its values for these, so newUser overwrites only those values for which it has a value.
If user was a default form that you didn't want to overwrite, you would adjust the syntax for the Object.assign as follows:
Object.assign( {}, user, newUser)
if you came up with a new parameter you needed, you could adjust the syntax as follows
Object.assign( {}, user, newUser, {parameter: value})
The spread is amazing!!!
The spread was added to javascript back in 2018.
It cleans up a lot of the stuff from above. Instead of doing Object.assign, you create a new variable.
const createdUser = { ...user, ...newUser};
The elipses are the spread which tells javascript that we want these values, but not on a nested kind of way.
The order matters for these. If you put ...user after ...newUser, you would have all of the default values from ...user
Here's something kind of cool. you can assign a funciton to an object.
Here's the basic syntax:
const person = {
key1: "value1",
key2: "value2",
key3: "value3",
getInfo() {
console.log(
${this.key1} works as a ${this.key2}.}
}
You can use the this method when it is nested within an object, but not in other times. It seems that the this knows that you are wanting to refer to other key-value pairs within the object.
the this method would be in lieu of ${person.key1}.
To turn the getInfo into an arrow function,
getInfo: () => {
console.log(
${this.key1} works as a ${this.key2}.}
Making things dynamic!!!
The square bracket notation is the way to dynamically add things to objects.
For example
const sport = 'cross country'
const numOnTeam = 'top-five-score'
const sports = {
basketball: "five-on-five",
football: "eleven-on-eleven",
volleyball: "six-on-six",
}
to call a function using something, you can use the notation
function getSport(key) {
return sports[key]; ***note the use of the square brackets...
}
console.log(getSport('basketball')
To delete something from an object, you can use the delete operator
delete sports['football']
Objects store primitive values. But they are not primitive values. They are references. You can dynamically add properties to objects. Each object is like a snowflake. They are all unique, even if they hold the same values.
Objects are reference types.