brauliodiez

map

Map allows us to apply an operation to each item of an array, returning a new array that contains the items with the operation applied.

This can save us lot of "for" loops (enhannce readibility).

steps

Let's implement a function that will apply a discount all the elements of a given array.

brauliodiez

Destructuring

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

steps

Let's create a function that will concat a given client name and lastname.

brauliodiez

Start

For sure now you will have a lot of questions poping up into your head, about cases where typing has not to be strict.

We will continue using typescript playground.

Let's start diving into that.

Topics to cover:

brauliodiez

Arrow functions

An arrow function has a shorter syntax that a function expression and does not bind its own this. arguments, super or new.target.

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

steps

Let's emulate an async call after a given timeout, if we do it in the traditional way, when

brauliodiez

Typescript getting started

Let's get started with Typescript.

We will use Typescript online playground for this demos:

http://www.typescriptlang.org/play/

Steps

• Let's start with something very basic, if we paste this code on codepen (javascript):

brauliodiez

Backticks

Just using the new ES6 backticks to:

• Display multiline text.
• Embed variable values into strings (similar to print.format or c# string.format).

Steps

• Let's first create a multiline text using an ES6 approach:

brauliodiez

Const / Let

Let:

• Variables that can change (be reassigned).
• Take in account block scope instead of function scope (e.g. issue var for or if).

Const:

• Variables that cannot be reassigned ()

More info: https://medium.com/javascript-scene/javascript-es6-var-let-or-const-ba58b8dcde75

brauliodiez

spread operator

The spread syntax allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) or multiple variables (for destructuring assignment) are expected.

steps

Copying an object but replacing some properties:

This one we will need bable to make it work

brauliodiez

const calculateFinalPrice = function () {
  const discount = 0.90;
  
  // simulate ajax call
  setTimeout(function() {
    const total = 200;
    const final = total * discount;
    console.log(final)
  }, 500);
}

brauliodiez

reduce

Reduce allows us calculate a total, applying an operation on every operation of an array.

This can save us lot of "for" loops (enhannce readibility).

steps

Let's implement a function that will sum up an array.