Ultimate JavaScript Objects

We take a look ahead at this chapter and what we will be covering.

•  Cover all relevant aspects of Object theory
•  Explain OOP
•  Compare objects and arrays
•  Discuss the many weird and interesting properties of JavaScript objects specifically
•  Take a look at the colorful history of JavaScript objects

We discuss the most basic explanation of what an object is and go from there.

•  An object is a collection of values (properties)
•  All properties have a unique key
•  Order of properties cannot be trusted
•  Some properties can be functions (methods)
•  Can sometimes be serialized – or turned into a universal form of data like a string

In this video, we look at several real-life example of objects

We talk about OOP, or object-oriented programming, what it means, and preview the chapter that deals exclusively with OOP.

•  Objects can be instances of classes
•  Classes are like blueprints, objects are like the manufactured goods
•  Each instance of a class is independent, has own properties

•  Useful for solving difficult problems or ones that are hard to conceptualize

A short, visual lecture to help understand OOP

We discuss the capabilities of JavaScript objects

•  Transfer data between functions or even programs
•  Group complex data in ways easy for humans to understand

•  Represent classes that work together in grand and complex ways

We take a look at situations where it would (and would not) be appropriate to use objects.

• Collection of properties that all fit together thematically
• Elements in no particular order

We compare objects and arrays, noting their similarities and differences.

We look at some of the weird and quirky parts of JS objects.

•  Can borrow methods from other functions using the mysterious this keyword
•  Inside of objects, special scope applies
•  Objects can be initialized by classes, but still have dynamic properties added later

We observe how JavaScript objects are different today than they were ten years ago.

•  No classes before ES6
•  OOP could still be implemented through libraries

We conclude this riveting chapter.

•  JavaScript objects are dynamic and powerful
•  Can be used for most database or front-end purposes
•  Objects are similar to arrays
•  Objects work well when implemented using object-oriented programming
•  Copied by reference

In this chapter we take an overview of what working with objects is all about.

•  JavaScript objects are easy to learn, yet tough to master
•  Numerous ways to create, edit and access – some with differing consequences
•  Some features (like Freezing and Copying) are more obscure but still useful

We take a look ahead at what this high-intensity chapter will cover.

•  Create objects using object literal notation (and alternatives)
•  Add and access object properties
•  Iterate over properties
•  Map arrays of objects
•  Explore ES6 features – symbol, observe and freeze
•  Learn about object.prototype

We discuss and demonstrate the creation of JavaScript objects.

• Objects can be created using object literal syntax { }
• Objects can also be created with the new keyword
• Can also be created with Object.create
• No perfect solution for every situation
• Using new allows for classlike behavior and prototypical inheritance

We chat about, and demo, adding and checking object properties.

• Properties can be added to existing objects with dot or bracket notation
• Access also occurs via dot or bracket notation
• Some properties only accessible via bracket notation

We briefly discuss and demo object methods, as a lead in to the next chapter.

• Objects can have properties which are functions
• These are called methods
• No difference between method and function except this keyword
• No practical reason to implement non-static methods without this
• The this keyword will be fully explained in the next chapter on Object Scope

We go over two ways to remove object properties.

• Property values can be removed without removing the key by setting them to undefined
• Both key and value can be removed by using the delete keyword

We discuss and demo looping through object properties.

•  Object properties can be iterated through via For In Loop
•  Used to be very challenging to do this in ES5, now is easy
•  Looping doesn’t usually make sense since objects tend to have different types of values as variables
•  Sometimes  can be useful with array-like objects

We explain and demo the sometimes challenging process of array-object maps.

• An extremely common problem is needing to transform (or map) an array of congruent objects into a different type of object
• Editing existing objects / copying both possible

We discuss and demo an extremely useful ES6 feature, Symbols, which can be used to access unique object properties.

• Symbols are guaranteed to be unique
• Conceptually identical to a GUID (long, random string)

We discuss and demo two unusual object methods, freeze and seal, which restrict the affected object.

• New to ES6
• Both restrict (control) ways an object can be modified
• Mostly used to prevent developer error
• Prevents new properties from being added (seal) or anything at all from changing (freeze)

We discuss and demo the oft-misunderstood Proxy, which is an incredibly useful new ES6 feature.

• Proxies allow greatly increased oversight of objects
• Control how values are changed

We chat about the dread Object.prototype, and even include a demo.

• Prototype is a powerful but highly confusing feature of objects

We conclude the edge-of-your-seat adventure that was this chapter.

•  Objects can be created various ways – literal syntax is recommended
•  Objects can have any number of properties which are easily accessed or changed
•  Can be iterated with For In Loop
•  Symbols are the preferred way of accessing properties internally
•  Freeze and Seal both prevent object from changing
•  Proxies can add further control to objects

We'll introduce this mysterious concept of object scope.

•  JavaScript has three scopes – window, function and eval
•  Object scope is function scope when that function is a method of an object

We'll explain more about the this keyword.

•  Value of this keyword is equal to the object itself, when this is inside one of its bound methods

•  Value of this is always provided – no need to ever set it
•  Though innocuous, a huge amount of new code constructs are possible

We'll discuss Strict Mode, a cool ES5/ES6 feature.

•  Activates streamlined version of JavaScript
•  Activated by putting “use strict” at the top of script or function

We talk about Binding Scope, the next level for controlling the this keyword.

•  All functions have a bind method which creates a copy of the function with a different value of this
•  By binding a function to an object, we create a method that can refer to properties of the object itself and its other methods

We explain and demo object composition, a powerful construct that exists in JavaScript.

•  Shares methods between objects on a flat hierarchy using this and bind
•  Not possible in many other languages and therefore worth investigating

We wrap up this spellbinding chapter.

• Using the this keyword allows methods to refer to the object of which they are part
• The value of this can be changed in any function using the function’s bind method
• Unusual cases of the this keyword can be avoided by using strict mode
• Creating class-like objects by using many methods and the this keyword is called composition

We ask the question - why ES6 classes?

•  Use an ES6 class to make lots of similar objects

We explain exactly what an ES6 class is.

•  Way to access high-level functionality without libraries or hacks
•  Can be more easy to understand than functions
•  Suitable for many situations where the end result is a complex object with many methods and properties

We install and configure Atom to be the ultimate JavaScript development console.

•  Install Atom (v1.8.0 or compatible)
•  Install platformio-ide-terminal (2.1.0 or compatible plugin)
•  Install NodeJS
•  NPM install Nodemon

In this lecture, we explain and demo the process of creating an ES6 class.

•  ES6 classes can be created with the class keyword
•  Can also be created with class expressions

We explain and demo adding methods to classes.

•  Classes can have properties and methods just like objects

•  Methods have convenient syntax without the word function

We explain and demo inheritance, a means of accessing the methods of other classes in a hierarchy.

•  Indicate inheritance with the extends keyword
•  Access parent methods with the super keyword

We cover what we learned in this peerless chapter.

• Classes are versatile and convenient

• At its heart, a function that returns objects
• Only works in ES6+ but can be readily compiled to ES5

We will look ahead to what we'll be covering in this chapter

•  Learn about the complexities of copying JavaScript objects
•  Learn several strategies for achieving end goals
•  Apply strategies in a few demos

In this chapter, we compare copying to referencing and see what the difference is.

We discuss the complicated points of copying objects an some solutions

•  Some values (references to other objects) cannot be truly copied to another object
•  Objects with only primitives (strings, numbers, etc.) as properties can be copied without any complication at all

We discuss and demonstrate two practical ways to shallow copy an object.

•  Create an empty object and loop through the properties of the original, adding them to the copy
•  Create an object with object literal syntax and include the copied variables as key-value pairs
•  Object properties will be copied as references only (fine if this is the intended result)

We explain and preview the process of deep copying.

• A copy of an object which also attempts to copy referenced values is called a “deep” copy
• Deep copying is not possible if loops exist within reference

We conclude by reviewing what we learned in this chapter.

•  Copying objects is more difficult than copying strings or floats
•  Objects are not copied when creating a new reference
•  Copying objects with no references as properties is straightforward
•  Copying objects with nested properties is challenging but not impossible
•  Objects with loop references cannot be deep copied

We preview the chapter and define JSON

•  JavaScript Object Notation
•  Means of encoding data in object or array format

• Can store certain properties

Why answer the question: Why JSON?

•  Turns any object into a string
•  Can be transmitted efficiently across HTTP
•  Responses sent from server in JSON do not need to be heavily parsed

We compare XML and JSON

We explain and demo the process of serialization, or encoding JavaScript objects.

•  Turning JavaScript objects into strings (or JSON) is called serializing
•  Can be done with built-in JSON module
•  Some properties cannot be serialized

In this video, we decode, or parse, JSON.

•  Parsing (or de-serializing) JSON turns it into a JavaScript object
•  Only valid JSON can be parsed

We briefly discuss the idea of using JSON over HTTP connections.

•  Perfect for Node.js backend
•  Minimal formatting required

We wrap up the chapter on JSON.

•  JSON is lightweight and versatile
•  Extremely easy to use in any JavaScript environment
•  Good choice for communication between browser and server
•  Easily parsed and stringified with JSON module

We introduce Lodash, the premier object manipulation library.

•  Functionally identical to Underscore but better maintained
•  Implements many useful functions for operating on objects
•  Usable in any front-end or back-end (Node) JavaScript project 

We explain in convincing terms why Lodash should be used.

•  Implementing a function to copy an object that covers every corner case is non-trivial
•  Even if utility is implemented correctly, performance issues are also a challenge

•  Backed by massive battery of tests and performance benchmarks - > 6,566 tests

We explain and demonstrate the implementation of the Lodash library.

•  Lodash can be included as a script on any front-end page
•  Can be installed via NPM for NodeJS server

We explain and demo _.assign

•  Copies the properties of any number of objects to another object
•  Can be used to create a mutated or hybrid copy of an objec

A quick demo of _.invert

•  Used to swap all an object‘s keys and values

We describe and demo the useful _.pick() method

•  Takes only the chosen properties from an object and creates a new object from that copy

A quick description and demo of merge.

•  Merges two arrays of objects into an array of combinations

We demo cloneDeep() to finally make a deep copy of an object.

We conclude this last and final chapter, other than the proceeding one.

•  Lodash methods exist for almost any object operation necessary
•  Methods especially exist for those operations that are tricky or error-prone

We review what we learned in this spellbinding course.

We discuss resources for further education on the topic of this course.