DEV Community: Tri Nguyen

Understanding Linked List

Tri Nguyen — Thu, 07 Mar 2019 19:13:48 +0000

Greeting fellow coder.

On this installment I will break down Linked List data structure...you will learn about the fundamentals, how they work, a variation called a "doubly linked list" (I didn't make that up), and ask the question... are they easy to learn and should you? spoiler...you should.

What is A Linked List ?

Linked List is a data structure consisting of a group of vertices (nodes) which together represent a sequence. Each vertex is composed of a data and a reference (link) to the next vertex in the sequence. In simpler terms, it is a flexible data structure that can store many nodes, and it does this by having each nodes point to the next node in the list.

Linked List and its variations are used as underlying data structure to implement List, Stack, Queue, and ADTs(Abstract Data Types).

breakdown:

This particular linked list there is 7 nodes, and in each node there is a specific variable in this case they are numbers [22,2,77,6,43,76,89]
The arrows for each nodes connecting one to another, these arrow are called pointers.
The "head" label indicates when the linked list begin and the 'tail' label indicates when it ends.
If you are looking at the tail node and wondering "hey isn't every node in a linked list suppose to have a pointer that points to the next node". You are 100% right, as a matter of fact the last node does have a next pointer value and it is 0 or null, which indicate you have reach the end of the list.

How do you use it?

Since Linked List is such a fundamental and simple linear data structure. It has a range of potential applications as a list ADT(Abstract Data Type) e.g. student list, event list, appointment list, etc.

As stated earlier Linked List is also being used as an underlying structure to create other more complex structure such as Queues and Stacks.

Furthermore because linked list can be easily be reorder, split, trimmed, reverse, and so on. They can be pretty useful for algorithm like sorting.

Lets try to search a value of 43 from the linked list example above

breakdown:

Searching through a linked list is fairly simple, the algorithm will check first at the head node if the value is 43. If no, it will continue to the next node by the way of the pointer and so on.
You can predict it will go through 4 node until it reaches the node with the value 43. If we were to search for a value that is not on the linked list it will traverse through the whole list and eventually return null.

Lets try to insert a value of 14 at index 3 in the linked list

breakdown:

Originally at index 3 was a node with the value of 6
To insert the new node (value 14) the algorithm first traverse from the head to index 3 then add the node .
By adding the new node we change the pointers of index 2 (value 77) to point to the new node (value 14). While the inserted node (value 14) pointer is now pointing at index node 4 (value 6)

Time to delete a node in the linked list. Lets remove the node in index 2 (value 77)

breakdown:

It is a fairly simple process
We traverse to the node in index 2 (value 77), and remove it from the list.
By removing the new node we change the pointers of index 1 (value 2) to point to now the new node from index 3 (value 14)

In summary Linked List is very similar to arrays when it comes to searching, inserting, or removing something in a list. But the difference comes from the Big O notation and how long it takes for each data structure to execute.

EXTRA ....EXTRA

Lets talk about a "doubly linked list". Since all of the previous example above are consider singly linked list. Here are some basic information on doubly linked list.

reference from: Geeksforgeeks

A Doubly Linked List contains an extra pointer, typically called previous pointer, together with next pointer and data which are there in singly linked list.

some advantages for a Doubly Linked List(DDL):

A DLL can be traversed in both forward and backward direction.
You can remove a node more efficiently disadvantage
Every node in a DDL require extra space for the previous pointer

Why do you need to know Linked List ?

Linked List are similar to Arrays in terms of a linear data structure. But unlike Arrays where their size is fixed and we must know the upper limit size of elements in advance, unlike Linked List which are more dynamic. Another advantage is the ease of insertion/deletion, in a linked list you do not have to create room and shift a node when you insert/delete like in Arrays, you only need to change the pointers to a new element when inserting/ deleting a new node.

In terms of Big O notation, the average time to access and search is Θ(n) slower than arrays. Insert, and delete data is Θ(1) faster than arrays.

hopefully this article was helpful.

Thanks for reading me !

Understanding Binary Search Tree

Tri Nguyen — Tue, 11 Dec 2018 21:21:20 +0000

Greeting fellow coder.

On this installment I will break down the Binary tree data structure...you will learn about the fundamentals, how they work, how to traverse/ walk through a tree, and ask the question... are they OVERRATED? spoiler...they're not.

What is A Binary Tree ?

First, it is one of the many data structure used to efficiently map keys to values, for efficient search/retrieval, insertion, and/or removals.

A binary tree in particular has ONE root, that root has 2 child nodes, those 2 child nodes has 2 child nodes each, and eventually reach the leaves which are the last nodes that doesn't have any child node. If that didn't make a lot of sense check out an example picture of a binary tree below.

8 is the root ( there should only be one root)
4 is the left child node, and 12 is the right child node
4 and 8 both has 2 child nodes, and so on.
1,3,5,7,9,11,13,15 are all leaves.
It is called a binary tree because every node can have no more than 2 child node. (it is possible to have one child node, that just means the other child node is NULL)

How do you use it?

The binary tree above is also a perfect example of a Binary Search Tree, which states every child node left of the root must be less than the root node, and every child node to the right of the root must be higher.

This ordering property enable us to search through the tree quickly.
lets take a look at another tree, and this time lets search for the number 83

Steps:

We see that the root(84) is greater than 83 therefore we can cut out all of the child nodes from the right.
That leaves us to 54 the left child node of the root, from there we see that 83 is higher than 54 so we will go to its right child node 73.
73 left child is null, but its right child is 83! the number we wanted to search.

Now lets say we want to insert the number 90. The steps would be similar to search.

Steps:

90 is higher than the root so we will go to the right to 87.
90 is still higher than 87 so we will go right of node 87 to 94.
90 is less that 94 so we will go to the left, where it is null.
Since it is null this is where we will insert 90. Check below for results

Removing a node in a tree is a little more complex. Let me show you.

Lets take a look at this new binary search tree.

Lets say I want to remove 13.

Steps:

Starting from the root(89) which 13 is less than, so we move to the left child node which is 13.
From there the function will ask if 13 is a leaf, which it is not.
So it will go to the right, at 34 and ask if 34 is a leaf which it's not.
Since 13 is less than 34 we will now move to the left child node of 34, 21.
It will ask if 21 is a leaf, which it's not.
Since 13 is less than 21, we will move to the left child node again at 20.
Again at 20, we know it is not a leaf so we will move to the left child node to 14
At 14 they will ask it if this node is a leaf, the answer is yes.
Now the function will replace 13 with its "successor" 14. Results below

Lets Traverse!

We just went through how to search, insert, and remove nodes from a binary tree. Lets now see how we can traverse one.

There are 3 methods to traverse through a binary tree:

Inorder
In simple term we will go from left node, to root, than to right node.
Preorder
In simple term we will go from root, to left node, than to right node.
Postorder
In simple term we will go from left node, to right node, than root.

*Typically Inorder traversal is most common because it allows the nodes to be printed in order. *

lets take a look at this tree for example:

The Inorder traversal steps are:

A. start from the root(75) and move toward the left node 3, then we can ask does 3 have a child left node? since 3 doesn't have a child left node. We will log 3 and move on to its right child node 7.

(3)
B. Does 7 have a child left node? No, we will now log 7, and move on to it's right child node 24.

(3,7)
C. Does 24 have a left child node? Yes, it is number 8. Now we ask if 8 have a left child node ? No, we will log 8.

(3,7,8)
D. We will move back to 24 and log 24, because its child node 8 have already been logged, then move on to it's right child node 59.

(3,7,8,24)
E. Does 59 have a left child node? No, so we will now log 59. Then traverse back to the root.

(3,7,8,24,59)

F. Because we've register all of the left child nodes of the root. We can now log 75.

(3,7,8,24,59,75)

G. Now we move on to the right of the root node to 95. And ask does it have a left child node? Yes, now to move to 91. Does 91 have a left child node? No, we can now log 91.

(3,7,8,24,59,75,91)

H. Because we've register all of the left child nodes of 95. We can now log 95.

(3,7,8,24,59,75,91,95)

I. Then we can move on to 95 right child node 99. And ask, does 99 have a left child node? No, we can now log 99.

(3,7,8,24,59,75,91,95, 99)

By using Inorder traversal through this Binary Tree, you can see it the nodes are printed in order. I will not go over Preorder or Postorder on this article but you can check out these easy to understand videos from Michael Sambol below using those 2 methods.

Preorder: https://youtu.be/1WxLM2hwL-U
Postorder: https://www.youtube.com/watch?v=4zVdfkpcT6U

Why do you need to know Binary Search Tree ?

Binary search trees are collections that can efficiently maintain a dynamically changing data set in sorted order. Having a sorted array is useful for many tasks because it enables binary search to be used, to efficiently locate elements.

In terms of Big O notation, the average time to search, insert, and delete data is Θ(log(n)).

Who knows, you might be ask about binary search tree and how to traverse on in a interview.

hopefully this article was helpful.

Thanks for reading me !

Understanding Hash Table

Tri Nguyen — Tue, 27 Nov 2018 19:15:22 +0000

Greeting fellow coder.
Thank you for checking out my blog on breaking down Hash table. I will go over what it is, how to use it, and why you need to know this data-structure.

What is Hash Table?

A hash table, is a data structure that uses a hash function to efficiently map keys to values, for efficient search/retrieval, insertion, and/or removals.

Hash table is one of many data structure in computer science, for which their purpose is to essentially organize data, using a variety of management and storage format that enables us to efficiently access and modify them.

There are many other data structures like array, linked list, binary tree, etc.

For this article I will focus on Hash Table, which is widely used in many kinds of computer software, particularly for associative arrays, database indexing, caches, and sets.

How do you use it ?

Like any data structure, hash table is use to help solve data problems.

Basically how efficient in time and space can you....

searching for an item
insert an item
delete an item

The way a Hash table work is using Key => value lookup

A.) You take input keys run it through a hash function where it will map those input keys into numbers which corresponds to number of indexes in an array.

Lets say I have a list of names Michael, Bob, Jack, Becky. (these are my input keys)

B.) Run these inputs through a hash function.

There are many ways you can code a hash function, but essentially the hash function should take in a input string (the names we listed) converts them into an integer, and then remaps that integer into an index in an arrays.

C.) Boom we have associative values. Where we can now search, insert, and delete our data by using the Array index.

note: The array that stores the data from the hash table will likely always be much smaller than all of the available potential hash code or key inputs.

D.) Example

So lets picture we ran those names listed earlier into a hash function that holds the a max index of 7.

[undefined, [Bob], undefined, undefined,[Becky], [[Michael], [Jack]], undefined,]

So you can see there is 7 index in the array and all of those names have been map to a particular index.

We can now search for a particular name, like Bob is at array[1] Becky is at [4] so on and so forth.

*but what about array [5] which holds Michael and Jack.....well what a perfect segway into my-

"last but not least" note: because of a finite index, this opens the door for "collision" which is when 2 or more hash code is map in the same index.

There are different ways to resolve a collision, a very common way is by storing them in a linked list rather than just the strings. Just think of it as assigning an id to each name then storing it on a hash table.

So when looping through an index with multiple keys you are able to reference the specific name you want with their linked id.

That's about the basics of how a hash table operates. If you wish to learn more about hash tables the website below VisuAlgo does a great job in presenting hash tables and other data structure in easy to understand slides and interactive activities.

https://visualgo.net/en/hashtable?slide=1

Why do you need to know hash table ?

To do well in tech interview of course....

Technically yes, but also remember data structures like hash table are methods to efficiently search, insert, and delete data. And hash table is one of the more popular methods use because of how efficient they are.

In terms of Big O notation, the average time to search, insert, and delete data is O(1) which is pretty fast compare to all of the other data structure methods.

hopefully this article was helpful.

Thanks for reading me !

3 coding habits to unblock yourself (Part 3)

Tri Nguyen — Sun, 11 Nov 2018 21:26:42 +0000

Hello fellow coders.
Here is the inevitable part 3 of some good habits to unblock yourself. If you missed the 1st and 2nd part you can check it out right here:

part 1
https://dev.to/trilemaestro92/3-coding-habits-to-unblock-yourself-part-1-9lg

part 2
https://dev.to/trilemaestro92/3-coding-habits-to-unblock-yourself-part-2-4nge

Shall we begin.....

B-B-Break Points!

What are break points you ask?

" It is a place in your code that can be pause/ stop, which allows you to examine your variable when your code is running . "

Here's a example:

In this "blast from the past" example, the FizzBuzz challenge, I decided to add a debugger keyword at line 7 to pause the loop right before it finds a number divisible by 3.

So instead of looping through the length of 100 for the challenge, it will start running the loop through the number 1....2.... then pause in the opened browser at 3 due to the break point that I added.

If I hadn't added a debugger keyword, then when the loop reaches the number 3 it should activate the if statement at line 6 which would then console.log "Fiz" and continue looping through the rest of the numbers

So... you see, the debugger keyword is a powerful tool devise by god to FREEZE TIME AND SPACE!

or a really helpful Chrome dev tool. Which ever way you see it...

But jokes aside, the more I continue to develop and grow in web development, coding in parts and pieces then testing them have increase my efficiency. And having break points and using debugger have made my life much easier.

I strongly recommend checking out this video from the people of "Google Chrome Dev" to learn additional cool features from their DevTools utilizing break point:

Well its been really fun writing the "how to unblock yourself" series but all good things must co-

PART 3.5 COMING SOON!!!!!

3 coding habits to unblock yourself (Part 2)

Tri Nguyen — Thu, 08 Nov 2018 22:26:05 +0000

Hello fellow coders.
welcome back to part 2 of some good habits to unblock yourself. If you missed the 1st part you can check it out right here:
https://dev.to/trilemaestro92/3-coding-habits-to-unblock-yourself-part-1-9lg

Lets get started!

ERROR REFERENCE

In part one I talked about console log and how it can help beginners like me see the errors and where they're located. In this article I will discuss the habit of learning error messages.

JavaScript coding in particular is prone to errors due to its complex nature. Errors occur where you least expect them and they are one of the main cause of JS developer's banging their head in confusion.

But fear not, I believe if you can build a habit of learning or even familiarizing yourself with some common error of JavaScript, this habit can help you unblock a bug or issue more efficient.

In JavaScript there are many errors you can run across like ReferenceError, SyntaxError, RangeError, and many more. They all have different definitions and solutions. Therefore I would encourage you to start noticing some of the error code you are receiving and do a little research on them. Who knows once you come across the same error code more than once you can even built a radar for those error while coding and condition yourself to not make the same mistake.

BTW you can check JavaScript error code all out here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors

A few common JavaScript errors

Common SyntaxError:

If errors: The “==” operator performs a comparison while the “=” operator assigns a value, very easy to mix up.
Mismatch brackets, case sensitive, overall spelling mistakes.

Common TypeError :

1.Using an Array method on non-Array object can cause an error to occurs, since you'll be calling a method on an undefined object.

example.

map method can only be used for Array not object

2.Using null or undefined as an object. This is an error that occurs in browser when you read a property or call a method on a null or undefined object.

Those are some of common errors I've experienced. I'm certain in time my error list will grow as my knowledge on how to fix them.

Hope this article was helpful. Part 3 coming soon!

Thanks for reading me!

Understanding This Keyword

Tri Nguyen — Fri, 02 Nov 2018 02:55:52 +0000

Greeting fellow coder.
Thank you for checking out my blog on breaking down This keywords on JavaScript. I will go over what it is, how to use it, and some rules you need to know.

What is This ?

This, is a JavaScript keyword that refers to the object it belongs to.

For the example looking below you can see the This keyword was referenced in 2 different objects person1(line 5) and person2(line 12) in the "test" method. I basically want to see the value of this by console logging it.

To call the test function, I must refer to the object that owns the space. Hence the person1.test() and person2.test(). This is one of the more important concept when using this, because The value of this will be determined by the call-site. Thus triggering one of the rules called implicit binding.

Implicit Binding rule

When called like this: person1.test() the value of this inside test will be the person1 object or when called like this: person2.test() the value of this inside foo will be the person2 object.

Lets see what happens

On the the console, you can see the 2 objects on display, which shows all of person1 & person2 properties name location and, the test method. In simpler terms, the this keyword is basically replacing the object name person1 & person2 with this. Thus on line 5 and 12 of my code I could of written console.log(person1) and it would have had the same result. And this works because on my call-site (line 16-17) I used implicit binding.

(I will show what happens if you don't refer to the object that this belongs to next.)

The Default rule

When I call a function(that uses this) in a normal way or without using implicit binding. The value of this inside that object will be the global object (or undefined in strict mode)

For example:

On line 16 I've just saved the test function of person1 onto test2 as an variable.
Then on the next line I'm calling that variable test2 as a function.

Lets see the outcome.

What you're seeing here is the global object. Because of the way we called the function which was a undecorated and standalone function (line 17), the value of this became the global object, which was different to when we used implicit binding to call the function.

To recap I've explain the 2 of the more simple, basic rule when using this keyword (Default and Implicit binding). I will now expand more on how the arrow function and "new" keyword can affect the value of this.

Arrow Function rule

First, if you are unfamiliar with what an arrow function is here is a quick example below.

An arrow function is just another method to writing a function, it includes parameters, name, variable, functionality, etc. (for anyone who is A.D.D the console log is 12)

Next, using the previous example above I am going to change the test function into arrow function for person2, while leaving person1 a normal function. Inside both test, I simply want to return a greeting that reference both objects name.

The result:

From the console log result, person1 was able to successfully reference its object name, meanwhile person2 object name is undefined.

This is where the arrow function rule comes into play. Basically when ever you use an arrow function nothing is bind. Neither the argument neither this keyword, they are all free.

Therefore inside the person2 arrow function, when you write "this.name" this is referring to the "test" function, so you are actually coding "test.name" which of course will be undefined.

Meanwhile person1 you can see, when "test" method is a normal function, this is bind to either the global object or the parent object. Which in this case is the object person1.

Next, I will go over the new keyword and how it can affect this keyword.

new keyword rule

The new keyword is used to call any function. When you call a function using new keyword it creates an empty object named "this", then automatically return this object.

Therefore you don’t need to use the return keyword to return this from the function.

Lets take a look at an example.

Here, I made a function called "person". Inside the function I'm telling it to set 2 properties (name & location) and making it equal to my 2 parameters. (Notice I didn't use return on the function to get the value of this)

I will then call on the "person" function (line 7) using new keyword. With the arguments of "Jennifer" and "Seattle". And then console logging person3.

No problem at all!

Lets see what happens...

Because of the new keyword rules which again states 1.) Any function can be called with new 2.) It will then Returns the this object

I was able to call on the person function and passed through the argument inside the function parameters.Then it return to me an object (where I specified the 2 properties to equal my 2 arguments)

A good analogy would be, think of the new keyword as an factory and it's using "person" function as a model, to churn out as many other functions using the the person model.

There you have it.

We have reached the end of the article of me going over the fundamental of this keyword to you guys, hopefully this article was helpful.

Thanks for reading me !

3 coding habits to unblock yourself (Part 1)

Tri Nguyen — Tue, 02 Oct 2018 19:05:21 +0000

What is up fellow coder.
Thank you for checking out my thoughts on some good habits that helped me get passed many coding road block efficiently.

Quick Disclaimer: I'm currently 2 months into a coding boot-camp, but am confident this could help others like myself to unblock from a beginner perspective.

Lets get right into it!

CONSOLE LOG !!

You've probably been told by a professor or an instructor many times on how console logging is really important to figure out bugs and issues. But to be honest I was brushing off this approach early in my brief coding "career", only because I was more focused on learning functions, queries, and tons of coding concepts (you know the meat and potatoes). Which is of course important in their own rights. And perhaps, I could even say the route I took was the right route when one begins their coding journey.

(Big BUT Alert!)

But, I am here to say once you do get comfortable with the syntax and concepts of any language, console log should be the next thing you need to master. Seriously I actually didn't realize this my self until recently.
Actually, let me describe to you what my thought process in coding before understanding the magic of console log.

When facing a problem before console log

Google the problem.
Look at past activities.
Ask my friend Matt (a classmate who sits next to me).
Start doubting my life choices.
Carefully read through every line in my code for spelling errors :'(
Ask my instructor for help.

When facing a problem after console log

Run my code with a console log, receive a error message.
Read the error message.
Fix the code where the error message said it was located.

Of course it not as simple but that's basically the main idea.

To my point, any new developer would prefer the latter. But like I stated earlier (at least for me), if I'm not comfortable with knowing the fundamentals and concepts of a language first, trying to console log everything would be less effective in my opinion. Since I wouldn't know what/where to console log.

Thus, with that being said once you do feel like you grasp the fundamentals and concepts, try to master the art of console log next it is one of the best ways to hurdle through any coding roadblock.

I hoped that was helpful

(Part 2 coming soon)

Understand basic REST Methods

Tri Nguyen — Tue, 25 Sep 2018 19:41:14 +0000

What is up fellow coder.

Thank you for checking out my article on Understanding REST methods and its correlation with EXPRESS server.

Lets get right into it!

What is REST Method ?

Well it stands for Representational State Transfer.......

Ok, since this article is about REST methods associated with Express Router and Node.js. REST is the different HTTP routes that can define the relationship/interaction between the client/server for our applications.

And these methods can be used to map out CRUD (create, retrieve, update, delete) operations. An example of CRUD application can be Facebook, because you can create content, retrieve content, update content, and delete content.

Big Picture: when building a CRUD application you will need your
Web page(html,CSS, and JavaScript), a database to get and store data, and a Server to configure the application and create routes between clients and database. Essentially you can imagine using REST methods is used as a way for the server to respond to what the client wants to do and apply the changes to the database.

Lets Apply

Lets take a look at some of the main REST methods and their correlation with a CRUD application.

GET - this method retrieves information, a GET request can be made by a client or server to get information from a database. (The retrieve part of CRUD)
POST - this request is often used to create a new entity. Clients post new content, which in turn the content will either create new data or update data in the database. (the create part of CRUD)
PUT - Store an entity at a URI. PUT can update an existing entity. A PUT request is idempotent, meaning clients can make that same call repeatedly while producing the same result. (the 'update' part of CRUD)
DELETE - Request that a resource be removed. If a client removes a content, the database will remove that content from the database. (the 'delete' part of CRUD)

How to Toggle between Images on Click

Tri Nguyen — Tue, 25 Sep 2018 17:57:42 +0000

What is up fellow coder.
Thank you for checking out my article on learning how to toggle between images on click.

Lets get right into it!

HTML

Here we have a simple HTML document with a stylesheet link to the icons I am using on the head.
In the body I have the 2 icon/images I want to toggle. In this case it is a check box and a uncheck box. Both of the icons are wrapped inside a span tag class name = 'tog'.
And if you look closely in line 8. I made sure the checked box style is hidden using display:none.

Now lets look inside the Javascript

Along with the Javascript, I am also using some jQuery method.

On the selector I am selecting the span tag class. Then on click it will run a function.
The function is selecting an i tag which is the tag for both the check and un-check icon.
Lastly, I am using the toggle function to toggle between the two icons.

EZ PZ !

You can test it out here!
https://codepen.io/anon/pen/qMzyyw

How to add event listener to dynamically added elements

Tri Nguyen — Tue, 18 Sep 2018 19:33:30 +0000

What is up fellow coder.
Welcome to my second installment of "How to" guides
Thank you for checking out my article on learning how to add event listener to dynamically added element.

Lets get right into it!

First add a element

The breakdown

I have a simple HTML document that includes a button named "click me" and also an empty div. Both element have an id.
In the JavaScript file, in line 8 I made a render function that should append a string to an element, which in this case will be on the empty div from earlier.
Therefore line 1-5 it's just me making a function called "addButton" that uses render function to make a new button called "new button". Line 15 is the event listener that adds a new button every time I click on "click me".

Now that we can add a button. How can we add an event listener to that new button ?

Let me show you DE WAY

The breakdown

The answer starts on line 16. First I create a event listener for the #content which if you remember is the main selector id for the empty div on the html document .
Then for the on function the first parameter is action value "click", the second parameter will be a child-selector name which in this case the class of the new button added(see line 3). The third parameter is a callback value, in which I made a function that will turn the new button background yellow.

EZ PZ!!

As you can see I was able to add an event listener on my "new button", if when I click on the new button it will change its background to yellow.

Nice Gibberish...but what is the point???

Well since you now know the basics on how to add an event listener to a dynamically added element. You don't need me to tell you of all the possibility you can use this function with or how commonly this is used. Just think any time you post something on Facebook, Twitter, or LinkedIn you are essential dynamically adding a element to a page. Thus if you can't add a event listener to them how are you able to comment, like, or react to those post.

Understanding the basic of Module Pattern

Tri Nguyen — Thu, 13 Sep 2018 17:08:13 +0000

What is up! fellow coders.

Quick disclaimer: I'm a month into a coding bootcamp, but am confident this could help others like myself understand module pattern from a beginner perspective.

So lets begin.

What is a Module

First, to understand The Module pattern(MP) you need to understand what is a module.

Modules are an integral part of any large application's architecture and typically help in keeping the units of code for a project both cleanly separated and organized.

In JavaScript there are several ways to implement a module like object literal notation, AMD modules, and CommonJS module to name a few. But in this article I will be focusing on The Module Pattern.

Ok...... can you show me an example?

Yes. but first

The Module pattern (MP) was originally defined as a way to provide both private and public environment for classes in software engineering.

In JavaScript the MP further enhances on that notion. We're able to include both public/private methods and variables inside a single object, thus shielding particular parts from the global scope. With this pattern, only a public API is returned, keeping everything else within the closure private. This privacy pattern can sometimes utilize an immediately-invoked function expression (IIFE) where an object is returned.

Your take away from that should be "the module pattern is one of the methods that uses a module to keep certain codes, variables,functions, etc. inside a single object, so it doesn't pollute the global scope. Thus keeping our code clean and organize "

Cool beans

Lets take a look at an example of a module pattern and break it down.

The breakdown

I made a module using an IIFE and called it "myModule".
Inside the module I declared a variable myGreeting ,an object called myObject and 2 functions saySomething and sayGreeting.
Inside my function I can reference variables like myGreeting in both the functions and even a property of an object the name and food from myObject.
Then you can see from line 18-22 I made a variable called public API in order to reference the 2 function inside my module and to return them.
Lastly because of the public API and my ability to return the function I can now call the 2 function on line 26 and 28.

Therefore, what makes myModule a module pattern is how I was able to make everything inside private from the global scope. Thus the only way to return the function inside is by using the public API that reference them.

Nice Gibberish but what is the point ???

Of course my example was very simple, but just imagine how important this method can be when dealing with a robust amount of code on a large project with multiple developers working on it. The module pattern can keep the global scope clean and organize and prevent duplicate variables from overriding each other.