All posts by admin

Returning inside of a callback

June 1, 2018javascriptadmin

When you return something inside of a callback function, it gets returned directly from the callback of the function you executed.

For example,

1) we provide a function definition for func1’s callback parameter.

2) func1 runs its implementation and then executes the callback.

3) goes into the callback and executes code

4) we return a string inside of the callback function.

5) it gets returned from the callback inside of func1

function Foo() {

}

Foo.prototype.func1 = function(callback) {

// 2, runs various code

let b = callback("func1"); // 5 result returned to variable b.

console.log(b);

}

let f = new Foo()

// 1

let a = f.func1(function(result) {

// 3, executes various code

console.log(result);

return result; // 4

});

console.log(a);

Generator

May 28, 2018javascriptadmin

Diving Deeper With ES6 Generators

https://codeburst.io/what-are-javascript-generators-and-how-to-use-them-c6f2713fd12e

Generators are functions that you can use to control the iterator. They can be suspended and later resumed at any time.

Declaring generators

function * generator () {}

let generator = function * () {

}

However, we cannot create a generator using the arrow function.

We can create generators like this:

class MyClass {

*generator() {}

}

const obj = {

*generator() {}

}

code version

for (let i = 0; i < 5; i += 1) {

console.log(i);

}

// this will return immediately 0 -> 1 -> 2 -> 3 -> 4

generator version

But the most significant change is that it does not ring immediately. And this is the most important feature in generators — we can get the next value in only when we really need it, not all the values at once.

function * generatorForLoop(num) {

for (let i = 0; i < num; i += 1) {

yield console.log(i);

}

const genForLoop = generatorForLoop(5);

genForLoop.next(); // first console.log - 0

genForLoop.next(); // 1

genForLoop.next(); // 2

genForLoop.next(); // 3

genForLoop.next(); // 4

Yield

It’s a bit like return, but not. Return simply returns the value after the function call, and it will not allow you to do anything else after the return statement.

function withReturn(a) {

let b = 5;

return a + b;

// due to return from above:

b = 6; // we will never re-assign b

return a * b; // and will never return new value

}

withReturn(6); // 11

with yield, we save the result of the executing line.

function * withYield(a) {

let b = 5;

yield a + b; // queue result list

b = 6;

yield a * b; // queue result to list.

}

const calcSix = withYield(6);

calcSix.next().value; // 11

calcSix.next().value; // 36

Yield returns a value only once, and the next time you call the same function it will move on to the next yield statement.

Also in generators we always get the object as output. It always has two properties value and done. And as you can expect, value – returned value, and done shows us whether the generator has finished its job or not.

function * generator() {

yield 5;

}

const gen = generator();

gen.next(); // {value: 5, done: false}

gen.next(); // {value: undefined, done: true}

gen.next(); // {value: undefined, done: true} - all other calls will produce the same result

Naturally, it will obey the laws of execution. If we have a return, anything after it will never be executed.

function * generator() {

yield 1;

return 2;

yield 3; // we will never reach this yield

}

const gen = generator();

gen.next(); // {value: 1, done: false}

gen.next(); // {value: 2, done: true}

gen.next(); // {value: undefined, done: true}

Yield delegator

Yield with asterisk can delegate it’s work to another generator. This way you can chain as many generators as you want.

function * anotherGenerator(i) {

yield i + 1;

yield i + 2;

yield i + 3;

}

function * generator(i) {

yield* anotherGenerator(i);

}

var gen = generator(1);

gen.next().value; // 2

gen.next().value; // 3

gen.next().value; // 4

A great example would be in recursive functions. In order to call yourself, you need to yield delegate it

function *backwards(i) {

yield i;

if (i <= 0) return; // base

yield *backwards(i-1); // yield delegate to recursive function

}

let backwardsGen = backwards(10);

console.log(backwardsGen.next()); //{ value: 10, done: false }

console.log(backwardsGen.next()); //{ value: 9, done: false }

console.log(backwardsGen.next()); //{ value: 8, done: false }

console.log(backwardsGen.next()); // { value: 7, done: false }

console.log(backwardsGen.next()); // { value: 6, done: false }

console.log(backwardsGen.next()); // { value: 5, done: false }

console.log(backwardsGen.next()); // { value: 4, done: false }

console.log(backwardsGen.next()); // { value: 3, done: false }

console.log(backwardsGen.next()); // { value: 2, done: false }

console.log(backwardsGen.next()); // { value: 1, done: false }

console.log(backwardsGen.next()); // { value: 0, done: false }

console.log(backwardsGen.next()); // { value: undefined, done: true }

return

function * generator() {

yield 1;

yield 2;

yield 3;

}

const genx = generator();

console.log(genx.next()); // { value: 1, done: false }

console.log(genx.return()); // {value: undefined, done: true}

console.log(genx.next()); // { value: undefined, done: true }

console.log(genx.return('Heeyyaa')); // {value: "Heeyyaa", done: true}

genx.next(); // {value: undefined, done: true} - all next() calls after return() will return the same output

Try Catch

You can wrap generators in try catch functions.
Whenever crash/error happens inside of the generator, our outside try/catch will take care of it.

function *foo(x) {

var y = x.toUpperCase(); // could be a TypeError error!

yield y; // RICKY

}

var it = foo("Ricky");

try {

console.log(it.next());

}

catch (err) {

console.log( err ); // TypeError (from `toUpperCase()` call)

}

You can also put yield in your generator function. When you have your generator variable, you can call throw on it, and it will throw the error right at where your yield is.

function *foo(x) {

try {

yield x;

console.log( "x: " + x ); // may never get here!

}

catch (err) {

console.log( "Error: " + err );

}

var it = foo("A");

console.log(it.next());

// custom throw an error

it.throw("hehe");

If you throw(..) an error into a generator, but no try..catch catches it, the error will (just like normal) propagate right back out (and if not caught eventually end up as an unhandled rejection).

function *foo() { }

var it = foo();

try {

it.throw( "Oops!" );

}

catch (err) {

console.log( "Error: " + err ); // Error: Oops!

}

Generator calling other generators

function *foo() {

yield 3;

yield 4;

}

function *bar() {

yield 1;

yield 2;

yield *foo(); // `yield *` delegates iteration control to `foo()`

yield 5;

}

for (var v of bar()) {

console.log( v );

}

// 1 2 3 4 5

var it = bar();

console.log(it.next()); // 1

Receive return value

Distinction between yield and yield*:
– with yield, the result is whatever is returned at the current expression,
– but with the yield* expression, it iterates through generator function’s yields.

function *foo() {

yield 2;

yield 3;

console.log('FOO')

return "foo"; // return value back to `yield*` expression

}

function *bar() {

yield 1;

// yield * iterates through the yields in function *foo()

// yield * foo();

yield yield * foo()

// yield * iterate through foo(), then the yield to the left of yield * will yield the return value

console.log('4')

yield 4;

}

var it = bar();

console.log(it.next()); // { value:1, done:false }

console.log(it.next()); // { value:2, done:false }

console.log(it.next()); // { value:3, done:false }

console.log(it.next()); // { value: 'foo', done: false }

console.log(it.next()); // { value:4, done:false }

The Pause

A characteristic of using next is that the generator runs code up to the point of the yield. You will get the value where yield is. Then, the code pauses there.

In the below example, it shows this.

We first create a generator “foo”.
Then we create another generator “bar”.

1) We call next on the generator variable “it”, and the generator starts executing the code.
It hits the first yield, which gives 1.

The code pauses here.

2) Then our generator variable call the next next function.

The code continues from the first yield and continues executing.
It moves into foo and then hits the 2nd yield, where it gives 2 as value.

the code pauses.

function *foo() {

try {

yield 2; // 2nd next

}

catch (err) {

// 5

// catches error thrown.

// There is no "yield" to pause

// so we continue on with execution.

}

// 6

console.log("paaaaaause");

yield; // pause

// 8 now, throw another error

throw "Oops!";

}

function *bar() {

yield 1; // 1st next

try {

yield *foo();

}

catch (err) {

// 9

// catches error from 8

console.log( "bar caught: " + err );

}

// each next works like this. It says to run the code until it hits a yield

// then it pauses.

var it = bar();

// here, we hit the 1st next(). We run the code until we hit the first yield.

// we get 1. Then we pause.

// 1

console.log(it.next()); // { value:1, done:false }

// we try to access the next "next()". So we move foward in code.

// then we hit "yield 2". We pause here

// 2

console.log(it.next()); // { value:2, done:false }

// 3

console.log("it.throw - throw some error");

// 4

// we then throw error. We throw from the execution line, which is yield 2.

it.throw( "Uh oh!" ); // will be caught inside `foo()`

// foo caught: Uh oh!

// 7 we then want to access the next yield. so we continue on with the code from where the

// last yield was. Which is an empty yield.

// 10 no more yield after the the error caught in 9. So we have nothing to show here.

it.next(); // { value:undefined, done:true } --> No error here!

3) We log we’re about to throw error.

4) We get the generator variable “it” and call “throw”.

At this point, we continue from the last yield, which is at line “yield 2” in the foo function. That is where the generator code has paused.

5) We catch the error in foo, and log it.

There is no yield so we DO NOT pause. Hence we continue execution.

6) We log at 6. Then we see a yield. Hence we pause, and return the execution to the generator variable.

7) We continue with execution on the generator variable “it”. We then call the next function again on the generator variable “it”.

It continues execution from where we left off in the generator, which was an empty yield.
It continues execution and we get to a throw “Oops”. The throw propogate to bar’s catch and gets caught.

It logs the bar catch, and bar finishes running.

Algorithm examples

Shellsort’s skip mechanism

let gaps = [2,5];

let array = [1,2,3,4,5,6,7,8,9,10];

function * skipper() {

for (let gapIndex = 0; gapIndex < gaps.length; gapIndex++) {

console.log(`Now jumping ${gaps[gapIndex]} across the array`);

let skip = gaps[gapIndex];

for (let i = 0; i < array.length; i = i+skip) {

yield array[i];

}

let s = skipper();

let temp = s.next();

while (!temp.done) {

temp = s.next();

if (temp.value) console.log(`${temp.value}`);

}

output:

Now jumping 2 across the array
3
5
7
9
Now jumping 5 across the array
1
6

Divide and Conquer concept

let array = [8, 99, 68, 77];

function * divideAndConquer(array, start, end) {

console.log(`divideAndConquer - start: ${start}, end: ${end}`)

// if (low == high) print

// we have reached one single element case

if (start === end) {

console.log(`reached end`);

yield array[start];

console.log("continuing...!");

return;

}

if (start > end) {

console.log(`left recursion NOT AVAILABLE X`)

return;

}

// get mid

let mid = Math.floor((end - start)/2);

console.log(`mid is ${mid}`);

console.log(`LEFT recursion: [0, ${mid-1}]`)

yield * divideAndConquer(array, 0, mid-1);

console.log(`mid needs to be printed.`);

yield array[mid];

console.log(`RIGHT recursion: [${mid+1}, ${end}]`)

yield * divideAndConquer(array, mid+1, end);

}

let a = divideAndConquer(array, 0, array.length-1);

console.log(`---1st next---`)

console.log(`√ ${a.next().value}`);

console.log(`---2nd next---`);

console.log(`√ ${a.next().value}`);

console.log(`---3rd next---`);

console.log(`√ ${a.next().value}`);

console.log(`---4th next---`);

console.log(`√ ${a.next().value}`);

output:

—1st next—
divideAndConquer – start: 0, end: 3
mid is 1
LEFT recursion: [0, 0]
divideAndConquer – start: 0, end: 0
reached end
√ 8
—2nd next—
continuing…!
mid needs to be printed.
√ 99
—3rd next—
RIGHT recursion: [2, 3]
divideAndConquer – start: 2, end: 3
mid is 0
LEFT recursion: [0, -1]
divideAndConquer – start: 0, end: -1
left recursion NOT AVAILABLE X
mid needs to be printed.
√ 8
—4th next—
RIGHT recursion: [1, 3]
divideAndConquer – start: 1, end: 3
mid is 1
LEFT recursion: [0, 0]
divideAndConquer – start: 0, end: 0
reached end
√ 8

immediate functions

May 17, 2018javascriptadmin

ref – https://blog.kevinchisholm.com/javascript/javascript-immediate-functions-basics/

In JavaScript, the immediate function pattern is a way of executing a function as soon as it is defined. In this article, I will explain the syntax and explore some of the advantages of using it. This syntax can also be referred to as a closure.

An example of an immediate function:

(function () {

console.log('test');

})();

Basically, it is a function expression which is executed immediately.

The function has to be wrapped in brackets:

(function () {

console.log('test');

})

without the brackets, it is a function declaration

function () {

console.log('test');

}

Hence, after we declare the function to be an expression, we execute it immediately by using ()

Alternatively, you can also do it where you have an function declaration, call it by using (), and wrap the whole thing in (…) as an expression.

(function () {

console.log('test');

}());

Why do we do this?

Immediate functions traditionally have two usages:

– defining a function on page load by a conditional
– or for creating a new scope

For example, jQuery plugins commonly use the following syntax:

(function ($) {

// Plugin code here

})(jQuery);

This is to avoid conflicts with other libraries that use the $ variable. When the jQuery variable is passed to the function as an argument, it is defined as $ in the new scope. And you start using the ‘$’ inside the function to do your code.

In the old scope, the $ is left unchanged.

Let’s Look at an Example

first we have some js that gets all the a tags in the page. We store it as an array into variable anchors.

Then we loop through each ‘a’, and assign a function handler to its click event.

html

<ul>

<li><a href="#">three</a></li>

</ul>

javascript

var anchors = document.getElementsByTagName('a');

for (var i = 0; i < anchors.length; i++) {

console.log(`assigning anchor ${i} to a function`)

anchors[i].addEventListener('click', function () {

console.log('Anchor number ' + i + ' has been clicked.');

});

}

</script>

The problem is that the var i declared in the for loop is scoped globally. Because in JS, we do not scope to blocks. We only scope to functions. So var i has been hoisted to the top. Thus, when the function is assigned to the ‘click’ handler, it accesses the i as an outer i, like so:

var anchors = document.getElementsByTagName('a');

var i; // hoisted

for (i = 0; i < anchors.length; i++) {

console.log(`assigning anchor ${i} to a function`)

anchors[i].addEventListener('click', function () {

console.log('Anchor number ' + i + ' has been clicked.');

});

}

whenever we click on a link, it’ll log the i as 6. Because we’re always accessing the global i.

solution

This can be solved by using an immediate function.

We create a closure by implementing a function around it, with a parameter to pass in the variable i.
This is done by creating a function expression, then executing it right away (IFEE), for each index.

Thus, there will be 6 closures. Each closure holds a different i.
A closure’s respective handlers inside, will access that i.

var anchors = document.getElementsByTagName('a');

var i;

for (i = 0; i < anchors.length; i++) {

console.log(`assigning anchor ${i} to a function`);

// create closure so that we get our own local variable closureIndex

(function(closureIndex){

anchors[closureIndex].addEventListener('click', function() {

console.log('Anchor number ' + closureIndex + ' has been clicked.');

});

})(i);

}

</script>

Now it will work as expected.

Additional Examples

The function is assigned to a variable, and that is it. We have only the function declaration here, but we never call the function. But if you were to add the line “myFunc();” to this code and run it, the output would be: “I am a simple function”.

var myFunc = function(){

console.log('I am a simple function');

}

myFunc(); // I am a simple function

In order to turn this function into an immediate function, we add the open/close parentheses after the closing curly bracket and then wrap the entire function in parentheses. After we do this, we run the code and whatever happens in that function is executed immediately after the function declaration is complete.

(function(){

console.log('hello, I am an immediate function');

}()) // hello, I am an immediate function

We first declare a variable called “myName” before declaring our function. When declaring our immediate function, we take one argument: “thisName”. At the end of the immediate function declaration, the open/close parentheses pass the variable “myName” to our immediate function. So, not only does this set of open/close parentheses execute the function, it also allows you to pass an argument to that function.

var myName = 'bart Simpson';

(function(thisName){

console.log( 'hello, my name is: ' + thisName );

}(myName))

implementing the feedTheKraken

May 12, 2018javascript, Node JSadmin

Get the project running

Download the source code onto your computer
download v1.0

cd into the directory, and install all packages
npm install

Then start the server:
npm start
You should see the server starting up.

In the directory, there is an index.html file. Double click it.

You’ll see the web page.

Go ahead and starting using it. Click on the browse button and select images you want to kraken.

Then click the “Feed it” button. This sends all your images to the server.
The server will then download these images into an ‘unprocessed’ folder that is unique to your browser.

Once the images are in that folder, it sends the images to Kraken.io to be processed. You will see the images being processed in your terminal.

Once processed, Kraken.io will return urls that contains the finished image. The server takes those url and downloads these finished image into a ‘processed’ folder.

Then it zips the processed folder and will log out the finishing steps.

Starting the project from scratch

set up a basic project with gulp:

ref – http://chineseruleof8.com/code/index.php/2015/06/30/starting-gulp/

You should now have a functioning server going with nodemon as work flow.

install body parser

npm install express body-parser –save

edit your app.js

We implement the server to be a bit more detailed, and standard.

'use strict';

const express = require('express');

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

const PORT = 8080;

const HOST = 'localhost';

const app = express();

app.use(function(req, res, next) {

res.header("Access-Control-Allow-Origin", "*");

res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');

next();

});

app.use(bodyParser.urlencoded({ extended: false }));

app.use(bodyParser.json());

// post example

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

console.log("reached /upload...");

res.end("We will send you a zip with your Krakened images soon...");

});

app.listen(PORT, HOST);

console.log(' ∏ØˇˇØ∏ Feed. The. Kraken! Listening on %s:%d...', HOST || '*', PORT);

module.exports = app;

Creating the index.html

in your project directory, touch index.html

First, we have an file input control that takes in multiple files.
Second, we have a button right underneath it. This button will execute a js function. The JS function will proceed to pass the file information onto a url that hits our server.

First, let’s see the skeleton. Notice we have included boostrap css. This is so that we have some ready
made CSS to use.

<!DOCTYPE html>

<head>

<title>Kraken your images! Feed it</title>

function uploadImage() {

}

</script>

</head>

<body>

<h1 class="display-4">Kraken Your Images (limit 80)</h1>

<p class="lead">Load in your images, and we'll have them <a href="https://kraken.io/">Krakened</a> and sent to your email in a zip!</p>

<p id="intro">Kraken.io is an image optimization and compression

SaaS platform with additional manipulation capabilities such

as image resizing. Our goal is to automatically shrink the byte

size of images as much as possible, while keeping the visual

information intact, and of consistently high quality to the extent

that results never need to be manually checked for fidelity.

</p>

<div>

</p>

</div>

</body>

</html>

Fingerprint2

Make sure you include this in your script area

1	<script src="https://cdnjs.cloudflare.com/ajax/libs/fingerprintjs2/1.8.0/fingerprint2.min.js"></script>

Multiple browsers will be hitting our servers. Hence, all the unprocessed and processed images are to be kept in a folder for that browser only. There will be many folders that match up to each browser via a unique string id. As the browsers make their requests, images will be kept in those folders. That is how we know which image belong to which browsers. Fingerprint2 basically distinguishes browsers by returning a unique id for that browser.

new Fingerprint2().get(function(result, components) {

// where result is the browser id

});

Using axios to send files to node server

Make sure you include this in your script area

1	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Keep in mind that in order to distinguish ourselves from the other browsers, we throw in the browser id in the url parameter. That way, when we save our images into a folder on the server, the server will keep track of it via our browser id.

1) first, we get the array of images received from the “file” control.
2) Then we create a FormData class that collects.
3) We include the browser id in the url parameter, and pass in the FormData in the parameter
4) We receive response from server

function uploadImage() {

new Fingerprint2().get(function(result, components) {

console.log("uploading images....");

// 1)

var images = document.getElementById("imgUploader").files;

var arrayOfImages = Array.from(images);

// 2)

let data = new FormData();

for (let i = 0; i < arrayOfImages.length;i++) {

console.log(`appending image ${arrayOfImages[i].name} to FormData`);

data.append('file', images[i], images[i].fileName);

}

console.log("viewing FormData");

for (var pair of data.entries()) {console.log(pair)}

// 3)

axios.post("http://localhost:8080/upload?browserIdentity="+result, data, {

headers: {

'accept': 'application/json',

'Accept-Language': 'en-US,en;q=0.8',

'Content-Type': `multipart/form-data; boundary=${data._boundary}`

}

})

.then((response) => {

// 4

console.log(`received response from server....${response.data}`);

let a = document.createElement('a');

var linkText = document.createTextNode("download");

a.href = response.data;

document.getElementById("downloadLink").appendChild(a);

})

.catch((error) => {

});

}) // new fingerprint2

} // function

Don’t forget to implement upload for POST requests on the server. The point is that we have different browsers uploading images. We keep track of each browser’s image by creating a “unprocessed-${browser id}” folder. It holds all uploaded images from that browser that is not current processed by Kraken.

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

console.log("reached upload...")

return res.status(200).send({

result: "good"

});

You should then be able to see the response back to index.html with result: “good”.

Installing Multer

In your directory, install multer:

npm i multer

1	var multer = require('multer');

Create a function called processImagesFromClientPromise and implement it like so.

obj.processImagesFromClientPromise = function(req, res) {

let p = new Promise((resolve, reject) => {

var Storage = multer.diskStorage({

destination: function(req, file, callback) {

console.log("multer.diskStorage - Your browser id is: "+req.query.browserIdentity);

// we create a folder like so

callback(null, `./${obj.unprocessedFolderName}`);

filename: function(req, file, callback) {

console.log(`---The original name is - ${file.originalname}`);

callback(null, file.originalname);

}

});

var upload = multer({ storage: Storage }).array("file", 86);

if (upload) {

upload(req, res, function(err) {

console.log("√ Finished receiving image(s) from client");

if (err) {

console.log("----error uploading file----");

console.log(err);

return res.end("Something went wrong!");

}

console.log("processImagesFromClientPromise: resolving saving images using Multer...");

resolve(obj.unprocessedFolderName);

});

}

});

return p;

}

make sure you implement createFolderForBrowser because as the images come in, you’ll need a place to store them.

const UNPROCESSED_FOLDER_NAME = "unprocessed";

const PROCESSED_FOLDER_NAME = "processed";

...

function KrakenClass(browserIdentity) {

// private function

function createFolderForBrowser(folderAlphaString) {

let folderWithBrowserIDName = `${folderAlphaString}-${browserId}`;

if (!fs.existsSync(folderWithBrowserIDName)){

fs.mkdirSync(folderWithBrowserIDName);

}

return folderWithBrowserIDName;

}

// public properties

obj.unprocessedFolderName = createFolderForBrowser(UNPROCESSED_FOLDER_NAME);

obj.processedFolderName = createFolderForBrowser(PROCESSED_FOLDER_NAME);

return obj;

}

Zipping a folder

After krakening all the images, we place it in the “processed” folder.
In the future, we may want to send all these images via email, or a link so the user can download it.
Its best if we can zip all these images together. We use the archiver to do this.

First, we install archiver:

npm install archiver –save

This is how we implement it. However, in the future, we want to place it inside of a Promise for refactoring.

obj.saveAsZip2 = function(fileName, fromDirectoryName, response) {

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

let fullFileName = `/${fileName}.zip`

var output = fs.createWriteStream(__dirname + fullFileName);

var archive = archiver('zip');

output.on('close', function() {

var file = __dirname + `${fullFileName}`;

resolve(`file to download from: ${file}`);

});

archive.on('error', function(err) {

throw err;

});

archive.pipe(output);

archive.directory(`${fromDirectoryName}/`, false);

archive.finalize();

}

Downloading the Krakened image from provided url

something like this:

https://dl.kraken.io/api/83/b0/37/75905b74440a18e6fe315cae5e/IMG_1261.jpg

We provide the link string via uri.
We give it a filename such as “toDownload”
Then we provide a callback for once it is done.

var downloadProcessedImages = function(uri, filename, callback){

request.head(uri, function(err, res, body){

console.log('content-type:', res.headers['content-type']);

console.log('content-length:', res.headers['content-length']);

request(uri).pipe(fs.createWriteStream(filename)).on('close', callback);

});

};

used like so:

downloadProcessedImages(status.kraked_url,

`${obj.processedFolderName}/${fileName}`, function(){

console.log(`√ done downloading: ${fileName} into ${obj.processedFolderName}/`);

resolve(status.kraked_url);

});

Function setup

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

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

'use strict';

var Kraken = require('kraken');

var kraken = new Kraken({

'api_key': '...',

'api_secret': '...'

});

var fs = require('fs');

const express = require('express');

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

var multer = require('multer');

var archiver = require('archiver'); // for saving images into a zip

var request = require('request'); // for downloading from urls

const PORT = 8080;

const HOST = 'localhost';

const app = express();

const UNPROCESSED_FOLDER_NAME = "unprocessed";

const PROCESSED_FOLDER_NAME = "processed";

app.use(function(req, res, next) {

res.header("Access-Control-Allow-Origin", "*");

res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');

next();

});

app.use(bodyParser.urlencoded({ extended: false }));

app.use(bodyParser.json());

// using functional inheritance

function KrakenClass(browserIdentity) {

console.log("Kraken Construction: √ create stack object to be returned");

var obj = {}; // the object itself

console.log(`√ Creating private vars...`);

var browserId = browserIdentity;

console.log("√ Creating private functions...");

function uploadToKrakenAndDownloadResult(urlString, browserId) {

return new Promise((resolve, reject) => {

kraken.upload(urlString, function (status) {

if (status.success) {

let fullURL = status.kraked_url

let indexOfSlash = fullURL.lastIndexOf("/")

let fileName = fullURL.substring(indexOfSlash+1, fullURL.length);

downloadProcessedImages(status.kraked_url,

`${obj.processedFolderName}/${fileName}`, function(){

console.log(`√ done downloading: ${fileName} into ${obj.processedFolderName}/`);

resolve(status.kraked_url);

});

} else {

console.log('ø Failed! Error message: %s', status.message);

reject(status.message);

}

}); // kraken upload

}); // Promise

}

function createFolderForBrowser(folderAlphaString) {

let folderWithBrowserIDName = `${folderAlphaString}-${browserId}`;

if (!fs.existsSync(folderWithBrowserIDName)){

fs.mkdirSync(folderWithBrowserIDName);

}

return folderWithBrowserIDName;

}

function readyKrakenPromises(unprocessedDirectory, req, res) {

let unprocessedImagesArr = [];

// read file names from unprocessedDirectory

const testFolder = `./${unprocessedDirectory}/`;

fs.readdirSync(testFolder).forEach(file => {

unprocessedImagesArr.push(file);

})

let paramArray = [];

for (let i = 0; i < unprocessedImagesArr.length; i++) {

paramArray.push({

file: `${unprocessedDirectory}/${unprocessedImagesArr[i]}`,

wait: true,

lossy: true

});

}

// now let's get the unprocessed images and have it Krakened!

const krakenPromises = [];

for (let i = 0; i < paramArray.length; i++) {

krakenPromises.push(uploadToKrakenAndDownloadResult(paramArray[i], browserId));

}

runAllKrakenPromises(krakenPromises, req, res);

}

function saveAsZip(fileName, fromDirectoryName, response) {

let fullFileName = `/${fileName}.zip`

var output = fs.createWriteStream(__dirname + fullFileName);

var archive = archiver('zip');

output.on('close', function() {

console.log(archive.pointer() + ' total bytes');

console.log('saveAsZip - archiver has been finalized and the output file descriptor has closed.');

var file = __dirname + `${fullFileName}`;

console.log(`file to download from: ${file}`);

});

archive.on('error', function(err) {

throw err;

});

archive.pipe(output);

archive.directory(`${fromDirectoryName}/`, false);

archive.finalize();

}

function runAllKrakenPromises(promises, req, res) {

Promise.all(promises).then(function(output) {

saveAsZip("toDownload", obj.processedFolderName, res);

});

}

var downloadProcessedImages = function(uri, filename, callback){

request.head(uri, function(err, res, body){

console.log('content-type:', res.headers['content-type']);

console.log('content-length:', res.headers['content-length']);

request(uri).pipe(fs.createWriteStream(filename)).on('close', callback);

});

};

console.log("√ Creating public functions...")

obj.processImagesFromClient = function(req, res) {

// image storage

var Storage = multer.diskStorage({

destination: function(req, file, callback) {

console.log("multer.diskStorage - Your browser id is: "+req.query.browserIdentity);

// we create a folder like so

callback(null, `./${obj.unprocessedFolderName}`);

filename: function(req, file, callback) {

console.log(`---The original name is - ${file.originalname}`);

callback(null, file.originalname);

}

});

// multier takes the requst object

var upload = multer({ storage: Storage }).array("file", 86);

if (upload){

upload(req, res, function(err) {

console.log("√ Finished receiving image(s) from client");

if (err) {

console.log("----error uploading file----");

console.log(err);

return res.end("Something went wrong!");

}

// resolve here

readyKrakenPromises(obj.unprocessedFolderName, req, res);

});

}

console.log("√ Creating public vars")

obj.unprocessedFolderName = createFolderForBrowser(UNPROCESSED_FOLDER_NAME);

obj.processedFolderName = createFolderForBrowser(PROCESSED_FOLDER_NAME);

console.log(`constructed folders: ${obj.unprocessedFolderName}, ${obj.processedFolderName}`)

return obj; // return it

}

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

console.log("reached /upload...");

console.log("browserIdentity: " + req.query.browserIdentity);

res.end("We will send you a zip with your Krakened images soon...");

var krakenInstance = KrakenClass(req.query.browserIdentity);

krakenInstance.processImagesFromClient(req, res);

});

app.listen(PORT, HOST);

console.log(' ∏ØˇˇØ∏ Feed. The. Kraken! Listening on %s:%d...', HOST || '*', PORT);

module.exports = app;

However, the problem is that all of that deteriorates down to pyramid of Doom. Each task does something asynchronous, and we wait until it is done. When it’s complete, inside of the callback, we call the next task.

Hence our tasks list is something like this:

processImagesFromClient
readyKrakenPromises
runAllKrakenPromises
saveAsZip

Some of the functionalities are run inside of a callback. Some of them are run at the end of the functions, hence at the end, we get this complicated chain that no one wants to follow.

processImagesFromClient

upload(req, res, function() {

...

readyKrakenPromises(obj.unprocessedFolderName, req, res) {

...

runAllKrakenPromises(krakenPromises, req, res) {

...

saveAsZip

}

Hence, let’s use Promises to fix it.

Promises version

ref – http://chineseruleof8.com/code/index.php/2017/10/03/promise-js/

…with promises, it looks much prettier:

var krakenInstance = KrakenClass(req.query.browserIdentity);

krakenInstance.processImagesFromClientPromise(req, res)

.then(unprocessedFolderName => krakenInstance.readyKrakenPromises2(unprocessedFolderName, req, res))

.then(krakenPromises => krakenInstance.runAllKrakenPromises2(krakenPromises, req, res))

.then(processedFolderName => krakenInstance.saveAsZip2(`${req.query.browserIdentity}-download`, processedFolderName, res))

.then(function(result) {

console.log(result);

});

full source promises version

Basically we group code inside a new Promise. Then return that promise. Whatever variable we return, shall be passed inside of resolve. Resolve indicates that we move on to the next Promise.

Also, whatever parameter that gets passed into resolve, will appear in the .then parameter. You may then pass that parameter on to the next function.

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

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

// using functional inheritance

function KrakenClass(browserIdentity) {

console.log("Kraken Construction: √ create stack object to be returned");

var obj = {}; // the object itself

console.log(`√ Creating private vars...`);

var browserId = browserIdentity;

console.log("√ Creating private functions...");

function readFileNamesFromDirectory(fileSystem, directoryName) {

let directoryContentNames = [];

const folder = `./${directoryName}/`;

fileSystem.readdirSync(folder).forEach(file => {

directoryContentNames.push(file);

})

return directoryContentNames;

}

function createParamArrayForKrakenService(unprocessedArr, unprocessedDirectory) {

let paramArray = [];

for (let i = 0; i < unprocessedArr.length; i++) {

paramArray.push({

file: `${unprocessedDirectory}/${unprocessedArr[i]}`,

wait: true,

lossy: true

});

}

return paramArray;

}

function assembleKrakenServicesIntoPromises(paramArray, browserId) {

const krakenPromises = [];

for (let i = 0; i < paramArray.length; i++) {

krakenPromises.push(uploadToKrakenAndDownloadResult(paramArray[i], browserId));

}

return krakenPromises;

}

function uploadToKrakenAndDownloadResult(urlString, browserId) {

return new Promise((resolve, reject) => {

kraken.upload(urlString, function (status) {

if (status.success) {

let fullURL = status.kraked_url

let indexOfSlash = fullURL.lastIndexOf("/")

let fileName = fullURL.substring(indexOfSlash+1, fullURL.length);

downloadProcessedImages(status.kraked_url,

`${obj.processedFolderName}/${fileName}`, function(){

console.log(`√ done downloading: ${fileName} into ${obj.processedFolderName}/`);

resolve(status.kraked_url);

});

} else {

console.log('ø Failed! Error message: %s', status.message);

reject(status.message);

}

}); // kraken upload

}); // Promise

}

function createFolderForBrowser(folderAlphaString) {

let folderWithBrowserIDName = `${folderAlphaString}-${browserId}`;

if (!fs.existsSync(folderWithBrowserIDName)){

fs.mkdirSync(folderWithBrowserIDName);

}

return folderWithBrowserIDName;

}

var downloadProcessedImages = function(uri, filename, callback){

request.head(uri, function(err, res, body){

console.log('content-type:', res.headers['content-type']);

console.log('content-length:', res.headers['content-length']);

request(uri).pipe(fs.createWriteStream(filename)).on('close', callback);

});

};

console.log("√ Creating public functions...")

obj.saveAsZip2 = function(fileName, fromDirectoryName, response) {

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

let p = new Promise((resolve, reject) => {

let fullFileName = `/${fileName}.zip`

var output = fs.createWriteStream(__dirname + fullFileName);

var archive = archiver('zip');

output.on('close', function() {

var file = __dirname + `${fullFileName}`;

resolve(`file to download from: ${file}`);

});

archive.on('error', function(err) {

throw err;

});

archive.pipe(output);

archive.directory(`${fromDirectoryName}/`, false);

archive.finalize();

});

return p;

}

obj.runAllKrakenPromises2 = function(promises, req, res) {

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

let p = new Promise((resolve, reject)=> {

Promise.all(promises).then(function(output) {

console.log(output);

console.log("runAllKrakenPromises2: resolving all kraken promises...");

console.log(obj.processedFolderName);

resolve(obj.processedFolderName);

});

return p;

}

obj.processImagesFromClientPromise = function(req, res) {

let p = new Promise((resolve, reject) => {

var Storage = multer.diskStorage({

destination: function(req, file, callback) {

console.log("multer.diskStorage - Your browser id is: "+req.query.browserIdentity);

// we create a folder like so

callback(null, `./${obj.unprocessedFolderName}`);

filename: function(req, file, callback) {

console.log(`---The original name is - ${file.originalname}`);

callback(null, file.originalname);

}

});

var upload = multer({ storage: Storage }).array("file", 86);

if (upload) {

upload(req, res, function(err) {

console.log("√ Finished receiving image(s) from client");

if (err) {

console.log("----error uploading file----");

console.log(err);

return res.end("Something went wrong!");

}

console.log("processImagesFromClientPromise: resolving saving images using Multer...");

resolve(obj.unprocessedFolderName);

});

}

});

return p;

}

obj.readyKrakenPromises2 = function(unprocessedDirectory, req, res) {

let p = new Promise(function(resolve, reject) {

let unprocessedImagesArr = readFileNamesFromDirectory(fs, unprocessedDirectory);

let paramArray = createParamArrayForKrakenService(unprocessedImagesArr, unprocessedDirectory);

let allKrakenPromises = assembleKrakenServicesIntoPromises(paramArray, browserId);

resolve(allKrakenPromises);

})

return p;

}

console.log("√ Creating public vars")

obj.unprocessedFolderName = createFolderForBrowser(UNPROCESSED_FOLDER_NAME);

obj.processedFolderName = createFolderForBrowser(PROCESSED_FOLDER_NAME);

console.log(`constructed folders: ${obj.unprocessedFolderName}, ${obj.processedFolderName}`)

return obj; // return it

}

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

console.log("reached /upload...");

console.log("browserIdentity: " + req.query.browserIdentity);

res.end("We will send you a zip with your Krakened images soon...");

var krakenInstance = KrakenClass(req.query.browserIdentity);

krakenInstance.processImagesFromClientPromise(req, res)

.then(unprocessedFolderName => krakenInstance.readyKrakenPromises2(unprocessedFolderName, req, res))

.then(krakenPromises => krakenInstance.runAllKrakenPromises2(krakenPromises, req, res))

.then(processedFolderName => krakenInstance.saveAsZip2(`${req.query.browserIdentity}-download`, processedFolderName, res))

.then(function(result) {

console.log(result);

});

app.listen(PORT, HOST);

console.log(' ∏ØˇˇØ∏ Feed. The. Kraken! Listening on %s:%d...', HOST || '*', PORT);

module.exports = app;

Encapsulation

However, make sure we encapsulate the functionalities. We don’t want outside to be able to use functions such as readyKrakenPromises, runAllKrakenPromises, and saveAsZip.

So we change these functions to be private functions. Then create a public function that does the Promise calls like so:

function KrakenClass(browserIdentity) {

...

// create public function

obj.krakenTheImages = function(req, res, callback) {

processImagesFromClientPromise(req, res)

.then(unprocessedFolderName => readyKrakenPromises(unprocessedFolderName, req, res))

.then(krakenPromises => runAllKrakenPromises(krakenPromises, req, res))

.then(processedFolderName => saveAsZip(`${req.query.browserIdentity}-download`, processedFolderName, res))

.then(function(result) {

callback(result);

});

}

return obj; // return it

}

used like so:

var krakenInstance = KrakenClass(req.query.browserIdentity);

krakenInstance.krakenTheImages(req, res, function(result){

console.log(result);

});

app.js full source

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

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

'use strict';

var Kraken = require('kraken');

var kraken = new Kraken({

'api_key': '。。。',

'api_secret': '。。。'

});

var fs = require('fs');

const express = require('express');

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

var multer = require('multer');

var archiver = require('archiver'); // for saving images into a zip

var request = require('request'); // for downloading from urls

const PORT = 8080;

const HOST = 'localhost';

const app = express();

const UNPROCESSED_FOLDER_NAME = "unprocessed";

const PROCESSED_FOLDER_NAME = "processed";

app.use(function(req, res, next) {

res.header("Access-Control-Allow-Origin", "*");

res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');

next();

});

app.use(bodyParser.urlencoded({ extended: false }));

app.use(bodyParser.json());

// using functional inheritance

function KrakenClass(browserIdentity) {

console.log("Kraken Construction: √ create stack object to be returned");

var obj = {}; // the object itself

console.log(`√ Creating private vars...`);

var browserId = browserIdentity;

console.log("√ Creating private functions...");

function readFileNamesFromDirectory(fileSystem, directoryName) {

let directoryContentNames = [];

const folder = `./${directoryName}/`;

fileSystem.readdirSync(folder).forEach(file => {

directoryContentNames.push(file);

})

return directoryContentNames;

}

function createParamArrayForKrakenService(unprocessedArr, unprocessedDirectory) {

let paramArray = [];

for (let i = 0; i < unprocessedArr.length; i++) {

paramArray.push({

file: `${unprocessedDirectory}/${unprocessedArr[i]}`,

wait: true,

lossy: true

});

}

return paramArray;

}

function assembleKrakenServicesIntoPromises(paramArray, browserId) {

const krakenPromises = [];

for (let i = 0; i < paramArray.length; i++) {

krakenPromises.push(uploadToKrakenAndDownloadResult(paramArray[i], browserId));

}

return krakenPromises;

}

function uploadToKrakenAndDownloadResult(urlString, browserId) {

return new Promise((resolve, reject) => {

kraken.upload(urlString, function (status) {

if (status.success) {

let fullURL = status.kraked_url

let indexOfSlash = fullURL.lastIndexOf("/")

let fileName = fullURL.substring(indexOfSlash+1, fullURL.length);

downloadProcessedImages(status.kraked_url,

`${obj.processedFolderName}/${fileName}`, function(){

console.log(`√ done downloading: ${fileName} into ${obj.processedFolderName}/`);

resolve(status.kraked_url);

});

} else {

console.log('ø Failed! Error message: %s', status.message);

reject(status.message);

}

}); // kraken upload

}); // Promise

}

function createFolderForBrowser(folderAlphaString) {

let folderWithBrowserIDName = `${folderAlphaString}-${browserId}`;

if (!fs.existsSync(folderWithBrowserIDName)){

fs.mkdirSync(folderWithBrowserIDName);

}

return folderWithBrowserIDName;

}

var downloadProcessedImages = function(uri, filename, callback){

request.head(uri, function(err, res, body){

console.log('content-type:', res.headers['content-type']);

console.log('content-length:', res.headers['content-length']);

request(uri).pipe(fs.createWriteStream(filename)).on('close', callback);

});

};

console.log("√ Creating public functions...")

function saveAsZip(fileName, fromDirectoryName, response) {

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

let p = new Promise((resolve, reject) => {

let fullFileName = `/${fileName}.zip`

var output = fs.createWriteStream(__dirname + fullFileName);

var archive = archiver('zip');

output.on('close', function() {

var file = __dirname + `${fullFileName}`;

resolve(`file to download from: ${file}`);

});

archive.on('error', function(err) {

throw err;

});

archive.pipe(output);

archive.directory(`${fromDirectoryName}/`, false);

archive.finalize();

});

return p;

}

function runAllKrakenPromises(promises, req, res) {

let p = new Promise((resolve, reject)=> {

Promise.all(promises).then(function(output) {

console.log(output);

console.log("runAllKrakenPromises: resolving all kraken promises...");

console.log(obj.processedFolderName);

resolve(obj.processedFolderName);

});

return p;

}

function processImagesFromClientPromise(req, res) {

let p = new Promise((resolve, reject) => {

var Storage = multer.diskStorage({

destination: function(req, file, callback) {

console.log("multer.diskStorage - Your browser id is: "+req.query.browserIdentity);

// we create a folder like so

callback(null, `./${obj.unprocessedFolderName}`);

filename: function(req, file, callback) {

console.log(`---The original name is - ${file.originalname}`);

callback(null, file.originalname);

}

});

var upload = multer({ storage: Storage }).array("file", 86);

if (upload) {

upload(req, res, function(err) {

console.log("√ Finished receiving image(s) from client");

if (err) {

console.log("----error uploading file----");

console.log(err);

return res.end("Something went wrong!");

}

console.log("processImagesFromClientPromise: resolving saving images using Multer...");

resolve(obj.unprocessedFolderName);

});

}

});

return p;

}

function readyKrakenPromises(unprocessedDirectory, req, res) {

let p = new Promise(function(resolve, reject) {

let unprocessedImagesArr = readFileNamesFromDirectory(fs, unprocessedDirectory);

let paramArray = createParamArrayForKrakenService(unprocessedImagesArr, unprocessedDirectory);

let allKrakenPromises = assembleKrakenServicesIntoPromises(paramArray, browserId);

resolve(allKrakenPromises);

})

return p;

}

obj.krakenTheImages = function(req, res, callback) {

processImagesFromClientPromise(req, res)

.then(unprocessedFolderName => readyKrakenPromises(unprocessedFolderName, req, res))

.then(krakenPromises => runAllKrakenPromises(krakenPromises, req, res))

.then(processedFolderName => saveAsZip(`${req.query.browserIdentity}-download`, processedFolderName, res))

.then(function(result) {

callback(result);

});

}

console.log("√ Creating public vars")

obj.unprocessedFolderName = createFolderForBrowser(UNPROCESSED_FOLDER_NAME);

obj.processedFolderName = createFolderForBrowser(PROCESSED_FOLDER_NAME);

console.log(`constructed folders: ${obj.unprocessedFolderName}, ${obj.processedFolderName}`)

return obj; // return it

}

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

console.log("reached /upload...");

console.log("browserIdentity: " + req.query.browserIdentity);

res.end("We will send you a zip with your Krakened images soon...");

var krakenInstance = KrakenClass(req.query.browserIdentity);

krakenInstance.krakenTheImages(req, res, function(result){

console.log(result);

});

app.listen(PORT, HOST);

console.log(' ∏ØˇˇØ∏ Feed. The. Kraken! Listening on %s:%d...', HOST || '*', PORT);

module.exports = app;

index.html full source

<!DOCTYPE html>

<head>

<title>Kraken your images! Feed it</title>

function uploadImage() {

new Fingerprint2().get(function(result, components) {

console.log("uploading images....");

var images = document.getElementById("imgUploader").files;

var arrayOfImages = Array.from(images);

let data = new FormData();

for (let i = 0; i < arrayOfImages.length;i++) {

console.log(`appending image ${arrayOfImages[i].name} to FormData`);

data.append('file', images[i], images[i].fileName);

}

console.log("viewing FormData");

for (var pair of data.entries()) {console.log(pair)}

axios.post("http://localhost:8080/upload?browserIdentity="+result, data, {

headers: {

'accept': 'application/json',

'Accept-Language': 'en-US,en;q=0.8',

'Content-Type': `multipart/form-data; boundary=${data._boundary}`

}

})

.then((response) => {

console.log(`received response from server....${response.data}`);

let a = document.createElement('a');

var linkText = document.createTextNode("download");

a.href = response.data;

document.getElementById("downloadLink").appendChild(a);

})

.catch((error) => {

});

}) // new fingerprint2

} // function

</script>

</head>

<body>

<h1 class="display-4">Kraken Your Images (limit 80)</h1>

<p class="lead">Load in your images, and we'll have them <a href="https://kraken.io/">Krakened</a> and sent to your email in a zip!</p>

<p id="intro">Kraken.io is an image optimization and compression

SaaS platform with additional manipulation capabilities such

as image resizing. Our goal is to automatically shrink the byte

size of images as much as possible, while keeping the visual

information intact, and of consistently high quality to the extent

that results never need to be manually checked for fidelity.

</p>

<div>

</p>

</div>

</body>

</html>

Automatic type conversion, implicit data types conversion

May 8, 2018javascriptadmin

ref – https://www.sitepoint.com/automatic-type-conversion/
http://www.discoversdk.com/blog/data-type-conversion-in-javascript
https://www.digitalocean.com/community/tutorials/how-to-convert-data-types-in-javascript

As a programming language, JavaScript is very tolerant of unexpected values. Because of this, JavaScript will attempt to convert unexpected values rather than reject them outright. This implicit conversion is known as type coercion.

Type Checking

In JavaScript you can check the type of an object or data contained in a variable at runtime. To check the type of some variable, object, or literal value use the typeof operator with the variable, value, or object as the argument to the operator. This operator returns the type as a string.

Note: typeof in JavaScript is not a function—it an operator. But, you can use it like a function. In this case () is not used as a calling operator, but rather as an encapsulation for some code on a single line.

typeof in JavaScript is not a function—it an operator

var val = "I am obviously a string";

var type = typeof val;

console.log(type);

Implicit Conversion

JavaScript provides automatic type conversions.

But that doesn’t mean that you can sit idle and do nothing explicitly.

Again, it is a best practice to convert data types explicitly to avoid bugs in your program. Often, for automatic or implicit conversion you will not get your expected result.

JavaScript is a forgiving language. It will not reject the values directly and will not stop further execution. It will convert them automatically and provide you with some result. That means JavaScript coerces data types to be converted when they need to be in another form. Look at the examples below to see why it is bad to fall back to automatic type conversion or automatic coercion.

2+”2″=”22″

2 is a number and “2” is a string. If we add them together with the + operator JavaScript will try to coerce them to one type and then apply the operation. If JavaScript converts both of them to number then we get 4, but if JavaScript coerces them to string then we get a string “22”.

What do you see as a result? It provided us with ’22’. But that behavior is not always expected or tolerated. In the example above it can be assumed that in JavaScript mathematical operations on a mix of numbers and strings will return a string. Wrong! That is not always the case.

2 * “2” = 4

This time it returned a number instead of string.

Without just assuming, let’s check with the typeof operator the type of the output.

typeof (2 * “2”)
Outputs: ‘number’

So, automatic type conversion or type coercion is not always a good thing.

But, in many places inside JavaScript environments we only need the string value and we can easily understand what the result is gonna be.

For example, in a browser environment calling alert() with some value inside, it will convert the value to a string and display it to the user. After evaluating the lines of code or the statements, alert() gets a single value at the end. So, it is safe to convert a single value to a string without worrying unless otherwise warned or specified.

Explicit Conversion

As discussed in the previous section, explicit conversion is the best and safest way to go. In this section we will see different ways of converting different types of values.

Strings

String is the most widely used type to which we convert different data. To send data over the network or to save it into a file we cannot send or write it as a pure original JavaScript type. We need to convert it to a string and the receiving system can optionally convert it to bytes or resort to that system’s native type system.

To convert other data to string data type we can call String() with the value or variable of that data. Let’s say we want to convert number 100 to a string. Below are demonstration of the both ways described above.

String(100) // "100"

var i = 100;

i.toString(); // "100"

(100).toString(); // "100"

When we have a object, we call the toString() method on that variable or object

String(a) calls toString on object a like this a.toString().
When this happens, it will get object a’s highest __proto__, which is Object.

Let’s set up the example. We have a literal object a given like so:

let a = {

name: "default"

}

function User() {

var name = "default";

var location = "Shenzhen, China";

}

a.__proto__ = User.prototype

When we have a User constructor function. It has a User.prototype object
our literal object a’s __proto__ is then assigned to it.
We call toString() on it. String(a), also does the same thing.

1	console.log(String(a)); // [object Object]

Via prototype hierarchy, it looks at object a and does not find a toString.
It then goes to a’s __proto__, (User.prototype), and does not find toString there either.
It goes up User.prototype’s __proto__, (Object.prototype), and sees the default toString().
Hence, it calls Object.prototype’s toString().

This is because Object is the top most base that all objects in javascript derives from.
We need to over-ride it in order to return something more useful. Say our object a’s __proto__ references User.prototype

User.prototype.toString = function() {

return "object type: User";

}

Now, when you call a.toString(), it’ll look at object a. does not exist, then it’ll go up to a’s prototype (User.prototype) and finds it there.

Numbers

console.log(Number("200")); // number strings ok 200

console.log(Number(true)); // 1

console.log(Number(false)); // 0

console.log(Number(undefined)); // Nan

console.log(Number(null)); // 0

console.log(Number("hadoken!")) // word strings are Nan

console.log(Number(a)) // objects are Nan

Boolean

console.log(Boolean("")); // false

console.log(Boolean("hehe")); // true

console.log(Boolean("0")); // true

console.log(Boolean("1")); // true

// 0 number is false

// > 0 number is true

console.log(Boolean(0)); // false

console.log(Boolean(3.14)); // true

console.log(Boolean(null)); // false

console.log(Boolean(undefined)); // false

console.log(Boolean(a)); // true

console.log(Boolean({})); // true

JavaScript is a “loosely typed” language, which means that whenever an operator or statement is expecting a particular data-type, JavaScript will automatically convert the data to that type.

JavaScript values are often referred to as being “truthy” or “falsey”, according to what the result of such a conversion would be (i.e. true or false). The simplest way to think of it is like this:

a value is truthy unless it’s known to be falsey; and in fact there are only six falsey values:

false

undefined

null

0 (numeric zero)

“” (empty string)

NaN (Not A Number)

Notable exceptions are “0” (string zero) and all types of object — which are truthy —

Remember, for strings, any non-empty strings are true. the empty string “”, is false.

console.log(Boolean(true)); // true

console.log(Boolean(false)); // false

console.log(Boolean("false")); // true

The Condition Shortcut

The if() converts its expression to a boolean, and since objects always evaluate to true while null evaluates to false, we can use a condition like that to test for the existence of DOM elements:

var element = document.getElementById("whatever");

if(element)

{

//the element exists

}

else

{

//the element doesn't exist

}

That will always work reliably when dealing with DOM elements, because the DOM specification requires that a non-existent element returns null.

However, other cases are not so clear-cut, like this example:

function doStuff(foo)

{

if(foo)

{

...

}

Conditions like that are frequently used to mean “if the foo argument is defined”, but there are several cases where that would fail — namely, any cases where foo is a falsey value. So if, for example, an empty string:

let param = String(""); // empty string

console.log(param)

function doStuff(foo) {

if (foo) {

console.log("object is defined!")

} else {

console.log("NOT DEFINED!")

}

doStuff(param) //not defined

then the conditional code would not be executed, even though foo is defined.

This is what we want instead:

function doStuff(foo)

{

if(typeof foo != "undefined")

{

...

}

like so:

let param2 = String("")

// let param2 = Boolean(false)

function doStuff2(foo) {

if(typeof foo != "undefined") {

console.log("doStuff2 - object is defined!")

}

doStuff2(param2)

Arguments (and other variables) which have not been defined, have a data-type of “undefined”. So we can use the typeof comparator to test the argument’s data-type, and then the condition will always pass if foo is defined at all. The if() expression is still evaluating a boolean, of course, but the boolean it’s evaluating is the result of that typeof expression.

The Assignment Shortcut

1	var x = foo \|\| bar;

Logical operators do not return a boolean, but they do still expect a boolean, so the conversion and evaluation happens internally. If foo evaluates to true then the value of foo is returned, otherwise the value of bar is returned. This is immensely useful.

This expression is commonly seen in event-handling functions, where it’s used to define an event argument according to the supported model:

element.onclick = function(e)

{

e = e || window.event;

};

So e is evaluated as a boolean, and that will be truthy (an event object) if the event-argument model is supported, or it will be falsey (undefined) if not; if it’s truthy then e is returned, or if not then window.event is returned.

However..!

But expressions like this are equally prone to failure, in cases where the truthy-ness of the data isn’t known. For example, another common use-case is to define defaults for optional arguments, but this is not good:

function doStuff(foo)

{

foo = foo || "default value";

}

Now if you know for sure that foo will always be either a string or undefined, and assuming that an empty string should be treated as undefined, then that expression is safe. But if not, it will need to be re-defined to something more precise, like this for example:

function doStuff(foo)

{

if(typeof foo != "string")

{

foo = "default value";

}

By testing the type against “string” we can handle multiple cases — where foo is undefined, and also where it’s mis-defined as a non-string value. In that case we also allow an empty string to be valid input, but if we wanted to exclude empty strings, we’d have to add a second condition.

1) if its not a type string, we move forward and assign it a string default value
2) if variable is a string but empty, we move forward and assign it a string default value

function doStuff(foo)

{

if(typeof foo != "string" || foo == "")

{

foo = "default value";

}

Another example

Here, we’re first checking to see if timestamp has value, if not, then assign it a new Date.
However, it would fail if the input is 0, because 0 is a falsey value. However, 0 is also a valid timestamp.
It just means 1/1/1970.

function doDateStuff(timestamp)

{

timestamp = timestamp || new Date().getTime();

}

Mixin

May 3, 2018javascriptadmin

ref – https://javascript.info/mixins

a mixin provides methods that implement a certain behavior, but we do not use it alone, we use it to

add to the behavior to other classes

In other words, mixins are used to extend the behavior of objects by providing a set of reusable functions.

It is used to modularize functionality. For example, if you have a class with all sorts of functionalities, it will become messy and unmanageable. But if you use mixins, you can modularize the functionality and thus, making it much easier to maintain.

The simplest way to make a mixin in JavaScript is to make an object with useful methods. This acts as a prototype object. We then can create other literal objects and extend from this object. This adds additional functionalities to it. In essence, we are “mixing in” additional methods. Finally, we take this hierarchy of a prototype object, and can easily merge them into a prototype of any class.

Creating a mixin

First, we’ll create a literal object “sayMixin”. It will act as a base prototype.

Note that all objects derive from “Object”. When we create our literal object, its __proto__ will automatically be referencing Object Prototype. In the diagram, you’ll notice “extend” in Object Prototype. That’s simply a function defined in a previous example:

Object.prototype.extend = function (extension) {

...

}

So whatever functionality you add to Object prototype will be inherited by all objects you create.

On to the example…

// declare literal object

let sayMixin = {

say(phrase) {

console.log(phrase);

}

};

Thne, we want to extend from sayMixin. So we create another literal object. A literal object has a __proto__ property. In order to extend this object from another, we point the __proto__ to the base object “sayMixin”.

Then, we define our functionality, and in order to call the base object, we use super. Then we simply access the functions/properties of super.

// declare another literal object, that derives from sayMixin

// via __proto__

let sayHiMixin = {

__proto__: sayMixin,

// (or we could use Object.create to set the prototype here)

// declare own functions

sayHi() {

// call parent method. Notice usage of "super"

super.say(`Hello ${this.name}`);

sayBye() {

super.say(`Bye ${this.name}`);

}

};

The digram of the hierarchy looks like this:

Using the Mixin

Now that we have our mixin prototype object created, we want to use start using it!

So first, we create a constructor function User.

function User(newName) {

this.name = newName;

}

Then we add functionality to its prototype like so:

User.prototype.logInfo = function() {

console.log(this.name + ", is a cool person!")

}

“new” will be used to instantiate it.

1	var dude = new User("Dude");

So diagram wise, it looks like this:

in order to add our mixin prototype features into it, we use Object.assign to carry all owned properties and functions over to User. This is so that you don’t over-ride anything in User’s prototype object, such as logInfo.

By definition

The Object.assign() method only copies enumerable and own properties from a source object to a target object.

1 2	// copy the methods Object.assign(User.prototype, sayHiMixin);

Thus, we created a base prototype object in sayMixin, extended it to sayHiMixin, and finally, copied all its traits to User’s prototype object.

Hence, bringing over a new prototype object into User’s current available prototype object, and “mixin” them via Object.assign is what this is all about.

Thus, now we have successfully “mixed in” another prototype into User’s prototype.

var dude = new User("Dude");

console.log(dude)

console.log(dude.__proto__)

dude.logInfo();

dude.sayHi();

dude.sayBye();

output:

User { name: ‘Dude’ }

User {
logInfo: [Function],
sayHi: [Function: sayHi],
sayBye: [Function: sayBye]
}

Dude, is a cool person!
Hello Dude
Bye Dude

Mixins can make use of inheritance inside themselves

First, we set up the skeleton code.

We create a literal object with function properties. Each function takes a string for the event name, and a function handler so that we have a reference to the function.

let eventMixin = {

on(eventName, funcHandler) {

console.log("on called, with eventName: " + eventName)

funcHandler();

off(eventName, funcHandler) {

console.log("OFF called, with eventName: " + eventName)

trigger(eventName, ...args) {

console.log("trigger: " + eventName)

}

} // end of eventMixin

console.log("create Menu class")

Then we make a class called Menu. This class has a function called choose. When executed, calling “choose” will make whatever object it owns to call trigger.

// Make a class

class Menu {

choose(value) {

this.trigger("select", value);

}

console.log(Menu.prototype) //Menu {}

// this is where the mixin happens. We are copying on, off, trigger functionality into

// a class in order to augment and enhance it.

Object.assign(Menu.prototype, eventMixin);

Menu {

on: [Function: on],

off: [Function: off],

trigger: [Function: trigger] }

console.log(Menu.prototype)

let menu = new Menu();

menu.on("select", value => {

console.log("handler called")

});

Now, the idea is that an object should have a method to “generate an event” when something important happens to it, and other objects should be able to “listen” to such events.

full source

100

101

102

103

104

105

106

107

108

// we store an object of arrays.

// the arrays contain handlers, or functions.

// each array is identified by a string called eventName.

let eventMixin = {

// subscribe to the event.

on(eventName, funcHandler) {

console.log("on called, with eventName: " + eventName)

// lazy load eventHandlers

if (!this._eventHandlers) this._eventHandlers = {};

// given a string name, does its array of handlers exist?

// if not, just create an array to store handlers

if (!this._eventHandlers[eventName]) {

this._eventHandlers[eventName] = [];

}

// if the string does exist, let's just add one more handler to it!

this._eventHandlers[eventName].push(funcHandler);

off(eventName, funcHandler) {

console.log("OFF called, with eventName: " + eventName)

trigger(eventName, ...args) {

console.log("trigger: " + eventName)

if(!this._eventHandlers || !this._eventHandlers[eventName]) {

console.log("trigger - no handlers for this event");

return;

}

//Array.prototype.forEach()

this._eventHandlers[eventName].forEach(handler => {

console.log("for each handler")

// "this" is the menu object

console.log(args) // array [...], where 1st element is the length

// so we get [3]

// we call the handler function on "this" object

// we pass in array of arguments called args.

handler.apply(this, args)

//handler.apply(this, args)

});

}

} // end of eventMixin

console.log("create Menu class")

// Make a class

class Menu {

choose(value) {

this.trigger("select", value);

}

console.log(Menu.prototype) //Menu {}

// copy it over to Menu.prototype

Object.assign(Menu.prototype, eventMixin);

Menu {

on: [Function: on],

off: [Function: off],

trigger: [Function: trigger] }

console.log(Menu.prototype)

let menu = new Menu();

// a menu can generate the event "select" when a menu item is selected.

// ..and there may be many different objects that want to know about it.

// we can call the handler on selection

var objA = {

sendOff() {

console.log(" send email to my peeps about this menu selection")

}

var objB = {

openPage(){

console.log("√ open another web page")

}

var objC = {

sendEmail() {

console.log("∑mail the user!")

}

menu.on("select", objA.sendOff);

menu.on("select", objB.openPage);

menu.on("select", objC.sendEmail);

// now the menu will NOTIFY all objects.

menu.choose(3)

Now, you see, when the menu gets selected, we can notify other objects via callbacks.

JavaScript does not support multiple inheritance, but mixins can be implemented by copying them into the prototype.

We can use mixins as a way to augment a class by multiple behaviors, like event-handling as we have seen above.

Mixins may become a point of conflict if they occasionally overwrite native class methods. So generally one should think well about the naming for a mixin, to minimize such possibility.

BluePrints for mixins

Sometimes however mixins require private state. For example the eventEmitter mixin would be more secure if it stored its event listeners in a private variable instead of on the “this” object.

To recap, we created a menu like so:

1	let menu = new Menu();

we created an object menu, with its prototype having properties from eventMixin.

When we register an object for an event say “select”:

1	menu.on("select", objA.sendOff);

the on function has lazy loaded the property _eventHandlers, which is object of “string : array” index value pairs.

on(eventName, funcHandler) {

// lazy load eventHandlers

if (!this._eventHandlers) this._eventHandlers = {};

...

}

at this point if you were to analyze the _eventHandlers property:

1	console.log(menu._eventHandlers)

output:

{ select:
[ [Function: sendOff],
[Function: openPage],
[Function: sendEmail] ] }

It would show that the “select” value would match up to three handlers.

This public access of this property is bad, and this is what we’re trying to solve. However mixins have no create function to encapsulate private state. Hence we create “blueprints” of mixins to create closures. Blueprints may look like constructor functions but they are not meant to be used as constructors.

function eventEmitter() {

var events = Object.create(null); // private

// public function

this.on = function (event, listener) {

// use private var

if (typeof events[event] !== "undefined")

events[event].push(listener);

else events[event] = [listener];

};

// public function

this.emit = function (event) {

if (typeof events[event] !== "undefined") {

var listeners = events[event];

var length = listeners.length, index = length;

var args = Array.prototype.slice.call(arguments, 1);

while (index) {

var listener = listeners[length - (index--)];

listener.apply(this, args);

}

};

}

A blueprint is used to extend an object via concatenation after it’s created.
In the create function, you then use the allocated object in rectangle.extend (self), and use .call on it for eventEmitter.
At that step, you then append all functionalities in eventEmitter onto the allocated object from rectangle.create.call.

That way, private variable events stay in eventEmitter. And eventEmitter’s functions stay public for the allocated object form rectangle.extend.

var square = rectangle.extend({

create: function (side) {

var self = rectangle.create.call(this, side, side);

eventEmitter.call(self); // extend an object via concatenation

return self;

resize: function (newSize) {

var oldSize = this.width;

this.width = this.height = newSize;

this.emit("resize", oldSize, newSize);

}

});

Blueprints are unique to JavaScript. They are a powerful feature. However they have their own disadvantages. The following table compares the advantages and disadvantages of mixins and blueprints:

mixins
They are used to extend prototypes of objects. Hence objects share the same blueprint functions.
No private state due to lack of an encapsulating function.
They are static prototypes and can’t be customized.

blueprints
They are used to extend newly created objects. Hence every object has its own set of blueprint functions.
They are functions, and hence they encapsulate private state.
They can be passed arguments to customize the object.

Prototypal Inheritance in Javascript

May 2, 2018javascriptprototype inheritanceadmin

ref – http://aaditmshah.github.io/why-prototypal-inheritance-matters

execute as constructor function vs standard function

In javascript, we have the “new” keyword, which is used with functions in order to use it as a constructor function.
If you use it without the “new” keyword, you are simply calling it as a standard function.

Problem with using “new”

We create a function Person. Then use new to call it as a “constructor” function.

function Person(newFirst, newLast) {

this.first = newFirst;

this.last = newLast;

}

var author = new Person("Perlman","Atlas")

But there’s a problem. We can’t use any of Function’s prototype functions such as “apply”, “call”, etc.

If we do make “new” into a function, then we can use “apply”, “call”…etc:

1	var author = Person.new.apply(Person, ["Perlman", "Atlas"]);

JS has prototypal inheritance, so its possible to implement “new” as a function:

Function.prototype.new = function () {

function functor() { return constructor.apply(this, args); }

var args = Array.prototype.slice.call(arguments);

functor.prototype = this.prototype;

var constructor = this;

return new functor;

};

“new” cannot be used in conjunction with functional feature.
“new” masks true prototypal inheritance in JS.

JS is a prototypal language, try not to use “new”

Create objects “out of nothing”

1	var obj = Object.create(null); // object has no __proto__. clone of null

Cloning Existing Object

There is an existing object.

var rectangle = {

area : function() {

return this.month * this.height;

}

We create an empty object where its prototype is that of the existing object.

1	var rect = Object.create(rectangle);

We create an empty object that has __proto__ pointing to Object’s prototype.
Then we attach a property called “area” as a function.

var rectangle = Object.create(Object.prototype);

rectangle.area = function () {

return this.width * this.height;

};

Extending a Newly Created Object

In the above example, we cloned the rectangle object and called it rect, but before we may use the area function of rect we need to extend it with width and height.

We add properties width and height and initialize numbers to the properties.
Then, we are able to call the “area” function.

rect.width = 5;

rect.height = 10;

alert(rect.area());

However, this way is not good because we need to manually define width and height on every clone of rectangle

It would be nice to have a function create a clone of rectangle and extend it with width and height properties for us.

Prototypal Pattern

Notice the create function. It uses Object.create(this). This allocates a new empty object, that has __proto__ pointing to rectangle.
This newly created object is referenced by self.
Then, self attaches properties height and width to it, and initialize them to the parameters width/height.

It returns the newly allocated object. Thus, when you use the create function, you literally create a new object with its __proto__ pointing to rectangle. That way, your allocated object can call function area via prototype.

var rectangle = {

create: function (width, height) {

var self = Object.create(this); // allocates object that has __proto__ pointing to rectangle

// attach properties to newly created object

self.height = height;

self.width = width;

return self;

area: function () {

return this.width * this.height;

}

};

var rect = rectangle.create(5, 10);

Then can call prototype functions.

1	alert(rect.area());

Prototypal Pattern vs Constructor Pattern

What we had previous is a Prototypal pattern.

We we have here, is a constructor pattern:

function Rectangle(width, height) {

this.height = height;

this.width = width;

}

Rectangle.prototype.area = function () {

return this.width * this.height;

};

var rect = new Rectangle(5, 10);

alert(rect.area());

In order to make JavaScript look more like Java, the prototypal pattern was inverted to yield the constructor pattern.

Hence every function in JavaScript has a prototype object and can be used as a constructor.

In addition, it clones the prototype of the constructor and binds it to the “this” pointer of the constructor, returning this if no other object is returned.

Both the prototypal pattern and the constructor pattern are equivalent

Hence you may wonder why anybody would bother using the prototypal pattern over the constructor pattern. After all the constructor pattern is more succinct than the prototypal pattern. Nevertheless the prototypal pattern has many advantages over the constructor pattern, enlisted in the following table:

Constructor Pattern

Functional features (call, apply…etc) can’t be used in conjunction with the new keyword
Forgetting to use new leads to unexpected bugs and global variables
Prototypal inheritance is unnecessarily complicated and confusing. (http://chineseruleof8.com/code/index.php/2018/02/06/prototype-and-inheritance-in-js-non-class/)

Prototypal Pattern

Functional features (call, apply…etc) can be used in conjunction with create
Since create is a function the program will always work as expected
Prototypal inheritance is simple and easy to understand

The last point may need some explanation.

The underlying idea is that prototypal inheritance using constructors is more complicated than prototypal inheritance using prototypes.

prototypal inheritance using prototypes

var square = Object.create(rectangle);

square.create = function (side) {

return rectangle.create.call(this, side, side);

};

var sq = square.create(5);

alert(sq.area());

First we create a clone of rectangle and call it square.

Next we override the create function of square with a new create function.

Finally we call the create function of rectangle from the new create function and return the object is returns.

prototypal inheritance using constructors

Using Square as a constructor function, we must call Rectangle.call in order to initialize “this” like a super object.
That way, when we use new to create it, we’ll work off of a Rectangle object as a super object. Then we can implement whatever we want
additionally at Square as the child object.

You can read in detail at http://chineseruleof8.com/code/index.php/2018/02/06/prototype-and-inheritance-in-js-non-class/ (scroll to the very bottom and see “custom example”)

function Square() {

Rectangle.call(this, side, side);

}

Square.prototype = Object.create(Rectangle.prototype);

Square.prototype.constructor = Square;

var sq = new Square(5);

alert(sq.area());

Sure, the constructor function becomes simpler. However it becomes very difficult to explain prototypal inheritance to a person who knows nothing about it.
It becomes even more difficult to explain it to a person who knows classical inheritance.

When using the prototypal pattern it becomes obvious that one object inherits from another object. When using the constructor pattern this is not so obvious because you tend to think in terms of constructors inheriting from other constructors.

Combining Object Creation and Extension

First, we want something like this:

var rectangle = {

create: function (width, height) {

return this.extend({

height: height,

width: width

});

area: function() {

return this.width * this.height;

}

// used like so

var rect = rectangle.create(5, 10)

// where rect's __proto__ is pointing to rectangle

// and its object contents is the literal object we passed into extend (in create function)

We want to create a new object (with its default functionalities as “this”), but extend it with the properties as mentioned.

so we pass the extension like so:

{

height: height,

width: width

}

into the extend function. Notice extend function is attached to Object.prototype.
This is because we want all objects to have this functionality.

Object.prototype.extend = function (extension) {

console.log(extension); // { height: 10, width: 5 }

console.log(extension.__proto__) // { extend: [Function] }

...

}

We then log to look at the extension. It is as expected. We see that the extension we passed in has the properties height and width, and initiated to 10, and 5.
The default functionalities are all in “this”, aka, rectangle.

We then use default Object’s hasOwnProperty, which says:

The hasOwnProperty() method returns a boolean indicating whether the object has the specified property as its own property (as opposed to inheriting it).

Hence, we just have a reference to it to transfer properties from the extension over. And not touch any inherited ones.

Object.prototype.extend = function (extension) {

console.log(extension); // { width: 10, height: 10 }

console.log(extension.__proto__) // { extend: [Function] }

// this is because we've implemented extend on Object.prototype

// just a reference to hasOwnProperty

var hasOwnProperty = Object.hasOwnProperty;

Then, we create a new empty object, with its __proto__ pointing to “this”. Which is rectangle.
As you can see, the object created is empty, with its proto pointing to the Rectangle “this”.

var object = Object.create(this);

console.log("---- allocated object ----")

console.log("object:");

console.log(object) // {}

console.log("object.__proto__:");

console.log(object.__proto__) // { area: [Function] }

output:

—- allocated object —-
object:
{}
object.__proto__:
{ create: [Function: create], area: [Function: area] }

In the next step, we’re gunna assign all the properties from the extension object over to our allocated object.

1) We loop over all the properties in the extension. We’ll get height, width, extend. height and width were the original properties owned by the “extension” object we passed into the extend function. We’ll also get extend, which is the function we attached to Object.prototype

We call the hasOwnProperty, which decides whether the property is owned the extension object. Properties width and height are. However, extend is not owned. It it extend via Object.prototype.

for (var property in extension) {

console.log("--|" + property + "|--");

// is width owned by the extension object? yes

// is height owned by the extension object? yes

// is extend owned by the extension object? no. It is inherited.

// point is: simply transfer over its owning properties

// don't touch inherited properties

console.log(hasOwnProperty.call(extension, property));

}

2) Hence, if the property is owned by the extension object, and it does not exist in the allocated object, then we simply attach it.

// allocated object will attach property and value same as extension

if (hasOwnProperty.call(extension, property) || typeof object[property] === "undefined")

{

// then have object take on that exact same property

object[property] = extension[property];

}

Here, we have the full code. What is returned is a newly allocated object that has the extension properties transferred over. With its __proto__ pointing to “this”, which is rectangle.

Object.prototype.extend = function (extension) {

var hasOwnProperty = Object.hasOwnProperty;

var object = Object.create(this);

for (var property in extension) {

if (hasOwnProperty.call(extension, property) || typeof object[property] === "undefined")

{

// then have object take on that exact same property

object[property] = extension[property];

}

return object;

};

Hence in order to use it, we’ll have rectangle’s create function implement it like so:

var rectangle = {

create: function (width, height) {

// return an object were 'this' is referencing rectangle

return this.extend({

height: height,

width: width

});

area: function() {

return this.width * this.height;

}

Then use it like so:

var rect = rectangle.create(5, 10)

console.log(rect)

console.log(rect.__proto__)

console.log(rect.area())

Hence, as you can see, the properties from the extension object is copied over to the allocated object. The allocated object’s __proto__ points to rectangle.

output:

{ height: 10, width: 5 }
{ create: [Function: create], area: [Function: area] }
50

Some of you may have noticed that the object returned by the extend function actually inherits properties from two objects, and not one – the object being extended and the object extending it. In addition the way in which properties are inherited from these two objects is also different.

In one part, case we inherit properties via delegation. In another, we case we inherit properties via concatenation.

Object.prototype.extend = function (extension) {

var hasOwnProperty = Object.hasOwnProperty;

var object = Object.create(this); // inherit properties via delegation

for (var property in extension) {

if (hasOwnProperty.call(extension, property) || typeof object[property] === "undefined")

{

object[property] = extension[property]; // inherit properties via concatenation

}

return object;

};

Differential Inhereitance

It operates on the principle that most objects are derived from other, more general objects, and only differ in a few small aspects; while usually maintaining a list of pointers internally to other objects which the object differs from.

Prototypal inheritance in JavaScript is based on differential inheritance. Every object in JavaScript has an internal pointer, called [[proto]], which points to the prototype of that object. The [[proto]] property of objects created “out of nothing” point to null. This forms a chain of objects linked via the internal [[proto]] property (hence called a prototype chain), which ends in null.

When you try to access a property of an object the JavaScript engine first searches for that property on the object itself. If it cannot find the property on the object then it delegates the property access to the prototype of the object. In this way the property access traverses up the prototype chain until the property is found (in which case it’s returned) or the chain ends in null (in which case undefined is returned).

TODO – put diagram of hero hierarchy here. put reference here

Cloning or Concatenate Inheritance

Most JavaScript programmers would argue that copying the properties of one object to another is not truly a form of inheritance because any modifications to the original object are not reflected on the clone.

However, modifications to the original object can be propagated to its copies to achieve true prototypal inheritance.

Concatenation and delegation both have their advantages and disadvantages. They are listed in the following table:

Delegation

In JavaScript, an object may have a link to a prototype for delegation. If a property is not found on the object, the lookup is delegated to the delegate prototype, which may have a link to its own delegate prototype, and so on up the chain until you arrive atObject.prototype, which is the root delegate. This is the prototype that gets hooked up when you attach to a Constructor.prototype and instantiate withnew. You can also use Object.create() for this purpose, and even mix this technique with concatenation in order to flatten multiple prototypes to a single delegate, or extend the object instance after creation.

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

Any changes to the prototype are automatically reflected on all its clones.
TODO – use picture

Property access is slower because it may need to traverse up the prototype chain.
TODO – use picture

Objects may only delegate to a single prototype in JavaScript.
TODO – use picture

Concatenative Inheritance

Concatenative inheritance is the process of combining the properties of one or more source objects into a new destination object. Believe it or not, it is the most commonly used form of inheritance in JavaScript.

if (hasOwnProperty.call(extension, property) || typeof object[property] === "undefined") {

object[property] = extension[property]; // inherit via concatenation

}

Any changes to the prototype need to be propagated to all its clones.
Property access is faster because inherited properties are copied.
Objects may copy properties from any number of prototypes.

Inheriting from Multiple Prototypes

This is an important feature because it proves that prototypal inheritance is more powerful than classical inheritance in Java and as powerful as classical inheritance in C++. To implement multiple inheritance in the prototypal pattern you only need to modify the extend function to copy the properties of multiple prototypes:

Object.prototype.extend = function (arguments) {

var hasOwnProperty = Object.hasOwnProperty;

var object = Object.create(this);

var length = arguments.length;

var index = length;

while (index) {

var extension = arguments[length - (index--)];

for (var property in extension)

if (hasOwnProperty.call(extension, property) ||

typeof object[property] === "undefined")

object[property] = extension[property]; // concatenative inheritance

}

return object;

};

Object.assign

April 30, 2018Uncategorizedadmin

ECMAscript 6 introduced Object.assign() to achieve this natively in Javascript.

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.

The Object.assign() method only copies enumerable and own properties from a source object to a target object.

So first, we create an object called AnimalClass, with properties x, y to denote coordinates of where this animal is. We then have functions move, which literally assigns integers to the x, y properties. Then, locate, which displays where this animal is on a coordinate.

We then use Object.create to create an empty object called target. The target’s prototype is this AnimalClass. This means that whatever property or function gets appended to target, its prototype is always AnimalClass. This is so that you can inherit AnimalClass’s functionalities on this object.

var AnimalClass = {

x: 0,

y: 0,

locate : function() {

console.log("I'm here: " + this.x + ", " + this.y)

move: function(x, y) {

this.x = this.x + x;

this.y = this.y + y;

}

var target = Object.create(AnimalClass);

console.log("--- target ---")

console.log(target); // target itself is always empty

console.log(target.__proto__) // its prototype will be of animal

target.locate()

— target —
{}
{ x: 0, y: 0, locate: [Function: locate], move: [Function: move] }
I’m here: 0, 0

Creating a duck via Object.assign

Now that we have a target object, what we’re trying to do is to copy all the properties and functionalities of source object(s) into this target object. Hence we define a custom anonymous object where we add property “color” and function “speak”.

It returns an object, and we test the inheritance by using its own properties, and its prototype’s functionalities.

console.log("--- duck ---")

var daffy = Object.assign(target, {

// properties here is appended to target

// the prototype of the returned object is target.__proto__

color : "black",

speak : function() {

console.log("quack quack");

}

});

console.log(daffy)

console.log(daffy.__proto__ === target.__proto__)

console.log(daffy.color)

daffy.speak()

daffy.move(7, 8)

daffy.locate();

output:

— duck —
{ color: ‘black’, speak: [Function: speak] }
true
black
quack quack
I’m here: 7, 8

Functional Inheritance

April 30, 2018javascriptadmin

ref –
http://julien.richard-foy.fr/blog/2011/10/30/functional-inheritance-vs-prototypal-inheritance/
https://medium.com/javascript-scene/3-different-kinds-of-prototypal-inheritance-es6-edition-32d777fa16c9
http://therealmofcode.com/posts/2012/11/functional-inheritance-javascript.html

https://stackoverflow.com/questions/2800964/benefits-of-prototypal-inheritance-over-classical

Functional Inheritance

The properties you attach to the returning object are class public interface. Functions and properties you define inside function, but not as a part of the returning object, are private members accessible because of closure and invisible because they were not returned.

1) In the parent function, we first create an object on the local stack.

2) We then create private properties.

3) Create public functions and properties. Can access the private properties previously created by scope.

4) Do custom construction with your properties

5) return the stack object

function TestClass(/*arguments*/)

{

// create stack object to be returned

var obj = {};

var privateField; // create private variables like so

function privateFunction() {} // create private functions like so

// attach public properties to the stack object

obj.publicField = "";

obj.publicFunction = function() {};

// construction logic here

return obj; // return it

}

In the child class, we inherit from the parent by:

1) Creating an instance of the parent.

over-ride parent function by:

2) over-ride parent function by having a reference to it, super_functionName

3) Then adding a property function of the same name to obj

4) In that function, call the reference super_functionName

5) add custom implementation after that

function TestClassSpecific(/*arguments*/)

{

// initial object is instance of our test class

var obj = TestClass();

// want to over-ride parent class

// 1) save reference to parent class function

var super_publicFunction = obj.publicFunction;

// 2) over-riding parent class function like so:

obj.publicFunction = function()

{

// call parent class function

super_publicFunction();

// do your over-ride code here

};

// construction logic here

return obj;

}

Now that you have created the parent and child, when using them, simply call the child function
and have it return you an object.

Execute the public properties by calling their names on that object.

function TestClass(/*arguments*/)

{

console.log("create TestClass object");

var obj = {};

var privateField; // create private variables like so

function privateFunction() {} // create private functions like so

// attach public properties to the stack object

obj.publicField = "Ha Doooo ken!";

obj.publicFunction = function() {

console.log("TestClass: Super!! :D")

console.log("TestClass: Manipulating private fields here by scope");

};

// construction logic here

console.log("returning TestClass object");

return obj; // return it

}

function TestClassSpecific(/*arguments*/)

{

// initial object is instance of our test class

var obj = TestClass();

// want to over-ride parent class

// 1) save reference to parent class function

var super_publicFunction = obj.publicFunction;

// 2) over-riding parent class function like so:

obj.publicFunction = function()

{

// call parent class function

super_publicFunction();

// do your over-ride code here

console.log("TestClassSpecific: over-riding the public function...")

};

// construction logic here

return obj;

}

var obj1 = TestClassSpecific() // create instance

// execute functionality

obj1.publicFunction();

console.log(obj1.publicField)

Protected properties between parent and child

function Parent(my)

{

console.log("create TestClass object");

var obj = {};

// private properties

var privateField;

function privateFunction() {}

// protected properties. Only children can access this

my = my || {};

my.protectedField = "pro teck ted field";

my.protectedFunction = function() {

console.log("TestClass: protectedFunction")

console.log("TestClass: Your protected field is: " + my.protectedField);

}

// public properties

obj.publicField = "Ha Doooo ken!";

obj.publicFunction = function() {

console.log("TestClass: Super!! :D")

console.log("TestClass: Manipulating private fields here by scope");

};

// construction logic here

console.log("returning TestClass object");

return obj; // return it

}

function Child(/*arguments*/)

{

var my = {}; // code outside can't access this object

// but we (being a child) can access parent's protected properties

// initial object is instance of our test class

var obj = Parent(my);

// want to over-ride parent class

// 1) save reference to parent class function

var super_publicFunction = obj.publicFunction;

// 2) over-riding parent class function like so:

obj.publicFunction = function()

{

// call parent class function

super_publicFunction();

// do your over-ride code here

console.log("TestClassSpecific: over-riding the public function...")

};

obj.accessProtected = function() {

console.log("TestClassSpecific - accessProtected")

my.protectedFunction()

}

// construction logic here

return obj;

}

var obj1 = Child()

obj1.publicFunction();

console.log(obj1.publicField)

obj1.accessProtected();

Pros

– SIMPLICITY: This pattern is very straightforward and easy for beginners to learn.

– Offers truly private and protected members.

– Protects against common javascript pitfalls, specifically if you forget to specify “new” keyword during class creation or if you are using “this” keyword inside functions.

Cons

– Requires more memory than Pseudoclassical inheritance pattern. With every new instance of a class memory is reserved for all functions and fields inside that class.

– Types cannot be tested using “instanceof” keyword.

– Javascript minimizers might not perform as good as with Pseudoclassical pattern as there is no way for minimizer to safely rename members of parent class.

Benefits of Prototypal over Functional Inheritance

Prototypal inheritance is all about objects. Objects inherit properties from other objects. That’s all there is to it. There are two ways of creating objects using prototypal inheritance:

Create a brand new object

for example, create object, add properties.

var circle = {

radius: 5

};

We can calculate the area and the circumference of the circle from its radius:

circle.area = function () {

var radius = this.radius;

return Math.PI * radius * radius;

};

circle.circumference = function () {

return 2 * Math.PI * this.radius;

};

Now I want to create another circle of radius 10. We create a brand new object by using functionality from our circle object.

var circle2 = {

radius: 10,

area: circle.area,

circumference: circle.circumference

};

Clone an existing object and extend it

JavaScript offers two ways to clone an object:

1) delegation

– Any changes to the prototype are automatically reflected on all its clones.
– Property access is slower because it may need to traverse up the prototype chain.
– Objects may only delegate to a single prototype in JavaScript.

How do we do clone an object via delegation?

Where a is an empty object, and its __proto__ is “someObj”, which will act as the prototype literal object of a.

ref – http://chineseruleof8.com/code/index.php/2018/04/13/object-create/

1	var a = Object.create(someObj)

2) concatenation

– Any changes to the prototype need to be propagated to all its clones.
– Property access is faster because inherited properties are copied.
– Objects may copy properties from any number of prototypes.

How do we do clone an object via concatenation?

ECMAscript 6 introduced Object.assign() to achieve this natively in Javascript.

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.

example here:

Object.assign

But how is this simple?

We have to call Object.create or Object.assign, and do all these assignment ourselves. Its bother some. The key is to implement creation functions for you like so:

function createCircle(radius) {

var newCircle = Object.create(circle);

newCircle.radius = radius;

return newCircle;

}

var circle2 = createCircle(10);

… even better …

var circle = {

radius: 5,

// implement a create function here

create: function (radius) {

var circle = Object.create(this);

circle.radius = radius;

return circle;

area: function () {

var radius = this.radius;

return Math.PI * radius * radius;

circumference: function () {

return 2 * Math.PI * this.radius;

}

};

var circle2 = circle.create(10);

console.log(circle2)

console.log(circle2.__proto__)

console.log(circle2.radius)

— circle —
{ radius: 10 }
{ radius: 5,
create: [Function: create],
area: [Function: area],
circumference: [Function: circumference] }
10

this context, change it via call, bind

April 26, 2018javascriptthis, this context, this scopeadmin

Non Strict

In non-strict mode AND in standard JS environment, ‘this’ is an empty literal object.

1	console.log(this) // {}

Within a standalone function, global object is called global.

The

function tryIt() {

console.log(this) // global

console.log(this===global) // true

}

tryIt();

The only difference is that the ‘this’ in functions, is tied to global. In strict mode,
the ‘this’ in functions is undefined and not attached to anything.

// non-strict, so this is attached to global object

function f1() {

return this;

}

console.log(f1() === global); // true

Strict mode

In strict mode, the global object is called global. And ‘this’ is an empty literal object.
However, when you are inside a standalone function, the ‘this’ is undefined and not attached.

"use strict"

console.log(this) // {}

console.log(global) // global object data

function tryIt() {

console.log(this===undefined) // true

}

tryIt();

or…

function f2() {

'use strict'; // see strict mode

return this;

}

console.log(f2() === undefined); // true

Adding properties to global variable

function tryIt() {

console.log(this===global) // true

global.haha = "hehe"

}

tryIt();

console.log(global.haha) // hehe

all functions inherit call and apply from Function.prototype

// An object can be passed as the first argument to call or apply and this will be bound to it.

var obj = {a: 'Custom'};

// This property is set on the global object

global.a = 'Global';

function whatsThis() {

return this.a; // The value of this is dependent on how the function is called

}

console.log(whatsThis()); // global object's 'a' property

console.log(whatsThis.call(obj)); // obj's 'a' property

console.log(whatsThis.apply(obj));

Passing literals instead of objects

If the value passed as this is not an object, an attempt will be made to convert it to an object using the internal ToObject operation.

So if the value passed is a primitive like 7 or ‘foo’, it will be converted to an Object using the related constructor, so the primitive number 7 is converted to an object as if by new Number(7) and the string ‘foo’ to an object as if by new String(‘foo’), e.g.

function add(c, d) {

return this.a + this.b + c + d;

}

var o = {a: 1, b: 3};

console.log(add.call(o, 5, 7));

console.log(add.apply(o, [10, 20]));

function bar() {

console.log(this)

}

bar.call(7) // [Number: 7]

bar.call("foo") //[String: 'foo']

Bind

console.log("---- bind -----")

function f() {

return this.a;

}

// bind object to function f, pass to g

var g = f.bind({a:'qwerty'});

console.log(g());

// bind object to function f, pass to h

var h = f.bind({a:'yoo'});

console.log(h());

// however, can't bind twice

var x = g.bind({a:'hohoho'});

console.log(x()); // still qwerty

// literal object

// then attach properties to function definitions

var o = {

a: 1134,

functionF: f, // functionF definition is func f

functionG: g, // functionG definition is func f bound to {a:'qwerty'}

// so in func f's this.a, it will access from {a:'qwerty'} because they are bound

// and not access 'a' from this literal object o.

functionH: h // functionH definition is func f bound to {a:'yoo'}

// so in func f's this.a, it will access from {a:'yoo'} because they are bound

// and not access 'a' from this literal object o.

};

console.log(o.functionF()); // 1134

console.log(o.functionG()); // qwerty

console.log(o.functionH()); // yoo

Arrow functions

The idea is that arrow functions, when first created, set its this to its enclosing lexical context.
In other words, it retains the value of the this of its enclosing scope.

console.log(this) // {}

// when created, foo's this is already set

// we can't re-set anymore

var foo = (() => {

console.log("inside arrow function:")

console.log(this) // {}

// because this retains the value of the

// enclosing lexical context's this

// outside, it is {}, therefore, its also {} here

})

foo(); // call and see the output

Let’s try to manipulate it and see if we can change it.

We try to do this by creating a literal object. Then use various ways to bind that object to our foo function’s this.

1) Object calls function

In the literal object, we create a property and have its reference pointing to the arrow function.
Then we simply execute the arrow function via the object’s property like so:

// for example, let's try re-setting it different ways like so:

var obj = {

func: foo

};

// trying to set "this" by having object's property reference function

// then calling that function.

obj.func() // still uses enclosing lexical context.

// not calling object "obj"

output:
inside arrow function:
{}

As you can see, the “this” in the arrow function does not reference its calling object ‘obj’. It references ‘this’ in its enclosing context.

2) Next, let’s try to bind the “this” in the arrow function to its calling object via call.
We get the reference to the arrow function and execute “call” on it. We would think we can bind the obj in the parameter to foo’s this. However, that is not the case. The ‘this’ in the arrow function is still bound to its enclosing lexical context.

1 2	foo.call(obj) // still uses enclosing lexical context's "this". // not call bound literal object "obj"

3) This time, we’ll try using bind. We get the reference to the arrow function “foo”, call bind on it, and provide “obj” as the “this”. However, when we call foo, it does not work. It till uses its enclosing lexical context’s “this”.

// setting foo reference to where we bind the function to object literal 'obj'

foo = foo.bind(obj)

foo();

Therefore, no matter what, foo’s “this”, it is set to what it was when it was created.
Their “this” remains that of the enclosing lexical context.

Returning an arrow function, and evaluating ‘this’

So the point of this example is to show the difference between calling

1 2	var fn = obj.bar(); fn();

and

1 2	var fn2 = obj.bar; fn2();

..as both have very different results.

First, let’s define the environment.

We have a literal object obj which has a public property bar. bar is a function that returns
an arrow function that logs “this”.

In the bar function, I also log “this”. That way we can compare.

var obj = {

// function reference 'bar'

bar: function() {

console.log("--- obj calling function bar --- ")

console.log("√ bar's this is: ")

console.log(this)

var x = (() => {

console.log(" --- in arrow function --- ")

console.log(this)

});

// returns a reference to a function

return x;

}

}; // object literal

First, we simply execute the bar function. Because the calling scope is obj, the “this” will belong to literal object “obj”.

console.log("\n----- 1 -------\n")

// bar returns reference to a function, then called again

// to execute that function reference.

var x = obj.bar()()

Therefore, the logging of “this” will be:

√ bar’s this is:
{ bar: [Function: bar] }

We then execute what bar has returned, which is the arrow function. The output is:

— in arrow function —
{ bar: [Function: bar] }

This is because since the “this” in bar references the literal object “obj”, the arrow function’s this references the enclosing context, which is also “obj”.

In the next example, its the same concept, except we just separate the execution of bar and the arrow function.

console.log("\n------ 2 ---------\n")

// If you execute the function off of the "obj"

// and then store the function into fn, the execution of bar

// happens off the calling object "obj".

var fn = obj.bar();

console.log("\n------ 3 ---------\n")

fn();

// output:

// --- in arrow function ---

// { bar: [Function: bar] }

// as you can see, the this is the "obj" literal object

Finally, we simply reference the function provided by obj. It does not take into account
of obj. fn2 simply is a reference to the standalone function bar. Whereas before,
variable fn referenced an literal object’s execution of its function.

Thus, if you were call it as a standalone function, your calling scope is global.
Before, in the previous example, the calling scope is the literal object.

console.log("---- fn2 references a standalone function ----")

var fn2 = obj.bar;

// so when we do run it here, the arrow function bar will see:

fn2(); // that its enclosing scope is global

// the calling scope is global.

// where as in obj.bar(), the calling scope is the obj.

For arrow functions, the “this” will always be what it was set to initially.

As an Object Method

var o = {

prop: 37, // property "prop" is 37

// property f is function that returns "this" object's property "prop"

f: function() {

console.log(this) // { prop: 37, f: [Function: f] }

console.log(this.prop);

}

};

o.f();

// the this binding is only affected by the most immediate member reference

var o2 = {prop: 37};

function independent() {

console.log(this)

}

// append property f to the object o2 and assign it to independent.

o2.f = independent;

o2.f(); //{ prop: 37, f: [Function: independent] }

// It matters only that the function was invoked

// from the f member of o

// attach property b to object o2 to object

o2.b = {

g: independent,

prop: 42

};

o2.b.g(); //{ g: [Function: independent], prop: 42 }

// calls property g, which is func independent.

// thus, the 'this' will be attached to

// the object referenced by b. And not o2 itself.

this with a getter or setter

ref – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
ref – http://chineseruleof8.com/code/index.php/2018/01/15/getter-setter-js/