Misc notes
Misc
Comparison
Classes
Prototype
Maps
getters, setters and static
Iterators
Generator
null coalescing operator
Misc
Always* add "use strict" at the top of your files
operator typeof
String templating works by using backticks (`) around the text and adding variables in ${}, i.e.,
`Hello ${name}`
Two types of null value: undefined and null
Declaring a new variable:
let ten = 10;
var eleven = 11; : from js before 2015. not recommended
const forty_two = 42;
twenty_one = 21 will create a variable in the global context
x++ and ++x are ON
Switches are ON
switch([condition]) {
case 1: ...; break;
case 2: ...; break;
default: ...; break;
}
Closures:
const add = (function () {
let counter = 0;
return function () {
counter += 1;
return counter
}
console.log(`counter is now ${counter}`)
})();
add();
add();
// counter is now 2
Two ways to access the property of an object:
value.x x is the literal name of the property
value[x] x is a string that will be evaluated into the name of the property
let sequence = [1, 2, 3];
sequence.push(4);
sequence[`push`](5);
ways to iterate using for:
for (let i = 0; i < CONST; i++) {}
for (let VAR of COLLECTION) {}
Rest parameters: one can use the ... notation to represent the rest of values passed being
grouped into a variable, and it can also be used to explode the amount of items into parameters for
a function
function resting1(...args) {
console.log(`>${args}`);
}
resting1([1,3,4,7]);
// >1,3,4,7
function resting2(a, b, ...args) {
console.log(`>> ${a}`);
console.log(`>> ${b}`);
console.log(`>> ${args}`);
}
resting2(...[1,3,4,7]);
/* >> 1
* >> 3
* >> 4,7 */
resting2(..."Blondie");
/* >> B
* >> l
* >> o,n,d,i,e */
let coordinates = {x: 10, y: 0};
console.log({...coordinates, y: 5, z: 1});
// { x: 10, y: 5, z: 1 }
Comparison
Two types of equalities:
Referential equality: Determines whether the two provided operands refer to the same
reference/object instance
Deep equality: Determines whether objects are equal by comparing each property in the operands
== equal to
=== equal value and equal type
Always use strict equality (value === null) for reliable null checks.
Classes
class Rabbit {
constructor(type) {
this.type = type;
}
#speak(line) { // # denotes private method/property
console.log(`The ${this.type} rabbit says '${line}'`);
}
sspeak(line) {
this.#speak(line)
}
}
let brer = new Rabbit("smart");
brer.sspeak("Moo")
Prototype
Prototypes are a way for JS to enforce a type hierarchy in which all objects are eventually derived from
Object , and share all attributes and methods inherited along the way. The atts and meths belong to
the prototype, not to the class itself, which is a good optimization.
There are several highest-level prototypes, such as Object , Function and Array
let protoRabbit = {
speak(line) {
console.log(`The ${this.type} rabbit says '${line}'`);
}
};
let blackRabbit = Object.create(protoRabbit);
blackRabbit.type = "black";
blackRabbit.speak("I am fear and darkness");
// → The black rabbit says 'I am fear and darkness'
The “proto” rabbit acts as a container for the properties that are shared by all
rabbits. An individual rabbit object, like the black rabbit, contains properties
that apply only to itself—in this case its type—and derives shared properties
from its prototype.
Maps
This is an object, not a map. It will have properties derived from its prototype.
let ages = {
Boris: 39,
Liang: 22,
Júlia: 62
};
Below is an actual map:
let ages = new Map();
ages.set("Boris", 39);
ages.set("Liang", 22);
ages.set("Júlia", 62);
console.log(`Júlia is ${ages.get("Júlia")}`);
// → Júlia is 62
console.log("Is Jack's age known?", ages.has("Jack"));
// → Is Jack's age known? false
console.log(ages.has("toString"));
// → false
The methods set , get , has and has are part of the interface of the Map object.
getters, setters and static
class Temperature {
constructor(celsius) {
this.celsius = celsius;
}
get fahrenheit() {
return this.celsius * 1.8 + 32;
}
set fahrenheit(value) {
this.celsius = (value - 32) / 1.8;
}
static fromFahrenheit(value) {
return new Temperature((value - 32) / 1.8);
}
}
let temp = new Temperature(22);
console.log(temp.fahrenheit);
// → 71.6
temp.fahrenheit = 86;
console.log(temp.celsius);
// → 30
Iterators
function makeRangeIterator(start = 0, end = Infinity, step = 1) {
let nextIndex = start;
let iterationCount = 0;
const rangeIterator = {
next() {
let result;
if (nextIndex < end) {
result = { value: nextIndex, done: false };
nextIndex += step;
iterationCount++;
return result;
}
return { value: iterationCount, done: true };
},
};
return rangeIterator;
}
const iter = makeRangeIterator(1, 10, 2);
let result = iter.next();
while (!result.done) {
console.log(result.value); // 1 3 5 7 9
result = iter.next();
}
console.log("Iterated over sequence of size:", result.value); // [5 numbers
returned, that took interval in between: 0 to 10]
Generator
Generator functions are written using the function* syntax.
function* makeRangeIterator(start = 0, end = Infinity, step = 1) {
let iterationCount = 0;
for (let i = start; i < end; i += step) {
iterationCount++;
yield i;
}
return iterationCount;
}
let re1 = new RegExp("abc");
let re2 = /abc/;
console.log(/abc/.test("abcde"));
// → true
those are only recognized when you put
a u character (for Unicode) after the regular expression.
\p{L}
Any letter
\p{N}
Any numeric character
Any punctuation character
\p{P}
\P{L}
Any non-letter (uppercase P inverts)
\p{Script=Hangul} Any character from the given script (see Chapter 5)
null coalescing operator
function jorker(jork) {
console.log(`[${jork && '&& JORK'}]`);
console.log(`[${jork || '|| JORK'}]`);
console.log(`[${jork ?? '?? JORK'}]`);
console.log('\n');
}
code output
[undefined]
jorker(); [|| JORK]
[?? JORK]
[]
jorker(''); [|| JORK]
[]
[&& JORK]
jorker('00'); [00]
[00]
[null]
jorker(null); [|| JORK]
[?? JORK]
[undefined]
jorker(undefined);
[
