Objects An object is an abstract data type that we create to mimic real-world items. Like pen and paper!  In other programming languages, these are called classes but in Javascript, we did not have classes before ES6. Don't worry we will get there real quick! Objects would have properties (attributes) like ink colour and functions like a pen object will have a write function(method). Objects serve as an awesome way to organise your Javascript code. Creation of objects - Objects have parents too! Besides the normal creating of objects, there are some things that happen during the object Just like how you inherited attributes from your parents, objects get their attributes from their parent. The prototype. The difference is that there is only one prototype. creation. And now each object will have a prototype attribute. Like all humans have blood. The prototype will simply be another object that the newly created object will be able to access. { .name = name .symbol = symbol
} playerX = Player( , ); ( ) function Player name, symbol this this const new "Shingi" "X" // playerX will have a prototype attribute // playerX prototype will be from the parent constructor Player.prototype // if we create using object literal like let playerY = GamePlayer{} then playerY.prototype will be from Object.prototype - JS does not have the traditional inheritance type that we have in other programming languages. Meaning in the example above, by updating the `Player.prototype` all instances of Player like playerX will automatically have access to Player.prototype. Prototypes help with Inheritance Let's continue with the code above and introduce another object GoodPlayer who will inherit from Player. Player.prototype.sayHi = { .log( ) } 

Player.prototype.sayBonjour = { .log( ) } { .score = ;
} GoodPlayer.prototype = Player( , ); t = GoodPlayer();
t.sayHi(); // Lets add something to Player Prototype => () console "HI!" => () console "BONJOUR!" ( ) function GoodPlayer this 1000 // Lets make GoodPlayer inherit from Player // To do this we will set GoodPlayer's Constructor to Players's constructor new "Shingi Prime" "M" // Yes yes ideally the parent should take no parameters. But wheres the fun in that? // remember how we just learnt how to make objects to either inherit from Object or any CustomObject? //Look up if you forgot! let // Will work - If the property does not exist on any of the object’s prototype in its prototype chain, then the property does not exist and is returned. Prototypes help out with the prototype's chain undefined The recommended way to inherit & If no constructor GoodPlayer.prototype = .create(Player.prototype) Object Duplicating Objects This is for those instances or situations in which you want more of that particular thing that you would have made in JS. For example, you want to create more player objects for that awesome game that you have been working on. Fortunately, you do not have to copy and paste each time you want a new instance of an object. We use the constructor. { .name = name .symbol = symbol
} playerX = Player( , ); ( ) function Player name, symbol this this const new "Shingi" "X" //playerX.symbol --> Shingi Above is how you would create a constructor with Javascript. Now have fun and duplicate your players! there's a problem. Constructors look just like normal regular functions. The only difference now is that you have to instantiate them with the keyword. BUT new This explains why playerX = Player ( , ) playerX = Player( , ) const new "Shingi" "X" // This will work. const "Shingi" "X" // This will not work. Yes, one can change the world. Not only is that a potential bug in the making. Constructors violate the principle which states that an API should be open for but not These, to me, are the biggest disadvantages to constructors. word open/closed extension modification. Factory  Functions So we saw that constructors, as an optional way of also organizing our code - also have their disadvantages. Factory Functions have come to the rescue! FFs serve as also a way to ditch the keyword. new Let's keep on with our Player! player = { sayHello = .log( ); { name, symbol, sayHello };
}; playerX = playerFactory( , ); .log(playerX.name); const ( ) => name, symbol const => () console 'hello!' return const 'shingi' 'X' console //shingi Yes, you don't need to say And they are much simpler to get up and running that working via prototypes. new! Inheritance with Factory Functions Player = { showSymbol = .log( ) {symbol}
} GoodPlayer = { {showSymbol} = Player(symbol) doSomethingBetter = .log( ) {showSymbol, doSomethingBetter}
} playerX = GoodPlayer( ); const ( ) => symbol const => () console `my symbol is ` ${symbol} return const ( ) => symbol // lets inherit! const //saySymbol is the unpacked return from Player const => () console 'Something Better' return const 'X' //playerX can also showSymbol! Factory Functions Reloaded: The Module Pattern ES6 introduced the module pattern which helps out in a major way when it comes to private variables and namespacing. A general rule of thumb is If you want one of that thing, use a module. If you want multiple instances - use a factory function. Well, the Modules are a super complicated thing and grab a pen and paper because we are here for a while! Okay, I'm joking! The module is just a factory function that is immediately invoked. Meaning that you move from this x = { .log( ) })() const ( )=> ( console "Hey!" //This will make it immeadiately run. (Immeadiately invoked) //IIFEs (Immeadiately Invoked Function Expressions) will run instantly as they are instantly evaluated by JS //Meaning 1.toString() will not work but (1).toString will work // Even though 1  and (1) are both an instanceof Number Conclusion Both objects and factory functions are awesome ways to organize your code. Both have their good parts and bad parts. ES6 Introduced classes as a way to minimise/reduce the complexity of the prototypes that are used if you decide to use prototypes. A module is a modification/type of a factory function.

Chain

Instantly

Super

How to Set Up Ruby On Rails on Windows 10

Getting The Perfect Layout in CSS: Grid + Flexbox

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Django

Nominated for 2022 - HackerNoon Contributor of the Year - Raspberry Pi

Too Long; Didn't Read

Javascript: From Objects to Factory Functions And Modules

Javascript: From Objects to Factory Functions And Modules

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Arrays vs. Linked Lists: Which Is Better?

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

Arrays vs. Linked Lists: Which Is Better?

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps