Iterating Array elements

ref – https://stackoverflow.com/questions/5349425/whats-the-fastest-way-to-loop-through-an-array-in-javascript

given array

filter

forEach

map

warning: map is for generating a new array, we manipulate each element, and the function generates a new array with those new changes.
Its purpose is not really for iterating an array. For completeness, it is included.

for loop

while loop

array sorting (js)

by default, when we use sort, it compares by string, which is what we don’t want.

Custom Sorting

Thus, we use custom sorting

do it like so…

you can also see the ordering of integers by subtracting them. positive means left number is larger. negative means left number is smaller.

get maximum

get 2nd max

get minimum

Sorting Objects

heap sort (priority queue)

code – https://github.com/redmacdev1988/binaryHeap

We have an array property in the constructor called heap. By definition, this array is contiguous memory, and can be indexed, starting from 0.

When we insert a node to the heap array, we allocate a new Node object in memory. Then the 0th index will contain a reference to that Node. When we insert the next node, another node will be allocated in memory, and we then have the 1st index reference that node.

Every node created will be inserted this way.

Thus, the latest current node will always have index heap.length – 1.

The heap (max heap example)

A max heap has the rule that the parent node must always have a higher priority than its child.

Each node is placed like a tree, however, take caution that there is no left/right references. Everything is accessed via index of the array. If we do want to access children of the node, its children will be indexed like so:

for the left child: 2x + 1
for the right child: 2x + 2

Inserting a node with a larger priority

Let’s say we insert a node with a higher priority than its parent. In the example below, we try to insert 12. Obviously, 12 is larger than 8, and thus, we need to readjust.

First, we check to see if its parent (index 1) is valid. It is, so we have the array reference that WAS pointing to the parent, re-point to the the new node.

Then, have the array reference (with index 3) that was originally pointing to the new node, point to the parent.

Therefore, as shown above, we come to the next step.

Now, we recalculate the current node index and the parent node index. We want to move one level up so we can calculate index like so:

The easiest way for us to move up the tree is to simply have the current index take on the parent index. Then, recalculate the parent index via:

Math.ceil((currentNodeIdx-2)/2)

That is how we get indexes: 0 as the parent, then 1 as the current.
Hence we moved from index parent: 1, current:3 up to parent: 0, current: 3.

So now we just repeat what we did above.

Is the parent node valid? Yes.
Is the priority of the current node larger than the parent? Yes.

We then have the parent index’s reference point to the larger valued node. And have the current indexed element reference the smaller node.
We then reshuffle it for ease of viewing.

So now we recalculate the indexes again. We have our current index = parent index, which is 0.
We then recalculate parent index, which is:

Math.ceil( (0-2) / 2) = -1

Thus, when we try to access node for index -1, it does not exist, so we exit the loop and we’re done.

insertion code

Heap Removal O( log n )

1) Removal means we pop the root node and process it.
2) Then we get the last element and copy it over to the root node.
3) Use top bottom to push it down if needed.

First, we copy the last value in the tree ( last element of the array ) onto the root. Then remove the last element, and decrease the heap size counter.

From there we recursively push the root value down the tree so that it satisfies the heap property of where key(parent) >= key(child) if its max heap, and <= if its min heap. We decide on which child node to go down by comparing the two child nodes. We switch the parent value with the largest of the 2 child nodes.

Full Source Code

Tests

Returning inside of a callback

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

async iterator and generators

ref – https://jakearchibald.com/2017/async-iterators-and-generators/

Standard fetch, and read

regular iterator

async iterator

Generator

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

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

code version

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.

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.

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

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.

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

Yield delegator

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

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

return

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.

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.

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

Generator calling other generators

Receive return value

Distinction between yield and yield*: with yield expressions, the result is whatever is sent in with the subsequent next(..), but with the yield* expression, it receives its result only from the delegated generator’s return value.

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.

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


output:

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

Divide and Conquer concept


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

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:

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

The function has to be wrapped in brackets:

without the brackets, it is a function declaration

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.

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:

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.

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

javascript

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:

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.

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

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.

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.

implementing the feedTheKraken

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://shanghaiseagull.com/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.

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.

Fingerprint2

Make sure you include this in your script area

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.

Using axios to send files to node server

Make sure you include this in your script area

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

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.

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

Create a function called processImagesFromClientPromise and implement it like so.

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

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.

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.

used like so:

Function setup

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:

  1. processImagesFromClient
  2. readyKrakenPromises
  3. runAllKrakenPromises
  4. 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.

Hence, let’s use Promises to fix it.

Promises version

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

…with promises, it looks much prettier:

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.

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:

used like so:

app.js full source

index.html full source

Automatic type conversion, implicit data types conversion

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

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.

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:

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.

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

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

Boolean

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.

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:

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:

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:

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

This is what we want instead:

like so:

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

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:

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: