Tag: javascript

Manatee Mistakes: Error: listen EADDRINUSE :::8080

This edition of Manatee Mistakes is about the error I encountered:

Error: listen EADDRINUSE :::8080

I was running node (or nodemon to be precise) in GitBash. I thought my selected window was Sublime, so I pushed control + z to undo some typed text. However, I was actually in GitBash, and the control + z was executed in GitBash. This ungracefully closed my nodemon.

I started nodemon again, but I got this error:

Error: listen EADDRINUSE :::8080

(8080 was the port I was using)

Using Google, I found this Stack Overflow Q/A: https://stackoverflow.com/questions/9898372/how-to-fix-error-listen-eaddrinuse-while-using-nodejs

Answers gave several options, which were all for UNIX, but I’m on Windows 10 using Git Bash.

The kill -15 PortNumberHere trick did not work for me as the kill command is unrecognized in Git Bash on Windows 10.

However, it gave me a clue to end the process with the PID. Thus, I went to Windows Task manager and I found the PID. From the Windows GUI, I selected the PID and pushed “End Task”.

That killed the process for me, and I was able to use port 8080 again.

Node EADDRINUSE Error in Windows 10
Received the EADDRINUSE error in Windows? Go to Task Manager and select the PID you want to end.

Another work around would be to use another port. (But that process from the original port would still be open in the background).

Advertisements

Pseudoclassical Instantiation in ES2015

Last month I posted about the various instantiation styles in ES5.  This month let’s take a look at how to instantiate in ES2015 aka ES6!

First let’s review how we instantiate in ES5.

ES5 Superclass

We are making a class called Furniture. It takes in arguments h, w, and d, which become equal to this.height, this.width, and this.depth, respectively.  Furniture also has the property this.material, which is preset to ‘wood’. Lastly, we gave Furniture a method called calcSqFootage. When called, it returns the product of this.height, this.width, and this.depth.

var Furniture = function(h, w, d) {
  this.height = h;
  this.width = w;
  this.depth = d;
  this.material = 'wood';
};

Furniture.prototype.calcSqFootage = function(){
  return this.height * this.width * this.depth;
};

ES5 Subclass

Next we make a subclass of Furniture. It is called Table, and its parameters are h, w, and d. If the superclass requires these parameters, the subclasses require them too.

Next we must connect Table to Furniture. We do this by using the .call() method.  We want to call the class Furniture and give it the context of this subclass as well as pass the parameters.

Now the Table subclass inherits the height, width and depth properties and the calcSqFootage method from the Furniture superclass. It has new properties for finish and distressing.

In the last two lines below, we need to connect the subclass’ prototype property to the superclass’ prototype, so that the methods can be inherited. So we create a new object with Object.create() and re-assign Table.prototype. Object.create() creates a new object with an inheritance chain.

Lastly since we re-assigned the value of Table.prototype, we lost the constructor property of Table.prototype. We need to add it back, so that we will be able to use it in the case we want to figure out which function created a certain instance object.

var Table = function(h, w, d) {
  Furniture.call(this, h, w, d);
  this.finish = 'Espresso';
  this.distressing = false;
};
Table.prototype = Object.create(Furniture.prototype);
Table.prototype.constructor = Table;

We instantiate in ES5:

var myMediaCenter = new Furniture(84, 72, 16);
var myDiningTable = new Table(32, 60, 36);

Now let’s turn the above into ES6!

 

ES2015/ES6 Superclass

Even though the below code looks different, it functions the same as the code above.

We pass in the arguments h, w, and d to the constructor. (Note the constructor here is different than the constructor property! The constructor here is a method for creating and initializing an object created within a class). The parameters give values to this.height, this.width, and this.depth respectively. We still have the property this.material equal to ‘wood’.

Lastly we have the calcSqFootage method inside the class block.

class Furniture {
  constructor (h, w, d) {
    this.height = h
    this.width = w
    this.depth = d
    this.material = 'wood'
  }
  calcSqFootage() {
    return this.height * this.width * this.depth;
  }
};

 

ES2015/ES6 Subclass

With a subclass, we must do two things to show it is a subclass. The first thing is to declare that it is a subclass by using the extends keyword. We say that the subclass extends the superclass.

The constructor will take in the same arguments (h, w, and d). The next new part is that we call super(). This is about equivalent to the Furniture.call(this, h, w, d) in ES5.

Like in ES5, the Table subclass inherits the height, width and depth properties and the calcSqFootage method from the Furniture superclass. It has new properties for finish and distressing.

With the ES6 syntax, we do not need to use Object.create() or set the constructor for Table.prototype and Table.prototype.constructor. The syntax does it all for us.

class Table extends Furniture {
  constructor (h, w, d) {
    super(h, w, d);  
    this.finish = 'Espresso'
    this.distressing = false
  }
};

We instantiate in ES6 similar to ES5:

var myMediaCenter = new Furniture(84, 72, 16);
var myDiningTable = new Table(32, 60, 36);

 

In this post, we have reviewed the ES5 pseudoclassical instantiation style of a class and its subclass. Then we contrasted it with the ES2015/ES6 syntax. The ES6 syntax is different, but its underlying functionality is the same as ES5.

Simple Comparison of Class Instantiation Styles in JavaScript

Simple Comparison of Class Instantiation Styles in JavaScript

This post focuses on the differences between the class instantiation styles in JavaScript. Here we’ll see how each description contrasts from the one above.

We’ll look at the 4 instantiation styles: functional, functional shared, prototypal, and pseudoclassical.

1.  Functional

In the functional instantiation style, we create a constructor function with one object inside and assign properties and methods to it. The constructor function returns the object. Everything is inside the constructor function.

Each time we create a new instance in functional style, we are creating a new object with all the properties and methods. If there is a lot of data or code in the properties and methods, each instance has the potential to take up a lot of memory.

The advantage to functional is that it is easy to read and understand quickly.

Example of Functional Instantiation
This is an example of functional instantiation. Tea is our constructor function, and myTea is an instance of Tea.

2. Functional Shared

In the functional shared instantiation style, we create a constructor function with one object inside and assign properties to it. The constructor function returns the object.

What about methods? We create a separate object outside the function and assign properties to it that are methods.

In order for instances (or the objects we create via the constructor function) to have access to those methods, we use an extend function. The extend function copies properties from one object to another. (Remember that if the properties are complex types such as functions, the property does not make a new copy in memory, but it references the original). We can either write our own extend function or use a library’s such as Underscore.

Functional shared takes less memory than plain functional instantiation.  With extend in functional shared instantiation, the instance copies properties but only references the methods (each instance does not have all the code of the methods).

Example of Functional Shared Instantiation
This is an example of functional shared instantiation. Tea is our constructor function, and myTea is an instance of Tea. We reference methods from teaMethods.

 

3. Prototypal

In prototypal instantiation style, we create a constructor function with one object inside and assign properties to it. The constructor function returns the object.

What about methods? We can even use the function’s built-in prototype property and simply assign properties to it that are methods.

In order for the object to have access to those functions, we use Object.create(). To use Object.create(), we pass in the object we want failed look ups to go to. This creates a prototype chain. This way if our instance does not have the method, the interpreter would look follow the prototype chain and fall back on the separate object (or prototype)’s methods.

Prototypal style saves more memory than functional shared because each instance does not copy all of the prototype’s properties nor reference the prototype’s methods. Instead when the interpreter runs into a failed look up, it will go up the prototype chain. It will look at the prototype’s methods. There is no copying with prototype chains.

Example of Prototypal Instantiation
This is an example of prototypal instantiation. Tea is our constructor function, and myTea is an instance of Tea. Any failed look ups on myTea will go up the prototype chain and use the Tea.prototype methods.

4. Pseudoclassical

In pseudoclassical style, we create a constructor function.

In this function, there are some behind the scenes lines of code that the interpreter runs that we do not have to explicitly write.  At the very beginning of the class constructor function,  it runs something like this = Object.create(ClassNameHere.prototype). The interpreter creates an object and passes in the respective prototype property.

Inside the function, we assign properties. At the very end of the constructor function, we do not need to write a return statement because the interpreter runs another behind the scenes line of code that returns the object for us.

Outside of the function, we can assign the class’ prototype methods.

This is all possible when we instantiate with the keyword ‘new.’  It is the ‘new’ keyword that has the interpreter run the behind the scenes lines of code. If we instantiate without the keyword ‘new’ and wrote our constructor in pseudoclassical style, we are going to get bugs.

Example of Pseudoclassical Instantiation
This is an example of pseudoclassical instantiation. Tea is our constructor function, and myTea is an instance of Tea. Any failed look ups on myTea will go up the prototype chain and use the Tea.prototype methods just like prototypal style.

 

So we’ve taken a look at functional, functional shared, prototypal and pseudoclassical instantiation styles in JavaScript. When creating classes, we have to keep in mind the benefits and disadvantages of each instantiation style.

Using Inductive Vs Deductive

Oh was I stuck!

Today I continued an exercise that asked for me to write Underscore functions. The exercise gave me a description of what the function is supposed to do and then it gave me test cases.

I tried to write code that was generic enough to cover all the test cases. I was using deductive reasoning. I was stubborn and stuck on it for an hour! I did have intrusive thoughts that this exercise was too hard, and I was way over my head and that I won’t get farther. Yet I also felt that I could do this!

I took a 30 minute break.

When I came back, I decided to take smaller steps. I decided to work inductively (which to me feels like working backwards). I took 1 specific test case and wrote it out imperatively. Then I rewrote it to be less specific from the 1 test case and more generic.

I did this with each test case, and I completed the function!

I have more exercises to go, but now I recognize I can try deductive or inductive thinking to figure my code out!