Category Archives: Uncategorized

Destructuring

“Destructuring” does not mean “destructive”

It’s called “destructuring assignment”, because it “destructurizes” by copying items into variables. But the array itself is not modified.

It’s just a shorter way to write:

Thus, we can do a shorthand like so?

Object.assign

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

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

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

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

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


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

Creating a duck via Object.assign

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

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


output:

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

jQuery lazy loading

Loading the library

Targeting it…and callbacks

Specifying the images

Since your jQuery targets class lazy, we must use lazy for classes on img and div tags.
You use data-src to specify the location of the images.

Note that for img tags, when the images load, it will change to data-src will change to src.
However, if you were to use div, data-src will change to background-image: url(….) .

instanceof

ref – http://chineseruleof8.com/code/index.php/2018/02/06/prototype-and-inheritance-in-js-non-class/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof

So we create an instance of CoverArticle called c.
It accesses its own prototype function coverArticleFormat.
It goes up the hierarchy one step and goes into Cover prototype where it accesses coverFormat.
It goes one more step to Image prototype, and accesses print.

Instance of lets you know if your object can access functionalities from the specified Constructor.

Because instance c is at the highest level of the hierarchy. When it can’t find a functionality, it goes down to Cover Prototype Object. When it can’t find it there, it goes to Image Prototype, and fianlly Object Prototype. Hence, it can touch all Prototype Objects of the constructors. That’s why it is true.

When analyze the cover1 instance shown in the diagram, which of prototype Cover, we see that it can access its functionalities from its own Prototype Cover. It can go up to Image Prototype and Object Prototype. However, it ends there. It cannot go backwards and access CoverArticle prototype at all. Hence, false.

isPrototypeOf

isPrototypeOf is a function on the Object Prototype that tests whether the parameter can check against the prototype.
So for example, if we have an instance of CoverArticle (like c) it can definitely touch Cover.
If we have instance of Cover (like cover1) obviously it touches Cover.

buddha, an instance of Image, only touches Image and Object. It cannot go backwards and check Cover Prototype Object. Thus, it will be false.

ref – https://stackoverflow.com/questions/2464426/whats-the-difference-between-isprototypeof-and-instanceof-in-javascript

instanceof vs isPrototypeOf

instanceof and isPrototypeOf, they do the same thing, both traverse up the prototype chain looking for an specific object in it.

The difference between both is what they are, and how you use them,

isPrototypeOf is a function available on the Object.prototype object it lets you test if an specific object is in the prototype chain of another, since this method is defined on Object.prototype, it is be available for all objects.

instanceof is an operator and it expects two operands an object and a Constructor function, it will test if the passed function prototype property exists on the chain of the object (via the [[HasInstance]](V) internal operation, available only in Function objects).

Maps WeakMaps, Sets, WeakSets

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.

Map can also use objects as keys.

For instance:

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:

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:

Modules (JS)

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

instead of the script way:

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