DEV Community: Lawrence Eagles

The 3 Main Reasons, You Should Learn JavaScript

Lawrence Eagles — Sat, 27 Jun 2020 22:28:31 +0000

The JavaScript Law
The JavaScript Scope
The JavaScript Evolution
Closing Thoughts

1. The JavaScript Law

Any application that can be written in JavaScript, will eventually be written in JavaScript.
-- Jeff Atwood, Author, Entrepreneur, Cofounder of StackOverflow

13 years ago, Jeff Atwood gave us what we now referred to as the JavaScript law.
It is interesting how JavaScript has evolved as a language. Although, it made a humble entrance into the programming world, in so much that it was named Javascript so as to coax Java developers. The language has since grown stronger and has turned its fortunes around.

🎉 The naming of JavaScript was pure marketing. JavaScript is to Java what Seahorse is to Horse

Time has past and the language has evolved tremendously beyond the imagination of many.

Today, JavaScript is everywhere.

🎉 Like insects, JavaScript is ubiquitous.

While it began (primarily) as a desktop-constrained browser-only language launched by Netscape in 1995, it has conquered virtually every internet-connected platform on Earth: phones, tablets, desktop, servers, and thousands of devices in the Internet of Things.

💡 The language has conquered the web and has even made its way into space.

2. The JavaScript Scope

JavaScript is an extremely versatile language. Once you’ve mastered it, the possibilities are endless, hence there are numerous job opportunities for JavaScript developers.

JavaScript developers often have a wide area of specialization. They can build front-end, back-end, mobile developers, and even desktop applications.

🎉 The language has even applications in machine learning, blockchain, and IoT its scope is tremendous.

Below, are some areas of application of JavaScript:

Frontend web development:
JavaScript is the king of Frontend web development. The undisputed champion. Although, Dart and Web Assembly are hovering around it still rule supreme.
In the frontend, JavaScript via its libraries and framework viz: Angular, React.js, Vue.js, etc.
Backend web development:
JavaScript somehow found its way out of the browser via Node.js. This is an interesting breakthrough considering JavaScript lived a big part of its life enclosed in the browser.
With Node.js, developers are able to bring the awesomeness of the JavaScript language to the backend and this marked a new era in web development.

Using JavaScript for both frontend and backend allows developers to create isomorphic applications and gives a better developer experience among other advantages.
little wonder several big tech companies such as Walmart, Paypal, Netflix, Linkedin, Groupon (to name a few), were quick to adopt Node.js

Mobile Development: This is an area you would expect to see the likes of Java, Kotlin, and Swift shine, not JavaScript. However, JavaScript again finds its way here and shines; I dare say brighter. With the likes of React Native, we are able to build cross-platform hybrid mobile applications using just HTML, CSS, and JavaScript.

Many company prefer this because it eliminates the need for building two separate codes for iOS and Android, it is cost-effective and easier to build and maintain. All this without actually trading off quality.
Some companies that power their mobile application with React Native are:
Slack, Bloomberg, Airbnb, Instagram, Skype.

Desktop Application: This is the most unlikely place you would expect to see a language that was meant to live in the browser yet it is a shining star in this world. With Electron.js desktop applications can now be built using JavaScript. As in other areas, JavaScript simplifies building a desktop application to a matter of writing just HTML, CSS, and JavaScript. Again this is very cost-effective and easier to build and maintain. Hence, it is preferred by many companies.

Notable desktop applications built with Electron.js are:
Slack, Whatsapp, Microsoft Teams, Invision, Figma, Visual Studio Code, Twitch, Atom Text Editor

🎉 Many languages have advertised themselves with quotes such as: "code once, run anywhere" or "learn once write anywhere", but JavaScript is the language that these quotes best describe. It is aptly called the language of the web

3. The JavaScript Evolution

With every new version of JavaScript, we see the language evolving for the better. New amazing features are being added and we get syntactic sugars where necessary (e.g JavaScript Classes). We have gone from writing callbacks to promises and now async-await.

These improvements redound into all areas where JavaScript is applied.

As a result of these, the language has solidified its position as the language of the web. Today we use popular software architecture designs such as JAM Stack and Single Page Application (SPA), but in the heart of both, we see JavaScript sitting as King.

In addition, as the language gets better it keeps expanding its scope of application. This means more job opportunities for JavaScript developers.

4. Closing Thoughts

There several other good reasons to learn JavaScript, the 3 above are for me the main ones. It is also worth mentioning that the language is very simple and beginner-friendly. And being very popular, there are tons of free learning material online.

I do hope I got you interested in the language or at least; I dare say made you appreciate your skill as a JavaScript developer more.

As always, if there are other notable mentions that I missed, or you have an opinion or correction to make, you are more than welcome to share it on the comment below.

An Easy Guide To Understanding Classes In JavaScript

Lawrence Eagles — Wed, 17 Jun 2020 21:10:50 +0000

An Introduction To Classes
Classes In Detail
Subclasses In Detail
Classes In Action
Closing Thoughts

1. An Introduction To Classes In JavaScript

In the previous article in this series we looked at function constructors as one of the recommended ways to set an object's prototype in JavaScript, and we noted that although, there are other ways of doing this, concocting them into one discursive article would be a disincentive to readers.
You can get a refresher from this article here:

An Easy Guide To Understanding Constructors In JavaScript

Lawrence Eagles ・ May 9 '20 ・ 10 min read

#javascript #tutorial #webdev #beginners

In this article we will pick up where we left off by looking at Classes in JavaScript.
This is another recommended method of setting an object's prototype in JavaScript and it makes for a very interesting discourse in this OOP (Object Oriented Programming) in JavaScript series.

Below are some gleanings from a previous post in this series:

✨ The classical inheritance or class bases inheritance involves writing classes; which are like blueprints of objects to be created. Classes can inherit from classes and even create subclasses.

✨ In the prototypal inheritance an object inherits its properties and methods from its prototype object. And sometimes, a search down the prototype chain is necessary for an object to access some properties and methods.

You can get a refresher from this article here:

Understanding Prototypal Inheritance In JavaScript

Lawrence Eagles ・ Apr 23 '20 ・ 13 min read

#javascript #tutorial #webdev #showdev

🎉 So what is interesting is that JavaScript introduced classes in ECMAScript 2015 but is primarily syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax does not introduce a new object-oriented inheritance model to JavaScript.

Although, one can say in a nutshell; classes in JavaScript are just new syntax for the same old prototypal inhertance. They however, have significant improvements over function constructors and are a very powerful addition to the JavaScript programming language.

Lets take a deeper look at classes in JavaScript in the next section.

2. Classes In Detail

✨ In JavaScript classes are functions. And since all functions are objects in JavaScript, classes are also objects.

Classes are Functions

Kindly run and consider the code below. Be sure to expand the console.log output for a more detailed result


    
class Person {
  constructor(name, gender) {
    this.name = name;
    this.logo = gender;
  }
}

console.log("Person class", Person) 
console.log("Person prototype", Person.__proto__)

From the results of the code above we can see the follow:

The Person class is a function with a name property in this case Person.
It has a prototype property which points to the Person {} object. Take note this is not the prototype of the Person class. But this is the prototype of all the instances of the Person class.

💡 The prototype property of a class is not the prototype of the class. It is the prototype of every object created from that class

The Person class has a __proto__ property which points to the function prototype. This is the prototype of the Person class.

Lets elaborate on the last two points above with some code samples.
Kindly run and consider the codes below:


    
class Person {
  constructor(name, gender) {
    this.name = name;
    this.logo = gender;
  }
}

console.log("Person class", Person.prototype) 
console.log("Person prototype", Person.__proto__)

From the results of the code above it should be clear that Person.prototype is different from Person __proto__. The former is the prototype of all instance of the Person class and the latter is the prototype of the Person class itself.

🎉 If this feels a little fast-paced for you, please know that I am building upon what I have already covered in the previous two articles.
However, if you have not been following or for some reason you are finding this section a bit puzzling, kindly refer to my previeous articles in this series. I have already shared their links in section 1.

Like regular functions in JavaScript you can have a class declaration and a class expression.
Kindly examine the code below

// A class declaration
class Person_Dec {
  constructor(name, gender) {
    this.name = name;
    this.logo = gender;
  }
}

// An Unnamed class expression
const Person_Exp = {
  constructor(name, gender) {
    this.name = name;
    this.logo = gender;
  }
}

// Named class expression
const Person_Exp2 = class Person_Exp {
  constructor(name, gender) {
    this.name = name;
    this.logo = gender;
  }
}

All three methods above are valid ways to implement a class in JavaScript.

Classes are Objects

In other programming languages like C#, C++ and Java, that uses classical (class-based) inheritance the class is a template or a blueprint that details the structure of an object. Objects are built from them but they are not objects.

In JavaScript however, the Class is a special function and all functions in JavaScript are objects hence the JavaScript class is an object. JavaScript still uses prototypal inhertance. Classes however, provide a new and improved way to set the objects prototype. We will look at this in a moment.

Kindly consider the results of the code below


    
class Person {
  constructor(name, job) {
    this.name = name;
    this.job = job;
  }

// Methods
  getName() {
    return "Hello My Name is " + this.name ;
  }

//static
  static getPersonGender () {
    return "male"
  }
}

const developer = new Person("Lawrence Eagles", "developer"); 

console.log("Developer's Name", developer.getName());  

console.log("Developer's Prototype", developer.proto); 

console.log("Person's gender", Person.getPersonGender()); 

// console.log("Developer's gender", developer.getPersonGender());

Above is the declaration of a Person Class with a normal method and a
static method.
From the results of running the code, we can see the following.

The instance of the Person class (the developer object) inherites the properties and methods of the Person class.

Thus we were able to call the getName method on the developer object.

console.log("Developer's Name", developer.getName());  // calls the getName function inherited from the Person Class
// returns "Lawrence Eagles"

Using the static keyword with a method, creates a static method for the class.

//static
  static getPersonGender () {
    return "male"
  }

These methods are not inherited by the instances of a class hence they cannot be called on the instances of a class itself.

You can prove this by uncommenting this line from our code sample:

//console.log("Developer's gender", developer.getPersonGender());

Notice however, that we where able to successfully call the getPersonGender method on the Person class itself.

console.log("Person's gender", Person.getPersonGender()); // calls the getPersonGender static method of the Person class 
// This call is successful because the static method is available on the Person class

💡 Static methods aren't called on instances of the class. Instead, they're called on the class itself.
They are often utility functions, such as functions to create or clone objects.

The prototype of the instance of the Person class (the developer object) is the Person {} object. We have already noted that the Person object have a prototype property which points to the Person {} object and serves as the prototype of all instances of the Person class. Here we get an elboration on this with codes samples.

console.log("Developer's Prototype", developer.__proto__); // gets the prototype of the developer

3. Subclasses In Detail

Besides creating instance of a class we can also extend a class (create subclasses from an existing class). This is kind of advance and it is a very powerful feature of the JavaScript class.

JavaScript introduced a new keyword for this purpose called extends.

💡 The extends keyword is used in class declarations or class expressions to create a class that is a child of another class.

Kindly run and consider the code below:


    
class Person {
  constructor(name) {
    this.name = name;
  }

sayName() {
    console.log("My name is " + this.name);
  }
}

class Developer extends Person {
  constructor(name) {
    super(name);
    this.name = name;
  }

getBio() {
    super.sayName();
    console.log("I am a developer");
  }
}

let ReactGuy = new Developer("Lawrence Eagles");
ReactGuy.getBio();

The code above shows a Person class and a Developer subclass created from the person class. Below are some comments to elaborate on the code above.

In other to create a subclass we extend the parent class using the keyword extends Hence: class Developer extends Person.
The super keyword is used to access and call functions on an object's parent. Notice we used super.sayName() in the getBio method of the Developer subclass to call the sayName method of the Person Parent class.
Calling super() method inside a contractor would call the constructor of the parent class.
In our example calling the super method inside the Developer's subclass constructor would call the Person class constructor. Now any arguments passed to the super() would also be passed to the parent class constructor. I will elaborate with a small contrived perspicuous example

Kindly run and consider the code below


    
class ObjectFactory {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}

class Square extends ObjectFactory {
    constructor(length) {
        super(length, length);
    }
}

const Square1 = new Square() 
const Square2 = new Square(4) 

console.log("Square1", Square1)
console.log("Square2", Square2)

Above we created a Square subclass from the ObjectFactory class. Notice that the ObjectFactory constructor expects two parameters viz height and width. Values for these are provided when we call super() in the Square subclass.

constructor(length) {
  super(length, length);
}

when the Square1 and Square2 instances where created the argument provided to the length parameter was passed down to super() which calls the parent (ObjectFactory) constructor with these arguments.

const Square1 = new Square()
const Square2 = new Square(4)

The height and width property of the Square1 instance is undefined however, because no argument was provided when it was created by invoking the Square subclass.

const Square1 = new Square() // no argument provided.

The super() method must be called in the constructor in a class before the this keyword is made available else we get a reference error. Again I would elaborate with an example.

Note running the code below would throw an error this is delebrate:


    
class ObjectFactory {
    constructor(height, width) {
        this.name = "Object Factory"
        this.height = height;
        this.width = width;
    }
}

class Square extends ObjectFactory {
    constructor(length) {
        this.name = "Square Object"
        super(length, length);
    }
}

const Square1 = new Square()

To get the code to work properly kindly move the super(length, length) above this.name = "Square Object".

Unlike instances of a class, static methods can be called on a subclass. Let's elaborate with some code examples.

Kindly run and consider the code below:


    
class Person {
  constructor(name) {
    this.name = name;
  }

static logGreeting() {
    console.log("Good day " + this.name);
  }

sayName() {
    console.log("My name is " + this.name);
  }
}

class Developer extends Person {
  constructor(name) {
    super(name);
    this.name = name;
  }

getBio() {
    super.sayName();
    console.log("I am a developer");
  }
}

const ReactGuy = new Person("Lawrence Eagles")

console.log("Developer Prototype", Object.getPrototypeOf(Developer))

console.log("greeting from developer", Developer.logGreeting())

//console.log("greeting from developer", ReactGuy.logGreeting())

In our code example above we noticed that the
Person Class has a static method viz:

static logGreeting() {
  console.log("Good day " + this.name);
}

This method was successfully called by the developer subclass.

// calls the logGreeting static method of the Person Class in the developer subclass
console.log("greeting from developer", Developer.logGreeting())

Static methods however cannot be called on instances of a class. You can test this by on commenting this line and rerun the code:

//console.log("greeting from developer", ReactGuy.logGreeting())

When a subclass is created from a class, the class becomes its prototype.

We prove this from our code sample above with this line:

console.log("Developer Prototype", Object.getPrototypeOf(Developer))

💡 The Object.getPrototypeOf() method returns the prototype of any object passed to it as an argument.

From the result of our code above we can see that the prototype of the developer subclass is the Person parent class.

Classes In Action

I belive by now we should be pretty comfortable with the JavaScript class.

Classes in JavaScript are more than just a new way to create objects and set their prototype. As we have seen above they come with a number of interesting features.

In addition, they would throw an error when they are called without the
new operator this helps developer to avoid nasty bugs common when using function constructors

Classes power several popular JavaScript frameworks and libraries like React.js and Angular. Their rich feature set paves the way for several advanced design patterns in different JavaScript libraries and frameworks.

Let's see some real life code examples.
Kindly examine the code below

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

Above is the boilerplate code for an ErrorBoundary component in React.
Although, this is not an article on React; I only want us to see classes in action in some of the most advanced JavaScript library.

💡 React 16 introduces a new concept of an “error boundary”, in other to catch error anywhere in your application and render a fallback UI instead of allowing the whole applicaiton to crash because of a JavaScript error.
It is an advance design pattern in React.js

Notice the ErrorBoundary component is implemented with a JavaScript class by extending the React Component class.

class ErrorBoundary extends React.Component

Notice how super(props) was called before this keyword was used in the constructor.

constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

Notice the static method getDerivedStateFromError of the ErrorBoundary subclass. It is used to render a fallback UI after an error has been thrown

static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

If you are not a React.js Developer you may not fully comprehend what is going on here, but that is understandable. My aim here is to show you some of the real world implementation of classes in regards to our discourse.

5. Closing Toughts:

It has really been a long article and if you got here you are really appreciated and I am more than elated.

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 honoured if you would share it with you friends and colleagues, while also looking forward to hearing your opinions, comments, questions, or requests (in case anything is not clear) at the comments section below.

Hello everyone, I apologize for being totally off for a while now.

Lawrence Eagles — Wed, 03 Jun 2020 11:26:45 +0000

However, I am back and I would like to announce my upcoming series viz: Mastering React.js Inside out.

In my new series, I would be explaining React.js to the last detail, in hope of helping you to master the awesome library. 💖

Stay connected ✨

An Easy Guide To Understanding Constructors In JavaScript

Lawrence Eagles — Sat, 09 May 2020 22:14:10 +0000

An Introduction To Constructors
Functions, Constructors And The new Operator
Constructors And Prototypal Inheritance
JavaScript's Built-In Constructors
Closing Thoughts

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 '20

#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

✨ These are just a selected few you can get a more robots list here

5. Closing Thoughts

I do hope you followed through to this point. If you did you are really appreciated. It has been a long discussion, and I hope you got a thing or two. If so, I would now be looking forward to hearing your opinions, comments, questions, or requests (in case anything is not clear) in the comments section below.

AN EASY GUIDE TO UNDERSTANDING CLOSURES IN JAVASCRIPT

Lawrence Eagles — Fri, 01 May 2020 14:56:43 +0000

An Introduction To Closure
The Fundamental Tenets
Scope And Scope Chain
A Second Look At Closure
Closing Thoughts

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; 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.


    
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")

Our small contrived example above 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 the variable talkAboutDev. Then we called this anonymous function through the talkAboutDev variable which 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 '20

#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 '20

#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, let's take a deeper look at how the JavaScript engine would execute this code.

At first the global execution context 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).

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 '20

#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). The parent function's execution context now sits on top of the execution stack; thus 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; consequently, 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.


    
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);

3. Scope And Scope Chain

As we look at the scope and scope chain in this section, we will elaborate on the variable environment and the outer environment with code examples

Kindly consider the codes below.

💡 A good tip to note 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 logged to the console; thus, 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; therefore, it 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.


    
function logDevName() {
   console.log(devName)
}

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

var devName = "Brendan Eich"
console.log(devName)
logDevName2()

💡 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


    
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")

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:


    
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")

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 appreciated.
I do 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.

Understanding Prototypal Inheritance In JavaScript

Lawrence Eagles — Thu, 23 Apr 2020 11:38:02 +0000

What Is Object-oriented Programming (OOP)
Classical vs Prototypal Inheritance
The Prototype Object And The Prototype Chain
Exposing this Keyword in JavaScript
JavaScript Base Object, The Prototype Of All Prototypes
The Power Of Prototypal Inheritance
Closing Thoughts

1. What Is Object-Oriented Programming (OOP)

Object-oriented programming is a programming paradigm that involves organizing codes into object definitions. These are sometimes called classes.

In object-oriented programming, we use objects to model real-world things that we want to represent inside our programs. These objects can contain (encapsulate) related information which is the properties and methods (functions) stored in the objects. These are often the properties and behaviours of the real-life object we are modeling.

Classical vs Prototypal Inheritance

JavaScript is a very unique, beautiful, sometimes weird, and incredibly powerful programming language. Object-oriented JavaScript uses prototypal inheritance. Here we find JavaScript making popular a concept that is in many ways better than what is already in use in other programming languages like Java, C#, and C++ (Classical inheritance).

The classical inheritance or class bases inheritance involves writing classes; these are like blueprints of objects to be created. Classes can inherit from classes and even create subclasses. This method is solid and battle-tested as it is what powers many popular programming languages like Java and C++ as mentioned above but it has its downside.

One of the downsides of classical inheritance is that it is very verbose and you can quickly end up with a huge mass of collection and trees of objects that interact, that it can become very hard to figure out what is going on even if you use good practice. Plus you would have to learn and use a lot of intimidating keywords viz: friend, protected, private, interface, etc.

The class keyword, however, has been introduced to JavaScript in ES2015, but it is just syntactical sugar, JavaScript remains prototype-based

Prototypal inheritance is a much simpler approach. It is flexible, extensible, and very easy to understand. It is not a silver bullet anyway but it is in many ways better than class-based inheritance and it would be our focus going forward.

3. The Prototype Object And The Prototype Chain

To understand prototypal inheritance we need to understand these three key concepts viz: inheritance, prototype, prototype chain
Inheritance refers to a process whereby one object gets access to the properties and methods of another object.
Let's deal with these keywords with examples.

Remember in OOP we use objects to model real-world things that we want to represent inside our programs


    
const AppleInc = {
    name: "Apple",
    logo: "Apple fruit",
    operating_system: "Apple Software",
    on () {
       console.log("Turning on your " + this.name + " device")
    },
    off () {
       console.log("Turning off your " + this.name + " device")
    }

}
console.log(AppleInc)

In the small contrived example above I have modeled the Apple company. It has a name, logo, and operating_system property, both an on(), and off methods(which are functions, meant to describe the behaviours of Apple devices).

We will proceed to model some products of Apple and have them inherit these properties.

All Apple products are unique and each reflects the image of the company.
You can certainly tell it is an Apple product even without seeing the logo; thus we can say in real-life, each Apple product inherits properties like design, operating system, etc from the company.

We will try to express this concept in codes as we demystify prototypal inheritance


    
const AppleInc = {
    name: "Apple",
    logo: "Apple fruit",
    operating_system: "Apple Software",
    on () {
       console.log("Turning on your " + this.name + " device")
    },
    off () {
       console.log("Turning off your " + this.name + " device")
    }

}

const iPhone = {
    name: "iPhone",
    operating_system: "ios"
}

console.log(iPhone) 
iPhone.__proto__ = AppleInc // NEVER DO THIS IN REAL-LIFE. ONLY FOR DEMONSTRATION PURPOSE
console.log(iPhone) // logs iPhone with AppleInc as its prototype.
console.log(iPhone.on())
console.log(iPhone.off())

Kindly run the program in runkit by clicking the green run button to the right and click open the result of each console.log().
You would see an image like this:

Notice at the first console.log() iPhone does not have a proto object property. But after we assigned AppleInc as its prototype, in the second console.log() we can see a proto property, which is the AppleInc object.

Modern browsers allow us to set an object's prototype like this:

iPhone.__proto__ = AppleInc // sets AppleInc to be the prototype of the iPhone object.

💥 Kindly note, I am setting this just for demonstration purposes. Do not set your object's prototype like this. Read more from MDN

✨ I would also be writing about the recommended ways to set an object's prototype in JavaScript in the upcoming articles in this series

We can also notice that somehow we could call the on() and off() methods from our iPhone object. (But they are not originally there!).

We can see that the iPhone object has inherited the properties and methods of its prototype object. (An object from which another object inherits properties and methods. It lives as a property in that object with the name __proto__

As a result of this, we can call the on() and off() methods even when they are not originally in the iPhone object. This is possible because JavaScript holds a reference to the prototype of the iPhone object and when we try to access a property or method, it looks for it in the iPhone object first, and if it cannot find it there, it goes to its prototype (The __proto__ object property as seen) and looks for it there.
It returns the property or method once it finds it and stops the search.

This explains why:

iPhone.name // returns iPhone and not Apple


    
const AppleInc = {
    name: "Apple",
    logo: "Apple fruit",
    operating_system: "Apple Software",
    on () {
       console.log("Turning on your " + this.name + " device")
    },
    off () {
       console.log("Turning off your " + this.name + " device")
    }

}

const iPhone = {
    name: "iPhone",
    operating_system: "ios"
}

iPhone.__proto__ = AppleInc // NEVER DO THIS IN REAL-LIFE. ONLY FOR DEMONSTRATION PURPOSE
console.log(iPhone.name)

The JavaScript engine finds the name property in the iPhone object returns it, and ends the search.

In JavaScript, a prototype can have its own prototype. So the AppleInc object can have its own prototype which can, in turn, have its own prototype and the process can go on. So when the JavaScript engine looks for a property or method in an object and cannot find it, it would go to its prototype and look for it there, if it does not find it, it would go to the prototype of that prototype and continue to go down the prototype chain until it finds it.

This chain of links or object references between an object, it's prototype, and the prototype of its prototype all the way down to the last prototype is called the prototype chain


    
const Company = {
    category: "Technology"
}

const AppleInc = {
    name: "Apple",
    logo: "Apple fruit",
    operating_system: "Apple Software",
    on () {
       console.log("Turning on your " + this.name + " device")
    },
    off () {
       console.log("Turning off your " + this.name + " device")
    }

}

const iPhone = {
    name: "iPhone",
    operating_system: "ios"
}

AppleInc.__proto__ = Company // NEVER DO THIS IN REAL-LIFE. ONLY FOR DEMONSTRATION PURPOSE
iPhone.__proto__ = AppleInc // NEVER DO THIS IN REAL-LIFE. ONLY FOR DEMONSTRATION PURPOSE
console.log(iPhone.category) // gets this from the search down the prototype chain

Run the code above and see that we can access the category property even from the iPhone object because of the search down the prototype chain.

4. Exposing this Keyword in JavaScript

You might be surprised by this title, but I see an opening in this post to deal a little on the this keyword which has a reputation of being confusing in our beautiful language; JavaScript.
Let's visit our example again:


    
const AppleInc = {
    name: "Apple",
    logo: "Apple fruit",
    operating_system: "Apple Software",
    on () {
       console.log("Turning on your " + this.name + " device")
    },
    off () {
       console.log("Turning off your " + this.name + " device")
    }

}

const iPhone = {
    name: "iPhone",
    operating_system: "ios"
}

iPhone.__proto__ = AppleInc // NEVER DO THIS IN REAL-LIFE. ONLY FOR DEMONSTRATION PURPOSE
console.log(iPhone.on())
console.log(iPhone.off())

From our code above we understood that we are able to call the on() and off() methods from the iPhone object because of JavaScript's prototypal inheritance. (where we explained inheritance, prototype, and the prototype chain).
But why does this work correctly?

console.log(iPhone.on()) // returns Turning on your iPhone device
console.log(iPhone.off()) // returns Turning on your iPhone device

How does it know the correct name is iPhone when the method is actually on the AppleInc object which is the prototype of the iPhone object and has its own name property?
It is because of the this keyword. It is pointing to the iPhone object; thus it gets the name property from it.

Take note, the this keyword in cases like this, starts its search from the object that originates the call, and since it found the name property in the iPhone object it points to it there.

Hold unto the above rule of thumb as we take a deeper look at this below:

The this keyword is a very interesting aspect of JavaScript it is extremely powerful and can sometimes be a little confusing. Below is the general rule of thumb to help you further understand the behaviour of the this keyword.

Kindly run the example code below and consider the result.


    
// New additions
let name  = "Brendan Eich"

function sayName() {
 console.log(this.name) 
}

let Person = {
   name: "Lawrence Eagles",
   sayName() { console.log(this.name) }
}

sayName()
Person.sayName()

From the result, we can see that when you use the this keyword in a function it points to the global object but when you use it in a method (a function inside an object), it points to that object.
Following this, let's return to our code. I have added some extra properties to help us understand the this keyword better and consequently, understand our example more thoroughly.
Kindly run the code below and consider the results.


    
const Company = {
    category: "Technology",
    getNews () {
       console.log("viewing " + this.category + " news on my " + this.name + " device")
    }
}

const AppleInc = {
    name: "Apple",
    logo: "Apple fruit",
    operating_system: "Apple Software",
    store: "Apple Store",
    on () {
       console.log("Turning on my " + this.name + " device")
    },
    off () {
       console.log("Turning off my " + this.name + " device")
    },
    getDevice() {
       console.log("I just bought my " + this.name + " from " + this.store)
    }
}

const iPhone = {
    name: "iPhone",
    operating_system: "ios"
}

AppleInc.__proto__ = Company // NEVER DO THIS IN REAL-LIFE. ONLY FOR DEMONSTRATION PURPOSE
iPhone.__proto__ = AppleInc // NEVER DO THIS IN REAL-LIFE. ONLY FOR DEMONSTRATION PURPOSE

// let's buy an iPhone from the Apple store, then let's turn on and off our iPhone.
console.log(iPhone.getDevice())
console.log(iPhone.on())
console.log(iPhone.off())
console.log(iPhone.getNews())

From the result of the code above we see that when we ran the method to buy an iPhone,

console.log(iPhone.getDevice()) 
// returns I just bought my iPhone from Apple Store

the this keyword points to different objects to get the correct property. It starts by pointing to the object that originates the call and since it can find name property in the iPhone object it points to that. But it cannot find the store property in the iPhone object so it points to its prototype and looks for the property there and finds it.
This same principle holds when we tried to turn on/off our iPhone.

console.log(iPhone.on()) // returns Turning on my iPhone device
console.log(iPhone.off()) // returns Turning off my iPhone device

Here the this keyword starts searching from the object that originates the call and because it can find the name property in it, it points to it there. Thus we get the correct device name even though the on() and off() methods are not in that object but in their prototype.
Finally, the result is the same when we try to read news from our iPhone device,

console.log(iPhone.getDevice())

Notice the getDevice() method is in the Company object which is the prototype of the AppleInc object which is the prototype of the iPhone object. And because of the prototype chain, we can call getDevice() from the iPhone object as if it just sits in it.

Let's move forward.

5. JavaScript Object, The Prototype Of All Prototypes

When I said the JavaScript engine looks in an object for a property and if it cannot find it, it keeps going down the prototype chain until it finds it; you might have wondered what will be the last prototype?
Like in our case, what would be the prototype of the Company object?
Kindly run the code below and consider the result.


    
const Company = {
    category: "Technology"
}

const AppleInc = {
    name: "Apple",
    logo: "Apple fruit",
    operating_system: "Apple Software",
    on () {
       console.log("Turning on your " + this.name + " device")
    },
    off () {
       console.log("Turning off your " + this.name + " device")
    }

}

const iPhone = {
    name: "iPhone",
    operating_system: "ios"
}

AppleInc.__proto__ = Company // NEVER DO THIS IN REAL-LIFE. ONLY FOR DEMONSTRATION PURPOSE
iPhone.__proto__ = AppleInc // NEVER DO THIS IN REAL-LIFE. ONLY FOR DEMONSTRATION PURPOSE
console.log(Company.__proto__) // gets this from the search down the prototype chain

You can see that the prototype of the Company object is the built-in JavaScript object. Since in Javascript everything is an object, all the other data types in JavaScript inherit properties and methods from the base object. So it is the final prototype in JavaScript.

Kindly open up the console.log() result of the code below from runkit and you would see something like this:

Notice some familiar names like the hasOwnProperty and the isPrototypeOf methods, the constructor etc

So the base object in JavaScript is the prototype of all data types in JavaScript, be it arrays, strings, numbers, functions, etc.

All data types in JavaScript have a prototype object that inherits its property and methods from the base object. Let's look at some of them in the next section.

6. The Power Of Prototypal Inheritance

Welcome to the power of prototypal inheritance. I am sure you would have already seen how flexible, extensible, and how easily objects can share properties and methods when using prototypal inheritance.

Let's look at some code examples for more:
Kindly run the codes below and open up each console.log() in runkit


    
const simpleArray = []
const simpleFunction = function simpleFunction () {}
const simpleString = ""

console.log(simpleArray.__proto__)
console.log(simpleFunction.__proto__)
console.log(simpleString.__proto__)

If you open up the first console in runkit you would notice that it has an Array Prototype which have a huge collection of properties and methods as seen in the image below.

Notice some familiar names here viz: concat(), every(), filter(), find(), pop(), map(), reduce() etc you can scroll up or down on runkit for more of them.
These are methods we use every day in JavaScript when we implement our own array. Notice they all sit in the Array Prototype Object.

Think of how much hassle it would be if we would have to write out all these properties and methods every time we create an array in our program!

If you open up the next console in runkit, you would get something like this:

Notice some familiar names like the call(), apply() and bind() methods, all present in the Function Prototype Object.
The prototype of all JavaScript functions is called the Function Prototype. It is actually an empty function. (a function with nothing in its code "{}" block

Finally, open up the last console in runkit and you would get something like this:

Notice some familiar names like the length property, the split(), indexOf(), substring() methods and lot's more you can scroll down to see all

The prototype of all strings in JavaScript is called the String Prototype.

What do you think would be the prototype of all these prototypes viz:
array Prototype, Function Prototype, and the String Prototype?
Let's answer this with some more code examples.
Kindly run the codes below and consider the results in the console in runkit.


    
const simpleArray = []
const simpleFunction = function simpleFunction () {}
const simpleString = ""

console.log(simpleArray.__proto__) // array prototype
console.log(simpleArray.__proto__.__proto__) // base object
console.log(simpleFunction.__proto__) // function prototype 
console.log(simpleFunction.__proto__.__proto__) // base object
console.log(simpleString.__proto__) // string prototype 
console.log(simpleString.__proto__.__proto__) // base object

From the above results, it is clear that the prototype of all prototypes in JavaScript is the base object.

We can also see a powerful pattern here. Prototypal inheritance allows us to write our properties and methods in one place and share them with other objects in our application. Hence both the array, function, and string prototype contains a huge list of properties and methods that is passed on to every array, function, and string declaration respectively in our program.

This saves us memory and time.

We can also use this power to create other Apple devices and have them get some properties and methods from the AppleInc object.


    
const Company = {
    category: "Technology"
}

const AppleInc = {
    name: "Apple",
    logo: "Apple fruit",
    operating_system: "Apple Software",
    on () {
       console.log("Turning on your " + this.name + " device")
    },
    off () {
       console.log("Turning off your " + this.name + " device")
    }

}

const iPhone = {
    name: "iPhone",
    operating_system: "ios"
}

const iPad = {
    name: "iPad",
    operating_system: "ios"
}

const laptop = {
    name: "mac",
    operating_system: "mac os x"
}

AppleInc.__proto__ = Company // NEVER DO THIS IN REAL-LIFE. ONLY FOR DEMONSTRATION PURPOSE
iPhone.__proto__ = AppleInc // NEVER DO THIS IN REAL-LIFE. ONLY FOR DEMONSTRATION PURPOSE
iPad.__proto__ = AppleInc // NEVER DO THIS IN REAL-LIFE. ONLY FOR DEMONSTRATION PURPOSE
laptop.__proto__ = AppleInc // NEVER DO THIS IN REAL-LIFE. ONLY FOR DEMONSTRATION PURPOSE

// let's turn on and off all our apple devices
console.log(iPhone.on())
console.log(iPad.on())
console.log(laptop.on())
console.log(iPhone.off())
console.log(iPad.off())
console.log(laptop.off())

7. Closing Thoughts

I do hope you followed through to this point. You are appreciated. It is a pretty long post but I want to believe that you got a thing or two. If you are not clear on any point or you have an addition, in case I miss anything, I would be looking forward to hearing from you in the comment section below.

MODERN METHODS TO REMOVE ITEMS FROM ARRAYS IN JAVASCRIPT

Lawrence Eagles — Mon, 20 Apr 2020 22:41:41 +0000

Arrays In JavaScript
Array.prototype.shift()
Array.prototype.pop()
The Delete Operator
Array.prototype.splice()
Array.prototype.filter()
A Masterpiece
Closing Thoughts

1. Arrays In JavaScript

Arrays in JavaScript are special objects that store items sequentially, that is, they store items one after another in memory. They are high-level, list-like objects. You can actually think of them as lists of items.

All items in an array have an index which indicates the position of that item in the array. The item in the first position has an index of 0 then next has an index of 1 etc. For this reason, JavaScript's array indexes are zero-based.
Items in JavaScript arrays can be accessed using their index.
We can find the index of an item in an array using a special method called the indexOf.

You can simply think of JavaScript arrays as an ordered set of values that you refer to with a name and an index


    
const listOfAnimals = [ "dog", "cat", "rat", "fish", "rabbit" ]

console.log(listOfAnimals) // returns the listOfAnimals array
console.log(listOfAnimals[0]) // gets the item at index 0 
console.log(listOfAnimals[2]) // gets the third item which is the item at index 2

let itemPosition = listOfAnimals.indexOf("rat") // gets the index of the item passed. here "rat"

console.log(itemPosition) // displays the index of "rat" in the listOfAnimals array

The total number of items in an array is the length of that array.
The length property is special. It always returns the index of the last element plus one.


    
const evenNumbers = [2,4,6,8,10,12]
console.log(evenNumbers.length) // returns the length of the evenNumbers array

JavaScript arrays are the most used data structure and because they organize items sequentially, it is super easy to access the first and last item. Hence deleting these items are very easy in JavaScript.

2. Array.prototype.shift()

The shift() method removes the first element in an array (that is the item at the index of zero). It also re-orders the remaining elements in the array and decrements the array length by one. Finally, it returns the removed item.


    
const languages = [ "PHP", "Python", "Rust", "C++", "C", "Ruby", "JavaScript" ]
const removedLanguage = languages.shift()
console.log(removedLanguage) // returns "PHP"
console.log(languages) // returns new array without "PHP"

3. Array.prototype.pop()

The pop() method is the opposite of the shift(). It removes the last element of the array.
The index of the last element in the array is the length of the array minus one. The pop() method, also decrements the array length by one and returns the removed element.


    
const frameworks = [ "React.js", "Angular", "Vue.js", "Express.js", "Ember.js" ]
const removedFramework = frameworks.pop()
console.log(removedFramework) // returns "Ember.js"
console.log(frameworks) // returns new array without "Ember.js"

4. The Delete Operator

Both the pop() and the shift() methods give us a way to remove elements from an array from pre-set position viz: the last or first positions respectively. While they are great, we do not get the freedom of deleting elements from any other position. What if we want to delete elements at a certain index which is neither the first nor the last?

The delete operator is great for this.
Unlike pop() and shift() the delete operator returns the new array.


    
const items = ["eggs", "meat", "vegetables", "salad", "rice", "fish" ]
delete items[3]

console.log(items)
console.log(items.length)
console.log(items[3])

One thing that must be noted before one should use the delete method is that it does not change the length of the array as seen above. It removes the specified element and adds undefined in its place.

5. Array.prototype.splice()

If the delete operator is not very suitable for you because it does not update the array length, another built-in array method you can use is the splice() method.

The splice() method is a very powerful built-in array method that can be used to remove array elements at any index. It can also be used to add elements or replace an existing element. But we will just stick to removing elements from an array. It can remove multiple elements from an array unlike pop() and shift() that removes one element at a time.
Lastly the splice() method returns a new array containing the deleted element/elements.

The splice() method can take up to three parameters for our use case it needs only two. The first specifies the index to start deleting from the second specifies how many elements to remove from the array


    
//remove single element
const numbersInWords = [ "one", "two", "three", "four", "five", "dozen", "six" ]
const arrayWithDeletedItems = numbersInWords.splice(5, 1) //returns ["dozen"]

// remove multiple elements
const mammals = ["man", "dog", "rat", "cat", "fish", "snake", "fly"]
const nonMammals = mammals.splice(4, 3) // return ["fish", "snake", "fly"]

console.log(numbersInWords)
console.log(arrayWithDeletedItems)
console.log(mammals)
console.log(nonMammals)

6. Array.prototype.filter()

We saw the power of splice() above as we used it to elements from any index in an array. But with splice() we could only delete multiple elements in series.


    
const numList = [1,2,3,4,5,6,"Half-dozen",7,8,9,10,11,12,"one-dozen",13,14,15,16,17,18,19,20]
const result = numList.splice(7, 5)

console.log(result)
console.log(numList)

What if we want to delete all the words from our numList array above? since the words are not in series in the above array splice() is not the best fit. Except we are implementing our own remove() method where we can use it under the hood. A good option is to use the filter() since we are deleting all instance of a string in the array.

The filter() methods calls a provided callback function once for each element in an array and returns a new array of elements that passes the test implemented in the callback function.


    
const numList = [1,2,3,4,5,6,"Half-dozen",7,8,9,10,11,12,"one-dozen",13,14,15,16,17,18,19,20]
pureNumList = numList.filter(item => typeof item !== "string") // returns a list of numbers
pureEvenNumber = numList.filter(item => typeof item !=="string" && item % 2 === 0) // returns a list of only even numbers. 

console.log(numList)
console.log(pureNumList)
console.log(pureEvenNumber)

Noticed the power of the filter() method, how it allows us to remove multiple elements from an array regardless of their index. Also, notice how we can combine conditions in the callback function implementation to target multiple elements.


    
const numList = [1,2,3,4,5,6,"Half-dozen",7,8,9,10,11,12,"one-dozen",13,14,15,16,17,18,19,20]

pureEvenNumber = numList.filter(item => typeof item !=="string" && item % 2 === 0) // returns a list of only even numbers. 

console.log(pureEvenNumber)

A Masterpiece

There are still other ways to do this in JavaScript, truly at this point, it should boil down to a developer's implementation of his own custom function. Maybe you dream of a remove() method of your own. I will leave you with a masterpiece from John Resig. (The creator of jQuery).


    
// Array Remove - By John Resig (MIT Licensed)
Array.prototype.remove = function(from, to) {
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.push.apply(this, rest);
};

const numList = [1,2,3,4,5,6,"Half-dozen",7,8,9,10,11,12,"one-dozen",13,14,15,16,17,18,19,20]

numList.remove(13)
numList.remove(6)
console.log(numList) // returns a new array with only numbers.

8. Closing Thoughts

These are a nice collection of ways to remove items from an array but it is by no means an exhaustive list. As I said developers can always come up with something novel. If you do have a custom helper function to achieve this task, you are more than welcome to share it in the comment section below.

UNDERSTANDING FIRST-CLASS FUNCTIONS AND ANONYMOUS FUNCTIONS IN JAVASCRIPT

Lawrence Eagles — Mon, 13 Apr 2020 09:56:03 +0000

Functions And Objects
The Anatomy Of A JavaScript Function
Statements, Expressions, And Anonymous Functions
First-class Functions
Closing Thoughts

1. FUNCTIONS AND OBJECTS

You might be a little surprised at this subtitle. This is because in JavaScript functions are objects.
They are actually a special kind of objects with some unique properties in them. It is often a subject of debate in JavaScript, on what to teach first between functions and objects. I am of the school of thought that both should be taught at the same time. This is because in JavaScript, functions and objects are very intertwined and in many ways they are similar.
With that said, I would like to do a quick refresher on objects in JavaScript before proceeding to functions.

Objects in JavaScript

They are just a collection of key-value pairs.

{ key: value, key: value, key: value } // a dummy example

An object property's value can be any primitive data type in JavaScript e.g: Strings, Numbers, Boolean. It can even be another object. In all of these cases, they are referred to as the object property. On some occasions, the value can be a function. when the value is a function that function is called a method.
we can access an object property's value by passing the key to special operators in JavaScript viz the member access operator and the computed member access operator. Let's take a quick look at this.

const dog = {}; // creates an empty dog object
dog.legs = 4; // adds a leg property using member access operator
dog["bark"] = "woaf woaf"; // adds a bark property using computed member access operator
dog.details = {owner: "Tim", name: "Jack"} // adds details property which is another object using the member access operator
dog["run"] = function(){ console.log("running dog") } // adds a method using the computed member access operator 
console.log(dog) // returns 
{
  legs: 4,
  bark: "woaf woaf",
  details: { owner: "Tim", name: "Jack" },
  run: function() { console.log("running dog") }
}

In the example above I have used both the member access operator (which is just the dot) and the computed member access operator (the square braces []) to add properties and a method to the object. Both operators look for the property to be added in the object and if they cannot find it they would create it there.

One key point to note and carry along is that we could have easily created the dog object with all the properties on the fly. Like this:

const dog = {
  legs: 4,
  bark: "woaf woaf",
  details: { owner: "Tim", name: "Jack" },
  run: function() { console.log("running dog") }
}
console.log(dog) // returns
{
  legs: 4,
  bark: "woaf woaf",
  details: { owner: "Tim", name: "Jack" },
  run: function() { console.log("running dog") }
}
// we still get the same result but this is faster.

Another important thing to note and carry along is that an object holds the references (addresses) of all its properties and methods in your computer's memory. It knows where they all sit in memory
As a result of this, we can access them using these same operators. Hence:

console.log(dog["legs"]) // returns 4
console.lg(dog["details"] // returns { owner: "Tim", name: "Jack" }
console.log(dog.bark) // returns "woaf woaf"
console.log(dog.run) // return function(){console.log("running dog") }

2. THE ANATOMY OF A JAVASCRIPT FUNCTION

Javascript functions are special objects. They have the same properties as other objects but have some extra properties that make them first-class objects or first-class citizens as some call it. Two of these are:

Name property
Code property

A function object has a name and a code property.

function ageTeller(age){
    console.log(`my age is ${age}`);
}
console.log(ageTeller.name) //returns ageTeller
console.log(ageTeller.length) // returns length of the function

The function's code property is an object that holds all that function's code that you wrote. It is not accessible publicly and it is stored in an internal property [[Code]]. Read more from the ecma-international.org
In other words, the code you wrote is not the function itself but sits in the code property of the function. A function is just a special object in JavaScript

TWO IMPORTANT TIPS:

This code property of a function is invokable. And this is how a function gets called or invoked in JavaScript.
A function in JavaScript must not necessarily have a name. Hence we can create a function without giving it a name. In this case, that function is said to be anonymous.

const anonymousAgeTeller = function(age){
    console.log(`my age is ${age}`);
}
// A function without a name!?

const es6AnonymousAgeTeller = age => console.log(`my age is ${age}`);
// An es6 arrow function without a name!?

3. STATEMENTS, EXPRESSIONS, AND ANONYMOUS FUNCTIONS

The functions above do not have a name. Both are the same but the latter es6AnonymousAgeTeller, uses modern JavaScript syntax. And that is what will be using as we go on.

It is interesting to see that we are assigning a function expression to a variable es6AnonymousAgeTeller. This is perfectly valid JavaScript and it opens the door for some very powerful coding patterns.

An expression is a unit of code that returns a value.

2 + 2 // returns 4 
3 > 2 // returns true

We can trap this returned value in a variable. Hence

const sumOfTwo = 2 + 2
console.log(sumOfTwo) // returns 4

A statement, on the other hand, is a unit of code that does work. It does not return a value. Take Note.

function sumOfTwo () {
   console.log(2 + 2);
}
// a function statement does not return a value.
// A value is only returned when the function is invoked/called
sumOfTwo() // returns 4

we cannot assign a statement to a variable because it does not return anything.

const result = if(3 > 2) {
  return "the result is true"
}
// wrong JavaScript code and should not be done!!!

But we can do this instead:

const sumOfTwo = () => console.log(2 + 2);
console.log(sumOfTwo); // returns 4

Above I wrote a function expression which is a function that does not have a name and because it is an expression it returns the reference of that function (its address in your computer's memory, at this time the function is not called so the reference is returned) and this is stored in the variable sumOfTwo. We can now invoke/call this function's code property using the sumOfTwo variable since this variable now holds a reference to the function in memory. Hence:

console.log(sumOfTwo()); // returns 4

These kinds of functions that do not have names in JavaScript are called Anonymous functions.

4. FIRST-CLASS FUNCTIONS

Anonymous functions can be stored in a variable, object, or array, passed as an argument to a function and can even be returned from a function. Hence they are called first-class functions or first-class object or as some call it first-class citizens in Javascript
In a nutshell, they can be treated and used as you would use any primitive JavaScript data type

This makes JavaScript extremely powerful. Below are some examples to buttress this idea.

function logItem (item) {
    if(typeof item === "function") {
      console.log(item());
    }else {
    console.log(item);
    }
}

console.log(logItem("Lawrence Eagles")) // returns "Lawrence Eagles"
console.log(logItem({name : "Lawrence Eagles", location: "Earth"})) // returns {name : "Lawrence Eagles", location: "Earth"}
console.log(logItem(()=> {
    console.log("I am a first-class citizen in JavaScript!")
})) // returns "I am a first-class citizen in JavaScript!"

Let's breakdown the function above.

The function name is logItem and it takes a parameter called item
we get the data type of the parameter using the typeof operator. The typeof operator returns a string indicating the type of the unevaluated operand.

typeof item
// this is an expression so it returns a value depending on the data type of item.

We take that returned data type and check if it is equal to "function"

typeof item === "function" 
// take note typeof returns it's result as string. so we check if the result is equal to a "function".
// This is another expression and it would return true or false in this case.

If true, we know that a first-class anonymous function was passed and its reference would now be stored in the logItem function's parameter. So we call that first-class function using the logItem parameter

item()
// item is going to hold any argument passed to the function. 
// If a primitive is passed it would hold that primitive but if a function is passed it would hold a reference to the function in memory. 
// So we can invoke the code property of that function using this parameter.

If the data type is not a function we log that item to the console. console.log(item)

DEMYSTIFYING HOISTING IN JAVASCRIPT

Lawrence Eagles ・ Apr 4 '20

#javascript #beginners #tutorial #webdev

5. CLOSING THOUGHTS

This concept of first-class functions opens up a whole new programming paradigm in JavaScript called functional programming. This gives JavaScript superpowers and makes it a very good language for functional programming. I do hope you got a thing or two from this article and I am very much looking forward to your additions or questions in the comment section below.

HOW TO PROPERLY SET INITIAL STATE IN REDUX

Lawrence Eagles — Sat, 11 Apr 2020 10:48:57 +0000

In Redux, all your application state is held in the store; which is an object that holds the complete state tree of your app. There is only one way to change its state and that is by dispatching actions.
Actions are objects that consist of a type and a payload property. They are created and dispatched by special functions called action creators.
see a small contrived and detailed example below:
First creating the Redux store:



import { createStore } from 'redux'

function todosReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.payload])
    default:
      return state
  }
}

const store = createStore(todosReducer)

Next updating the store



const ADD_TODO = add_todo; // creates the action type
const newTodo = ["blog on dev.to"];
function todoActionCreator (newTodo) {
  const action = {
    type: ADD_TODO,
    payload: newTodo
  }
  dispatch(action)
}

Like I said my examples are small and contrived and are aimed at clearing the air, around the aspect of Redux related to our discussion. So, kindly see them as a refresher. I am assuming you already have some knowledge of Redux and are familiar with some patterns in a React Redux environment.
However regardless of your professional experience, I would not be surprised if you find a hoe on these premises because too many people know too much but actually know nothing at all. Like in my old article on hoisting in JavaScript, a lot of developers where making thunderclaps around the web about hoisting, but they were all explaining the concept wrongly.
So my advice is kindly to take it and weed around your own premises. If you do I am sure you would come out with a better understanding of React and Redux.
When a store is created, Redux dispatches a dummy action to your reducer to populate the store with the initial state. You are not meant to handle the dummy action directly. Just remember that your reducer should return some kind of initial state if the state given to it as the first argument is undefined.
But you don't want your initial application state to be undefined, so you have to initialize the state yourself. There are two ways or patterns to do this viz: the createStore pattern and the reducers pattern.

2. createStore Pattern

The createStore method can accept an optional preloadedState value as its second argument. In our example, we called createStore without passing this value. When a value is passed to the preloadedState it becomes the initial state.



const initialState = [] // in a real-world, is way better to initialize state with {} (an object) instead of an array.
const store = createStore(todosReducer, initialState)

let's say we have a compulsory todo list for everyone and we can add new tasks to this list later. In this case, we would initialize state like this:



const initialState = ["eat", "code", "sleep"]; // compulsory todo list
const store = createStore(todosReducer, initialState)

3. Reducer Pattern

Reducers can also specify an initial state value by looking for an incoming state argument that is undefined, and returning the value they'd like to use as a default. In our example above our todoReducer already does this.



function todosReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.payload])
    default:
      return state
  }
}
// sets initial state to []. But would only take effect if the initial state is undefined, which means it was not set using createStore().

But there is a drawback to this method. In our contrived example, it can be great but what of in a large application where we have about 10 or 20 reducers and we want to initialize state not just with an empty array or object literal, but with some data. It would take a lot of repetition to get this done with the reducers and it is going to be tedious if we decide to change that initial state data at some point.
That's a really boring thing todo:

4. Closing Thoughts:

You might be wondering which method is best to use. I have already pointed out a drawback with the reducer pattern.
In general, preloadedState wins over the state specified by the reducer. This lets reducers specify initial data that makes sense to them as default arguments, but also allows loading existing data (fully or partially) when you're hydrating the store from some persistent storage or the server.
Also Note:
Reducers whose initial state is populated using preloadedState will still need to provide a default value to handle when passed a state of undefined. All reducers are passed undefined on initialization, so they should be written such that when given undefined, some value should be returned. This can be any non-undefined value; there's no need to duplicate the section of preloadedState here as the default

I have seen developers use both methods but as touching the drawback I noted about using reducers, I would love to hear your opinions and experiences in the comment section below.

DEMYSTIFYING HOISTING IN JAVASCRIPT

Lawrence Eagles — Sat, 04 Apr 2020 10:15:38 +0000

Table of content contents:

Hoisting and the general misconception in the JavaScript world
How JavaScript works under the Hood
The true concept of hoisting
The dangers of hoisting
Closing thoughts

1. HOISTING AND THE GENERAL MISCONCEPTION IN THE JAVASCRIPT WORLD

What is Hoisting in Javascript?

Hoisting is a JavaScript’s default behavior of moving declarations to the top.

The above definition of hoisting has spread like wildfire throughout the internet and the JavaScript community.

HOWEVER, THIS IS JUST A HUGE MISCONCEPTION ABOUT HOISTING

As a JavaScript developer, it is important you truly understand hoisting, not only because it gives you a better understanding of the language but also because this can easily earn or cost you a point during an interview section.

Kindly note, I would be using JS and JavaScript interchangeably in this article.

HOISTING HEAD FIRST

logName() // calls function
console.log(coderName); // logs coderName to the console

var coderName = "Lawrence Eagles"; // declares the coderName variable
function logName () { // declares the logName function
    console.log("Brendan Eich")
}

At first glance, you would certainly believe the above definition (rather misconception) Is correct.

However, let us debunk this as we demystify hoisting by digesting these examples.
The above code examples would output:

logName() // returns Brendan Eich 
console.log(coderName); // returns undefined

The key to understanding this, is the result of logging the variable. The function call most certainly behaves as if it was moved up.
In which case the processed code would be:

var coderName = "Lawrence Eagles"; // declares the coderName variable
function logName () { // declares the logName function
    console.log("Brendan Eich")
}
logName() // calls function
console.log(coderName); // logs coderName to the console

But if this was the case the result should be:

// logName() returns Brendan Eich

// console.log(coderName) returns Lawrence Eagles (not undefined)

To understand what is happening here we need to understand how JavaScript really works.

2. HOW JAVASCRIPT WORKS UNDER THE HOOD

We have established a fact from our small contrived example above that if the variable and functions were indeed moved to the top by the JS engine then the results should be:

// logName() returns Brendan Eich

// console.log(coderName) returns Lawrence Eagles

and not

logName() // returns Brendan Eich
console.log(coderName); // returns undefined

The key thing to note here is that the hoisted version of the code is not behaving as if the variable was moved to the top but rather as if it was declared without a value.

Hence it behaves as if the code was:

var coderName; // declares the coderName variable without a value
function logName () { // declares the logName function
    console.log("Brendan Eich")
}
logName() // calls function
console.log(coderName); // logs coderName to the console

Here indeed we get a result consistent with the hoisted version of the code.

logName() // returns Brendan Eich
console.log(coderName); // returns undefined

HOW JAVASCRIPT WORK UNDER THE HOOD.

When the JS engine processes your code, it creates something called the execution context. This is a wrapper around your currently running code. It consists of the global variable, the this object (you may know it as this keyword), and the variable environment of that execution context.
We would not be going in-depth into the execution context but we will dwell sufficiently on it, for here lies the buried treasure.

There are two processes involved in the creation of the execution context viz:

The creation phase: During this phase, the variables and the functions are added to memory. Here the JS engine goes through your code line by line and adds all your variables to your computer's memory but it does not assign them values just yet. The functions, however, are added to memory in their entirety. That is the whole function (name and code block) is added to memory in this phase.
The second phase is the execution phase: During this phase values are assigned to variables and functions are called. so even if you initialize a variable with a value it is in this second phase that that value is assigned to it. In the first phase, the value is not assigned to the variable. It is added to memory and initialized with undefined.

3. THE TRUE CONCEPT OF HOISTING

In case you don't already see it, the whole misconception occurs because of the first (creation) phase of the execution context. Before the functions are eventually executed they are already in memory during the creation phase of the execution context so the Javascript engine knows where that function, in its entirety sits in memory. It did not move it to the top.
Hence:

logName()
function logName () { // declares the logName function
    console.log("Brendan Eich")
}

// returns Brendan Eich

Works correctly as if the function declaration was moved to the top. But that is not the case. The function in its entirety was already added to memory during the creation phase of the execution context. So during the execution phase, the JS engine already knows where the function sits in memory and calls it.

What about variables?

The process is the same but the implementation is a little bit different. Like I noted above the variables are also added in memory during the creation phase of the execution context but no values are assigned to them. In javascript when a variable is declared without value the JS engine automatically adds a placeholder value to it which is undefined.
This explains why:

console.log(coderName); // logs coderName to the console
var coderName = "Lawrence Eagles"; // declares the coderName variable

and

var coderName; // declares the coderName variable without a value
console.log(coderName); // logs coderName to the console

have the same result: undefined
For this same reason anonymous functions assigned to variables are not hoisted

UNDEFINED IN JAVASCRIPT

Undefined is a primitive type in JavaScript just like String, Boolean, and Numbers. It means you have not explicitly assign any value to that variable. further you reading at MDN
Take note it is not an error
Take note it is not null Read about null here
We can make this point clearer by running

console.log(coderName)

without declaring the variable. That is without any of the codes below.

var coderName;
var coderName = "Lawrence Eagles"

This would throw an error.

console.log(coderName) // returns VM275:1 Uncaught ReferenceError: coderName is not defined

Note this is different from undefined. This is an error telling you that you are trying to log a variable that is not defined anywhere. The JavaScript interpreter is saying I did not see that variable at all in memory.
However, in the case of hoisting the variable is in memory but because it is put there during the creation phase of the execution context, the JS engine assigns a special value to it which is called undefined.
It is this whole process that is confused and misunderstood by many who think that the JS engine actually moves the variable or function declaration to the top for them.

4. THE DANGERS OF HOISTING

Hoisting offers a false security. Many developers believe that the JS engine is going to move their function and variable declarations up and so consciously write bad codes. But in reality, the JavaScript engine does not do that, we can now clearly see that the JavaScript engine is only making decisions with our codes based on how it has been implemented. This can be very dangerous because one can get undefined when a real value is expected and this can be a very nasty bug, so difficult to track that I am sure you won't like the picture by the time you finish debugging.

Pro Tip: Think twice and code once, save yourself the debugging stress

MODERN JAVASCRIPT AND HOISTING

From es6 and above there are new ways to declare variables in JavaScript, which makes the language now safer as both let and const (the new ways to declare variables in Javascript) do not support hoisting.

console.log(coderName); // logs coderName to the console
let coderName = "Lawrence Eagles"; // declares the coderName variable
// returns VM269:1 Uncaught ReferenceError: coderName is not defined

and

console.log(coderName); // logs coderName to the console
const coderName = "Lawrence Eagles"; // declares the coderName variable
// returns VM397:1 Uncaught ReferenceError: Cannot access 'coderName' before initialization

would not work. They both throw errors. You are hereby encouraged to write good codes.

5. CLOSING THOUGHTS

I do hope you learned a thing or two from reading this. I would also like to hear from you in the comment section below.
Kindly visit MDN for further your reading on hoisting

Causes of Heroku H10-App Crashed Error And How To Solve Them

Lawrence Eagles — Sat, 12 Oct 2019 05:22:16 +0000

Programming is bittersweet.
It is very tedious and many a time, it can leave developers very frustrated with little zeal for another keypress.

However, developers are always having a whale of a time while coding, and they are full of pride and joy, once all their codes run successfully without errors.

That being said no one wants to be frustrated while coding hence no one wants bugs in their codes.

Developers, often do not get it all right ("code-wise") at first try; consequently, the software development cycle involves debugging, refactoring, upgrading, and many other enhancement operations.
In addition, developers know that many a time we all have to deal with bugs in our code. Hence debugging is an invaluable skill in a developer's repertoire. And to be successful at debugging, we need a good understanding of error messages.

Error codes or messages are the ways computers inform us that there are bugs in our codes, and sometimes it tells us where they are.

The paradox is that error codes; although are very helpful, they are not plain English and can be very confusing and cryptic

Below are error codes from a crashed app on Heroku.



2019-10-11T11:27:28.019054+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=realtylabapp.herokuapp.com request_id=74165d9f-db2a-46bd-ab9c-1a01403bd00f fwd="129.205.113.108" dyno= connect= service= status=503 bytes= protocol=https
2019-10-11T11:27:29.919409+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=realtylabapp.herokuapp.com request_id=fa48efa2-4ddf-41e6-a633-a62cb02314bd fwd="129.205.113.108" dyno= connect= service= status=503 bytes= protocol=https

Heroku uses a unique alphanumeric error code combo to communicate to the developer the kind of error that was found in their code.

This alphanumeric error code ranges from:

H10 to H99
R10 to R99
L10 to L15

Get a detailed list here: Complete Heroku Error Codes

This article is focused on the Heroku H10-App crashed error code which is thrown when an application crashes on Heroku. This is as much as it goes. It does not help us with the reason our app crashed and that's where this article comes in. Below are some causes of this error and I guarantee you that some of them would surprise you greatly!

Bug in Procfile
A very interesting discovery for me. A bug in your Procfile can crash your app. If your Procfile is pointing to the wrong server file. e.g If your server is in server.js and your Procfile points to app.js this would definitely crash your app and Heroku would greet you with the H10-App crashed error code message.
Secondly, a buggy Procfile can also come in the form of wrong spacing. e.g
Wrong: web : node index.js
Correct web: node index.js
Setting a PORT as a Heroku environment variable
This would surely crash your app. Heroku automatically sets a Port that can be accessed via process.env.PORT. Setting a port yourself would crash your app. Surprisingly, the command heroku config does not display the preset Heroku port so one might be tempted to set another port as an environment variable.
To see all the preset Heroku environment variables, use the command heroku run printenv.
Missing Required Environment Variable while setting a port would cause this error because Heroku already sets a port internally, failing to set any required environment variable (e.g your database), would prompt Heroku to greet you with this error.
Missing Required Scripts
This error is thrown in a Node.js environment if you forget to set a start script. Heroku uses this script to start your app so if it is missing, it would throw an H10-App crashed error code message.

This can be solved by setting a start script in the package.json. e.g



"scripts": {
   "start": "node index.js"
}

Final Thoughts
If none of the above solved your problem, you can make a last-ditch attempt by updating all your packages. If this doesn't help and you are in a Node.js environment, your last resort would be setting a node version in the engine section of your package.json file.



{
 "name": "myapp",
 "description": "a really cool app",
 "version": "1.0.0",
 "engines": {
   "node": "12.11.1"
   }
}

The Unthinkable
Lastly, if your bug defiles all solution, and by this time you are grasping at straws; I leave you in the able hands of heroku restart.

Let me know if you have experienced any other cause of this error in the comment below.

How a broken love relationship between PHP giants Wordpress & Facebook helped save react.js

Lawrence Eagles — Tue, 17 Oct 2017 14:12:23 +0000

Facebook's industry leading javascript library, react js, is no doubt a game changer in the world of front-end development. A ground breaking awesome product, track blazer that shipped with myriads of innovation; think JSX, component based approach, virtual DOM, mobile app development with react native, to name a few.

The simplicity, performance improvements and developer goodies brought by react were so ground breaking that it made its predecessors a story of the past, that developers are happy to forget.
The likes of Backbone.js, Knockout.js, Ember.js are now old stories, developer are willing to tell.

And Angular Js, react's single, biggest competitor, backed by IT giants google, was forced to do a complete rewrite, adopting reacts components based approach and mirroring several other best innovations from react, in other to stay relevant.
https://news.ycombinator.com/item?id=8507833

But despite all these react.js is still taking other the world:

However, with all of this react goodness; as it is with everything created by man, react has a glitch. No! Not in the library itself, but yes! In its licensing. This seems to be a major object of concern that may sometimes force developers, startup and companies to think twice before adopting the library into their technology stack.
This is so because Facebook chose to use a BSD-derived license that contained some troubling litigation issue.

I'm not a legal practitioner but if you where to consider the number of github issues raised on facebook's react.js licensing and do some reading on the react licensing, added with the the number of developer backlash on this issue already, I don't know about you bro, but my eyebrows are raised!

A good read on this issue: https://hackernoon.com/facebooks-bsd-patents-license-and-how-it-affects-you-66088e052845

Following the licensing one would have to double check to know if he is about to shoot himself in the foot or not, because react.js was looking, something like a diamond with a rotten core. Well that would be, if you manage to run into the licensing issue. But why the unnecessary risk?

Regardless of all the pressures, Facebook however has refused to change the BSD+Patents open source license used on react.js. Not even when a company in the caliber of apache, announced that Facebook's BSD+Patents open source license has been disallowed for inclusion with Apache products.
Facebook appeared nothing dauntless.

It is therefore a shockingly, happy moment when you read that Facebook has now agreed to re-license not only react.js but several other of its open source products. viz: Jest, Flow, and Immutable.js
https://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/

Wow! What could have moved this mountain?

I think of no other reason but the announcement of wordpress dropping react; not only on Gutenberg (their new project) but also on calypso (wordpress.com).
Curling from mat mullenweg's blog: https://ma.tt/

"I am surprised and excited to see the news that Facebook is going to drop the patent clause that I wrote about last week. They’ve announced that with React 16 the license will just be regular MIT with no patent addition."

And more after considering react's licensing:

"I'm here to say that the Gutenberg team is going to take a step back and rewrite Gutenberg using a different library. It will likely delay Gutenberg at least a few weeks, and may push the release into next year.

Automattic will also use whatever we choose for Gutenberg to rewrite Calypso – that will take a lot longer, and Automattic still has no issue with the patents clause, but the long-term consistency with core is worth more than a short-term hit to Automattic’s business from a rewrite. Core WordPress updates go out to over a quarter of all websites, having them all inherit the patents clause isn’t something I’m comfortable with."

For Facebook, wordpress adopting react.js for the wordpress.com dashboard named calypso is a big coup for react.js. Considering wordpress owns about 28% of the web right now, and the viral talk of wordpress adopting React js & Node.js fully; after successfully using in developing calypso, was beginning to become popular among JS developers, who would rather use twig to avoid writing that ugly PHP syntax, when developing with wordpress.

A collapse of the romance between these two PHP giants would have been too much for Facebook to handle. The loss of 27% of the web and the possibility of many other companies following suite, with Vue.js now playing catch-up, I don't care about Facebook's reason of changing the licensing, we found it here :-).

Although Facebook's reason for changing the license was given by their engineering director Adam Wolff, quoting him:

“React is the foundation of a broad ecosystem of open source software for the web, and we don’t want to hold back forward progress for nontechnical reasons.”

I don't know about you, but as a developer who believes wordpress and not Facebook saved PHP, I certainly believe, wordpress, dropping react in all their projects was instrumental in Facebook changing their licensing.
Not suggesting wordpress alone, but every single backlash and pressure, down to the wordpress moment of course was instrumental. However, I believe the wordpress blow just pushes the pressure past the threshold level. And of course the irrevocable has been revoked.

Congratulations Facebook, Thank you wordpress, apache and all other developers who spoke out.

Wow! Now we can use our favourite front-end development tool without an iota of worry in our hearts...

DEV Community: Lawrence Eagles

The 3 Main Reasons, You Should Learn JavaScript

Table of Contents

1. The JavaScript Law

2. The JavaScript Scope

3. The JavaScript Evolution

4. Closing Thoughts

An Easy Guide To Understanding Classes In JavaScript

Table of Contents

1. An Introduction To Classes In JavaScript

An Easy Guide To Understanding Constructors In JavaScript

Lawrence Eagles ・ May 9 '20 ・ 10 min read

Understanding Prototypal Inheritance In JavaScript

Lawrence Eagles ・ Apr 23 '20 ・ 13 min read

2. Classes In Detail

Classes are Functions

Classes are Objects

3. Subclasses In Detail

Classes In Action

5. Closing Toughts:

Hello everyone, I apologize for being totally off for a while now.

An Easy Guide To Understanding Constructors In JavaScript

Table of Contents

1. An Introduction To Constructors

Understanding Prototypal Inheritance In JavaScript

Lawrence Eagles ・ Apr 23 '20

Constructors

2. Functions, Constructors And The new Operator

The New Operator

Operators

JavaScript Design Patterns For Creating Constructors

3. Constructors And Prototypal Inheritance

4. JavaScript's Built-In Constructors

5. Closing Thoughts

AN EASY GUIDE TO UNDERSTANDING CLOSURES IN JAVASCRIPT

Table of Contents

1. An Introduction To Closure

UNDERSTANDING FIRST-CLASS FUNCTIONS AND ANONYMOUS FUNCTIONS IN JAVASCRIPT

Lawrence Eagles ・ Apr 13 '20

2. The Fundamental Tenets

1. The Execution Context.

The Global Object

The this variable or keyword

Understanding Prototypal Inheritance In JavaScript

Lawrence Eagles ・ Apr 23 '20

The Variable Environment

The outer Environment

DEMYSTIFYING HOISTING IN JAVASCRIPT

Lawrence Eagles ・ Apr 4 '20

3. Scope And Scope Chain

4. A Second Look At Closure

5. Closing Thoughts

Understanding Prototypal Inheritance In JavaScript

Table of Contents

1. What Is Object-Oriented Programming (OOP)

Classical vs Prototypal Inheritance

3. The Prototype Object And The Prototype Chain

4. Exposing this Keyword in JavaScript

5. JavaScript Object, The Prototype Of All Prototypes

6. The Power Of Prototypal Inheritance

7. Closing Thoughts

MODERN METHODS TO REMOVE ITEMS FROM ARRAYS IN JAVASCRIPT

Table of Contents

1. Arrays In JavaScript

2. Array.prototype.shift()

3. Array.prototype.pop()

4. The Delete Operator

5. Array.prototype.splice()

6. Array.prototype.filter()

A Masterpiece

8. Closing Thoughts

UNDERSTANDING FIRST-CLASS FUNCTIONS AND ANONYMOUS FUNCTIONS IN JAVASCRIPT

Table of Contents

1. FUNCTIONS AND OBJECTS

Objects in JavaScript

2. THE ANATOMY OF A JAVASCRIPT FUNCTION

TWO IMPORTANT TIPS:

3. STATEMENTS, EXPRESSIONS, AND ANONYMOUS FUNCTIONS

4. FIRST-CLASS FUNCTIONS

Let's breakdown the function above.