Advanced Objects & Methods

Definition

Create an object

Just like a JSON object ha...

Constructor Function

What if I want to add another book?

Use constructor function to create new objects

just like object template

constructor function is different from object properties

constructor function: this.title = ‘aaaa’ (default value)

object property: title: ‘aaaa’

DO NOT return any value in a constructor function

the ‘new’ synctax already create a new object and return itself

Setting up Prototype Object

Shared Methods (functions) between Instance Objects

Remeber to use this and DO NOT USE arrow function

Please note an important use case regarding variable scope

Prototypal Inheritance

The instance look for property and methods inside itself first, before looking up to the prototype.

it does not look whether it is created first or not.

EVEN THE OBJECT AND METHODS WERE CREATED FIRST, if we add a new method to the instance later, it will use the latter.

The same for PROPERTY: it will look for value in the instance first, before going up to the prototype

EVEN WHEN YOU CHANGE PRIMITIVE (default) FUNCTION

⁠

Screen Shot 2022-02-09 at 4.35.13 PM.png

⁠

Primitives & Objects

There are many default methods and functions related to objects

strings, numbers, arrays are also objects

and they have default / primitive methods / 1st-level prototype

WHY WE CAN USE A METHOD BUT IT DOES NOT EXIST?

Because...

'hasOwnProperty' mean a property at object level, not higher level

⁠

Screen Shot 2022-02-09 at 4.48.44 PM.png

⁠

You can even create a new default Object method, and use everywhere

Different synctax for new objects

just to clarify how other / normal objects are affected by our custom default method

Primitives for special Objects

myArray — Array.Prototype — Object.prototype — null

myFunction — Function.prototype — Object.prototype — null

myNumber — Number.prototype — Object.prototype — null

myString — String.protoype — Object.prototype — null

string can be used as an Array Object or Normal Object

Class Syntax

class = constructor function + prototype methods

IMPORTANT: no comma , between contructor and method names in class

Subclass

Person → Employee, Student

Book → Paper Book, Podcast Book

Getter & Setter

Get correct data type with validation

instead of creating a function and validate data before setting to a variable

manipulate input and output data behind the scene

Use getter and setter in class

THIS IS USEFUL TO REPLACE AUTOMATIC METHODS WITH PROPERTY

do not need to store fullName when we already have firstName and lastName

just need to calculate with a getter function

the same for setter function (but actually setter is only useful when we use with getter)

De-structuring

⁠

https://www.udemy.com/course/modern-javascript/learn/lecture/10217536#overview⁠

⁠

Closures

Run a function to create (return) a function

This is useful to manipulate objects

Advanced Synctax

Shorthand Synctax for Object Properties

If object properties are the same as variables, you can use:

Destructuring Synctax for Object Properties

Convert object properties into variables quickly, using the same property names:

Applications for Destructuring

when you have a function that require many input / arguments from an object

⁠