Object-oriented Programming in JavaScript

Explore objects in JavaScript and master creating objects, factories, and constructors, while comparing primitives and reference types, manipulating properties, and defining private properties with getters, setters, and prototypes.

Create a circle object using object literal syntax in JavaScript, defining radius and location and a draw method. Access members with dot notation and distinguish properties from methods.

Shows why object literals cause duplication for objects with behavior and introduces a factory function createCircle that returns objects with a radius and a draw method using ES6 shorthand.

Explore constructor functions in JavaScript, using this and the new operator to create objects with properties like radius and methods like draw, and compare constructors with factory functions.

JavaScript objects always have a constructor property referencing the function that created them, illustrated with circle objects, and contrasted with object literals, string literals, boolean literals, and number literals.

Discover how in JavaScript, functions behave as objects with properties and methods like call, apply, and bind, and how new creates object instances with a function constructor context.

JavaScript distinguishes primitives (number, string, boolean, symbol, undefined, null) from objects (including arrays and functions). Primitives are copied by value; objects are copied by reference.

JavaScript objects are dynamic, letting you add properties like a server-generated token or circle location and radius using dot or bracket notation, and delete fields before sending data to clients.

Learn to enumerate properties with the for in loop, access values via bracket notation, filter properties using typeof, retrieve keys with Object.keys, and check existence with the in operator.

Master abstraction in object-oriented programming in JavaScript by hiding implementation details such as default location and computeOptimumLocation, exposing only the public interface like radius and draw.

Explain how to implement abstraction by hiding internal members with private properties and methods, using closure to protect state and reveal a simple public interface through the draw method.

Learn to expose a private circle defaultLocation with a read-only getter and a validated setter using defineProperty and defineProperties, including error handling for invalid locations.

Design a stop watch object with a duration property and reset, start, and stop methods; learn how it counts time and prevents double starts or stops.

Implement a stopwatch as a constructor with private start time, end time, running, and duration, exposing start, stop, reset, and a duration getter, validating and computing elapsed seconds from milliseconds.

Inheritance lets circle and square share the computeOptimumLocation method by defining a shape base class and having circle and square inherit it, illustrating an is-a relationship.

Explore how JavaScript uses objects and prototypical inheritance to share behavior, linking a circle object to a shape prototype and traversing the prototype chain.

Explore how multilevel inheritance works in JavaScript by tracing prototypes from arrays to the root object, and through custom constructors like circle to its circle base.

Explore how JavaScript properties have descriptors and control writable, enumerable, and configurable attributes. Learn to use Object.getOwnPropertyDescriptor and defineProperty to influence iteration and mutation.

Learn how constructor prototypes define the parent for objects in JavaScript by using Object.getPrototypeOf and the __proto__ property, linking constructors, objects, and their prototype bases.

Move the draw method to the circle prototype to save memory by using a prototype instance. Explore instance versus prototype members, overriding toString, and referencing methods between prototype and instance.

Explore how a circle object with instance members radius and move and a prototype member draw shows prototype changes affecting objects, and compare object.keys, for-in, and hasOwnProperty.

Avoid modifying objects you don't own, including array prototypes, to prevent library conflicts and future JavaScript changes.

practice moving stopwatch methods to the prototype to explore memory optimization for multiple objects, and learn how public read-only properties enable access to running and startTime through this.

Move start, stop, and reset to the stopwatch prototype and expose read-only properties like duration, startTime, endTime, and running. It warns against exposing internal state and premature optimization.

Learn to implement prototypical inheritance in JavaScript by moving the duplicate method to a shape prototype and using Object.create to let circle and square inherit from it.

Resetting the circle prototype ensures the constructor points back to the circle function, enabling dynamic object creation with new Circle(1) and preserving the draw method.

Call the super constructor in JavaScript by using Function.prototype.call to bind this to the new circle instance and pass color to initialize the color property.

The lecture shows creating a square constructor that inherits from shape, then refactoring prototype inheritance into a reusable extend function to implement intermediate function inheritance.

Override the parent shape's duplicate method in the circle object to customize behavior within a prototypical inheritance chain, then optionally call the parent with shape.prototype.duplicate using call.

Learn polymorphism in object-oriented JavaScript by building a shape hierarchy, inheriting from shape, redefining duplicate for circle and square, and calling shape.duplicate to execute many forms in one loop.

Avoid fragile inheritance hierarchies in JavaScript. Embrace composition over inheritance using mixing canWalk, canEat, canSwim.

Master object-oriented programming in JavaScript by composing features with mixins like eat and walk, using Object.assign and prototype-based composition to build animals and people.

Design HtmlElement and HtmlSelectElement using prototypical inheritance in JavaScript, implementing own and prototype methods, and manage items with addItem and removeItem.

Explore prototypical inheritance in JavaScript through HtmlElement and HtmlSelectElement, focusing on prototypes and methods like click and focus. See how Object.create compares to new HtmlElementObject and how ES6 simplifies inheritance.

Explore polymorphism in object-oriented JavaScript by implementing render methods across HtmlSelectElement and HtmlImageElement, both inheriting from HtmlElement, and rendering their HTML representations.

Learn to implement HtmlImageElement and HtmlSelectElement in JavaScript, using ES6 template strings, dynamic ${} interpolation, map with arrow functions, and join to render clean options.

Explore how ES6 classes add syntactic sugar to prototypical inheritance, enabling constructors and methods in a class body. See methods on the prototype and Babel’s ES5 output for later browsers.

Learn how hoisting works in JavaScript by comparing function declarations and function expressions, and contrast class declarations with class expressions, noting they are not hoisted and when to use each.

Explore the difference between instance and static methods in JavaScript, and learn to implement static utilities such as circle.parse for json input.

Explore how the this keyword points to the object in method calls, to the global object in function calls, and how the new operator, with strict mode, affects its value.

Explore implementing private properties and methods in ES6 classes using symbols, reinforcing abstraction by hiding internal circle details and contrasting with the underscore convention.

Use weakMaps to implement private properties and methods in a circle object, hiding the radius and move logic while exposing a public draw method.

Define a private radius and expose it with an ES6 getter and setter, enabling read access and validation as a property, throwing an error for nonpositive values.

Implement inheritance in JavaScript by extending a shape class to create a circle, reuse move and draw methods, and use super to pass color and radius properties.

Learn method overriding in JavaScript's prototypical inheritance by reimplementing a circle move method and using super to reuse the base class behavior.

Implement a stack using ES6 classes with push, pop, and peek, a count property, and error handling for empty operations, demonstrating core data structure concepts.

Learn to split code into modules to improve maintainability and abstraction, moving private details like a circle’s radius to a separate file and using CommonJS and ES6 modules.

Explore the CommonJS module format in Node by modularizing code, exporting a public interface with module.exports, using require to import circle.js, and applying cohesion and abstraction to hide implementation details.

Explore ES6 modules by exporting the circle class and keeping the radius weakMap private, then import the circle module in index.js and configure the browser as a module.

Learn about es6 tooling for browser applications, including transpilers like Babel that translate modern JavaScript, and bundlers like Webpack that create and optimize a single bundle through minification and uglification.

Install node and npm, initialize a project, and install babel tools. Use babel-cli, babel-core, and babel-preset-env to transpile ES6 to ES5 and output to build, then bundle with webpack.

Set up a practical webpack workflow with babel to transpile ES6 to ES5, bundle your modules into dist/main.bundle.js, and use watch mode for automatic rebuilding.