Portals help keep your front-end simple while allowing seamless navigations with custom transitions. In this article, get hands-on experience using Portals to improve user experience across your site.
— Read on web.dev/hands-on-portals
Tag: JavaScript
Getting started with fp-ts: Applicative
Getting started with fp-ts: Applicative – DEV Community 👩💻👨💻
— Read on dev.to/gcanti/getting-started-with-fp-ts-applicative-1kb3
fp-ts: Category
Getting started with fp-ts: Category dev.to/gcanti/getting-started-with-fp-ts-category-4c9a
Currently Reading
A Lazy Developer’s Guide to Tensorflow.js – Google Slides
A Lazy Developer’s Guide to Tensorflow.js – Google Slides
— Read on docs.google.com/presentation/d/1xq7Wi6X582kT0HpH3eb0vpq-9H9oC5TH4uupI-j4KE8/present
How I started with learning AI in the last 2 months
Everyone is very busy these days. There is just so much going on with our personal and professional lives. On top of it, lo and behold, something like artificial intelligence starts to gather steam…
— Read on hackernoon.com/how-i-started-with-learning-ai-in-the-last-2-months-251d19b23597
Cloud Computing without Containers
Here is a very lightweight serverless solution that runs JavaScript in isolated worker threads without the overhead of containerisation. Looks like something that will become increasingly important in coming years as we continue to run things at greater and greater scales.
Cloud Computing without Containers
— Read on www.google.com.au/amp/s/blog.cloudflare.com/cloud-computing-without-containers/amp/
Purify – Functional programming library for TypeScript
Purify is a library for functional programming in TypeScript. It’s purpose is to allow developers to use popular patterns and abstractions that are available in most functional languages. It is alsoFantasy Land conformant.
An Invitation to ReasonML
A good introduction to ReasonML (and incidentally to OCaml which lurks under Reason’s JavaScript-like syntax).
This article is really about the language’s type inference system (based on the Hindley-Milner algorithm used in ML, Haskell, OCaml etc) which leaves conventional type systems such as Typescript, Java etc. in the dust protoship.io/blog/an-invitation-to-reasonml/
Assignment and Destructuring
Modern features of JavaScript
In JavaScript, we often need to store intermediate results by name so that we can refer to them again in a convenient way. This is known as binding a value to a name.
There are two ways to bind a value to a name:
- by passing and argument to a function
- by assigning a variable or a constant
Argument passing is a process by which arguments sent during a function during a call and get bound to the function’s formal parameters. For example, given the function func1
func1 = ( a, b, c ) => a + b + c;
If we called this function
func1( 1, 2, 3 );
Then the effect within the function would be to bind the values 1, 2, 3
to the formal parameters a, b, c
. We can see this by substitution:
func1( 1, 2, 3 );
// substituting func1 for its implementation and it becomes
((a, b, c) => a + b + c)( 1, 2, 3 );
// applying the arguments to the function and it becomes
(a = 1, b = 2, c = 3) => a + b + c;
// substituting the parameters for the argument values it becomes
1 + 2 + 3;
// which finally becomes the function's returned value
6
This process of binding is analogous to the binding of values to variables and constants through assignment.
Variables and constants work the same way but with a small difference. A constant is like a variable that may only be assigned once. Any attempt to assign a value to the same constant will fail. Using constants is a very common practice in JavaScript and is far more common than variable reassignment. Therefore there are good reasons for preferring the use of constants over variables wherever possible and therefore to preferring using the const
keyword over the let
keyword and only using the latter in places where you are intending to reassign the variable. By following this convention, you are explicitly documenting the places in your code where bound names are changing their values. This kind of state modification is something to needs to be managed with care and the use of let
should therefore be seen as a way to draw attention to this.
Note: this point remains controversial within the JavaScript community. This is because many object types are mutable and can have their internals changed. For example an object might have one of its properties assigned to. An array might have an element appended to it. In these cases the const
keyword won’t stop this and the only way to do so is to call the freeze() method on the object (recursively in the case of nested objects).
While this objection certainly is true, I still consider the convention of preferring const
over let
to be a valuable one. Uncontrolled mutation of the state of mutable data types such as with unfrozen objects and arrays is generally a bad thing and should be avoided when possible. All state modification needs to be carefully managed by your program, no matter where it happens.
and avoiding variable reassignment wherever possible. In the code examples, I am going to prefer to use constants over variables and use the const
keyword. I will use the let
keyword only for those rare cases of needing variables and reassignment.
Constant declarations and variable assignments take the forms:
const <LHSExpression> = <value>;
let <LHSExpression> = <value>;
respectively. Both are scoped to the block of code that they were declared within. <LHSExpression>
represents an expression which may be used on the left hand side of the assignment operator =
. This is a restricted set of JavaScript expressions:
Destructuring works by pattern matching a subset of valid JavaScript expressions on left-hand side of an assignment. It works in a manner similar to array index assignment and object property assignment which both use expressions on the left-hand-side (LHS) of the assignment.
For example
arr[1] = 27;
obj.x = 100;
Destructuring Arrays
Given the array
arr1 = [ 1, 2, 3, 4, 5 ]
you can get first item:
[ a ] = arr1;
Result
> a = 1
you can also get the second item by:
[ , a] = arr1;
Result
> a = 2
And the third item:
[ , , a] = arr1;
Result
> a = 3
Getting all the elements except the first (the tail) by using the rest operator
[ , ...a] = arr1;
Result
> a = [ 2, 3, 4, 5 ]
NOTE: as mentioned earlier the Rest operator must come last on the LHS
[ ...a, _ ] = arr1; // this doesn’t work
[ ...a, ...b ] = arr1; // this doesn’t work either
To get the last item of an array you still need slice
[ a ] = array.slice(-1)
Result
> a = 5
To get the leading items of a array you still need slice
a = array.slice(0, -1);
Result
> a = [ 1, 2, 3, 4 ]
Swapping two variables:
a = 1;
b = 2;
[ b, a ] = [ a, b ];
Result
> a = 2, b = 1