Category Archives: javascript

getter setter (JS)

January 15, 2018javascriptadmin

ref – https://javascriptplayground.com/es5-getters-setters/

this is ugly:

person.setLastName('Smith');

person.setFirstName('Jimmy');

person.getFullName(); // Jimmy Smith

But this is ugly, and requires the users of your object to care that the properties are related; in a more complex example, that might not be as obvious as with names. Luckily, there’s a better way, added in ECMAScript 5.

// we have literal object referenced by variable person

var person = {

firstName: 'Jimmy',

lastName: 'Smith',

get fullName() {

return this.firstName + ' ' + this.lastName;

set fullName (name) {

var words = name.toString().split(' ');

this.firstName = words[0] || '';

this.lastName = words[1] || '';

}

we see that we have a get/set for property fullName.

Following them is the property they relate to (fullName) and a function body that defines the behavior when the property is accessed (name = person.fullName) or modified (person.fullName = ‘Some Name’).

In other words, get simply means to access the data, so we naturally return the property data. set means to set some properties in the object through one parameter. We can only provide one parameter because in an assignment, there’s only one parameter on the right side.

These two keywords define accessor functions: a getter and a setter for the fullName property.

When the property is accessed, the return value from the getter is used.

When a value is set, the setter is called and passed the value that was set. It’s up to you what you do with that value, but what is returned from the setter is the value that was passed in – so you don’t need to return anything.

person.fullName = 'Jack Franklin';

console.log(person.firstName); // Jack

console.log(person.lastName) // Franklin

The official way: Object.defineProperty

This method takes three arguments.

1) The first is the object to add the property to

2) the second is the name of the property

3) and the third is an object that describes the property (known as the property’s descriptor).

var person = {

firstName: 'Jimmy',

lastName: 'Smith'

};

Object.defineProperty(person, 'fullName', {

get: function() {

return firstName + ' ' + lastName;

set: function(name) {

var words = name.split(' ');

this.firstName = words[0] || '';

this.lastName = words[1] || '';

}

});

But why do it this way?

The advantage here isn’t immediately apparent. Other than being able to add properties after creating the initial object, is there a real benefit?

When you define a property this way, you can do much more than just define a setter or getter. You may also pass following keys:

configurable (false by default): if this is true, the property’s configuration will be modifiable in future.
enumerable (false by default): if true, the property will appear when looping over the object (for (var key in obj)).

We can also define properties that don’t have explicit getters or setters:

var person = {

firstName: 'Jimmy',

lastName: 'Smith'

};

Object.defineProperty(person, 'fullName', {

get: function() {

return this.firstName + ' ' + this.lastName;

set: function(name) {

var words = name.split(' ');

this.firstName = words[0] || '';

this.lastName = words[1] || '';

}

});

// accesses get

console.log(person.fullName);

person.fullName = "Ricky Tsao"

Object.defineProperty(person, 'ssn', {

value: 12345678

//writeable defaults to false

});

console.log(person.ssn); // get age

person.ssn = 29487384728; // try to set age

console.log(person.ssn); // age won't change

Object.defineProperty(person, 'age', {

value: 37,

configurable: true,

writable: true

});

console.log(person.age); // 37

person.age = 18;

console.log(person.age); // 18

This will create person.age, and set it to the value 42. It’s important to note that this property isn’t writable. Calling person.age = 99 will have no effect. In this way you can create read-only properties. If a property has a value key set, it cannot have a getter or setter. Properties can have values or accessors, not both.

Not only that, but because the enumerable property defaults to false, this property will not appear when we loop over the object’s keys.

If we wanted to make a property writable, we would need to set the writable property:

Object.defineProperty(person, 'age', {

value: 42,

writable: true

});

Example 1

var p = {

// x and y are regular read-write data properties.

x: 1.0,

y: 1.0,

// r is a read-write accessor property with getter and setter.

// Don't forget to put a comma after accessor methods.

get r() { return Math.sqrt(this.x*this.x + this.y*this.y); },

set r(newvalue) {

var oldvalue = Math.sqrt(this.x*this.x + this.y*this.y);

var ratio = newvalue/oldvalue;

this.x *= ratio;

this.y *= ratio;

}

};

p.r = 10;

console.log(p.r);

console.log(p.x);

console.log(p.y);

output:

10
7.071067811865475
7.071067811865475

Example 2

// This object generates strictly increasing serial numbers

var serialnum = {

// This data property holds the next serial number.

// The $ in the property name hints that it is a private property.

$n: 0,

// Return the current value and increment it

get next() { return this.$n++; },

// Set a new value of n, but only if it is larger than current

set next(n) {

if (n >= this.$n) this.$n = n;

else throw "serial number can only be set to a larger value";

}

};

console.log(serialnum.$n); // 0

console.log(serialnum.next); // 0

serialnum.next = 2;

console.log(serialnum.next); // 2

Example 3

var random = {

get octet() { return Math.floor(Math.random()*256); },

get uint16() { return Math.floor(Math.random()*65536); },

get int16() { return Math.floor(Math.random()*65536)-32768; }

};

console.log(random.octet);

console.log(random.uint16);

console.log(random.int16);

Chaining Prototype

January 11, 2018javascriptadmin

https://hackernoon.com/inheritance-in-javascript-21d2b82ffa6f

Example of chained prototype.

Hierarchy basics – Object

Firstly, all functions derive from “Object”, where “Object” is the default base of all javascript objects. The idea behind how hierarchy is laid out in JS is that the Object definition references an empty object called Object Prototype via a reference called “prototype”.

This Object Prototype object has a constructor reference pointing back to Object. Now all prototype objects of any function definitions you declare is an object literal. Since its an object literal, it will have a __proto__ reference, and this reference will be pointing to Object Prototype.

Example of custom Identification function

So let’s see how this works. Let’s declare a function definition called Identification. It automatically sets you up with a Identification object definition, and any related properties. In our case, we have a property called ‘name’, initialized to Ricky.

Furthermore, it will have a prototype reference to an empty literal object called “Identification Prototype”. This empty Identification Prototype will then have a constructor pointing back to our Identification object. More importantly, since this prototype object is a literal object, it will have a __proto__ reference pointing to Object Prototype.

If you were to simply create this code, and then evaluate the prototypes, constructors, and __proto__ references, you’ll see the output like so:

function Identification(firstName, lastName) {

if (new.target !== undefined) {

console.log("+ You've used new in constructing an [Identification] instance");

}

this.firstName = firstName;

this.lastName = lastName;

this.friends = [];

}

// Identification.prototype // Identification {}

// Identification.prototype.constructor // [Function: Identification]

// Identification.prototype.__proto__ // {}

// Identification.prototype.__proto__.constructor // [Function: Object]

Identification.prototype references its own Identification Prototype object.
Identification.prototype –> Identification {}

The prototype object’s constructor references back to the Identification definition.
Identification.prototype.constructor –> [Function: Identification]

Since Identification.prototype is an object literal, it has a __proto__ and is pointing to Object Prototype.
Identification.prototype.__proto__ –> {}

Naturally, the constructor of the Object Prototype is a function of Object
Identification.prototype.__proto__.constructor –> [Function: Object]

Adding a function to Identification’s prototype

Appending any kind of functions to Identification prototype is straightforward. We are appending to the empty Identification Prototype object.

Identification.prototype.getName = function(){

console.log("Identification.prototype.getName: ");

return this.firstName + ", " + this.lastName;

}

console.log("------- Identification.prototype -------");

console.log(Identification.prototype);

console.log(Identification.prototype.constructor);

When we analyze Identification Prototype, we’ll see that the function has been added to it. As expected the constructor is still on Identification.

Identification.prototype –> Identification { getName: [Function] }
Identification.prototype.constructor –> [Function: Identification]

Person basics

In the same way Identification was created, let’s create a Person object.
When the Person function definition is created, it will automatically have a prototype reference to an empty object literal called “Person Prototype”. Person Prototype will have a constructor reference back to Person. Naturally, Person Prototype will have __proto__ pointing to Object Prototype.

function Person(newAge, firstName, lastName){

if (new.target === undefined) {

console.log('You didnt use new --> Giving you a [new Person]');

return new Person();

} else {

console.log("+ You've used new in constructing an [Person] instance");

}

this.first = firstName;

this.last = lastName;

this.age = newAge;

}

As expected we have:

Person.prototype.constructor –> [Function: Person]
Person.prototype –> Person {}

With Identification and Person definitions, we now have a hierarchy like this:

Now, I want Person to prototype information from Identification because naturally, each person have some sort of identificaion. Prototypes can only reference objects, thus, let’s create an instantiation of Identification. We’ll have first and last name to “ricky Tee”.

var identificationInstance = new Identification();

identificationInstance.firstName = "ricky";

identificationInstance.lastName = "Tee";

Remember, any kind of object literal (or instantiation) will have their __proto__ pointing to their own Prototype.

So in our case, since we made an instantiation of Identification, our instantiation’s __proto__ will reference Identification Prototype (along with any appended properties and functions)
identificationInstance.__proto__ –> Identification { getName: [Function] }

We then check what constructor our __proto__ is pointing to. Naturally, it is Identification.

identificationInstance.__proto__.constructor –> [Function: Identification]

Accessing the reference constructor gives the same result. The reason why is because when we try to access “constructor” on the instantiation object, it does not find it. So it goes up the hierarchy to its __proto__ and tries to find it there. __proto__ is Identification Prototype, and here we find constructor pointing to Identification.
identificationInstance.constructor –> [Function: Identification]

Chaining Person to Identification

Finally, we are set to chain one prototype to the next.

Specifically, since we have an Identification object to chain to, we assign Person’s prototype reference to it.

1	Person.prototype = identificationInstance;

As you can see from the picture, Person’ prototype points AWAY from Person Prototype and onto the Identification instance.

Let’s check out Person’s prototype and constructor references now:

Person.prototype –> Identification { firstName: ‘ricky’, lastName: ‘Tee’, friends: [] }
Person.constructor –> [Function: Identification]

As you can see, prototype references Identification. The reason why is because Person.prototype points to the instantiation of Identification. It has its standard Identification properties as you can see from the output.

Next, we try to access constructor in Person. There is no constructor property in Person, so it goes to prototype in order to find constructor. Its prototype is the instantiation of Identification and does NOT have constructor either. It then goes up the hierarchy 1 more level at __proto__, which points to Identification Prototype. At this point, it sees that the constructor references Identification. Thus, that is why Person.constructor is Identification.

Solution

After understanding the basics above, its obvious that all instantiations of Person will share the same Identification prototype. That’s not good. In order to have each Person instantiation have their own Identification, the solution is to Inherit properties. We do this by having Person’s constructor call on Identification’s constructor using ‘this’. That way, Identification can start appending properties to Person’s ‘this’. In other words, we let Identification get Person’s this, then add properties to it.

function Identification(firstName, lastName) {

if (new.target !== undefined) {

console.log("+ You've used new in constructing an [Identification] instance");

}

this.firstName = firstName;

this.lastName = lastName;

this.friends = [];

}

Identification.prototype.getName = function(){

console.log("Identification.prototype.getName: ");

return this.firstName + ", " + this.lastName;

}

function Person(newAge, firstName, lastName){

if (new.target === undefined) {

console.log('You didnt use new --> Giving you a [new Person]');

return new Person();

} else {

console.log("+ You've used new in constructing an [Person] instance");

}

//Inherit instance properties

// this we pass 'this' into the Identification constructor. Thus, we're literally adding firstName, lastName, friends to our 'this' object.

// in other words, we're literally passing Person into Identification so that Identification can take Person and append properties to it.

//Identification constructor function is executed in the context of subTypeObj1 and add propeties firstName, lastName, friends to the subTypeObj1 object

Identification.call(this, firstName, lastName);

// After return of Identification.call(this, firstname, lastName), Identification constructor function adds a age property to the instance object.

this.age = newAge;

}

//Inherit the properties from SuperType

Person.prototype = new Identification();

//Add new property to SubType prototype

Person.prototype.getAge = function(){

console.log("Person.prototype.getAge:");

return this.age;

}

console.log("\n\n--- start of program ---\n ");

//Create SubType objects

var rt = new Person(21, "Ricky", "T");

var ma = new Person(11, "Mohamed", "A");

console.log(rt.firstName);

console.log(rt.age);

console.log(rt.getName());

console.log(rt.getAge());

// friends was added to rt

rt.friends.push("daniel", "fred");

console.log(ma.firstName);

console.log(ma.age);

console.log(ma.getName());

console.log(ma.getAge());

ma.friends.push("david b");

prototype, proto, object specifics, and sharing via prototype

January 10, 2018javascriptadmin

https://hackernoon.com/prototypes-in-javascript-5bba2990e04b

Object.prototype is one of the rare objects that has no prototype: it does not inherit
any properties.

Step 1:

Every object in Javascript is derived from base Object. Base Object has many built-in properties, with its prototype pointing to an empty “Object prototype”. Hence, in memory we see “function Object” which has a prototype property referencing Object Prototype. Then it has a constructor reference coming back to Object.

Thus, when we create our literal object (with a name property in there), it derives from Object. Thus, it has its reference __proto__ pointing to Object Prototype.

That is why when you see an instance of Object (object literal) and Object, their prototype and constructor are the same.

var objLiteral = {

}

console.log("--- Object ---");

console.log(Object.prototype); // {}

console.log(Object.prototype.constructor); // [Function: Object]

console.log("----------------------");

console.log("--- object literal ---");

console.log(objLiteral.__proto__); // {}

console.log(objLiteral.__proto__.constructor); // [Function: Object]

console.log("----------------------");

Object.prototype –> {}
Object.prototype.constructor); –> [Function: Object]

objLiteral.__proto__ –> {}
objLiteral.__proto__.constructor –> [Function: Object]

Step 2 – Creating the Rabbit object

Now we create a Rabbit object. Therefore, by definition, Rabbit has a prototype reference pointing to an empty Rabbit Prototype. The Rabbit Prototype has a constructor pointing back to the Rabbit definition. But remember, every object in Javascript derives from Object. Hence Rabbit’s Prototype object is actually an object literal that has a __proto__ pointing to Object Prototype.

function Rabbit() {

console.log("Rabbit Constructor");

}

console.log(Rabbit.prototype); // Rabbit {}

console.log(Rabbit.prototype.constructor); // [Function: Rabbit]

console.log(Rabbit.prototype.__proto__); // {}

console.log(Rabbit.prototype.__proto__.constructor); // [Function: Object]

So as you see, Rabbit’s prototype and prototype.constructor is very straight forward. But it will be surprising to the reader that Rabbit.prototype has a __proto__ property. That is because Rabbit.prototype itself is an empty object literal. And like any object in JS, it derives from Object. Thus, that is why Rabbit.prototype.__proto__.constructor is [Function: Object].

Step 3 – Connecting the Rabbit object

So now, let’s connect the Rabbit’s prototype to some other object literal instead of the empty default one given to us. Say an object literal with property name, initialized to “not entered”. In memory it will looks like this:

As stated earlier, any object in JS has a __proto__ pointing to Object.prototype. Thus, the object literal we created also has this. When we connect our Rabbit.prototype to it, the Rabbit’s prototype takes on the object literal.

var objLiteral = {

}

console.log("Rabbit.prototype = objLiteral")

Rabbit.prototype = objLiteral;

console.log("--- Rabbit ---");

console.log(Rabbit.prototype); // { name: 'not entered' }

console.log(Rabbit.prototype.__proto__); // {}

console.log(Rabbit.prototype.constructor); // [Function: Object]

console.log("----------------------");

Rabbit.prototype –> { name: ‘not entered’ }
Rabbit.prototype.__proto__ –> {}
Rabbit.prototype.constructor –> [Function: Object]

An interesting thing to note here is that when evaluating Rabbit.prototype.constructor, since
Rabbit.prototype is { name: ‘not entered’ }, and we call constructor on it, it does not exist.
So what it does is that it tries to find property “constructor” on object’s __proto__, which is
Object.prototype. It exists (Object.prototye.constructor), and it points to [Function: Object].

Rabbit.prototype.copy = function() {

// return new Person(this.name); // just as bad

return new Rabbit();

};

console.log(Rabbit.prototype); // { name: 'not entered', copy: [Function] }

console.log(Rabbit.prototype.constructor); // [Function: Object]

var a = new Rabbit();

console.log(a.__proto__); // { name: 'not entered', copy: [Function] }

console.log(a.__proto__.constructor); // [Function: Object]

Instantiations of Rabbit

Prototype Chain

From all the information presented above, all prototype objects (except Object.prototype) are normal objects that do have a prototype. All of the built-in constructors (and most user-defined constructors) have a prototype that inherits from Object.prototype.

For example, Date.prototype inherits properties from Object.prototype, so a Date object created by new Date() inherits properties from both Date.prototype and Object.prototype.

This linked series of prototype objects is known as a prototype chain.

The problem with Prototoypes

As prototype object is shared among all the objects created using the constructor function, it’s properties and methods are also shared among all the objects. If an object A modifies property of the prototype having primitive value, other objects will not be effected by this as A will create a property on its objects.

If you were to create many rabbit instances, and then change the property name in its __proto__, all other rabbits will be affected.

Solution – Combine Constructor/Prototype

We know 2 things:

Every object calls the constructor and thus, gets its own instance of the function definition, along with its own properties.
Modifying a Prototype property using one instance reflects the other instances also.

What we can do is to define all the object specific properties inside the constructor and all shared properties and methods inside the prototype as shown below:

//Define the object specific properties inside the constructor

function Human(name, age){

this.name = name,

this.age = age,

this.friends = ["Jadeja", "Vijay"]

}

//Define the shared properties and methods using the prototype

Human.prototype.sayName = function(){

console.log(this.name);

}

//Create two objects using the Human constructor function

var person1 = new Human("Virat", "Kohli");

var person2 = new Human("Sachin", "Tendulkar");

//Lets check if person1 and person2 have points to the same instance of the sayName function

console.log(person1.sayName === person2.sayName) // true

//Let's modify friends property and check

person1.friends.push("Amit");

console.log(person1.friends); // Output: "Jadeja, Vijay, Amit"

console.log(person2.frinds); //Output: "Jadeja, Vijay"

Full Source to Rabbit example

function Rabbit() {

console.log("Rabbit Constructor");

}

console.log(Rabbit.prototype);

console.log(Rabbit.prototype.__proto__);

console.log(Rabbit.prototype.__proto__.constructor);

console.log(Rabbit.prototype.constructor);

var objLiteral = {

}

console.log("--- object literal ---");

console.log(objLiteral.__proto__);

console.log(objLiteral.__proto__.constructor);

console.log("----------------------");

console.log(Object.prototype);

console.log(Object.prototype.constructor);

console.log("----------------------");

console.log("Rabbit.prototype = objLiteral")

Rabbit.prototype = objLiteral;

console.log("--- Rabbit ---");

console.log(Rabbit.prototype); // { name: 'not entered' }

console.log(Rabbit.prototype.__proto__); // {}

console.log(Rabbit.prototype.constructor); // [Function: Object]

console.log("----------------------");

Rabbit.prototype.copy = function() {

// return new Person(this.name); // just as bad

return new Rabbit();

};

console.log(Rabbit.prototype);

console.log(Rabbit.prototype.constructor);

var a = new Rabbit();

console.log(a.__proto__);

console.log(a.__proto__.constructor);

OUTPUT

Rabbit {}
{}
[Function: Object]
[Function: Rabbit]
— object literal —
{}
[Function: Object]
———————-
{}
[Function: Object]
———————-
Rabbit.prototype = objLiteral
— Rabbit —
{ name: ‘not entered’ }
{}
[Function: Object]
———————-
{ name: ‘not entered’, copy: [Function] }
[Function: Object]
Rabbit Constructor
{ name: ‘not entered’, copy: [Function] }
[Function: Object]

Using Mocha and Chai for unit tests in Node JS projects

December 27, 2017javascript, Node JSTDDadmin

ref – https://ubuverse.com/introduction-to-node-js-api-unit-testing-with-mocha-and-chai/
https://scotch.io/tutorials/test-a-node-restful-api-with-mocha-and-chai

https://gist.github.com/yoavniran/1e3b0162e1545055429e#mocha
https://gist.github.com/yoavniran/1e3b0162e1545055429e#chai

Creating the Directory

mkdir mocha-chai-demo
cd mocha-chai-demo

Setting up the package.json

in directory /mocha-chai-demo:

npm init

use defualt for all the options.
You will then have a package.json file created, which looks something like this:

package name: (mocha-chai-demo) tdd-for-node
version: (1.0.0)
description: test driven dev for node
entry point: (index.js)
test command:
git repository:
keywords: tdd chai mocha node js
author: ricky
license: (ISC)
About to write to /Users/xxxxxxxxx/Desktop/mocha-chai-demo/package.json:

{
“name”: “tdd-for-node”,
“version”: “1.0.0”,
“description”: “test driven dev for node”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“keywords”: [
“tdd”,
“chai”,
“mocha”,
“node”,
“js”
],
“author”: “ricky”,
“license”: “ISC”
}

Is this ok? (yes) yes
EPCNSZXW0324:mocha-chai-demo rickytsao$ ls
package.json

Open it with text editor by typing:

open -a TextEdit package.json

and you’ll see your typical specs laid out for your node project.

Whenever you run the project, usually people would do “nodex index.js”. But it can get annoying. So instead, we can shortcut it with start. So next time, all you gotta do to start the server is to type: npm start

You should also edit the test script for mocha.

{

"name": "krakentest",

"version": "1.0.0",

"description": "test for using Kraken io",

"main": "index.js",

"scripts": {

"start": "node index.js", // <-- start the server

"test": "mocha --recursive" // <-- testing the server

"keywords": [

"kraken",

"io",

"image"

"author": "ricky",

"license": "ISC"

}

Under scripts, the value for the key “test” should be: “mocha –recursive”

Implementing the server

in directory /mocha-chai-demo:
touch index.js

Then copy the code below into the index.js

That file will run as our server.

'use strict';

const express = require('express');

const bodyParser = require('body-parser');

const PORT = 8080;

const HOST = 'localhost';

const DEFAULT_COLORS = ['RED', 'GREEN', 'BLUE'];

const app = express();

app.use(bodyParser.json({

limit: '100k',

}));

/**

* Array holding color values

let colors = [].concat(DEFAULT_COLORS);

/**

* Returns a list of colors

* Response body (JSON): {results: [....]}

app.get('/colors', function(req, res, next) {

res.json({

results: colors

});

/**

* Inserts new color in the 'colors' array

* Request body (JSON): {color: ...}

app.post('/colors', function(req, res, next) {

if (req.is('application/json') && typeof req.body.color === 'string') {

let color = req.body.color.trim().toUpperCase();

if (color && colors.indexOf(color) < 0) {

colors.push(color);

// 201 Created

return res.status(201).send({

results: colors

});

}

res.status(400).send(); // 400 Bad Request

});

app.listen(PORT, HOST);

console.log('Listening on %s:%d...', HOST || '*', PORT);

/**

* Export the Express app so that it can be used by Chai

module.exports = app;

1 2	$ npm install express body-parser --save $ npm install mocha chai chai-http --save-dev

Then run node index.js to see the server in action

If you were to run the app:

node index.js

You’ll see the confirmation messages.

Open up a browser, type: http://localhost:8080/colors
you’ll get {“results”:[“RED”,”GREEN”,”BLUE”]}

Creating the tests

The recommended way to organize your tests within your project is to put all of them in their own /test directory.
By default, Mocha checks for unit tests using the globs ./test/*.js and ./test/*.coffee. From there, it will load and execute any file that calls the describe() method.

In mocha-chai-demo:

mkdir test
cd test

you should now be in /mocha-chai-demo/test
touch test.js

then copy the below test code

'use strict';

const chai = require('chai');

const expect = require('chai').expect;

chai.use(require('chai-http'));

const app = require('../index.js'); // Our app

describe('API endpoint /colors', function() {

this.timeout(5000); // How long to wait for a response (ms)

before(function() {

});

after(function() {

});

// GET - List all colors

it('should return all colors', function() {

return chai.request(app)

.get('/colors')

.then(function(res) {

expect(res).to.have.status(200);

expect(res).to.be.json;

expect(res.body).to.be.an('object');

expect(res.body.results).to.be.an('array');

});

// GET - Invalid path

it('should return Not Found', function() {

return chai.request(app)

.get('/INVALID_PATH')

.then(function(res) {

throw new Error('Path exists!');

})

.catch(function(err) {

expect(err).to.have.status(404);

});

// POST - Add new color

it('should add new color', function() {

return chai.request(app)

.post('/colors')

.send({

color: 'YELLOW'

})

.then(function(res) {

expect(res).to.have.status(201);

expect(res).to.be.json;

expect(res.body).to.be.an('object');

expect(res.body.results).to.be.an('array').that.includes(

'YELLOW');

});

// POST - Bad Request

it('should return Bad Request', function() {

return chai.request(app)

.post('/colors')

.type('form')

.send({

color: 'YELLOW'

})

.then(function(res) {

throw new Error('Invalid content type!');

})

.catch(function(err) {

expect(err).to.have.status(400);

});

Save the file.

Then in the test directory, just type:

npm test

You’ll see that we have 4 passed tests.

Details

ref – http://chaijs.com/api/bdd/

Expect

The BDD style is exposed through expect or should interfaces. In both scenarios, you chain together natural language assertions.

var expect = require('chai').expect

, foo = 'bar'

, beverages = { tea: [ 'chai', 'matcha', 'oolong' ] };

expect(foo).to.be.a('string');

expect(foo).to.equal('bar');

expect(foo).to.have.lengthOf(3);

expect(beverages).to.have.property('tea').with.lengthOf(3);

The should style allows for the same chainable assertions as the expect interface, however it extends each object with a should property to start your chain. This style has some issues when used with Internet Explorer, so be aware of browser compatibility.

Differences between expect and should

First of all, notice that the expect require is just a reference to the expect function, whereas with the should require, the function is being executed.

The expect interface provides a function as a starting point for chaining your language assertions. It works on node.js and in all browsers.

The should interface extends Object.prototype to provide a single getter as the starting point for your language assertions. It works on node.js and in all modern browsers except Internet Explorer.

Different ways of creating Objects, Object literal vs Object instances

December 22, 2017javascriptadmin

Object.create()

1	var a = Object.create(Hero.prototype);

This method creates a new object extending the prototype object passed as a parameter.

var b = {}

This is equivalent to Object.create(null) method, using a null prototype as an argument.

Using function constructor with new

function Website(newName) {

var p_Name = newName || "not entered";

this.display = function() {

console.log("Your website is called: " + p_Name);

}

var a = new Website("www.hallo.com");

a.display();

es6 classes

class myObject {

constructor(name) {

this.name = name;

}

var e = new myObject("hello");

Singleton pattern

var l = new function(){

this.name = "hello";

}

literal vs instances

https://www.internalpointers.com/post/object-literals-vs-constructors-javascript

function Website(newName) {

var p_Name = newName || "not entered";

this.display = function() {

console.log("Your website is called: " + p_Name);

}

var a = new Website("www.hallo.com");

a.display();

You have just created a JavaScript object called Website.
The main difference here is what you can do with it.
With the constructor function notation you create an object that can be instantiated into multiple instances with the new keyword

while the literal notation delivers a single object, like a singleton.

var Website = {

'url': 'http://www.internalpointers.com',

'printUrl': function() {

console.log(this.url);

}

};

Website.printUrl();

recursive divide and conquer on arrays

December 19, 2017algorithms, javascriptadmin

Quick sort version

The divide and conquer recursion on an array occurs when we have dubbed a mid,
then recursively go into the left side of the array. Then, the right side. We leave the middle element.

Thus we apply recursion on

low to (mid-1)
print mid
(mid+1) to high

But how?

We recursive into the left

1 2	divAndConq(arr, low, mid-1); console.log(" processing at element: " + arr[mid] + " √ ");

1) For each step we go deeper into the leftmost array, we push one recursion onto the stack. Since we recurse first, then print, we need to push recursions on first.

2) When we reach the 0th element of the array, we have reached the leftmost (single element). Once its reached and the recursion function for the 0th element finishes, we pop it, and then continue on to the next line which is print. In other words, we then start executing the print code after the recursion.

3) When the printing is done (printing the mid), we will hit a function to process the right side.

We recursive into the right

1 2	console.log(" processing at element: " + arr[mid] + " √ "); divAndConq(arr, mid + 1, high);

4) Due to the order of the print, and recursion, we have printed, then push a recursion function onto the stack to process the right side.

5) Once that’s done, we pop and then come back to the previous left recursion. We move on and print. Then recurse on the right side.

Let’s go into an example.

Recurse deep into the leftmost array item

Say we have an array with 1 to 9. Indexed from 0 to 8. The concept of recursive divide and conquer is that we calculate a pivot first. The pivot is calculated to be somewhere in the middle of the array, then the left and right array are recursively processed.

For simplification purposes, we want to keep things simple. So let’s calculate the pivot such that it is:
floor of (low + high)/2

low: 0
high: 8

pivot = floor(4) = 4, we’ll print this pivot AFTER we process the left array

Our pivot will be printed after all the left array is processed.

Then we recursively process the left array.

low: 0
high: 3

pivot = floor( 0 + 3 /2 ) = 1, we’ll print this pivot AFTER we process the left array

left array is divAndCon(0, 1-1) or divAndCon(0,0)

It happens that divAndCon(0, 0) is a base case (We notice that low == high) and thus, simply prints 0. We then pop the current recursion function and move on.

Processing the right array

Now we pop back to the previous recursion with indexes divAndCon(0, 3). Since we’ve processed the left array of [1], we need to print the mid, which is index 1, element 2. Then we move on to process the right array [2,3]

right array is divAndConq(2,3)

Notice the array we’re processing is [3,4] where:

low: 2
high: 3
mid = floor of (3 + 2 ) / 2 = 2, we’ll print this pivot AFTER we process the left array

left array is divAndCon(2, 2-1) or divAndCon(2, 1)

When we reach to divAndConq(2,1) we see that low > high is false. Thus, we don’t do anything and just return

Once we return, we need to print the the pivot, which is element 3 at index 2.

Then process the right array, which is divAndCon(2+1,3), divAndConq(3,3)

divAndConq(3,3), we see that low == high, and we print (process)

So as you can see, this is how each element is printed (processed) from the beginning to end in a recursive fashion on an array.

Left Recursion not available

There comes a situation where the start index is larger than the end index…

for example, say we’re at recursion where index is 2 and 3.

[2:X][3:Y]

midpoint = (3 – 2)/2 = 0.

So we go into the LEFT recursion like so divideAndConquer(0, 0-1), or divideAndConquer(0,-1).
Under such case, we do not have a left section to go into. We already have mid pointing to the first element in the current array at [2:X].

Thus, mid will print, and all we have to do is take care of the right element [3:Y] in our right recursion.

Hence, we have to implement a base case to avoid this situation:

whenever start > end, we simply return

Source Code

var arr = [1,2,3,4,5,6,7,8,9];

function partition(arr, low, high) {

return Math.floor((low + high) / 2);

}

function divAndConq(arr, low, high) {

console.log("\ndivAndConq: [" + low + ", " + high + "]");

if (low == high) {

console.log(" processing at element: " + arr[low] + " √ ");

return;

}

if (low < high) {

var mid = partition(arr, low, high);

console.log(low + " < " + high + "? √, " + "middle is: " + mid);

divAndConq(arr, low, mid-1);

console.log(" processing at element: " + arr[mid] + " √ ");

divAndConq(arr, mid + 1, high);

} else { // low > high skips

console.log(low + " > " + high + "? X");

}

divAndConq(arr, 0, arr.length-1);

output

divAndConq: [0, 8]

0 < 8? √, middle is: 4

divAndConq: [0, 3]

0 < 3? √, middle is: 1

divAndConq: [0, 0]

 processing at element: 1 √

0 < 0? X

 processing at element: 2 √

divAndConq: [2, 3]

2 < 3? √, middle is: 2

divAndConq: [2, 1]

2 < 1? X

 processing at element: 3 √

divAndConq: [3, 3]

 processing at element: 4 √

3 < 3? X

 processing at element: 5 √

divAndConq: [5, 8]

5 < 8? √, middle is: 6

divAndConq: [5, 5]

 processing at element: 6 √

5 < 5? X

 processing at element: 7 √

divAndConq: [7, 8]

7 < 8? √, middle is: 7

divAndConq: [7, 6]

7 < 6? X

 processing at element: 8 √

divAndConq: [8, 8]

 processing at element: 9 √

8 < 8? X

Using divide and conquer to loop

var arr = [1,2,3,4,5,6,7,8,9];

function partition(arr, low, high) {

return Math.floor((low + high) / 2);

}

function divAndConq(arr, low, high, callback) {

if (low == high ) {

arr[low] = callback(arr[low], low);

}

if (low > high) {

console.log("Ignore previous element. Stay in our lane");

}

if (low < high) {

var pi = partition(arr, low, high);

divAndConq(arr, low, pi-1, callback);

arr[pi] = callback(arr[pi], pi);

divAndConq(arr, pi + 1, high, callback);

}

console.log(arr);

divAndConq(arr, 0, arr.length-1, function(element, index) {

console.log("element: " + element + ", index: " + index);

return element * 2;

});

console.log(arr);

output

[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

element: 1, index: 0

element: 2, index: 1

Ignore previous element. Stay in our lane

element: 3, index: 2

element: 4, index: 3

element: 5, index: 4

element: 6, index: 5

element: 7, index: 6

Ignore previous element. Stay in our lane

element: 8, index: 7

element: 9, index: 8

[ 2, 4, 6, 8, 10, 12, 14, 16, 18 ]

MergeSort version

The difference is that the recursion in mergesort does not leave out the mid element. It includes the mid element as part of the right array. Thus, that’s why we use Math.ceil when we divide the array. Thus the recursion is applied on

low to (mid – 1)
mid to high

We want to drill down to the single element itself, which is when low == high. Then we simply return it. The merge function then proceeds to calculate and sort the returned single elements in 2s. Sorting first, 2 elements. Then the next merge call will sort 4 elements. Then sort 8 sorts, and so on.

var arr = [88, 32, 23, 1,9,8, 10, 33, 56, 65, 35, 52, 15, 78, 98, 89, 100, 2,3,11,22,31,44,56,66];

function partition(arr, low, high) {

return Math.ceil((low + high) / 2);

}

function divAndConq(arr, low, high) {

console.log("\ndivAndConq: [" + low + ", " + high + "]");

if (low == high) {

console.log(" processing at element: " + arr[low] + " √ ");

return [arr[low]];

}

if (low < high) { // low >= high skips

var mid = partition(arr, low, high);

console.log("mid: " +mid);

return merge(

divAndConq(arr, low, mid-1),

divAndConq(arr, mid, high)

);

}

divAndConq(arr, 0, arr.length-1);

where the merge happens like so:

function merge(leftArr, rightArr) {

if (leftArr.length < rightArr.length) {

smallerArray = leftArr;

biggerArray = rightArr;

} else {

smallerArray = rightArr;

biggerArray = leftArr;

}

var smallIndex = 0, largeIndex = 0;

// Merge sort requires a temporary array to merge the sorted arrays and hence it is not in-place

// this result arr is the temporary array, which requires more space.

var result = [];

while (smallerArray[smallIndex] && biggerArray[largeIndex]) {

var nextSmallerItem = (smallerArray[smallIndex] < biggerArray[largeIndex]) ?

smallerArray[smallIndex++] : biggerArray[largeIndex++];

result.push(nextSmallerItem);

}

return (smallerArray[smallIndex]) ?

result.concat(smallerArray.splice(smallIndex)) : result.concat(biggerArray.splice(largeIndex));

}

output

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

divAndConq: [0, 24]

mid: 12

divAndConq: [0, 11]

mid: 6

divAndConq: [0, 5]

mid: 3

divAndConq: [0, 2]

mid: 1

divAndConq: [0, 0]

 processing at element: 88 √

divAndConq: [1, 2]

mid: 2

divAndConq: [1, 1]

 processing at element: 32 √

divAndConq: [2, 2]

 processing at element: 23 √

divAndConq: [3, 5]

mid: 4

divAndConq: [3, 3]

 processing at element: 1 √

divAndConq: [4, 5]

mid: 5

divAndConq: [4, 4]

 processing at element: 9 √

divAndConq: [5, 5]

 processing at element: 8 √

divAndConq: [6, 11]

mid: 9

divAndConq: [6, 8]

mid: 7

divAndConq: [6, 6]

 processing at element: 10 √

divAndConq: [7, 8]

mid: 8

divAndConq: [7, 7]

 processing at element: 33 √

divAndConq: [8, 8]

 processing at element: 56 √

divAndConq: [9, 11]

mid: 10

divAndConq: [9, 9]

 processing at element: 65 √

divAndConq: [10, 11]

mid: 11

divAndConq: [10, 10]

 processing at element: 35 √

divAndConq: [11, 11]

 processing at element: 52 √

divAndConq: [12, 24]

mid: 18

divAndConq: [12, 17]

mid: 15

divAndConq: [12, 14]

mid: 13

divAndConq: [12, 12]

 processing at element: 15 √

divAndConq: [13, 14]

mid: 14

divAndConq: [13, 13]

 processing at element: 78 √

divAndConq: [14, 14]

 processing at element: 98 √

divAndConq: [15, 17]

mid: 16

divAndConq: [15, 15]

 processing at element: 89 √

divAndConq: [16, 17]

mid: 17

divAndConq: [16, 16]

 processing at element: 100 √

divAndConq: [17, 17]

 processing at element: 2 √

divAndConq: [18, 24]

mid: 21

divAndConq: [18, 20]

mid: 19

divAndConq: [18, 18]

 processing at element: 3 √

divAndConq: [19, 20]

mid: 20

divAndConq: [19, 19]

 processing at element: 11 √

divAndConq: [20, 20]

 processing at element: 22 √

divAndConq: [21, 24]

mid: 23

divAndConq: [21, 22]

mid: 22

divAndConq: [21, 21]

 processing at element: 31 √

divAndConq: [22, 22]

 processing at element: 44 √

divAndConq: [23, 24]

mid: 24

divAndConq: [23, 23]

 processing at element: 56 √

divAndConq: [24, 24]

 processing at element: 66 √

Futher study

If you want to reverse the display of the array, simply reverse your recursion like so:

1 2	divAndConq(arr, mid, high); divAndConq(arr, low, mid-1);

This way, you look at the high end first, which is the upper half. Then the next recursion will go upper half. so on, and so on, until you hit the last element first.

JS classes support 3 kinds of methods

December 4, 2017javascriptadmin

https://scotch.io/tutorials/better-javascript-with-es6-pt-ii-a-deep-dive-into-classes

review:

Javascript Prototype

Class Constructors

"use strict";

// Enforcing constructor call

function Food (name, protein, carbs, fat) {

// Manually call 'new' if user forgets

if (!new.target)

return new Food(name, protein, carbs, fat);

this.name = name;

this.protein = protein;

this.carbs = carbs;

this.fat = fat;

}

const fish = Food('Halibut', 26, 0, 2); // Oops -- but, no problem!

fish; // 'Food {name: "Halibut", protein: 20, carbs: 5, fat: 0}'

Static methods

Static methods are methods on the constructor function itself, which are not available on instances of the class.
You define them by using the static keyword.

"use strict";

class Food {

// Class definition is the same as before . . .

// Adding a static method

static describe () {

console.log('"Food" is a data type for storing macronutrient information.');

}

Food.describe(); // '"Food" is a data type for storing macronutrient information.'

Prototype methods

Any method that isn’t a constructor or a static method is prototype method. The name comes from the fact that we used to achieve this functionality by attaching functions to the .prototype of functions-as-constructors:

"use strict";

// Using ES6:

class Food {

constructor (name, protein, carbs, fat) {

this.name = name;

this.protein = protein;

this.carbs = carbs;

this.fat = fat;

}

toString () {

return `${this.name} | ${this.protein}g P :: ${this.carbs}g C :: ${this.fat}g F`;

}

print () {

console.log( this.toString() );

}

// In ES5:

function Food (name, protein, carbs, fat) {

this.name = name;

this.protein = protein;

this.carbs = carbs;

this.fat = fat;

}

// The name "prototype methods" presumably comes from the fact that we

// used to attach such methods to the '.prototype' old-school functions-as-constructors.

Food.prototype.toString = function toString () {

return `${this.name} | ${this.protein}g P :: ${this.carbs}g C :: ${this.fat}g F`;

};

Food.prototype.print = function print () {

console.log( this.toString() );

};

Using Request object to make web requests

November 21, 2017javascriptadmin

UPDATE

Client Side

ref – https://github.com/redmacdev1988/SlideShow-Frontend

When we want to make a web request, we can use JS’s Request object.
The first parameter takes in an url, next parameter is a dictionary where key/values specify the details of the request. i.e web verb, headers, body data, etc.

For example, we want to make a PUT request on an url http://1xx.xx9.xx.xxx/pictorials/beijing-tower, use standard mod as cors, specify body data as “description=’hehe haha'”, etc.

Also notice that we set the body data like so: parameter=value&also=another

https://stackoverflow.com/questions/14551194/how-are-parameters-sent-in-an-http-post-request

updatePictorial.js

updateButton.addEventListener ("click", function() {

var newDescription = document.getElementById(this.getAttribute("id")).value;

var requestURL = API_URL + this.getAttribute("id");

var request = new Request(requestURL, {

method: 'PUT',

mode: 'cors',

body: "description="+newDescription, // 2 mb limit

redirect: 'follow',

headers: new Headers({

'Content-Type': 'application/x-www-form-urlencoded'

})

});

fetch(request).then(function(result) {

if (result.status == 200) {

alert("updated");

}

});

Then we fetch this request object, and get the response.

Server side

ref – https://github.com/redmacdev1988/SlideShow-Backend/

In node, we specify our routes. We say for our app, when the incoming request has the route of /pictorials/id and the web verb is PUT, then we take care of this by calling exported function update_a_pictorial in the pictorialController file

SlideShow-Backend/api/routes/pictorialRoutes.js

var pictorialList = require('../controllers/pictorialController');

// todo change post to put

app.route('/pictorials/:pictorialId')

.put(pictorialList.update_a_pictorial);

And so we implement update_a_pictorial function. We have the standard request/response object. In the req object, we look at the body to make sure we have received the data. The id, being passed via the url, will be in the params array property.

Once you have that, we use mongo’s findOneAndUpdate function to update the row associated with the ID with our new description.

SlideShow-Backend/api/controllers/pictorialController.js

'use strict';

Pictorial = mongoose.model('Pictorial');

exports.update_a_pictorial = function(req, res) {

console.log("--- update_a_pictorial ---");

console.log(req.body);

Pictorial.findOneAndUpdate( {name: req.params.pictorialId},

{ $set: { description: req.body.description } },

{new: true},

function(err, pictorial) {

if (err) {

console.log(err);

res.send(err);

}

res.send(pictorial);

});

};

DELETE

This feature makes a DELETE request. We set up our basic Request properties such as method, mode, body, etc.
Notice in our body, we now attached the unique id of the pictorial so the server can delete that row in the database.

client side

Also notice that we set the body data like so: parameter=value&also=another
https://stackoverflow.com/questions/14551194/how-are-parameters-sent-in-an-http-post-request

var deleteButton = createElement("button", deleteBtnAttributes, "delete");

deleteButton.addEventListener ("click", function() {

console.log("DELETE button clicked!");

var requestURL = API_URL + this.getAttribute("id");

var request = new Request(requestURL, {

method: 'DELETE',

mode: 'cors',

body: "pictorialId="+name, // 2 mb limit

redirect: 'follow',

headers: new Headers({

'Content-Type': 'application/x-www-form-urlencoded'

})

});

fetch(request).then(function(result) {

console.log("--- result ----");

console.log(result);

document.location.reload(true); // refresh page

});

}); // addEventListener

SERVER SIDE

We then let express know that for the delete verb, call delete_a_pictorial function.

SlideShow-Backend/api/routes/pictorialRoutes.js

var pictorialList = require('../controllers/pictorialController');

app.route('/pictorials/:pictorialId')

.put(pictorialList.update_a_pictorial)

.delete(pictorialList.delete_a_pictorial);

SlideShow-Backend/api/controllers/pictorialController.js

We extract the data (unique id) from the body, and use it to specify which pictorial we want to delete.

exports.delete_a_pictorial = function(req, res) {

Pictorial.remove({

}, function(err, pictorial) {

if (err) {

res.end(err);

}

res.send({removed: req.body.pictorialId});

});

};

JavaScript Preloading

November 20, 2017javascriptadmin

https://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480001

JavaScript Preloading

JavaScript includes the Image among its native object types. The Image object represents an HTML image tag on the page and exposes the same properties and events. Perhaps oddly, the Image has no constructor that accepts an image source, so an image must be loaded into the object by setting its src attribute. Doing so causes the image to be downloaded from the server at that point.

var my_image = new Image();

my_image.src = 'mycoolimage.jpg';

</script>

Once an image is preloaded with JavaScript, you can take advantage of the cached image using only its filename. It’s not necessary to keep using the JavaScript variable that you loaded the image into. The thonky.com provides an excellent demo to illustrate this. The demo provides a button to preload the image. After it has finished loading, the page displays a second button that allows you to use the preloaded image in an image tag, using only the image filename. Even though the code does not refer to the variable that the image was loaded into, the image will still show up right away because it’s in the cache.

Example

var my_image2 = new Image();

// notify the user that the image has been preloaded, and reveal the

// button to use the preloaded image

function notify() {

document.getElementById('preloadbutton2').style.display = 'none';

document.getElementById('after_preload').style.display = 'block';

}

function preload() {

my_image2.onload = notify;

my_image2.src = 'bigsaturn.jpg';

}

// using only the file name, we can take advantage of the preloaded image

function use_preloaded_image() {

document.getElementById('saturnplaceholder').src = 'bigsaturn.jpg';

}

</script>

<input type="button"

id="preloadbutton2"

value="Preload Image"

onclick="preload();this.value='Loading. Please wait...'" />

<input type="button" value="Use Preloaded Image"

onclick="use_preloaded_image()" /><br />

</div>

fetch POST, cors error

November 4, 2017javascriptadmin

HTML

So we have an image loader input file type. We also have a button control.
The onclick event for the button calls our js function uploadImage.

Once

<button name="submit" id="btnSubmit" onclick="uploadImage()">upload image</button>

function uploadImage() {

console.log("upload image");

var image = document.getElementById("imgUploader").files[0];

console.dir(image);

var formData = new FormData();

formData.append('imgUploader', image);

fetch('http://localhost:8080/api/Upload', {

method:'POST',

body: formData,

mode: 'no-cors'

}).then(function(data) {

console.log("------result from image upload--------");

console.log(data);

});

}

</script>

Node js server side

app.post("/api/Upload", function(req, res) {

console.log("POST request on api/Upload, you are trying to upload an image");

res.send("testing 1 2 3");

});