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
- 657