1. Home
  2. Training Library
  3. Programming
  4. Courses
  5. Introduction to JavaScript Objects

Introduction to JavaScript Objects

Contents

keyboard_tab
JavaScript Objects

The course is part of this learning path

Introduction to JavaScript Objects
Overview
Difficulty
Intermediate
Duration
7m
Students
37
Ratings
5/5
starstarstarstarstar
Description

This practical course explores JavaScript objects. You will learn what they are and you will also see how to create an object and how to access values from properties within that object.

Learning Objectives

  • Get a basic understanding of what JavaScript objects are
  • Learn how to create an object in JavaScript
  • Learn how to access a value from a property that's in an object

Intended Audience

This course is intended for anyone who wants to learn about JavaScript objects.

Prerequisites

Anyone with an interest in JavaScript Objects, or who wants to improve their knowledge of JavaScript in general.

Feedback

If you have any feedback related to this course, please contact us at support@cloudacademy.com.

Transcript

Introduction to JavaScript objects. And to begin, let's start with a question. What is a JavaScript object? A JavaScript object is a collection data type, and each piece of data that is inside of a object is referred to as a property of that object. And a property is made of two parts: a key which is the property's name, and the value, that is associated with that key. And these properties are known as key value pairs.

JavaScript objects can be used to represent real-world objects as data. To demonstrate this, I'm gonna begin by creating a car object, cons car equals curly brackets. And the first property I'm gonna type is "make", then colon. And then this is gonna be a string value, "Ford" wrapped in quotes, then comma.

Next, I'm going type another property, with the key name of "model" colon, and then in quotes, a string value of "Bronco" comma. And I'm gonna pause for a moment before completing this object, I'm gonna zoom in and point out this key value pair structure. The key name make is written directly as part of the object. Note, there are no quotes. The colon is the separator between the key and the value. And then to the right of the colon is the value. Here, the string Ford wrapped in quotes. Then there's a comma and the comma is what separates one property from another.

So each property in the object needs to have a comma, unless it's the final property in the object. Now I'm gonna finish writing out the car object. I'm gonna give it another property of "AWD", short four All Wheel Drive colon with a boolean value of true, comma. Then a color property. Colon with a string value of blue, comma and then a trim property, colon within array value of standard, xlt and lariat. And now the object is done. And what we have here is a JavaScript object that is representing a real life object, a car.

Now in JavaScript, these values don't have any restriction. They can be of any data type. They can be strings, arrays, numbers, and other objects. Now I'm gonna console log the car. And the result looks very similar to how I wrote out the object.

Now, how do we access a specific value from a property that's in an object? Well, there are two ways to access object property values, and I wanna console log each of these methods. First, I'm gonna comment out the car console log using what is called "dot notation". I gonna console log the cars all wheel drive property value. Console dot log, car dot AWD. Next using square bracket notation. I'm gonna console log the car objects, trim value, console dot log, car square brackets. When using square brackets, we have to wrap the property name in quotes. Trim.

Now I'm gonna clear the console and run the console logs. We can see the values for each of these properties. The first console log is using dot notation. The second console log is using square bracket notation. Now, is there any real difference between these two methods? Well, any property name that has a special character or number can only be accessed using square bracket notation.

Now noting that the trim property is an array. If I wanted to access a specific value from that array, I would have to use an additional square bracket notation with the index value of that element that I wish to access. So for example, I'm gonna go back to the trim console log add a square bracket and put in a value of one. To get the second element in the array. I will run this again and in the console log now, instead of the array, I have the element value of XLT.

Now I'm gonna comment the cell. And the next question that needs to be asked is, "How do we change property values in an existing object?" We can do so using the same methods we use to access the values. So I'm gonna start by typing car dot make equals Toyota, and then next, car dot model equals Corolla. And now using square bracket notation, car square bracket in quotes, AWD equals false.

Now, un comment console dot log car and hit run. Now in the console, we can see that the make property has a value of Toyota. The model property has a value of Corolla and the AWD property, has a value of false. Now, can we use the same methods to add a new property and value in an existing object? Absolutely.

So on the next line below using dot notation, I will type car dot doors equal four. And on the line below using square bracket notation, I will type car square brackets wrapped in quotes, navigation equal true. And now I'm gonna run this in the console again. And now to the right, the car object has two new properties, doors with a value of four and navigation with a value of true. And that's it. Thanks for watching at Cloud Academy.

About the Author
Avatar
Farish Kashefinejad
Full-Stack Development Content Creator
Students
232
Labs
6
Courses
7
Learning Paths
1

Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.

Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.

Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.

Farish is an avid powerlifter, sushi lover, and occasional Funko collector.

Covered Topics