Detect if there’s content in Bootstrap Accordion

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

instanceof

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

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 main methods are:

new Map() – creates the map.
map.set(key, value) – stores the value by the key.
map.get(key) – returns the value by the key, undefined if key doesn’t exist in map.
map.has(key) – returns true if the key exists, false otherwise.
map.delete(key) – removes the value by the key.
map.clear() – clears the map
map.size – returns the current element count.

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:

Set

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: