ES6

Here are some links and information that will help us in the learning and implementation of the JavaScript 2015-ES6, some of the new features do the same that old ones do but in many cases the code running under the hood has been upgrade to be less taxing on the hardware and system requirements, in some other cases make it so we do the same but using less code and making it less redundant, and in some other cases it give us new features that previously exist only in our wishlist.

Whit no more delay, here are the links and examples for ES6.

  • Exploring ES6 (online book): LInk  —  Link2
  • ES6 New Features (online guide): LInk
  • Top 10 ES6 Features Every Busy JavaScript Developer Must Know: Link
  • How to learn ES6: Link
  • ES6 CheatSheets: LINK   —   Link2

Variables:

Template Literals:

This would be a new way for Concatenation and String-Interpolation, using “Backtics” [ ` ] <– key left of key [ 1 ]

The Spread Operator:

This provide a way to manipulate Arrays and Objects.

Another example would be:

The spread operator is an Array, and you can use any of the array methods. on it.

Destructuring Assignment – Arrays

This allow to extract data from arrays and objects into separate variables.

Destructuring Assignment – Objects

Arrow Functions:

On Arrow functions () => {}   the word “this” is not bind to the function but to the object where the function is encapsulated.


Build-In Methods

Map() Method:

This calls a function on each element on the array,

Filter() Method:

Returns a new array based on the original:

repeat()

startWith()  endsWith()  includes()

isFinite()

 

arr.reduce(…)

The “.reduce” method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

—————————————————–

Adding values from an array or numbers (next two code examples):

Note: the accumulator:

The accumulator is the first parameter: arr.reduce( ( accum, cval ) => { return accum += cval }, Accumulator );

and the Accumulator can have an initial value.

 

—————————————————–

Array to Object, with number or occurances:

The result will be:

—————————————————–

Adding values from an array of objects:

—————————————————–

Average of an Array of numbers:

—————————————————–

Concatenation of sub arrays: 

—————————————————–

Function Composition:

—————————————————–

Array of names to array of names.length:

Note:  you can do this easier with .map(…) just want to use .push(..) inside of .reduce(…) this case.

—————————————————–

Array of names to Object of name: length  

 

 

Other Methods:

There are lots of methods that can help you in your code, Here is list of Array methods from MDN: Link

And here is a list of Object Methods from MDN: Link


Modules:

Modules allow to spread data among different files, using “Export & Import” and works with: Fuctions, Objects, Primitive variables. as “let or const

The next code is an example of a regular way

Default Exports

Now the next code is based on the last one but will use the default method.

Classes

Example of a basic Class:

Inheritance in ES6 Classes or “extends” —> Example 1

In this example we are using the inherited “ greet() ” function but if you want to have one different you just need to write one and that will overwrite the one inherited.

Then we can add more data to make the Class Snake more unique. and we will overwrite the “greet()” method

** Static Methods in Classes:

This allows you access to use the methods of a class without need to create a “NEW” instance of the class.

** Classes & Prototypes

Data Structures

Maps:

Maps have Keys & Values just like an Object, the difference is that in objects we can not use some words as a key because is a “reserve word” and the key in an object are primarily strings, however in Maps you can use any kind of “data type” as a key, like: numbers, objects, and even functions.

Converting a two dimensional Array to a Map

Application, we will count how many times a character repeats on a string.

 

Closures

This tool allow us to create function factories here is one example:

Closures:  Private Methods

Generators

This new feature allow a function to Pause, return the current state of the Generator, then resume from it left it. To create ” function* ” to pause use “yield” and to resume “.next()” and we DO NOT use the word “new”  when creating instances of the generator.

I encounter several problems here find solution to WebPack

 

Asynchronous Programming

Promises:

Promises can exist in one of the three following states:

  1. pending.
  2. fulfilled.
  3. rejected.

HTTP & Fetch:

  • GET: retrives data and has no secondary effect.
  • POST: sends data to a server to add resources.
  • HEAD: ask for metadata information.
  • DELETE: removes a specify resource.
  • PATCH: partially modify the resource.

To practice go to:  jsonplaceholder.typicode.com this is a tool that simulates an API, for testing.

Scroll down and click the link: ” GET    /post/1 ” this will take you to a page were you will find some return JSON data.

But what we really want is to have this data in our program so we can manipulate it, to do this we use the following code:

But what we really want is the data, to do that we will go to the: “ __proto__: Response” and the method: ” json ”  which will convert this data into a pure JSON Object.

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –

Now lest do another example using the free API for Books from Google:

in this case we got the information for a book: “ title:Harry Potter 1 and the Philosopher’s Stone

 

 

.



Copyright 2017. All rights reserved.

Posted April 12, 2017 by Edmundo in category "JS