All posts by admin

classes (js)

April 6, 2018javascriptadmin

https://reinteractive.com/posts/235-es6-classes-and-javascript-prototypes
https://levelup.gitconnected.com/using-classes-in-javascript-e677d248bb6e?gi=5ba413dea026

Why do we need classes?

Classes are simply templates used to create new objects. The most important thing to remember: Classes are just normal JavaScript functions and could be completely replicated without using the class syntax. It is special syntactic sugar added in ES6 to make it easier to declare and inherit complex objects.

We create a class like so:

class CircularList {

constructor(listName) {

// uses scope variables for privacy

var _name = listName; // private variable

// public function 'setName'

// sets private variable _name

this.setName = function(listName) { _name = listName;}

// public function 'getName'

// gets private variable _name

this.getName = function() { return _name; }

} // end of constructor

// function definitions

}

We declare scoped variable in constructor for privacy.

So, a class like this:

class Example {

static iex() {}

ex() {}

}

translates to this:

function Example() {}

Example.prototype.ex = function() {}

Example.iex = function() {}

Constructor

There can be only one special method with the name “constructor” in a class. Having more than one occurrence of a constructor method in a class will throw a SyntaxError error.

A constructor can use the super keyword to call the constructor of a parent class.

If you do not specify a constructor method, a default constructor is used.

Then we implement getter/setter functions for it and attach them to the this object.
Whenever we attach functionality and property to this, its public.

We can then declare other functions that use private properties such as _name.

For example, if we want to implement private removeLastNode that accesses these private properties/functions, we do so in the constructor because removeLastNode can access _name, _head, _tail by scope. removeLastNode is not visible to the outside.

class CircularList {

constructor(listName) {

// uses scope variables for privacy

var _name = listName; // private variable

// public function 'setName'

// sets private variable _name

this.setName = function(listName) { _name = listName;}

// public function 'getName'

// gets private variable _name

this.getName = function() { return _name; }

let removeLastNode = (data, ref) => {

console.log("---removeLastNode---")

if (dataMatches(data.toUpperCase(), ref.data.toUpperCase())) {

console.log("data matches!");

if (_head === _tail) {

console.log("head and tail are same")

_head.prev = null;

_head.next = null;

_head = null;

_tail.prev = null;

_tail.next = null;

_tail = null;

ref.clean();

return true;

}

return false;

}

} // end of constructor

// function definitions

}

public functions that uses private properties/functionalities

Now, say we want to implement remove function that wants to access our private function and private properties, we simply implement the public function inside of the constructor, and access those private functionality and properties via scoping.

Notice our remove function is public because it is attached to this.
It accesses private properties such as _head due to scoping.
It accesses private functions such as removeNodeAtHead(…) due to scoping.

// public function that uses private

this.remove = function(data){

if (this.isEmpty()) {

console.log("Remove: Nothing to remove because list is empty");

return;

}

try {

let traversal = _head;

if (removeLastNode(data, traversal)) { return;}

do {

if (dataMatches(data.toUpperCase(), traversal.data.toUpperCase())) {

if (removeNodeAtHead(traversal)) return;

if (removeNodeAtTail(traversal)) return;

if (removeNodeInBetween(traversal)) return;

}

traversal = traversal.next;

} while (traversal != _head);

} catch(error) {

console.log("Warning: "+ error);

}

functions

functions are attached to the this object, and are public.
If the functions want to use use private properties, they must be in the same scope as the private properties/functionalities, which are in the constructor as shown previously.

In this case, if the functions are outside of the constructor, they use private variables through get/set functions that are exposed on the this object.

class CircularList {

constructor(listName) {

...

}

setCurrentToHead() {

this.setNow(this.getHead());

return this.getNow();

}

step(steps, step_ENUM) {

if(!isNaN(steps) && steps > 0) {

do {

this.setNow((step_ENUM === StepEnum.NEXT) ? this.getNow().next : this.getNow().prev);

steps--;

} while (steps > 0);

}

isEmpty() {

return (this.getHead() == null && this.getTail() == null);

}

print() {

if (this.getHead() === null) { console.log("-- LIST IS EMPTY --"); return; }

var traversal = this.getHead();

do {

traversal.display();

traversal = traversal.next;

} while (traversal !== this.getHead() && traversal != null);

}

functions attached to this are added to the prototype

Take this example, class Test.

Any functions/properties added to Test.prototype is shared among all instances.
Any functions/properties added outside of the constructor function is added to Test.prototype and is hared among all instances.
Any functions/properties added inside of the constructor belongs to the instance itself.

class Test {

// for construction

constructor(newName) {

var name = newName;

// added to the object itself

this.print2 = function() {

console.log("print2()");

}

// added to the prototype

print() {

console.log("print()");

}

// custom prototype function

Test.prototype.haha = function() {

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

}

let a = new Test("ricky test");

you can check like so:

1	console.log(a.__proto__.hasOwnProperty('print')); // true

you can also simply input the code into Firebug and then simply log a.__proto__

you will see that the prototype object will have haha, print, and constructor.
The object itself will have print2.

Thus the methods is being shared by all instances of Test.
Adding methods on the prototypes of objects in JavaScript is an efficient way
to conserve memory (as opposed to copying the methods on each object).

Hi-Jacking these functions on the fly

Prototypes are just objects that can be changed at runtime

a.__proto__.print = function() {

console.log("HAHA!");

}

a.print(); // YIKES! :(

b.print(); // DOUBLE YIKES! :(

Changing the method on the prototype of ‘a’ changes the result on ‘b’ as well.

This is because they share the same prototype and we are changing that object.

Again, prototypes are just objects that can be changed at runtime.

1 2	let c = new CircularList("rihanna"); c.print();

Oops, there is no going back, we have already modified the prototype for all instances of CircularList, now and in the future.

Remember, classes in JavaScript are not a blueprint like in other languages.
They just define objects that can be modified at will in runtime.

TO RECAP:

class Car {

constructor(name) {

// - this is the newly created object

// - anything assigned here will be assigned

// to the object directly

this.kind = 'Car';

this.name = name;

}

// - class methods are assigned to the prototype of

// the newly created object

// - this prototype object will be shared by all instances

printName() {

console.log('this.name');

}

Inheritance

Continuing from our Test class example…

class Test {

// for construction

constructor(newName) {

var name = newName;

// added to the object itself

this.print2 = function() {

console.log("print2()");

}

// added to the prototype

print() {

console.log("print()");

}

// custom prototype function

Test.prototype.haha = function() {

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

}

And OralText to extend from Text:

class OralTest extends Test {

constructor(oralName) {

console.log("OralTest - constructor");

super(oralName);

}

this is what it looks like diagram form:

So we start off with class Test. We declare function print2 inside the constructor, so its a property of the class. Every instance created from this class will have its own print2.

We then declare function print within the class, but outside of the constructor. print will be included in Test’s prototype object, which is simply represented as {}. This is because it derives (has __proto__ referencing) the default Object Prototype Object. There is no class name it derives from so its empty. Then, we directly attach the function haha to Test’s prototype object. Also, constructor is the special function that all instances of this class need to call before instantiation. Thus, that is why Test Prototype Object has haha, print, and constructor.

> Test.prototype

{haha: ƒ, constructor: ƒ, print: ƒ}
haha: ƒ ()
constructor: class Test
print ƒ print()
__proto__:Object

Then we have OralText, which extends from Test. It copies over the constructor properties, hence we get print2.

More importantly, this Test{} is independent from Test’s prototype object. OralText.prototype has a constructor property, which points back to OralTest. Thus, all instances created from OralTest will have OralTest as its type.

Another important thing is that OralTest.prototype is an object instantiated from Test.prototype. That’s why it has a __proto__ pointing to Test.prototype. This is so that we have a hierarchy in case instances of OralTest wants to access its parent’s prototype.

> OralTest.prototype

Test {constructor: ƒ}
constructor: class OralTest
__proto__: Object

As you can see OralTest’s prototype has a constructor pointing to OralTest (itself). This is so that all instances of OralTest will have OralTest as the type.
We also wee that the name of our prototype object is called Test This is because we extend from Test. Its __proto__ is referencing an Object. Let’s analyze this Object:

OralTest.prototype.__proto__

{haha: ƒ, constructor: ƒ, print: ƒ}
haha: ƒ ()
constructor: class Test
print: ƒ print()
__proto__: Object

So as we see, its the Test’s Prototype object with the haha and print functions.

So now
OralFinal.prototype will give a literal object with the name OralTest. Because our OralFinal extends from OralTest. You’ll see the special constructor function.

We are now at the lowest level of the hierarchy. We want to go up the hierarchy. So we follow the __proto__ path. You’ll see its __proto__ is that of Test. This is because OralFinal’s Prototype Object OralTest, is an object instantiated from Test.

OralTest {constructor: ƒ}
constructor :class OralFinal
__proto__: Test

If you go up one more __proto__, aka __proto__ of Test, you’ll see the no name Prototype Object with the functions haha, print, constructor.

Then if you go up one more, you’ll reach the default object Prototype object. That is the highest point.

Classes are NOT hoisted
Classes are first-class citizens
Classes are executed in strict mode

Another Example

Given class PersonCl:

class PersonCl {

constructor(fullname, birthYear) {

this._fullName = fullName;

this.birthYear = birthYear;

}

calcAge() {...}

get age() { return 2037 - this.birthYear; }

set fullName(name) { this._fullName = name; }

get fullName() { return this._fullName; }

static hey() { console.log('hey there'); }

}

class StudentCl extends PersonC1 {

constructor(fName, birthYear, course) {

super(fullName, birthYear);

this.course = course;

}

// this.fullName() // calls parent's method

// this.course. // calls own property

// this.calcAge() // calls parent's method

}

Maps WeakMaps, Sets, WeakSets

April 4, 2018Uncategorizedadmin

https://javascript.info/map-set-weakmap-weakset

Map is a collection of keyed data items, just like an Object. But the main difference is that Map allows keys of any type.

The major difference of Map from JavaScript Object is; objects accept only String or Symbol key, but Map accepts anything.

let map = new Map();

map.set('1', 'str1'); // a string key

map.set(1, 'num1'); // a numeric key

map.set(true, 'bool1'); // a boolean key

// remember the regular Object? it would convert keys to string

// Map keeps the type, so these two are different:

alert( map.get(1) ); // 'num1'

alert( map.get('1') ); // 'str1'

alert( map.size ); // 3

Map can also use objects as keys.

For instance:

let john = { name: "John" };

// for every user, let's store his visits count

let visitsCountMap = new Map();

// john is the key for the map

visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123

Iteration over Map
For looping over a map, there are 3 methods:

map.keys() – returns an iterable for keys,
map.values() – returns an iterable for values,
map.entries() – returns an iterable for entries [key, value], it’s used by default in for..of.

For instance:

let recipeMap = new Map([

['cucumber', 500],

['tomatoes', 350],

['onion', 50]

]);

// iterate over keys (vegetables)

for (let vegetable of recipeMap.keys()) {

alert(vegetable); // cucumber, tomateos, onion

}

// iterate over values (amounts)

for (let amount of recipeMap.values()) {

alert(amount); // 500, 350, 50

}

// iterate over [key, value] entries

for (let entry of recipeMap) { // the same as of recipeMap.entries()

alert(entry); // cucumber,500 (and so on)

}

https://www.mattzeunert.com/2017/01/31/weak-maps.html

todo

Set

A Set is a collection of values, where each value may occur only once.

Its main methods are:

new Set(iterable) – creates the set, optionally from an array of values (any iterable will do).
set.add(value) – adds a value, returns the set itself.
set.delete(value) – removes the value, returns true if value existed at the moment of the call, otherwise false.
set.has(value) – returns true if the value exists in the set, otherwise false.
set.clear() – removes everything from the set.
set.size – is the elements count.
For example, we have visitors coming, and we’d like to remember everyone. But repeated visits should not lead to duplicates. A visitor must be “counted” only once.

Set is just the right thing for that:

let set = new Set();

let john = { name: "John" };

let pete = { name: "Pete" };

let mary = { name: "Mary" };

// visits, some users come multiple times

set.add(john);

set.add(pete);

set.add(mary);

set.add(john);

set.add(mary);

// set keeps only unique values

alert( set.size ); // 3

for (let user of set) {

alert(user.name); // John (then Pete and Mary)

}

Private properties in es6 classes (js)

April 3, 2018javascriptadmin

references:

https://stackoverflow.com/questions/22156326/private-properties-in-javascript-es6-classes
https://www.javascriptjanuary.com/blog/es6-classes
https://ttmm.io/tech/private-variables-in-javascript/
https://esdiscuss.org/topic/es6-problem-with-private-name-objects-syntax

ECMAScript 2015 (aka ES6) introduced classes to JavaScript.

Older versions of the language would allow you to define an object type directly using function constructors, but didn’t truly support object-oriented inheritance the way developers are used to.

Part of this is due to the fact that JavaScript is a prototypal language, not an object-oriented language. Or at least older versions weren’t.

ES6 gave us classes with proper constructors, methods, properties, and inheritance.

You could define a real class in ES6 and reuse it the same way you would a type in any other language:

class Rectangle {

constructor(height, width) {

this.height = height;

this.width = width;

}

The biggest unfortunate element of this class definition, though, is that there are no privacy modifiers.

The constructor, methods, and properties of a JS class are all public by default.

There’s no nature of a protected method or a private property. At all.

Module Privacy

let name = null;

class Client {

constructor(newName) {

name = newName

}

toString() {

return name;

}

The name variable inside this module is completely inaccessible to any code outside the module, yet it allows our class to keep track of this name property directly. This is exactly what we want, right?

Nope.

Since it’s outside the class definition, this variable is treated as a static property. Yes, it’s private to our module, but there’s only one copy available. If we make multiple instances of our Client above, we’ll overwrite name each time; the last instantiation will win and define the name used by all of the instances.

Hack

We create a static literal object called container. When an instance of Client is created, we give the instance an id, then use the instance id
to create a key in the container object. Its corresponding value would be an empty object where we store the name variable.

Thus, each instance at least can keep track of its own properties and usage.

let container = {}

class Client {

constructor(newName) {

this._id = Math.random().toString(36).substr(2, 9)

container[this._id] = {}

container[this._id].name = newName

}

toString() {

return container[this._id].name

}

Not attaching the new properties to the object, but keeping them inside a class constructor

class CircularList {

constructor(listName) {

var _name = listName // _name is PRIVATE

// set _name through setName

this.setName = function(listName) { _name = listName;}

// get _name through getName

this.getName = function() { return _name; }

// private member variables

var _head = null;

this.setHead = function(newHead) {_head = newHead;}

this.getHead = function() {return _head;}

var _tail = null;

this.setTail = function(newTail) {_tail = newTail;}

this.getTail = function() {return _tail;}

var _now = null;

this.setNow = function(newNow) {_now=newNow;}

this.getNow = function() {return _now;}

console.log("Finished constructing CircularList")

} // constructor

isEmpty() {

return (this.getHead() == null && this.getTail() == null);

}

print() {

if (this.getHead() === null) { console.log("-- LIST IS EMPTY --"); return; }

var traversal = this.getHead();

do {

traversal.display();

traversal = traversal.next;

} while (traversal !== this.getHead() && traversal != null);

}

...

}

Hiding with Weak Maps

https://javascript.info/map-set-weakmap-weakset
https://stackoverflow.com/questions/22156326/private-properties-in-javascript-es6-classes

WeakMaps associate data with Objects (here, instances) in such a way that it can only be accessed using that WeakMap. So, we use the scoped variables method to create a private WeakMap, then use that WeakMap to retrieve private data associated with this. This is faster than the scoped variables method because all your instances can share a single WeakMap, so you don’t need to recreate methods just to make them access their own WeakMaps.

// Any variables declared inside a block, is scoped to the nearest function.

// create closure with IIFE, thus all variables declared are private to the

// nearest function

//The first difference from Map is that its keys must be objects, not primitive values:

let Person = (function () {

console.log(" --- scope of IIFE ---")

// private to this scope

let privateProps = new WeakMap();

let jKey = {name:"John"}

class Person {

constructor(name) {

console.log("constructing Person....")

this.name = name; // this is public

// sets instance 'this' to property value

privateProps.set(this, {age: 20, SSN:"NA"}); // this is private

privateProps.set(jKey, "testing 1 2 3");

}

greet() {

console.log("calling greet function")

console.log(privateProps.has(jKey))

console.log(privateProps.has(this))

console.log(privateProps)

// Here we can access both name and age

console.log(`name: ${this.name}, age: ${privateProps.get(this).age}`);

console.log(`SSN - ${privateProps.get(this).SSN}`);

console.log(privateProps.get(jKey));

}

console.log(" returning Person class");

return Person; // returns class Person to outside variable Person

})();

let rickyPerson = new Person("ricky");

rickyPerson.greet();

WeakMap, another way

https://chrisrng.svbtle.com/using-weakmap-for-private-properties

WeakMap Technique
Traditionally, the way to have private properties in Javascript is to either prefix your variables or to encapsulate in a closure. Both of these methods do work, however they are either not restrictive enough (prefixes) or too restrictive (closures).

A WeakMap is similar to a HashMap but it allows objects as keys as well as not having a strong reference to its values (that’s why it’s called weak).

In the example below, we pass in an empty object into the WeakMap to hold all of the private properties of the class Wizard. To store the private properties, we also pass in the reference to the unique this object of the instance of the class Wizard as a key to the WeakMap.

const Wizard = (function() {

const _private = new WeakMap();

const internal = (key) => {

// Initialize if not created

if (!_private.has(key)) {

_private.set(key, {});

}

// Return private properties object

return _private.get(key);

};

class Wizard {

constructor(name, house) {

internal(this).name = name;

internal(this).house = house;

}

getName() {

return internal(this).name;

}

setName(name) {

internal(this).name = name;

}

getHouse() {

return internal(this).house;

}

setHouse(house) {

internal(this).house = house;

}

return Wizard;

}());

When we actually run this code, you can see on the second line that when we try to access the property _private the class returned does not have reference to it because of the IIFE. However internal class methods can still change the values under _private. So you can only change the properties within the Class by using its accessor methods such as get and set. In doing so, keeping the namespace hidden from all functions except members of the class effectively implements private properties.

const harrypotter = new Wizard('Harry Potter', 'Gryffindor');

console.log(harrypotter); // Wizard {}

console.log(harrypotter.getName()); // "Harry Potter"

harrypotter.setName('Arry Pottr');

console.log(harrypotter.getName()); // "Arry Pottr"

Break Down

ref – https://stackoverflow.com/questions/22156326/private-properties-in-javascript-es6-classes

The only truly private data in JavaScript is still scoped variables. You can’t have private properties in the sense of properties accessed internally the same way as public properties, but you can use scoped variables to store private data.

Scoped variables

The approach here is to use the scope of the constructor function, which is private, to store private data.

For methods to have access to this private data they must be created within the constructor as well, meaning you’re recreating them with every instance.

This is a performance and memory penalty, but some believe the penalty is acceptable. The penalty can be avoided for methods that do not need access to private data by adding them to the prototype as usual.

Example:

function Person(name) {

let age = 20; // this is private

this.name = name; // this is public

this.greet = function () {

// here we can access both name and age

console.log(`name: ${this.name}, age: ${age}`);

};

}

let joe = new Person('Joe');

joe.greet();

// here we can access name but not age

Scoped WeakMap

A WeakMap can be used to avoid the previous approach’s performance and memory penalty.

Example:

let Person = (function () {

let privateProps = new WeakMap();

class Person {

constructor(name) {

this.name = name; // this is public

privateProps.set(this, {age: 20}); // this is private

}

greet() {

// Here we can access both name and age

console.log(`name: ${this.name}, age: ${privateProps.get(this).age}`);

}

return Person;

})();

let joe = new Person('Joe');

joe.greet();

// here we can access joe's name but not age

This example uses an Object to use one WeakMap for multiple private properties; you could also use multiple WeakMaps and use them like age.set(this, 20), or write a small wrapper and use it another way, like privateProps.set(this, ‘age’, 0).

The privacy of this approach could theoretically be breached by tampering with the global WeakMap object

Say you’re coding up a JS app and you import another file written by Fred for usage.
Then in your current file, you create your class and then use WeakMap to store your private variables.

index.js

var b64Coder = require("./base64Coder");

const privateProp1 = new WeakMap();

const privateProp2 = new WeakMap();

class SomeClass {

constructor() {

console.log('---- creating SomeClass instance ----');

privateProp1.set(this, "I am Private1");

privateProp2.set(this, "I am Private2");

this.publicVar = "I am public";

this.publicMethod = () => {

console.log(privateProp1.get(this), privateProp2.get(this))

};

}

printPrivate() {

console.log(privateProp1.get(this));

}

output:
I am Private1 I am Private2

However, say Fred is a bit naughty and decide to overwrite the global object Weakmap like so:

base64Coder.js

// boom! tampers with global WeakMap' prototype object. yikes!

var oldSet = WeakMap.prototype.set;

WeakMap.prototype.set = function(key, value) {

// Fred's evil implementation

// Tampers with 'this', 'key', and 'value'

return oldSet.call(this, key, value);

};

function base64Coder() {

...

}

So Fred decides to repoint the set reference in Weakmap’s prototype to his own custom function. But before doing so, in order not to lose the original function, he’ll retain it with a reference called oldSet.

He then has access to your key/values and can potentially change them, or even store them somewhere else. When he’s done, he’ll just return the original function, pointed to by referenceoldSet.

That said, all JavaScript can be broken by mangled globals. Our code is already built on the assumption that this isn’t happening.

Solution to fix this

In order to remedy this, you first declare references to the original set/get functions on the Weakmap prototype.
This ensures you have access to them. Now, when the tamperer decides to inject their own function, what they’re doing is re-pointing Weakmap.prototype.set to their own evil function as shown above. Thus, you don’t have to worry about that because you have already set your own reference to the correct original functions like so:

const {set: WMSet, get: WMGet} = WeakMap.prototype;

var b64Coder = require("./base64Coder");

var CryptoJS = require('crypto-js');

var SECRET_KEY = 'HOHOHO';

// other code

// now, when we use it, we won't be affected

const privateProp1 = new WeakMap();

const privateProp2 = new WeakMap();

class SomeClass {

constructor() {

console.log('constructing SomeClass instance...');

// using the original set function, not affected by any tampering

WMSet.call(privateProp1, this, "I am Private1");

WMSet.call(privateProp2, this, "I am Private2");

this.publicVar = "I am public";

this.publicMethod = () => {

console.log(WMGet.call(privateProp1, this), WMGet.call(privateProp2, this))

};

}

printPrivate() {

console.log(WMGet.call(privateProp1, this));

}

The way how it used is like so. The first object is the object you’re using to execute the function call. The next parameters get matched up with the function parmaeters.

var person = {

fullName: function(city, country) {

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

}

var person1 = {

firstName:"John",

lastName: "Doe"

}

person.fullName.call(person1, "Oslo", "Norway");

Just make sure you do it at the top of your file before you import/require the questioning code components.

Half Answer – Scoped Symbols

A Symbol is a type of primitive value that can serve as a property name. You can use the scoped variable method to create a private Symbol, then store private data at this[mySymbol].

The privacy of this method can be breached using Object.getOwnPropertySymbols, but is somewhat awkward to do.

Example:

let Person = (function () {

let ageKey = Symbol();

class Person {

constructor(name) {

this.name = name; // this is public

this[ageKey] = 20; // this is intended to be private

}

greet() {

// Here we can access both name and age

console.log(`name: ${this.name}, age: ${this[ageKey]}`);

}

return Person;

})();

let joe = new Person('Joe');

joe.greet();

// Here we can access joe's name and, with a little effort, age. ageKey is

// not in scope, but we can obtain it by listing all Symbol properties on

// joe with `Object.getOwnPropertySymbols(joe)`.

For example, this is how you would expose it:

let Weather = (function () {

var nameKey = Symbol('nameKey');

class Weather {

constructor() {

this[nameKey] = 'SECRET! Do not expose!';

...

}

...

}

let w = new Weather(WEATHER_API, WEATHER_LOCATION_STRING, OPEN_WEATHER_MAP_KEY);

w.fetchWeatherData();

w.test();

let result = Object.getOwnPropertySymbols(w);

console.log('result', result); // result (1) [Symbol(nameKey)]

let res = w[result[0]];

console.log(res); // exposed!

Half-Answer: Underscores

The old default, just use a public property with an underscore prefix. Though not a private property in any way, this convention is prevalent enough that it does a good job communicating that readers should treat the property as private, which often gets the job done. In exchange for this lapse, we get an approach that’s easier to read, easier to type, and faster.

Example:

class Person {

constructor(name) {

this.name = name; // this is public

this._age = 20; // this is intended to be private

}

greet() {

// Here we can access both name and age

console.log(`name: ${this.name}, age: ${this._age}`);

}

let joe = new Person('Joe');

joe.greet();

// Here we can access both joe's name and age. But we know we aren't

// supposed to access his age, which just might stop us.

Conclusion

As of ES2017, there's still no perfect way to do private properties. Various approaches have pros and cons. Scoped variables are truly private; scoped WeakMaps are very private and more practical than scoped variables; scoped Symbols are reasonably private and reasonably practical; underscores are often private enough and very practical.

Decoupling JS apps using publisher subscriber pattern

March 29, 2018javascriptadmin

http://dev.housetrip.com/2014/09/15/decoupling-javascript-apps-using-pub-sub-pattern/
https://gist.github.com/fatihacet/1290216

The problem

Let me use one of the most common features in modern web applications to introduce the problem: sending notification emails.

Let’s say we’re building an e-commerce site and we’d like to send a notification email to the customer when they make a purchase. A simple solution, and probably the most common one, could be something like this:

var Order = function(params) {

this.params = params;

};

Order.prototype = {

save: function() {

// save order

console.log("Order saved");

this.sendEmail();

sendEmail: function() {

var mailer = new Mailer();

mailer.sendPurchaseEmail(this.params);

}

};

var Mailer = function() {};

Mailer.prototype = {

sendPurchaseEmail: function(params) {

console.log("Email sent to " + params.userEmail);

}

};

> var order = new Order({ userEmail: 'john@gmail.com' })

> order.save();

> "Order saved"

> "Email sent to john@gmail.com"

Notice how in sendEmail definition, it creates an instance of Mailer and calls function “sendPurchaseEmail”.
These two objects now have tight coupling because if you were to change sendPurchaseEmail to another name, you’ll have to do the same for sendEmail in Order. In other words, if you were to change the # of parameters, or the interface of the sendPurchaseEmail function, you’ll have to repeat those steps for sendEmail in Order.

Usually you know two components are coupled when a change to one requires a change in the other one, and that’s the case. If we want to change the name of the sendPurchaseEmail method or their params, we’ll have to change Order implementation as well. In a large application this bad practice means having a tightly coupled application where a small change can easily end up in a waterfall of changes.

What we want is Loose Coupling. Loose coupling is when you change the interface, but do not have to worry about changing it in all the other places that you have used it.

What is the Publish Subscribe Pattern?

In software architecture, publish–subscribe is a messaging pattern where senders of messages, called publishers, do not program the messages to be sent directly to specific receivers, called subscribers. Instead, published messages are characterized into classes, without knowledge of what, if any, subscribers there may be. Similarly, subscribers express interest in one or more classes, and only receive messages that are of interest, without knowledge of what, if any, publishers there are.

This pattern uses an event system that sits between the objects wishing to receive notifications (subscribers) and the objects firing the events (the publishers). This event system allows code to define application specific events which can pass arguments containing values needed by the subscriber. The goal is to avoid dependencies between the subscriber and the publisher.

Implementation

First, we declare a global literal object. This object takes will have the functionalities of publishing and subscribing.

1 2	// global object of empty literal object var pubsub = {};

It will be passed into an IIFE so that it has private block scope for its data structures.

(function(q){

// has block scope.

// all private data structures and properties will not be accessible by others

// public properties exposes what it allows

}(pubsub)); // we pass parameter pubsub into the IIFE

then we create the data structures and variables needed for the implementation.

Say there’s a couple of topics: Badminton, Boxing, and Swimming.
First, we use the concept of key: value in order to keep track of them.
The key is the activity name “Badminton”, “Boxing”, “Swimming”.
We have a topics literal object that will store these keys.

TOPICS:

{
“Badminton” : [subscriber1, subscriber2, subscriber3….subscriber n]
“Boxing” : [{token: abcdefg, func : callback}… {token: 38fje8, func : callback}],
“Swimming” : [{token: a1b2c3d4, func : callback}… {token: 0fjdue7, func : callback}],
…
etc
}

Then for each key, we will have a literal object as the value.

That literal object has 2 properties:
– token
– func

token is simply an uid
func is the callback provided by the subscribers. Essentially, whenever something happens
and we want to publish something, we call this func, then pass in some data if needed.

“Badminton” : {token: a4456iol, func : callback}

Hence for each topic, we have an array of objects. Each of these objects have token and func properties. These objects represent
external objects that has subscribed to us and want to receive notifications when something happens.

Therefore, we create a public function property called subscribe. Its first parameter is topic, which is the topic that the external object
wants to subscribe to. For example, badminton, swimming…etc. The func, is the callback that we can use to notify that external object.

q.subscribe = function(topic, func) {

...

}

We must check to see if the topic exist. If there’s only data for say Badminton, and we subscribe to “swimming”, our pubsub system
will create an key/value entry for swimming and then create an empty array. This readies future external objects that wants to
subscribe to the topic “swimming”.

Then, we simply use a increment to simulate id generator. It is assigned to the subscriber. That way, each subscriber has an unique id to identify itself.

q.subscribe = function(topic, func) {

if (!topics[topic]) {

topics[topic] = [];

}

var token = (++subUid).toString();

...

}

Finally, we create an object to store the token and the callback for the subscriber. We store this object into the array that corresponds to the topic that the subscriber wanted.

When we publish, we call execute this callback so that its owner will receive it.

q.subscribe = function(topic, func) {

if (!topics[topic]) {

topics[topic] = [];

}

var token = (++subUid).toString();

// INSERT A SUBSCRIBER

topics[topic].push({

token: token, // identifier for the subscriber

func: func // callback of the subscriber

});

// return the key used for this object that's stored in in topics

return token;

};

Publish

So we have all these subscribers stored for different topics and now we’re ready to publish!

We create a public property for the pubsub. The first parameter topic represents the topic we want to publish for.
args is any published data you want to pass to the objects stored in arrays of different topics (subscribers).

q.publish = function(topic, args) {

};

First we check to see if there are any subscribers for the topic at hand. If say we have 3 subscribers for “Badminton”, and we try to publish something for “swimming”, we just spit out an error message because no such topic exist.

{
“Badminton” : [subscriber1, subscriber2, subscriber3]
}

q.publish = function(topic, args) {

if (!topics[topic]) {

console.log("Error, object with this topic NOT FOUND")

return false;

}

...

}

Then we use a setTimeout to simulate internet activity.
First we get the array of subscribers by accessing the value by using topic as the index.

In an associative array, giving the topic key will give us the object value (array of subscribers).

Then we simply get the length of the subscribers.

By using the length, we use it to access the array of subscribers by using index. Remember, using strings in an associative array
will give you the object value associated with it.

By using numeric index, you’ll simply be giving the object value by index.

Hence after getting the length, we simply go through the subscriber array by looping through its index from length to 0, and
calling each subscriber’s callback. We can pass in whatever data we like for the publish.

q.publish = function(topic, args) {

if (!topics[topic]) {

console.log("Error, object with this topic NOT FOUND")

return false;

}

setTimeout(function() {

var arrayOfSubscribers = topics[topic];

// get # of subscribers

var len = arrayOfSubscribers ? arrayOfSubscribers.length : 0;

// go through # of subscribers and execute their callback

while (len--) {

arrayOfSubscribers[len].func(topic, args, arrayOfSubscribers[len].token);

}

}, 500);

return true;

};

Using the pubsub object

pubsub.subscribe("JS", function(topic, args, token) {

console.log("Ricky received " + topic + " content");

console.log("The data is: " + args);

console.log("Your token is: " + token);

});

pubsub.subscribe("JS", function(topic, args, token) {

console.log("David received JS data: " + args);

console.log("Your token is: " + token);

});

pubsub.subscribe("JS", function(topic, args) {

console.log("EPAM has been notified of: " + topic);

console.log("It is now heavily reading: " + args);

});

pubsub.subscribe("JS", function() {

console.log("Peter Ma has been notified");

});

pubsub.publish("JS", "Design Pattern of es6 JS");

Unsubscribe

First, we go through all the topics available in our topics associative array.
For each of these topics, there is a list of subscribers.

For each element of the array subscribers, we check to see if the subscriber has the token.
If so, we remove that subscriber from the subscribers’ array.

q.unsubscribe = function(token) {

console.log(`unsubscribing subscriber with uid of ${token}`)

for (let m in topics) {

console.log(`For topic ${m}, let us check for any subscribers with token ${token}`)

let subscribers = topics[m];

if (subscribers) {

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

if (subscribers[i].token === token) {

console.log(`HO HO! FOUND A SUBSCRIBER with token ${token}. Let us remove it!`)

subscribers.splice(i, 1); // remove 1 element at index i

return token;

}

return 0

};

FULL SOURCE

100

101

102

103

104

105

106

107

108

109

// global object of empty literal object

var pubsub = {};

// block scope created by IIFE.

// it takes in a parameter q

(function(q){

// private literal object

var topics = {};

// private id

var subUid = -1;

// Different objects will want to subscribe and receive notifications.

// 1) the objects will call subscribe. It will then pass in the topic

// to which it wants to subscribe

// It will pass in a callback to receive the data

q.subscribe = function(topic, func) {

// given key 'topic', if there is no value, we initialize empty array

// for that key

if (!topics[topic]) {

topics[topic] = [];

}

// a very simple id generator

var token = (++subUid).toString();

// INSERT A SUBSCRIBER

// the topic is the key property, Value is the literal object we push.

topics[topic].push({

token: token, // token reps an id.

func: func // func is the functionality we decide to pass in

});

// return the key used for this object that's stored in in topics

return token;

};

// we add a function property to the passed in global object pubsub

q.publish = function(topic, args) {

if (!topics[topic]) {

console.log("Error, object with this topic NOT FOUND")

return false;

}

//setTimeout(function() {

var arrayOfSubscribers = topics[topic];

// get # of subscribers

var len = arrayOfSubscribers ? arrayOfSubscribers.length : 0;

console.log(`# of subscribers: ${len}`)

// go through # of subscribers and execute their callback

while (len--) {

//console.log(`Executing subscriber ${topic}, `)

console.log(arrayOfSubscribers[len]);

arrayOfSubscribers[len].func(topic, args, arrayOfSubscribers[len].token);

}

//}, 0);

return true;

};

q.unsubscribe = function(token) {

console.log(`unsubscribing subscriber with uid of ${token}`)

for (let m in topics) {

console.log(`For topic ${m}, let us check for any subscribers with token ${token}`)

let subscribers = topics[m];

if (subscribers) {

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

if (subscribers[i].token === token) {

console.log(`HO HO! FOUND A SUBSCRIBER with token ${token}. Let us remove it!`)

subscribers.splice(i, 1); // remove 1 element at index i

return token;

}

return 0

};

}(pubsub)); // we pass parameter pubsub into the IIFE

let toUnsubscribe;

pubsub.subscribe("JS", function(topic, args, token) {

console.log("Ricky received " + topic + " content");

console.log("The data is: " + args);

console.log("Your subscription token is: " + token);

toUnsubscribe = token;

});

pubsub.subscribe("JS", function(topic, args, token) {

console.log("David received JS data: " + args);

console.log("Your subscription token is: " + token);

});

pubsub.publish("JS", "Design Pattern of es6 JS");

if (pubsub.unsubscribe(toUnsubscribe)>0) {

console.log("removed subscription")

}

Constructor Pattern (js)

March 28, 2018javascriptadmin

Before es6, JavaScript doesn’t support the concept of classes but it does support special constructor functions that work with objects.

By simply prefixing a call to a constructor function with the keyword “new”, we can tell JavaScript we would like the function to behave like a constructor and instantiate a new object with the members defined by that function.

Inside a constructor, the keyword this references the new object that’s being created. Revisiting object creation, a basic constructor may look as follows:

function Car( model, year, miles ) {

this.model = model;

this.year = year;

this.miles = miles;

this.toString = function () {

return this.model + " has done " + this.miles + " miles";

};

}

// Usage:

// We can create new instances of the car

var civic = new Car( "Honda Civic", 2009, 20000 );

var mondeo = new Car( "Ford Mondeo", 2010, 5000 );

// and then open our browser console to view the

// output of the toString() method being called on

// these objects

console.log( civic.toString() );

console.log( mondeo.toString() );

Constructors With Prototypes

Functions, like almost all objects in JavaScript, contain a “prototype” object. When we call a JavaScript constructor to create an object, all the properties of the constructor’s prototype are then made available to the new object. In this fashion, multiple Car objects can be created which access the same prototype. We can thus extend the original example as follows:

function Car( model, year, miles ) {

this.model = model;

this.year = year;

this.miles = miles;

}

// Note here that we are using Object.prototype.newMethod rather than

// Object.prototype so as to avoid redefining the prototype object

Car.prototype.toString = function () {

return this.model + " has done " + this.miles + " miles";

};

// Usage:

var civic = new Car( "Honda Civic", 2009, 20000 );

var mondeo = new Car( "Ford Mondeo", 2010, 5000 );

console.log( civic.toString() );

console.log( mondeo.toString() );

Above, a single instance of toString() will now be shared between all of the Car objects.

Circular List example

In the example below, we declare a ListNode constructor function so that we can instantiate objects from it,

We instantiate different ListNode objects and link them together in constructor function List. The linking happens because each ListNode has a next and previous.

List has 4 public properties:
– head
– tail
– now
– listName

Head, tail, now all point to different parts of the list.

The list uses prototype functions insert, remove, display so users can enter, remove, and display data from the list.
Thus, all instantiations of constructor function List use these prototype functions.

https://stackoverflow.com/questions/24488196/revealing-module-prototype-pattern

PRO – This saves a lot of memory because say we create 2 List instantiations called metro and gallery. There will be 2 copies of these functions for each instantiation. However, if we are to use prototype, there is only 1 instance of all these functions. And both metro and gallery will call that 1 instance.

In other words, the benefit of the prototype is that its properties are shared amongst all instances. This means that it’s static, not instance-specific.

CON – If you want to use the prototype, you cannot access truly private variables; you will need to use public properties

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

var StepEnum = Object.freeze({NEXT: "step next", PREV: "step previous"});

function ListNode(newData, newPrev, newNext) {

// this = {}

if (new.target === undefined) {

console.log('You didnt use new. Giving you a new Node Object');

return new Node();

}

// public properties

this.data = newData;

this.next = newNext;

this.prev = newPrev;

// public functions

this.clean = function() {

this.data = null;

this.next = null;

this.prev = null;

}

this.display = function() {

console.log("[" + this.data + "]")

}

// return this

} // List Node

function List(newName) {

this.head = null;

this.tail = null;

this.now = null;

this.listName = newName;

// private

// O(1)

this.removeLastNode = function(data, ref) {

if (this.dataMatches(data.toUpperCase(), ref.data.toUpperCase())) {

if (this.head === this.tail) {

this.head = this.head.next = this.head.prev = null;

this.tail = this.tail.next = this.tail.prev = null;

ref.clean();

return true;

}

return false;

}

// private

this.removeNodeAtHead = function(ref) {

if (ref === this.head) {

var temp = ref;

ref.next.prev = this.tail;

ref.prev.next = ref.next;

this.head = ref.next;

temp.clean();

return true;

}

return false;

}

// private

// O(1)

this.removeNodeAtTail = function(ref) {

if (ref === this.tail) {

var temp = ref;

ref.next.prev = ref.prev;

ref.prev.next = ref.next;

this.tail = ref.prev;

temp.clean();

return true;

}

return false;

}

// private

// O(1)

this.removeNodeInBetween = function(ref) {

if ((ref !== this.tail) && (ref !== this.head)) {

ref.next.prev = ref.prev;

ref.prev.next = ref.next;

ref.clean();

return true;

}

return false;

}

List.prototype.about = function() {

console.log(`Circular list (${this.listName}) with nodes that reference next and previous.  Ricky Tsao 2018`);

}

List.prototype.current = function() {

return this.now;

}

List.prototype.setCurrentToHead = function() {

this.now = this.head;

return this.now;

}

List.prototype.setCurrentToTail = function() {

this.now = this.tail;

return this.now

};

List.prototype.step = function(steps, StepEnum) {

if(!isNaN(steps) && steps > 0) {

while (steps > 0) {

this.now = (StepEnum.NEXT) ? this.now.next : this.now.prev;

steps--;

}

List.prototype.isEmpty = function() {

return (!this.head && !this.tail);

}

List.prototype.insert = function(data) {

console.log("PROTOTYPE - Inserting data: " + data);

try {

if (!this.isString(data)) throw "Data Must be a String";

if (this.isEmpty()) {

this.head = new ListNode(data, null, null);

this.tail = this.head;

} else {

this.tail = new ListNode(data, this.tail, this.head);

this.tail.prev.next = this.tail;

this.head.prev = this.tail;

}

this.now = this.tail;

} catch(err) {

console.log("\n------ ERROR ------");

console.log("description: data not entered");

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

console.log("===================\n\n")

}

// Notice that in our prototype, we can use private functions from List

// public

// O(n)

List.prototype.remove = function(data) {

if (this.isEmpty()) {

console.log("Nothing to remove because list is empty");

return;

}

try {

var traversal = this.head;

if (this.removeLastNode(data, traversal)) { return;}

do {

if (this.dataMatches(data.toUpperCase(), traversal.data.toUpperCase())) {

if (this.removeNodeAtHead(traversal)) return;

if (this.removeNodeAtTail(traversal)) return;

if (this.removeNodeInBetween(traversal)) return;

}

traversal = traversal.next;

} while (traversal != this.head);

} catch(error) {

console.log("Warning: "+ error);

}

};

List.prototype.dataMatches = function(data1, data2) {

return (data1.toUpperCase() === data2.toUpperCase());

}

List.prototype.isString = function(data) {

return ((typeof data) === 'string');

}

List.prototype.display = function() {

console.log("PROTOTYPE - display CircularList: " + this.listName)

if (this.isEmpty()) { console.log("-- LIST (" + this.listName + ") IS EMPTY --"); return; }

var traversal = this.head;

console.log("-----" + this.listName + "-----");

do {

traversal.display();

traversal = traversal.next;

} while (traversal !== this.head && traversal != null);

console.log("===============")

}

var metro = new List("metro");

metro.about();

metro.insert("Hou Hai");

metro.insert("Keyuan");

metro.insert("Window of the World");

metro.display();

metro.remove("Window of the World");

metro.display();

metro.remove("Hou Hai");

metro.display();

metro.remove("Window of the World");

metro.display();

metro.remove("Shui wan");

metro.display();

metro.remove("Keyuan");

metro.display();

Modules (JS)

March 27, 2018Uncategorizedadmin

https://medium.freecodecamp.org/javascript-modules-a-beginner-s-guide-783f7d7a5fcc

Module is a standalone file that contains reusable pieces of code that encapsulates implementation details.

In other words, they are small building blocks that we put together to build complex applications.

Modules make it easy to abstract code. We use it to implement low level code. Other modules then import these abstractions and use them.

It does this through exporting values out of modules. If it needs other functionalities, it can import it from other modules.

These other modules are called dependencies.

Modules allow us to easily reuse code. If we need same functionalities, we just copy module to new projects.

As of es6, JS have a native module system.

1 module per file.

1) In modules, all variables are scoped only to the module. This offers a great way to encapsulate. The only way other modules can access data inside this module, it must import this module.

Whereas in a script, these variables would be considered to be global.

2) Module are executed in strict mode This means, the ‘this’ keyword is always undefined

In scripts, its sloppy mode and this references the global/window object.

3) Imports are hoisted. So no matter where you import, they are hoisted to the top.

4) In HTML, if we want to use a module, we must use

1	<script type="module">...</script>

instead of the script way:

1	<script>....</script>

First we parse index.js
From the parsing we see that we need to import rand from math module. And showDice from the module.
We download and import all imported modules before execution. Module imports are synchronous.
Module downloads are asychronous.

We then link imports to math.js exports and dom.js exports.
Execute math.js and dom.js

Then finally, we can execute our index.js

Async/Await (syntactic sugar on top of Promises)

February 26, 2018javascriptadmin

ref – https://www.toptal.com/javascript/asynchronous-javascript-async-await-tutorial

Promises paved the way to one of the coolest improvements in JavaScript. ECMAScript 2017 brought in syntactic sugar on top of Promises in JavaScript in the form of async and await statements.

Async

Declaring a function as async will ensure that it always returns a Promise so you don’t have to worry about that anymore.

async function f() {

return 1;

}

The word “async” before a function means one simple thing: a function always returns a promise.

1st example

async function f() {

return 1;

}

f().then(success => console.log(success)); // 1

We can explicitly return a the static function for class Promise:

async function f() {

return Promise.resolve(1);

}

f().then(success => console.log(success)); // 1

So, async ensures that the function returns a promise, wraps non-promises in it.

Await

The await operator is used to wait for a Promise.

It can only be used inside an async function.

The await expression causes async function execution to pause until a Promise is fulfilled, that is resolved or rejected, and to resume execution of the async function after fulfillment. When resumed, the value of the await expression is that of the fulfilled Promise.

The syntax:

1 2	// works only inside async functions let value = await promise;

The keyword await makes JavaScript wait until that promise settles and returns its result.

If there was no await, JS’s single thread will execute the async function, and down the main execution steps turn by turn. So that then end of your program will be executed even when your function is not done.

It won’t work because there is no await…

function doubleAfter2Seconds(x) {

return new Promise( function( resolve, reject ) {

setTimeout(() => {

console.log(`doubleAfter2Seconds: ${x*2}`)

resolve(x * 2);

}, 2000);

});

}

async function addAsync() {

console.log("running addAsync")

// this won't wait. execution runs straight through

const a = doubleAfter2Seconds(2);

const b = doubleAfter2Seconds(3);

return a+b;

}

addAsync().then(function(result) {

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

console.log(result);

});

doubleAfter2Seconds returns Promise object. But since we don’t wait for it to resolve, the returned value is the Promise object. And not th resolved value that we want.

output:

running addAsync
trash.html:79 a: [object Promise]
trash.html:81 b: [object Promise]
trash.html:88 —–here—–
trash.html:89 [object Promise][object Promise]
trash.html:67 doubleAfter2Seconds: 4
trash.html:67 doubleAfter2Seconds: 6

As you can see, when your function is finally done, the result will be stranded. With nothing to execute the returned result.

Using await, it makes the JS thread wait until the promise is returned from the async function. Then proceeds to process it.

async function addAsync() {

console.log("running addAsync")

const a = await doubleAfter2Seconds(2);

const b = await doubleAfter2Seconds(3);

return a+b;

}

output:

running addAsync
trash.html:67 doubleAfter2Seconds: 4
trash.html:79 a: 4
trash.html:67 doubleAfter2Seconds: 6
trash.html:81 b: 6
trash.html:88 —–here—–
trash.html:89 10

In a more simple example:

async function f() {

// creates new Promise

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

// resolves after 1 sec

setTimeout(() => resolve("done!"), 1000)

});

// The "await" tells execution to wait here, and resumes when the promise settles

let result = await promise; // wait till the promise resolves (*)

console.log(result); // "done!"

}

f();

await literally makes JavaScript wait until the promise settles, and then go on with the result.
That doesn’t cost any CPU resources, because the engine can do other jobs meanwhile: execute other scripts, handle events etc.
(JS only has 1 thread, which can skip around and execute different tasks, doing a little at a time)

// It's pretty clear that the Async/Await version of the code is much shorter and easier to read.

// Other than the syntax used, both functions are completely identical

// - they both return Promises

// The async keyword will automatically create a new Promise and return it.

async function getJSONAsync (){

return 3; // returns valid or invalid

}

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

let p = getJSONAsync();

console.log(p);

p.then( function(result) {

console.log(result);

});

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

output:
— begin —

Promise {: 3}__proto__:
Promise[[PromiseStatus]]: “resolved”
[[PromiseValue]]: 3

If you wish to await two or more promises in parallel, you must still use Promise.all.

var max = 12;

var max2 = 5;

var max3 = 8;

var promise1 = new Promise(function(resolve, reject){

let interval = setInterval(function(){

console.log("promise1: "+max--);

if (max === 1) {

resolve(1);

clearInterval(interval);

}

}, 1000);

});

var promise2 = new Promise(function(resolve, reject){

let interval2 = setInterval(function(){

console.log("promise2: "+max2--);

if (max2 === 2) {

resolve(2);

clearInterval(interval2);

}

}, 1200);

});

var promise3 = new Promise(function(resolve, reject) {

let interval3 = setInterval(function(){

console.log("promise3: "+max3--);

if (max3 === 3) {

resolve(3);

clearInterval(interval3);

}

}, 1300);

});

Promise.all([promise1, promise2, promise3]).then(function(values) {

console.log(values);

});

// expected output: Array [3, 42, "foo"]

Examples of using both

Asynchronous execution
Await is used inside of the async.

When we call a function with async, it

1) returns a Promise object
2) runs asynchronously

You can see this asynchronous activity going on because as the function f runs, the JS execution also continues
down and logs “grandma says:….come to dinner…!!….”.

using await and then at the same time

Whenever we deal with async functions, we must return a Promise. Thus we create a Promise, and make it run a setTimeout
function which is asynchronous. The setTimeout executes code after 3 seconds.

However, in our code, the Promise does not get returned right away due to the “await” statement. Rather, we must wait for the Promise to finish before moving on.
Therefore, the log statements and return Promise MUST wait for the Promise to resolve FIRST.
After the Promise resolves, we return the promise object.

Finally, because the promise object was already resolved, the
then() gets executed right away.

async function f() {

console.log("start f()"); // 1

// creates new Promise

let promise = new Promise((resolve, reject) => { // 2) create new Promise object

setTimeout(function() {

resolve("oh yea!"); // 5) resolves!

}, 3000) // 4) waits 3 seconds

});

await promise; // 3) waits for the promise object to resolve.

// 6) runs the rest of the statements

console.log("oh no...! runaway return result....!!");

return promise;

}

f().then(success => {

// 7) Runs the then block because the returned Promise

// has already resolved

console.log("1ST THEN:" + success);

});

No Await

If we remove the await, the promise gets created, then since there is no “await”, we continue
with the log statements, and then returns the promise object.
Then the Promise executes the setTimeout, and resolves after 3 seconds.
What’s waiting for the resolve will be the then().

The execution will run in this order:

async function f() {

console.log("start of f() ");

// creates new Promise

let promise = new Promise((resolve, reject) => { // 2) create new Promise object

console.log("create new Promise object");

setTimeout(function() {

console.log("waited 3 sec"); // 5)

resolve("oh yea!"); // 6) resolves!

}, 3000) // 4) waits 3 seconds

});

// 7) runs the rest of the statements

console.log("return the Promise object");

return promise;

}

f().then(success => {

// 8) Runs the then block

console.log("1ST THEN:" + success);

});

start of f()
create new Promise object
Wait for the Promise to resolve
here….
there….
everywhere…!!….
return the Promise object
waited 3 sec
1ST THEN:oh yea!

Another Example

Another example shows that await actually stops execution on the await line within that async function. While it waits, the JS execution will still move on
to execute after the async functionK

This is shown at 10, where the new Promise object has been created and will be returned. When it returns the Promise object, execution will need wait for the Promise to finish. Since the Promise takes 2 seconds, JS execution will continue after the async func onto line 11.

After the 2 seconds, we resolve the Promise at line 12. Then go on to 13, which we now have the passed in parameter value from the Promise’s resolve.

Whenever you “await” for a Promise, the rest of the async function will not run. Because it is “awaiting” your Promise to finish.
However, it will continue to execute the code that takes place AFTER the async function.

Take note at var x, it is awaiting a Promise to resolve inside of resolveAfter2Seconds…while it is waiting, execution continues at 11.

function resolveAfter2Seconds(x) {

console.log("resolveAfter2Seconds"); // 5)

console.log("let's return a new Promise"); // 6)

return new Promise(resolve => { // 7)

console.log("creating new Promise..."); // 8)

setTimeout(() => { // 9

resolve(x); // 12

}, 2000);

console.log("Finish creating new Promise"); // 10

});

}

async function f1() {

console.log("start of f1()"); // 3)

// await Promise before moving on

var x = await resolveAfter2Seconds(10); // 4)

// 13) x is now valid

// 14)

console.log("Promise resolves");

console.log("resolve parameter is: "+x);

}

console.log("...start of PROGRAM..."); // 1)

f1(); // 2)

console.log("hei hei hei"); // 11)

One more…!

console.log("here..."); // 1)

async function f() {

console.log("start of f()"); //4 )

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

console.log("creating new Promise"); // 5)

// 6

setTimeout(

() => resolve("done!"), // 10 The promise has been resolved!

2000)

console.log("finish creating Promise"); // 7)

});

// 8) WE NOW NEED TO WAIT HERE BECAUSE OF THE "AWAIT". However

// execution will continue further at 9)

let result = await promise; // wait till the promise resolves (*)

console.log("result is: " + result); // 11) Since the promise was resolved, we continue here.

console.log("end of f()"); // 12

}

console.log("there..."); // 2)

f(); //3)

// 9) because async f() is waiting...JS's execution continues further.

console.log("Eveerry wheeereeee.....")

Encapsulation in JS

February 23, 2018javascriptadmin

ref – https://abdulapopoola.com/2013/03/30/static-and-instance-methods-in-javascript/

var Person = function (name, age){

//private properties

var priv = {};

//Public properties

this.name = name;

this.age = age;

//Public methods

this.sayHi = function(){

alert('hello');

}

// A static method; this method only

// exists on the class and doesn't exist

// on child objects

Person.sayName = function() {

alert("I am a Person object ;)");

};

// An instance method;

// All Person objects will have this method

Person.prototype.setName = function(nameIn) {

this.name = nameIn;

}

// Tests

var per = new Person('John Doe', 22);

//Shows alert

Person.sayName();

//TypeError: Object [object Object] has no method 'sayName'

per.sayName()

//Show alert

per.sayHi();

//John Doe

per.name;

//22

per.age;

per.setName('Jane Doe');

//Jane Doe

per.name;

Styling React Components

February 21, 2018Uncategorizedadmin

https://www.kirupa.com/react/styling_in_react.htm

Creating React Components

February 21, 2018Reactadmin

https://www.kirupa.com/react/components.htm

Concept

This is terrible coding because you are doing a lot of repetitive coding.

var speed = 10;

var time = 5;

alert(speed * time);

var speed1 = 85;

var time1 = 1.5;

alert(speed1 * time1);

var speed2 = 12;

var time2 = 9;

alert(speed2 * time2);

var speed3 = 42;

var time3 = 21;

alert(speed3 * time3);

thus, functions were created:

function getDistance(speed, time) {

var result = speed * time;

alert(result);

}

…and therefore, we can easily call the functions and provide parameters:

getDistance(10, 5);

getDistance(85, 1.5);

getDistance(12, 9);

getDistance(42, 21);

How it Works in React

Now, in React, say we want to render a bunch of h1. We have a index.html template with a given div for us to inject html content into like so:

<!DOCTYPE html>

<head>

<!--

manifest.json provides metadata used when your web app is added to the

homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

-->

<title>React App</title>

</head>

<body>

You need to enable JavaScript to run this app.

</noscript>

</body>

</html>

Then, in index.js we use React’s API to render some custom html:

ReactDOM.render(

<div>

<h1>Batman</h1>

<h1>Nicolas Cage</h1>

</div>,

destination

);

this repetitive usage of the h1s is the equivalent of writing the same code over and over again. Because what if we want to change them to h3. Or add bold to it. Its tiring to change it for everyone one of them. Conceptually, we want to do something similar to as how functions have solved repetitive code.

React Components

React components are reusable chunks of JavaScript that output (via JSX) HTML elements

This is where we use JSX to generate and render html to throw into a specific div. In our case, it would be the id=root div.

You create a class that extends the features of component. We do so like this:

class HelloWorld extends React.Component {

}

This HelloWorld component is a component because it extends React.Component. If it didn’t do that, it would just be an empty class that doesn’t do much.

Inside our class, you can put all sorts of methods to further define what HelloWorld does.
However, there is mandatory function called Render which you must implement.

class HelloWorld extends React.Component {

render() {

return <p>Hello, componentized world!</p>

}

ReactDOM.render(

<HelloWorld/>,

document.querySelector("#container")

);

What we’ve done so far might seem crazy, but simply think of your component as a cool and new HTML tag whose functionality you fully have control over. This means you can do all sorts of HTML-ey things to it.

Properties

Our Hello component isn’t very useful because it only says Hello to one thing. It cannot say hello to other people/things. Say we want to have the Hello be applied to different names.

Just like with functions, you can pass in arguments that alter what your component does. There is a slight terminology update you need to be on top of. What we call arguments in the function world are going to be known as properties in the component world. Let’s see these properties in action!

Right now, our HelloWorld component is hard-coded to always send out Hello, world! as part of its return value. The first thing we are going to do is change that behavior by having return print out the value passed in by a property.

We are going to modify our HelloWorld component to allow you to specify who or what you greet besides the generic World.

Adding and accessing the property

We add the property by simply accessing it. If it doesn’t exist, it will be automatically added to the class. If it exists, it will access it.

The way you access a property is by referencing it via the this.props property that every component has access to. Notice how we specify this property. We place it inside curly brackets – { and }.

class HelloWorld extends React.Component {

render() {

return <p>Hello, {this.props.greetings} !! </p>

}

In JSX, if you want something to get evaluated as an expression, you need to wrap that something inside curly brackets. If you don’t do that, you’ll see the raw text this.props.greetings printed out.

Making the component call

ReactDOM.render(

</div>,

document.getElementById('root'));

registerServiceWorker();

Further example

Let’s make another component where we take an array, loop over it, and display the data. Define the component.
We add the nameArray property. Then we use the map function to look over each element in nameArray. We use parameter name and index to display the array data.

class ListWorld extends React.Component {

render() {

return (<ul>

{this.props.nameArray.map(function(name, index){

return <li key={index}>{index}, {name}</li>

})}

</ul>)

}

and we call the component like so:

1	<ListWorld nameArray= {["Ricky", "Vera", "John"]} />

output at localhost:3000:

Hello, Batman !!

0, Ricky
1, Vera
2, John
Hello, Superman !!

Source Code

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import registerServiceWorker from './registerServiceWorker';

class HelloWorld extends React.Component {

render() {

return <p>Hello, {this.props.greetings} !! </p>

}

class ListWorld extends React.Component {

render() {

return (<ul>

{this.props.nameArray.map(function(name, index){

return <li key={index}>{index}, {name}</li>

})}

</ul>)

}

<pre>

ReactDOM.render(

</div>,

document.getElementById('root'));

registerServiceWorker();