Intro to ES6 and Functional programming in JavaScript


Last weekend, I went Bridge.io’s Destiny’s Child themed workshop on Functional Programming and new features in ES6. Here’s what we covered:

Function Anatomy


A return statement should be in almost all our functions — it is the result of a function. If we don’t include “return” in the body of our function, the console is going to throw us an “undefined”.


An argument is the specific value we pass into a function, and a parameter is a placeholder. We only define a parameter once, but we can call a function with many different arguments. The argument value is copied and assigned to the corresponding parameter, so the order of the argument and parameter matters.


let and const have replaced var. Var is still valid, these new variable identifiers better contain variables within the { } block. Also, it is easy to accidentally overwrite variables with the var identifier.

Generally, we should always use const if we know the value will not be redefined throughout our program.. The browser will throw an error if we try to re-assign a value to a variable already defined with const. We should only use let if we are defining a value that we know will change.


Arrow functions are a shorter syntax for functions. They have to be defined in a variable so you use a => instead of the function keyword.

const handleThis = (noun1, noun2) => {

return noun1 + noun2

}

If our function has more than one statement (i.e. is written on multiple lines), open up curly braces and include a return statement.

const handleThis = (noun1, noun2) => { noun 1 + noun 2}

If the expression be written in one line then we do not need include the return keyword

const handleThis = num => {num * num}

If we have only one parameter, we can exclude the parentheses around parameter. const handleThis = () => {1 + 2} However, if there are no parameters, we must include the parentheses.


Template Literals are strings literals that use a back-tick in place of quotes. It behaves the same way as using quotes, but it allows us to make multi-line strings without anything other than a newline. Another advantage of template literals is that it makes concatenation easier.

To create a Template Expression, wrap the expression in backticks and wrap the variables within the expression in ${}. The browser will replace the ${} with the arguments at run-time.

a template expression inside a function — please note the comment shows the string expression on one line, but the result actually would be separated into two.

const independentWoman = (nounPlural, adjective) => {

return `All the ${nounPlural}, who are ${adjective},

throw your hands up at me`

}

//'All the women who are independent,

// Throw your hands up at me'

Immutability

The idea is to make code more maintainable by limiting places we are changing the state (current condition) of the data in an application.


Immutability is data that doesn’t change over time, such as strings and numbers. We can mutate objects and arrays, but that prevents us from accessing the original state of the data in the future. We can achieve immutability through pure functions