ES6

Introduction

  • "European Computer Manufacturers Association Script"
  • Was created to standardize JavaScript
  • Some updates
    • new data types
    • easier to define the scope of code blocks
  • Babel can be used to transpile to ES5

const & let

Cons of var

  • Possible to easily pollute the global scope
     
  • Not block-scoped

const & let > Cons of var

const

  • The value remains constant
     
  • Cannot be re-assignment or redeclared
     
  • Can be declared uppercase (recommended!) or lowercase

const & let > const

// declaring a const
const FOO = 'bar';



// Object
const CAR = {
    brand: 'Tesla',
    color: 'red'
};

// Using dot notation to modify the object
CAR.year = '2017';
console.log(CAR);

// Output:
{brand: 'Tesla', color: 'red', year: '2017'}



// Array
const GAMES = ['AC: Origins'];

// Push method to modify the array
GAMES.push('CoD: WWII');
console.log(GAMES);

// Output:
['AC: Origins', 'CoD: WWII']

const & let > const > code example

let

  • Works like var but with block-level scoping
     
  • Allows you to re-assign a value
     
  • Should use camelCase

const & let > let

// declaring a let
let foo = 'bar';


// Avoids scoping problems in for loops because it's block-level scoped
for ( let i = 0; i < 10; i++ ) {
  console.log(i);
}

const & let > let > code example

template literals

template literals > code example

 

// Example: String literal
const DEV_QUOTES = 
    '<ul>' + 
        '<li>It’s not a bug. It’s an undocumented feature!</li>' + 
        '<li>Things aren’t always #000000 and #FFFFFF</li>' + 
        '<li>Beta is Latin for "still not working"</li>' + 
    '</ul>';


// Example: Template literal
const DEV_QUOTES = `
    <ul> 
        <li>It's not a bug. It’s an undocumented feature!</li>
        <li>Things aren't always #000000 and #FFFFFF</li> 
        <li>Beta is Latin for "still not working"</li>
    </ul>
`;



// Interpolation
let nameDeveloper = `Chuck`;
let companyName = `Competa`;

let joinUs = `Hi ${nameDeveloper}, come join our Tech Talk on the 22nd at ${companyName}`;

searching strings

Methods

  • startsWith
     
  • endsWith
     
  • includes

searching strings > methods

startsWith

  • Checks if a strings begins with a particular set of characters

searching strings > methods > startsWidth

let quote = 'There are two ways to write error-free 
programs; only the third one works.';

console.log(quote.startsWith('There are'));

// Possible to give a parameter with the position you want to start indexing
console.log(quote.startsWith('There are', 2));

// Example regular expression
console.log(/^There/.test(quote));

endsWith

searching strings > methods > endsWith

let quote = 'A good way to stay flexible is to write less code';

console.log(quote.endsWith('code'));

// Possible to give a parameter to indicate the maximum characters to search through
console.log(quote.endsWith('code', 10));

// Example regular expression
console.log(/code$/.test(quote));
  • Checks if a strings ends with a particular set of characters

includes

searching strings > methods > includes

let quote = 'Always code as if the person who ends up maintaining 
your code will be a violent psychopath who knows where you live';

console.log(quote.includes('psychopath'));

// Example regular expression
console.log(/psychopath/.test(quote));
  • Check if a string includes the word

rest & spread

rest parameter

  • Makes it easier to pass parameters to a function
  • Uses 3 dots
  • Needs to be the last parameter defined

rest & spread > rest parameter

'use strict';

function developer(name, age, ...skills) {
    console.log(name, age, skills);
}

developer('Chris', 24, 'PHP', 'JavaScript', 'D3');
developer('Paul', 26, 'Sass', 'Redux', 'React');

// Output:
Chris 24 ['PHP', 'JavaScript', 'D3']
Paul 26 ['Sass', 'Redux', 'React']

spread operator

  • Can build and manipulate Arrays

rest & spread > spread operator

'use strict';

const DAYS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday'];
const MONTHS = ['June', 'November'];


const COMBINED = ['Friday', 'Saturday', ...DAYS, 'Hi there', ...MONTHS];

console.log(COMBINED);


// Output:

['Friday', 'Saturday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Hi there', 'June', 'November']

ES6

By Kim Massaro

ES6

Some features of ES6

  • 640