- JavaScript is technically an object-oriented language, although if you come from another object-oriented language, you'll find JavaScript to be pretty sloppy. Nevermind that. JavaScript's loosey-goosey attitude towards object orientation is a feature, not a bug. We've dealt with an object earlier in the course when I introduced you to the Array. Objects are used when we want to create a cluster of related data for something, and maybe perform some actions or operations on that data. In a more formalized sense, objects are data models that allow us to combine properties and methods for a specific data set in a structured way.
The easiest way to make sense of this is to create an object. The course you're watching right now is a good candidate for an object. It has a bunch of different pieces of data that all relate back to the course, and we should be able to access all of, or any piece of that data at any time by simply referencing the course. If I were working with a single course, I could use variables, but if I had a list of courses, I'd have to use a multi-dimensional array, and even then it could become very hard to manage, very quickly.
Using an object, we can setup a model for the course data, and then create custom methods to be used on any defined course object. First, we create the course object, which is assigned to a variable, and define it as a new object. var course = new Object(); with a capitalized "O" and two parenthesis afterwards. Next, we setup the object properties. These are essentially variables associated with the object.
So, course.title = "JavaScript Essential Training"; course.instructor = "Morten Rand-Hendriksen" course.level = 1; for beginner, course.published is the published status, so true, since you're watching the course right now. And course.views is zero, because no one's watched the course yet. I can also do this using a shorthand, var course = { title: "JavaScript Essential Training", instructor: "Morten Rand-Hendriksen", and so on.
Now I can retrieve the entire course objects by simply calling it, console.log(course); and I can retrieve any of it's properties by specifying that property, console.log(course.title); objects can also contain methods, functions that use of change the data in the object properties. For my course objects, I may want a method for updating the views numbers anytime someone views the course. So I create a new method called, updateViews that contains an anonymous function.
Inside the function, I return ++course.views; Now, rather than a bunch of disjointed variables and functions, we have a single contained object called course with the properties title, instructor, level, published, and views. And the method, updateViews, which updates the views number.
Author
Updated
4/1/2019Released
5/17/2017Through practical examples and mini-projects, this course helps you build your understanding of JavaScript piece by piece, from core principles like variables, data types, conditionals, and functions through advanced topics including loops, closures, and DOM scripting. Along the way, you will also be introduced to some ES6 and the basics of JavaScript libraries.
- What is JavaScript?
- Working with data
- Using functions and objects
- Working with JavaScript and the DOM
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality
- Minifying JavaScript
Skill Level Beginner
Duration
Views
Related Courses
-
Introduction
-
Welcome1m 7s
-
-
1. JavaScript: An Introduction
-
What is JavaScript?2m 38s
-
-
2. The Basics
-
Introducing the browser console10m 31s
-
3. Working with data
-
Data types in JavaScript4m 2s
-
Arrays2m 20s
-
4. Functions and Objects
-
Functions in JavaScript3m 28s
-
Build a basic function3m 29s
-
Anonymous functions5m 11s
-
Variable scope3m 17s
-
ES2015: let and const6m 12s
-
Make sense of objects3m 19s
-
Object constructors6m 16s
-
Closures8m 11s
-
-
5. JavaScript and the DOM, Part 1: Changing DOM Elements
-
Access and change elements4m 33s
-
Access and change classes3m 45s
-
Access and change attributes4m 53s
-
Add DOM elements6m 56s
-
6. Project: Create an Analog Clock
-
Use CSS to move clock hands3m 49s
-
7. JavaScript and the DOM, Part 2: Events
-
What are DOM events?1m 31s
-
Some typical DOM events1m 59s
-
Add and use event listeners6m 51s
-
-
8. Project: Typing Speed Tester
-
Rundown of HTML markup2m 58s
-
Build a count-up timer5m 56s
-
Add a reset button5m 3s
-
-
9. Loops
-
Loops3m 37s
-
Looping through arrays4m 7s
-
Break and continue loops7m 9s
-
-
10. Project: Automated Responsive Images Markup
-
Project breakdown1m 55s
-
Rundown of project setup3m 26s
-
-
11. Troubleshooting, Validating, and Minifying JavaScript
-
Troubleshooting JavaScript7m 20s
-
Online script linting5m 57s
-
Automate script linting8m 24s
-
Online script minification2m 50s
-
Automate script minification2m 24s
-
12. Bonus Chapter: Ask the Instructor
-
What are arrow functions?3m 11s
-
What does the % symbol do?3m 47s
-
-
Conclusion
-
Next Steps1m 55s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Make sense of objects