JavaScript OOP: Mastering Modern Object-Oriented Programming

Name: JavaScript OOP: Mastering Modern Object-Oriented Programming
Rating: 4.2 (158 reviews)

Mastering Object-Oriented JavaScript for Efficient and Error-Free Coding

Created byNoshad Yousuf

Last updated 4/2024

English

What you'll learn

Students will start by understanding the basics of creating object literals and exploring their properties, establishing a strong foundation.
With interview-style tasks and coding practice, students will understand the theory and gain hands-on experience, preparing them for real-world scenarios
The use of 'for-in' loops is introduced, empowering students to efficiently extract properties and values from objects.
The tutorial emphasizes the universal application of these skills, making them relevant in any modern programming language.
Students will gain insights into function objects, arrow functions, and object chaining, enhancing their understanding of these essential concepts.
Practical aspects include preventing errors with optional chaining and uncovering hidden properties within objects.
Students will explore object symbols on a global scale, enhancing their comprehension of system symbols.
Students will not only have confidence in dealing with JavaScript objects but will also possess a versatile skill set applicable across different languages

Coding Exercises

This course includes our updated coding exercises so you can practice your skills as you learn.

Course content

8 sections • 33 lectures • 3h 44m total length

Introduction1:52

JavaScript Objects Unleashed3:18
Literals and Properties9:20
Create object literals in JavaScript and define properties like brand, model, and year using literal syntax, then add, read, and delete properties, with multiword keys in quotes and trailing commas.
Square Brackets usage16:09
Explore square brackets usage for JavaScript objects, contrasting dot notation’s identifier rules, with computed properties and runtime key access using expressions and variables.
Shorthand for Property Values5:02
Restrictions on Property Names6:22
Explore how JavaScript object properties have no name restrictions, accepting any string or symbol, with numbers converting to strings, and the __proto__ case where primitive values are ignored.
Checking Property Existence with the 'in' Operator5:56
Explore checking property existence in modern JavaScript using the in operator. Understand how undefined and null affect detection and when in reliably identifies existing properties.
Iterating with the 'for..in' Loop15:27
Learn to iterate object keys with the for..in loop in modern JavaScript OOP, using key or prop, and note that integer keys sort while non-integers follow creation order.
Create and assign values to an Object
Verify if an Object is Empty
Calculate the Sum of Object Properties
Increase numeric property values by a factor of 2

Object References and Duplication6:39
Reference-Based Comparison3:33
Explore reference-based comparison in modern JavaScript object-oriented programming, where two objects are equal only if they reference the same object, and independent look-alikes may become unequal due to primitive conversions.
Modifications to Const Objects2:18
Object Cloning and Merging with Object.assign14:38
Create a copy by copying properties into a new object, then use Object.assign with a dest and source objects to merge and overwrite properties, and return the result.
Cloning with Nested Structures10:44
Learn how to perform deep cloning of nested structures in JavaScript using structuredClone, handling objects, arrays, and circular references, and when to combine methods for functions or library solutions.

Methods in Objects and the "this" Keyword7:31
Explore how modern JavaScript represents real world actions as object methods, using function expressions and shorthand syntax, and learn how the this keyword guides method behavior.
Understanding "this" in Methods6:55
“this” is not locked6:50
Arrow functions don't use "this"2:25
Learn how arrow functions in modern JavaScript do not have their own this but borrow it from the outer context, simplifying surrounding scope usage.
Applying 'this' in an Object Literal
Craft a Calculator App
Chaining in JavaScript

Constructor Functions and the "new" Operator8:15
Master modern object-oriented programming in JavaScript by using constructor functions and the new operator to create reusable object templates for multiple items.
Testing Constructor Mode with new.target5:45
Values Returned by Constructors5:41
Methods in Constructor3:04
Explore how constructor functions power modern JavaScript object oriented programming by creating flexible objects with parameters, properties, and methods, including a say hi method example.
Construct new Calculator.

Using '?' for Optional Chaining10:21
Learn how optional chaining safely accesses nested properties in JavaScript objects without errors when values are missing, with examples using document.querySelector and undefined or null.
Avoiding Errors with Optional Chaining6:53
Swift Exit with Short-Circuiting2:21
Explore how short-circuiting works in modern JavaScript object-oriented programming, using the question mark to stop evaluation when the left part is missing and prevent right-side operations.
Other Uses: ?.() and ?.[]6:17
Master optional chaining in modern JavaScript OOP using the ?.() and ?.[] syntax to safely call a possibly missing admin method and read properties.

Understand Symbol Type7:18
Understand the JavaScript symbol type as a primitive, unique key with optional description; symbols remain distinct even with identical descriptions and don’t auto-convert to strings, unless you call toString.
Understanding Hidden Properties11:11
Explore how symbols create hidden properties in JavaScript objects to safely attach unique identifiers, even for third-party code, while avoiding conflicts with string keys.
Symbols on a Global Scale7:51
Explore the global symbol registry and learn how Symbol.for reads or creates a shared symbol across an app, while Symbol.keyFor retrieves its key.
Understanding System Symbols1:10
Explore how system symbols in modern JavaScript enhance object behavior, using the symbol table and examples like symbol.toPrimitive for primitive conversion.

Object Transformation into Primitives2:49
Learn how JavaScript converts objects to primitive values during operations, with numeric and string conversions, boolean behavior, and the role of date subtraction and symbol-based methods in custom conversions.
What are "Hints"6:32
Learn how JavaScript determines object to primitive conversions using hints: string, number, and default, via methods like Symbol.toPrimitive, valueOf, and toString, with examples.
Symbol.toPrimitive Method5:07
Learn how symbol.toPrimitive defines a conversion method that handles all type hints, enabling a user object to yield a string or a money amount depending on the context.
toString/valueOf Methods9:22
Discover how toString and valueOf customize primitive conversion in JavaScript objects, with priority rules for string hints and math hints, and practical examples of implementing fallback behavior.

Requirements

Knowing how to create and use functions in JavaScript is crucial, as the course will delve into function objects and related concepts.
Students should be comfortable with fundamental programming concepts like variables, loops, and conditional statements.
It would be helpful if students are familiar with setting up a coding environment, using code editors, and running JavaScript code in a browser or other environments.
Even if you have little or no prior knowledge of JavaScript, fear not! This course is designed to be accessible to a wide audience. By simply following along, you'll gain a profound understanding of object-oriented programming. Whether you're a beginner or someone looking to reinforce their skills, this tutorial serves as an inspirational entry point into the world of computer programming.

Description

In this comprehensive course on object-oriented programming (OOP) in modern JavaScript, you'll explore fundamental concepts and advanced techniques to enhance your mastery of JavaScript's OOP capabilities.

We begin by examining the basics, including object literals, square bracket usage, and property shorthand, alongside restrictions on property names and object iteration using `for...in` loops.

Advancing further, we delve into complex topics like object references, duplication, and reference-based comparison. You'll learn to modify constant objects, clone objects with nested structures, and grasp methods within objects, with a focus on the `this` keyword's significance.

Next, we introduce constructor functions and the `new` operator, clarifying constructor return values and demonstrating how to utilize optional chaining for error prevention and code optimization.

You'll also develop a profound understanding of symbol types, their global applications, and system symbol utilization. Additionally, we'll address object-to-primitive conversion strategies, including hints, and examine `toString` and `valueOf` methods for effective conversion management.

By course end, you'll possess a comprehensive grasp of modern JavaScript's OOP concepts, enabling you to write concise, efficient code and confidently tackle intricate programming challenges. This knowledge will not only elevate your JavaScript skills but also enhance your ability to design robust and scalable applications, making you a more versatile and valuable developer in today's competitive landscape.

Who this course is for:

The engaging and practical approach taken in this tutorial aims to build not just knowledge but also confidence—a crucial aspect often lacking even after completing multiple courses. It's crafted to inspire you to dive deeper into computer programming. Should you find that this course doesn't meet your expectations, you have the assurance of a refund.
This course is ideal for individuals who are new to JavaScript and want to solidify their understanding of objects in a modern JavaScript context.
If you're a web developer looking to enhance your skills in handling objects and want to explore advanced techniques, this course is tailored for you.
Individuals with a passion for programming, even those with minimal coding experience, will find this course accessible and inspiring as a starting point in object-oriented programming.
Whether you're a student studying computer science or a self-learner eager to delve into JavaScript and programming concepts, this course provides a structured and engaging learning path.
If you're transitioning from another programming language to JavaScript and want to grasp the nuances of working with objects, this course will provide valuable insights.
If you've completed courses but still lack confidence in applying your knowledge practically, this tutorial focuses on building confidence through hands-on practice.
Professionals who want to refresh their knowledge of JavaScript objects, including those returning to coding after a break, will benefit from this course.
Individuals looking for inspiration and a motivational push to dive deeper into computer programming will find this course encouraging and empowering.
If you prefer practical learning with real-world examples and hands-on exercises, this course is designed to provide an immersive and practical experience.
With a refund option available, this course is for anyone seeking quality content and a risk-free opportunity to explore and master Modern JavaScript Objects.

JavaScript OOP: Mastering Modern Object-Oriented Programming

What you'll learn

Explore related topics

Coding Exercises

Course content

Introduction1 lecture • 2min

JavaScript Objects7 lectures • 1hr 2min

Object References and Duplication5 lectures • 38min

Methods in Objects4 lectures • 24min

New Operator4 lectures • 23min

Optional Chaining System4 lectures • 26min

Understand Symbol Type4 lectures • 28min

Object Transformation into Primitives4 lectures • 24min

Requirements

Description

Who this course is for: