DEV Community

loading...
Cover image for JavaScript Made Easy: Part 9

JavaScript Made Easy: Part 9

David Tetreau
I am an up-and-coming Web Developer, and I love writing blog posts! I am currently looking for junior roles. Follow me on Twitter @david_tetreau
・3 min read

Now that functions have been introduced, we will move on to some other concepts. Don't worry! We will come back to functions. There is a lot more to them. For Part 9 , we will explore objects. Open up your repl and code along!

Objects

JavaScript objects are more complex than other data types such as strings or numbers. They store multiple collections of data. Here is an example of a JavaScript object:


// object
const dog  = {
    breed: 'German Shepherd',
    color: "black and tan",
    age: 11
};

console.log(dog);//logs the object

Enter fullscreen mode Exit fullscreen mode

Notice that the object is assigned to a variable, so you can easily work with it elsewhere by using just the variable's name. Also, the object has the following characteristics:

  • The object is enclosed within curly braces (mustaches)
  • Each property has a name and value separated by a colon. We call this a "key: value" pair.
  • The first key has the name of "breed". This key stores the value 'German Shepherd'. This value is a string.
  • The object has three "key: value" pairs which are relevant to the variable name that they are stored in.

Accessing Objects

Objects can be accessed in several different ways. First, you can access an object by dot notation. Here's an example with the same object from above:


// object
const dog  = {
    breed: 'German Shepherd',
    color: "black and tan",
    age: 11
};

console.log(dog.breed);//logs the value stored in breed

Enter fullscreen mode Exit fullscreen mode

Notice that the object name, followed by a dot, followed by the first key in the object was used to log the value stored in that key to the console. This would have worked for the other key value pairs as well (dog.color) and (dog.age). You would have logged the value stored to both of those keys to the console. Try it!

Another way to access the data stored in objects is to use bracket notation. Here's an example of bracket notation with the same object:


// object
const dog  = {
    breed: 'German Shepherd',
    color: "black and tan",
    age: 11
};

console.log(dog['color']); //logs the value stored in color

Enter fullscreen mode Exit fullscreen mode

Notice that the object name followed by brackets containing the key inside of quotation marks was used to log the value stored in that key to the console.

Changing Objects

In addition to having the ability access the "key:value" pairs in an object, you can also change the data within the object. Here's an example using our example object:


// object
const dog  = {
    breed: 'German Shepherd',
    color: "black and tan",
    age: 11
};

delete dog.breed;

console.log(dog['breed']); //undefined

Enter fullscreen mode Exit fullscreen mode

Notice that the delete operator deleted the "key:value" pair named breed. If you tried to log it to the console, undefined would be returned because it no longer exists. Adding "key:value" pairs to the dog object is just as easy. Here's an example:


// object
const dog  = {
    breed: 'German Shepherd',
    color: "black and tan",
    age: 11
};

dog.hair = "long haired";

console.log(dog['hair']); //'long haired'


Enter fullscreen mode Exit fullscreen mode

Adding a key value pair involves nothing more than taking the object name and appending a key to it via dot or bracket notation and setting that equal to a value. This all occurs outside of the object.

Take some time to manipulate the example object, add "key: value" pairs, delete "key: value" pairs, and experiment with assigning different data types to the values (objects, arrays, numbers, strings, booleans, undefined, null, etc). You will see that some of them work as values and some do not.

I hope you have enjoyed this post! Please check out the entire "JavaScript Made Easy" series by David Tetreau. There will be a new post daily.

Discussion (0)

Forem Open with the Forem app