ECMAScript 6

Nuggets is completely rewritten with ECMAScript 6.

Also known as ES6 or ECMAScript 2015, ES6 represents a significant milestone in the evolution of the JavaScript programming language. Adopted in 2015, this version marks a major update to the ECMAScript standard, the document that specifies the JavaScript language. ES6 introduces new features, syntax improvements and modern programming paradigms to make JavaScript development more efficient, readable and powerful.

Before ES6, JavaScript developers often had to rely on third-party libraries to take advantage of advanced features. ES6 has changed all that by natively integrating numerous features that improve developer productivity and enable the creation of cleaner, more modular code.

This version introduced concepts such as arrow functions, classes, modules, destructuring, default parameters, generator functions and many others, giving developers powerful tools for structuring their applications in a more robust and elegant way. The introduction of ES6 has been welcomed by the developer community, stimulating the adoption of modern coding practices and improving the maintainability of JavaScript projects.

Arrow functions

Arrow functions are a feature introduced in ECMAScript 6 (ES6), the sixth edition of the ECMAScript standard that defines the JavaScript language.

Here are some of the advantages of using arrow functions:

Concise syntax

Arrow functions offer a concise syntax, which reduces the amount of code required. This is particularly useful for simple functions.

JavaScript

// Classic function
function addition(a, b) {
    return a + b;
}
// Arrow function
const addition = (a, b) => a + b;

Context linked with this automatically

Arrow functions capture the context in which they are created, eliminating the need to explicitly bind the this keyword. This can solve common problems associated with loss of context in conventional functions.

JavaScript

// Classic function with explicit "this" binding
function exemple() {
    this.value = 0;

    setInterval(function() {
        this.value++;
        console.log(this.value);
    }.bind(this), 1000);
}

// Arrow function with automatic "this" link
function exemple() {
    this.value = 0;

    setInterval(() => {
        this.value++;
        console.log(this.value);
    }, 1000);
}

No keyword arguments.

Arrow functions do not have their own arguments object. This can simplify the code and avoid unexpected behaviour, as they inherit arguments from the wrapper function.

JavaScript

// Classic function with "arguments
function exemple() {
    console.log(arguments);
}

// Arrow function without "arguments
const exemple = () => {
    // Error: "arguments" is not defined
    console.log(arguments);
}

Ideal for short, simple functions.

Because of their concise syntax, arrow functions are particularly suitable for short, simple functions, which makes the code easier to read.

JavaScript

// Classic function
const square = function(x) {
    return x * x;
}

// Arrow function
const square = x => x * x;

Better integration with callback functions

Arrow functions are often clearer and more elegant when used as callback functions, particularly in operations such as map, filter and reduce.

JavaScript

const numbers = [1, 2, 3, 4];

// Utilisation de fonction fléchée avec "map"
const squares = numbers.map(x => x * x);

In summary, arrow functions offer concise syntax, solve problems related to context (this), simplify argument management, are suitable for short functions and integrate well with callback functions, contributing to cleaner, more readable JavaScript code.

Reversing comparative arguments

Nuggets systematically swaps arguments from left to right when they are compared in conditional expressions.

JavaScript

if ( 'myValue'==myArgument ) { /*  instruction */ }

Inverting the arguments in a conditional expression allows you to simulate a strong typing and avoids many bugs caused by forgetting a = sign.

In this example, we are trying to carry out the comparison with a single = sign; this is no longer a comparison but an attribution.

JavaScript

if ( myArgument='myValue' ) { /*  instruction toujours exécutée puisque toujours VRAI */ }

The variable myArgument stores the value myValue and the code does not detect any errors. However, the whole code cannot work correctly because the action of storing returns True to the condition; the instruction is executed whatever myArgument is.

By swapping the variable on the right with a single = sign, the code returns an error: myArgument is a variable whose value can be changed, but it is impossible to change the value of the string itself. This is also true for numbers and reserved words: null, undefined, true, false and NaN.

JavaScript

if ( null=myArgument ) { /*  returns an error */ }
if ( true=myArgument ) { /*  returns an error */ }
if ( 123=myArgument ) { /*  returns an error */ }
// etc.

Strict operators

The == and != operators perform a comparison without checking the type of the values.

Nuggets abandons them and uses the === and !== operators instead. The comparison is carried out on both the values and the type of values.

Ternary operator ‘?’

The ternary operator offers a concise syntax for expressing conditions in a single line of code. For example: condition ? expressionIfTrue : expressionIfFalse.

It evaluates the condition and returns the first expression if the condition is true, otherwise it returns the second expression.

It is often used as a compact alternative to if-else structures for simple operations. Its use improves the readability of the code by reducing the amount of text, which is particularly useful when the condition and associated expressions are succinct.

Ternary operators can be an elegant alternative to avoid excessive nesting of if-else structures when it comes to simple conditions, contributing to clearer, easier to understand code.