#showdev | Explore Tumblr posts and blogs

holytheoristtastemaker · 5 years ago

Link

1. An Introduction To Constructors In the previous article in this series, we looked at prototypal inheritance in JavaScript and talked about important object-oriented (OOP) JavaScript concepts like the prototype, the prototype chain, inheritance, and more. We also looked at how to set an object's prototype using its __proto__ property (we noted that this is not the recommended way.) and dealt with the this variable in detail. You can read through this article below:

Understanding Prototypal Inheritance In JavaScript

Lawrence Eagles ・ Apr 23 ・ 13 min read

#javascript #tutorial #webdev #showdev

In this article, we would pick up where we left off by looking at the recommended ways to set an object's prototype in JavaScript. While there are several ways to do this, our focus here is on function constructors.

✨ We will deal with the other recommended methods in the upcoming articles in this series. Talking in detail about all of them; in a single article would make it very long and grueling to read!

Constructors

Constructors in JavaScript are special functions that are used to construct objects. This topic may appear difficult and intimidating but it is actually very simple.

💡 The key to understanding constructors is to know that they are actually normal JavaScript functions. What makes them special is that they are always invoked along with a very powerful operator in JavaScript called the new operator.

Kindly run the code below and consider its result.

function Person () { this.firstname = "Lawrence" this.lastname = "Eagles" this.occupation = "Software Developer" this.gender = "male" } const Lawrence = new Person(); console.log(Lawrence);

Our small contrieved example above creates a new object and stores a reference to it in the Lawrence variable. This object has all the properties specified in the Person constructor. The Person function itself is a normal JavaScript function; what gives it the power of a constructor (the power to construct objects) is this line of code:

const Lawrence = new Person();

✨ The new operator modifies the behaviour of the function it operates on. Using this along with some JavaScript design patterns, we are able to create powerful constructors. We will elaborate on this in the next section.

2. Functions, Constructors And The new Operator

In section 1 we learned that when the Person constructor, (or any other constructor) is invoked without the new operator it is invoked as a regular JavaScript function. In this section, we will elaborate on this with code examples. Kindly consider the code below.

function Person () { this.firstname = "Lawrence" this.lastname = "Eagles" this.occupation = "Software Developer" this.gender = "male" }

Above is the declaration of the Person function. We can notice two things from it viz:

It sets some properties e.g firstname, lastname, occupation, and gender to the object the this variable binds (or is pointing) to. In this case the global object.

💡 As mentioned in the previous article in this series, one rule of the this variable is that when it is used inside a function it points to the global object but when it is used inside a method (a function in an object) it would point to that object

If this is not very clear to you, feel free to visit my previous article on OOP JavaScript. I have already provided a link to it in section 1. However, here is a quick recap. Kindly run the code below and consider its result

const devName = "Lawrence Eagles" function tellDevName () { console.log("result", this.devName) } tellDevName(); // returns "Lawrence Eagles"

The above example shows that the this variable inside a function is pointing to the global object.

Another thing that should be pretty obvious about the Person function is that it does not have a return statement hence when invoked it would return undefined.

💡 The JavaScript engine would return undefined from any function that does not return a value. This behaviour is leveraged in creating constructors as we are able to modify what that function returns using the new operator. Hence it is a common pattern in JavaScript, that constructors do not have a return statement

The New Operator

This is a very powerful JavaScript operator that has the ability to modify certain behaviours of a function. The new operator can be very confusing and somewhat intimidating at first.

✨ The key to understanding it is to always see it as another regular JavaScript operator. Hence, a good understanding of operators in JavaScript is necessary to grasp the power of this operator.

Operators

Operators are special JavaScript functions that are syntactically different from regular functions. They are not like a regular JavaScript functions objects hence passing them to console.dir() would throw an error. You can see some code examples below. Kindly run the codes below and consider the results:

function tellDevName () { console.log("result", this.devName) } console.dir("function properties", tellDevName) console.dir("function properties", Date) // if you uncomment the lines below and run the codes in you get an error. // console.dir("function properties", +) // console.dir("function properties", new)

💡 The console.dir() displays an interactive list of the properties of the specified JavaScript object

You can see all the properties of the tellDevName function and the Date constructor when you run the code but if you uncomment the lines where I passed an operator as a parameter, and try to run the code, runkit would throw an error, this tells us that they are not regular function objects. Operators much like regular functions take parameters (which are called operands) but unlike regular functions, they give us a convenient syntax which can be in the form of any of the three notations below:

Infix Notation: In this notation, operators are placed between their operands. Kindly consider the code below:

2 + 2 // returns 4 3 * 3 // returns 9 4 - 4 // returns 0 5 / 5 // returns 1 6 % 2 // returns 0

In our examples above each operator sits between two parameters (operands) and returns a value. Learn more about the infix notation here

Postfix Notation: In this Notation, the operators follow their operands. Kindly consider the codes below:

const mixNumbers = [1,2,3,4,5,6,7,8,9,10,11,12] const evenNumbers = [] for (let i=0; i < mixNumbers.length; i++) { if (mixNumbers[i] % 2 === 0){ evenNumbers.push(mixNumbers[i]) } } console.log("even numbers", evenNumbers)

Above is a small example that finds the even number from a list of numbers. But what concerns us from this example is the increment operator. There is also the decrement operator. Learn more about the postfix notation Kindly consider the code below:

i++ increment operator i-- decrement operator

Prefix Notation: In this notation, the operator precedes its operands. Learn more about the prefix notation Kindly consider the codes below:

!true // logical NOT (!) returns false !false // logical NOT (!) returns true ++i // prefix increment --i // prefix decrement new constructor() // returns the newly constructed object

From our examples above we can see that the new operator uses the prefix notation it takes a function (constructor) invocation and returns a newly constructed object.

🎉 I do hope that our succinct discourse on operators, would make you understand the new operator better and hence further your understanding of function constructors

With our understanding of operators, we can now clearly see that the new operator actually takes a function (constructor) invocation as its parameter(operand) it then performs some operations on it and returns a value. Below are the operations of the new operator on a function constructor.

Creates an empty object and binds (points) the this variable to the newly created object.

Returns the object the this variable binds to (the newly created object) if the function doesn't return its own object (this is why constructors should not have a return statement). Kindly run the codes below and consider the results:

// regular function function person () {} const regularDeveloper = person() console.log("regular function result", regularDeveloper) // constructor function Person () { console.log("this binds to", this) } const constructorDeveloper = new Person() console.log("Person constructor result", constructorDeveloper) function BadPerson () { console.log("this binds to", this) return {name: "Jack", age: "70"} } const BadJack = new BadPerson() console.log("BadPerson constructor result", BadJack)

From the code example above I have deliberately given 2 of the 3 functions the same name but since JavaScript is case sensitive they are two different functions. Notice that the first letter of the constructor's name is capitalized while the regular function name is all lowercase.

💡 We use this pattern in JavaScript to differentiate constructors from regular functions. The first letter of a constructor's name is always capitalized. This would also serve as a reminder for you to use the new operator with every constructor. In our code example above, Person is the constructor and person is the regular function.

We can see from the result of the code above that the regular function returns undefined as expected but the constructor returns a new object created by the new operator which also binds the this variable in that constructor to this object.

💥 Also notice the BadPerson constructor that returns its own object fails to return the object created from the new operator. This is a pitiful we must avoid. Again, as a rule, a constructor should not have a return statement❗

JavaScript Design Patterns For Creating Constructors

With our knowledge of constructors and the new operator, we can easily add properties to the newly constructed object . Here is a common JavaScript pattern for this. Kindly consider the code below

function Person () { this.firstname = "Lawrence" this.lastname = "Eagles" this.occupation = "Software Developer" this.gender = "male" }

The only limitation here is that any object created by this constructor is always going to have these properties. In other to make the object properties dynamic, we can pass them as parameters to the constructor (since constructors are regular functions in the first place). Kindly run the codes below and consider its result:

function Person (firstname, lastname, occupation, gender) { this.firstname = firstname this.lastname = lastname this.occupation = occupation this.gender = gender } const Developer = new Person("Lawrence", "Eagles", "Software Developer", "Male") const Doctor = new Person("Ben", "Carson", "Neurosurgeon", "Male") const Scientist = new Person("Albert", "Einstein", "Scientist", "Male") console.log("developer", Developer) console.log("doctor", Doctor) console.log("scientist", Scientist)

From the results of running the code above, we can see that the arguments passed to each constructor, when invoked with the new operator are used to set up the properties of the newly constructed objects. You can read more about the new operator at MDN.

Lastly the new operator links (sets) the prototype of the newly created object to another object. In our introduction, we said we were going to talk about the recommended ways to set an object's prototype and our focus was on function constructors. This point brings our long discourse back to the subject matter. Let's talk more about it in the next section.

3. Constructors And Prototypal Inheritance

In JavaScript, every function has a property called the prototype. This sits as an empty object in the function and remains dormant throughout the life of that function. It would only become active and quite useful if that function is used as a constructor.

💡 The prototype property of a function (which is an object in JavaScript) is not the prototype of that function object but it acts as the prototype of any object constructed with that function when it is used as a constructor. The naming is a little confusing but we love our JavaScript 😉

Kindly run the code below and consider its result:

function Person (firstname, lastname, occupation, gender) { this.firstname = firstname this.lastname = lastname this.occupation = occupation this.gender = gender } // lets add some properties to the prototype property of the Person constructor. Person.prototype.getPersonBio = function () { console.log("Hello my name is " + this.lastname + " " + this.firstname + " I am a " + this.occupation ) } const Developer = new Person("Lawrence", "Eagles", "Software Developer", "Male") const Doctor = new Person("Ben", "Carson", "Neurosurgeon", "Male") const Scientist = new Person("Albert", "Einstein", "Scientist", "Male") console.log("Developer's bio:", Developer.getPersonBio()) console.log("Doctor's bio:", Doctor.getPersonBio()) console.log("Scientist's bio", Scientist.getPersonBio())

From the results of the code above we can see that all the objects constructed with the Person constructor have access to the getPersonbio method which sits in the prototype property of the Person constructor. As we have noted above this property becomes the prototype of each object.

✨ The details of how the search is made down the prototype chain in other for all the constructed object to access the getPersonBio method has already been discussed in the previous article. I would kindly suggest you take a look at it if this section is not very clear to you.

4. JavaScript's Built-In Constructors

JavaScript comes with some built-in constructors. If you are a JavaScript developer, there is a high probability that you have used some of them. Kindly run the code below and consider its result:

const NumObject = new Number("20") const StringObject = new String("Hello World") const Today = new Date() console.log(NumObject) console.log(StringObject) console.log(Today)

From running the codes above we can see that each returns an object because every constructor in JavaScript returns an object. You can learn more about each of these built-in constructors from the links below: Number Constructor String Constructor Date Constructor

0 notes

holytheoristtastemaker · 5 years ago

Link

1. An Introduction To Closure Closures are an extremely powerful feature of the JavaScript programming language.

💡 A closure is a combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time. MDN

The superb definition above utterly explains a closure. It is actually a feature of the JavaScript language, it is not something we code but it just happens due to the way the JavaScript language works. As a result of this, a function is able to access the variables of its parent (outer) function even after that function has returned. Let's throw more light on the above definitions with an example below: Kindly run the code below and consider its result.

Our small contrived example features a function getBio that takes a succinct developer bio and returns another function (an anonymous function) that takes a developer name. This inner function then tells us about the developer by logging his name and his bio to the console. One thing to note is that the getBio function does not return a function call but rather it returns an anonymous function. This means that when the getBio function is called it returns the code below:

function(name) { console.log("Hi, my name is " + name + " " + shortDevBio); }

And because this is an anonymous function we assigned it to a variable talkAboutDev in our example above and called this function through that variable since it now holds a reference to it in memory. I have already explained why this is possible in my previous article in the functional programming in JavaScript series. If this is not very clear for you; I would kindly suggest that you refer to my article on anonymous and first-class functions in JavaScript for a quick brush-up. You can access it below:

UNDERSTANDING FIRST-CLASS FUNCTIONS AND ANONYMOUS FUNCTIONS IN JAVASCRIPT

Lawrence Eagles ・ Apr 13 ・ 6 min read

#javascript #beginners #webdev #tutorial

So when we call the talKAboutDev function, it tells us about the developer whose bio was passed to the getBio function. This is puzzling❗

How did the talkAboutDev function get the bio of the developer since the getBio function has already returned before it was called ❓

You can have a second look at the codes as you digest this question:

function getBio(shortDevBio) { return function(devName) { console.log("Hi, my name is " + devName + " " + shortDevBio); } } const talkAboutDev = getBio("I am a developer, writer and instructor") talkAboutDev("Lawrence Eagles") // returns "Hi, my name is Lawrence Eagles I am a developer, writer, and instructor" // But how did it get the developer bio?

💡 This is possible because of closure. The inner function talkAboutDev still has access to the (free) variables of the outer (getBio) function even after it has returned.

The above answer may not really be satisfying especially if you do not have good knowledge of closure in JavaScript before now. We will be taking a deep look at this notorious, often difficult to understand, and extremely powerful feature in the JavaScript programming language in the remaining sections below.

✨ It is very important to have a good understanding of closure in JavaScript especially if you want to level-up your skill of the language.

In other to fully understand closure in JavaScript, we need a solid understanding of some key concepts, which are its fundamental tenets. We will be looking at these in the next section.

2. The Fundamental Tenets

Section 1 gives us an overview of closure. Although we saw it in action there are still some unanswered questions. In other, for us to get a thorough understanding of it, we need to learn about the key concepts that come into play when closures are created in JavaScript. Let's deal with them below.

1. The Execution Context.

💡 Every code in JavaScript runs inside a wrapper around it called the execution context

When a JavaScript program runs, a base (global) execution context is created and it wraps around all the codes. Consider the image below:

From our image, we can see that the global execution context is made up of the global object, the this variable, the variable environment, and the outer environment. In other to get a good understanding of closure and even the JavaScript language we need to learn about all these and how they interact when our program runs.

The Global Object

This is the window object. It represents your browser's current tab. If you open another tab, you would get a separate global object because that would create a separate execution context. In a Node.js environment, however, the global object is not the window object.

💡 In the browser the global object is the window object but in Node.js the global object is called the global object

Kindly run and consider the result of the code below:

console.log(this)

💡 When the JavaScript engine runs your code for the first time, the global execution context is created. This would still be created even if the .js file is empty

The runkit program above is an empty .js file. Notice that the global execution context was still created hence we get the global object in the console. Note runkit is a node.js environment so the global object is called global

The this variable or keyword

This is a special JavaScript object. I have dealt with it in more detail in one of my articles in the OOP (Object Oriented Programming) In JavaScript series, kindly read more about it below.

Understanding Prototypal Inheritance In JavaScript

Lawrence Eagles ・ Apr 23 ・ 13 min read

#javascript #tutorial #webdev #showdev

All we would say here is that at the global level the this variable is equal to the global object. It points to it.

The Variable Environment

This refers to where the variable lives in memory and how they relate to each other. Each execution context has its own variable environment. For the global execution context, the variable environment is the global object.

The outer Environment

When we execute code inside a function, the outer environment is the code outside that function, but at the global level, the outer environment is null because there is nothing outside it. We are at the outermost level. Let's elaborate on these by considering some examples. Kindly examine the code below. In what order do you expect to see the three console.log() results❓

💡 A good tip to note as you go through this exercise, is that a new execution context is created whenever a function is called, and this is added to the top of the execution stack. Also whenever a function returns its execution context is removed from the execution stack

function father() { child(); let lastName = "Eagles" console.log(lastName) } function child() { let firstname = "Lawrence"; console.log(firstname) } father(); var fullName = "Lawrence Eagles"; console.log(fullName);

Before we run the example above on runkit for the result, let's take a deeper look at how the JavaScript engine would execute this code.

At first the global execution is created and all these functions and variables are added to a place in memory (in the global execution this is the global variable).

There are two phases in the creation of the execution context viz the creation phase and the execution phase. I have covered this in an old article you can access it below.

DEMYSTIFYING HOISTING IN JAVASCRIPT

Lawrence Eagles ・ Apr 4 ・ 6 min read

#javascript #beginners #tutorial #webdev

During the execution phase of the global execution context creation, the father() function is called and this creates a new execution context that is placed on top of the execution stack. The codes within this execution context (literally the codes in this function's code-block) will then be executed.

The child() is called as the codes within the father function's code block are executed and a new execution context is created and placed on top of the execution stack. The codes within the child function's execution context (the execution context on top of the execution stack) will now be executed.

💡 As a rule if a function is called within a function a new (the inner function's) execution context is created and put on top of the execution stack and until the inner function returns and its execution context is removed from the execution stack the codes of the parent function will not be executed.

During the execution of the codes in the child function's execution context, the string "Lawrence" is assigned to the firstName variable and that is logged to the console.

The child function returns and its execution context is popped off the execution stack (it is removed). Now the parent function's execution context now sits on top of the execution stack hence the execution of its code will now continue.

Next, the string "Eagles" is assigned to the variable lastName and that is logged to the console. This marks the end of the execution of the parent function, thus its execution context is popped off the execution stack and we have the global execution context left.

Only now will the remaining codes in the global execution context be executed. The string "Lawrence Eagles" is now assigned to the variable fullName and that would be logged to the console.

From the explanation above we expect to get this result:

// "Lawrence" // "Eagles" // "Lawrence Eagles"

Kindly run and examine the code below.

3. Scope And Scope Chain

We are yet to explain the variable environment and the outer environment with code examples, let's do this in this section as we look at the scope and scope chain. Kindly consider the codes below.

💡 A good tip to note as you do, is that when the JavaScript engine does not see a variable in the variable environment of an execution context, it would go out to its outer environment to look for it.

function logDevName() { console.log(devName) } function logDevName2() { var devName = "Lawrence Eagles" console.log(devName) logDevName() } var devName = "Brendan Eich" console.log(devName) logDevName2()

What do you think would be the values of the devName variable at each console.log()❓ To answer this question let's go through the way the JavaScript engine would execute this code.

First the global execution is created and all these functions and variables are added to a place in memory (in the global execution context, this is the global variable).

During the execution phase of the global execution context creation, the string "Brendan Eich" is assigned to the variable devName and that is logged to the console.

Then the logDevName2 function is called and a new execution context is created and put on top of the execution stack.

In the execution of the logDevName2 function, the string "Lawrence Eagles" is assigned to the variable devName and that is now logged to the console hence devName in this execution context is "Lawrence Eagles".

Next, the logDevName function is called and a new execution context is created and put on top of the execution stack.

During the execution of this function, the variable devName is logged to the console. But it is not in this local Scope because it is not in the variable environment of this functions' execution context (it is not declared within this function).

💡 A scope is a place where a variable can be found.

So the JavaScript engine would go out to its outer environment to look for this variable, in this case, the outer environment is the global execution context. This is so because of the lexical environment of the logDevName function.

💡 The lexical environment refers to where something is written physically in your code. The JavaScript engine uses this to determine how things would sit in memory and how they would connect to each other. In our example, both the logDevName and the logDevName2 functions are sitting in the global execution context thus this is the outer environment of both functions, even though the logDevName function is called inside the logDevName2 function.

The devName variable is found in the variable environment of the global execution context and there it is "Brendan Eich" hence the string "Brendan Eich" is logged to the console. You can have a second look at the code below, and hopefully, you should now have a better understanding as you run it in runkit to see the result.

💡 The JavaScript engine goes out of a function's execution context to its outer environment using the reference to that outer environment and continues to go up until it reaches the global execution context. This connection of links or references to different outer environments is called the scope chain

4. A Second Look At Closure

Since we now have an understanding of all the fundamental tenets required to grasp the concept of closure, let's revisit the first example and answer our long-standing question.

✨ Kindly note this when a function returns and its execution context is removed from the execution stack, its inner function will still have access to the variables in its variable environment as the JavaScript engine performs its search up the scope chain

The inner function is able to get the value of the shortDevBio variable even after the getBio function has returned and its execution context has been removed from the execution stack because its inner function still holds a reference to its variable environment. Thus, the JavaScript engine is able to find the location of the (free) variables (e.g shortDevBio) in the variable environment of the getBio function as it continues its search up the scope chain. Therefore, we can say that the execution context of the inner function encloses its outer variables. We can also say that it encloses all the variables that it is supposed to have access to. This phenomenon is referred to as closure. It makes possible some very powerful javascript design patterns used in some of the most popular JavaScript frameworks and libraries. The code above can be re-written like this using an alternate syntax. Kindly examine the code below:

function getBio(shortDevBio) { return function(devName) { console.log("Hi, my name is " + devName + " " + shortDevBio); } } // uses an alternate syntax to run both functions in one line. const developerBio = getBio("I am a developer, writer and instructor.")("Lawrence Eagles") console.log(developerBio)

What do you think the console.log() would output❓ 💡 The alternate syntax uses two parentheses. The first () simply calls the outer (getBio) function and since that returns another function the second () calls the inner function, hence we get the same result You can run the code in runkit below:

We see this pattern in action when we work with React and Redux using the React-Redux library.

✨ React-Redux is a library that connects React and Redux together. It poses itself as the official React bindings for Redux and it is maintained by the Redux team.

Below is an extract from an example in their official doc.

export default connect( null, mapDispatchToProps )(TodoApp)

The details of what is going on here are out of the scope of this article but I just want to point out the way the connect function is called with two parentheses. The first takes null and mapDispatchToProps while the second takes the TodoApp component as its argument the result is then exported. This pattern is made possible because of closure in JavaScript.

5. Closing Thoughts

It has really been a long article and if you got here you are really appreciated. I really hope that at this point, you can see the benefits of our long discussion and at least got a thing or two from this article. If so I would be looking forward to hearing your opinions, comments, questions, or requests (in case anything is not clear) at the comments section below.

0 notes