Skip to main content

Posts

ES6: Destructuring

Destructuring can be used to extract data with arrays or objects, in a declarative way, and is self documenting, allowing the next developer to read, to understand a lot about the intent of this line of code. It is particularly useful to extract data from an array, because the destructing pattern reveals the shape of the data, and the name of the variables used in the pattern show what is the important data we want to extract from this array, or multidimensional array. Note that it is possible to chain multiple destructring patterns, since each of them returns the original array. When destructuring objects, the destructuring pattern uses curly braces, with the source property name on the left, and target variable on the right. In the case the two are the same, in ES6, they don't need to be repeated. It is also possible to destructure nested objects, in this case a nested destructuring pattern would be provided.

ES6: Spread vs Gather operators

These new operators, both represented by dot dot dot, has two purpose, to gather arguments, or spread them. One quick note about the gather operator, it is sometimes referred to as the 'rest' operator, not the verb resting, but rest as a noun. In the context of a function declaration, a ... before a variable with gather all the arguments in one variable. In the context of a function invocation, a ... operator would spread them out, as arguments passed in.

ES6: let vs var

The 'let' keyword was introduced in ES6 to help clarify intent. The 'var' keyword should keep a variable visible within it's block, only. But in fact, it was attached to the function it is declared in, via hoisting. Which means it could be accessed outside of it's block. The 'let' keyword was then introduced to make clear that a variable declared within a block, is only visible within this block. As opposed to 'var' who could be visible outside of that block.

Javascript: The prototype pattern

The prototype pattern is composed of two parts, the constructor function, and the prototype. The constructor function has the responsibility of holding the data while the prototype will the define the functions. The advantage of this approach is that all state variables held in the constructor part will be unique to the instance, while all methods defined in the prototype will be shared across all instances. Implementing the constructor part: of the pattern consists in adding any arguments to the function definition and setting in variable using the 'this' keyword. Implementing the prototype part: consists of setting the constructor's prototype to a new literal object containing a property for each function. Finally, it should be noted that by convention, the constructor function should be cased in Pascal case. Typically anytime a function is cased as such in Javascript hints it is a constructor function and should be used with the new keyword.

Javascript: the module pattern

The module pattern is defined by two things. 1-An outter wrapping function 2-An returned object containing at least one function It was initially introduced a decade ago by Douglas Crockford in order to provide encapsulation, therefore exposing only what is needed, reducing the risk users would access, undocumented features.