ECMAScript 6 Tutorial

Posted by Derek Banas on Dec 21, 2016 in Web Design | 0 comments

In this video I’ll teach ECMAScript 6 in one video. In this video I’ll cover the vast majority of ECMAScript 6 in one video. We’ll cover Let, Constants, Data Types, Strings, Template Literals, Tagged Template Literals, For Of, Functions, Rest Parameters, Arrow Functions, Reduce, Filter, Map, Objects, Destructoring, Classes, Inheritance, Symbols, Arrays, Sets, Maps, forEach, Promises and more.

All of the code and a transcript of the video follows the video below.

If you like videos like this consider donating $1 on Patreon.

[googleplusone]

Cheat Sheet & Transcript

---------- ecmascripttut.html ----------

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <script src="ecmatut.js"></script>
    </body>
</html>

---------- ecmatut.js ----------

// ---------- LET ----------
if(true){
  // If you use var then the variable is available
  // globally versus let which makes the variable
  // available only in the block
  // let x = 10;
  var x = 10;
  document.write("x = " + x + "<br />");
}

// x is undefined here
document.write("x = " + x + "<br />");

// If you use let in a block with the same name
// it won't effect the value outside of the block

var y = 10

if(true){
  let y = 20
}

document.write("y = " + y + "<br />");

// ---------- CONST ----------
// You can define constant values that can't change
const PI = 3.14159

// This throws an error
// PI = 2.13

// This won't since the constant is in a block
if(true){
  const PI = 2.13
}

// ---------- DATA TYPES ----------
// You still don't declare a data type, but instead
// the value defined defines the type being Boolean,
// Number, String, Object, Symbol

document.write(typeof true + "<br />");
document.write(typeof 3.14 + "<br />");
document.write(typeof "string" + "<br />");
document.write(typeof Symbol() + "<br />");
document.write(typeof {a:1} + "<br />");
document.write(typeof [1,2,3] + "<br />");
document.write(typeof undefined + "<br />");

// ---------- STRINGS ----------
// You can use string interpolation using template
// literals
let fName = "Derek";
let lName = "Banas";
document.write(`${fName} ${lName}` + "<br />");

// Calculation in output using template literals
let num1 = 10
let num2 = 5
document.write(`10 * 5 = ${num1 * num2}` + "<br />");

// You can use tagged template literals to modify
// output using a function
// The strings array contains the strings and the
// values array the substitutions
function doMath(strings, ...values) {
  if (strings[0] == 'Add'){
    document.write(`${values[0]} + ${values[1]} = ${values[0] + values[1]} <br />`);
  } else if (strings[0] == 'Sub'){
    document.write(`${values[0]} - ${values[1]} = ${values[0] - values[1]} <br />`);
  }
}

doMath`Add${10} ${20}`;
doMath`Sub${10} ${20}`;

// Iterate over characters
for(let c of fName){
  document.write(`${c} <br />`);
}

// Repeat a string
document.write("Hello ".repeat(3) + "<br />");

// Does a string start with a value
document.write(fName.startsWith("De") + "<br />");

// Does it end with
document.write(fName.endsWith("ek") + "<br />");

// Does it include
document.write(fName.includes("ere") + "<br />");

// Multiline strings
let multilineStr = "This is \
a multiline \
string";

document.write(`${multilineStr} <br />`);

let anothermlstr = `Another
multiline
string`;

document.write(`${anothermlstr} <br />`);

// ---------- FUNCTIONS ----------
// Default values are defined next to parameters
function getSum(num1 = 1, num2 = 1){
  document.write(`${num1} + ${num2} = ${num1+num2}<br />`);

  // arguments[] only receives the value passed
  document.write(`${arguments[0]} + ${arguments[1]}<br />`)
}

getSum(3);

// Rest parameters, which are preceeded by ...
// become an array
// You can only have 1 rest parameter and it must
// be defined last

function getSumMore(...vals){
  let sum = 0;
  for(let i = 0, len = vals.length; i < len; i++){
    sum += vals[i];
  }
  document.write(`The sum is ${sum}<br />`);
}

getSumMore(1,2,3,4);

// You can also pass arrays
let vals = [1,2,3,4,5];
getSumMore(...vals);

// Arrow functions define parameters followed
// by the body of the function
let difference = (num1, num2) => num1 - num2;
document.write(`5 - 10 = ${difference(5,10)}<br />`);

// They can contain more then 1 statement
let mult = (num1, num2) => {
  let product = num1 * num2;
  document.write(`${num1} * ${num2} = ${product}<br />`);
};

mult(5,50);

// You can use arrow functions with map, filter and
// map
let valArr = [1,2,3,4,5];

// Reduce applies a function against an accumulator
// to get a single result
let sumVals = valArr.reduce((a, b) => a + b);
document.write(`Sum : ${sumVals}<br />`);

// Filter returns those values that pass the condition
let evens = valArr.filter(v => v % 2 == 0);
document.write(`Evens : ${evens}<br />`);

// Map performs the given action on every item passed
let doubles = valArr.map(v => v * 2);
document.write(`Doubles : ${doubles}<br />`);

// ---------- OBJECTS ----------
// You create object literals like this
function createAnimal(name, owner){
  return {
    // Properties
    name,
    owner,
    // Create a method
    getInfo(){
      return `${this.name} is owned by ${this.owner}`
    },
    // Objects can contain other objects
  address: {
    street: '123 Main St',
    city: 'Pittsburgh'
  }
  };
}

var spot = createAnimal("Spot", "Doug");

// Execute method
document.write(`${spot.getInfo()}<br />`);

// Access object in the object
document.write(`${spot.name} is at ${spot.address.street}<br />`);

// Get properties and methods of object
document.write(`${Object.getOwnPropertyNames(spot).join(" ")} <br />`);

// You can store values from Objects with destructoring
let { name, owner } = spot;
document.write(`Name : ${name}<br />`);

// Get the inner class value
let { address } = spot
document.write(`Address : ${address.street}<br />`);

// You can destructor arrays as well
let favNums = [2.718, .5772, 4.6692];
let [,,chaos] = favNums;
document.write(`Chaos : ${chaos}<br />`);

// You can use rest items to grab part of an array
let [, ...last2] = favNums;
document.write(`2nd Num : ${last2[0]}<br />`);

// This can be used to switch values
let val1 = 1, val2 = 2;
[val1,val2] = [val2,val1];
document.write(`Val2 : ${val2}<br />`);

// ---------- CLASSES ----------
// Classes now work much like they do in other languages
class Mammal{
  constructor(name){
    this._name = name;
  }

  // Getter
  get name() {
    return this._name;
  }

  // Setter
  set name(name){
    this._name = name;
  }

  // Static Mammal creator
  static makeMammal(name){
    return new Mammal(name);
  }

  getInfo(){
    return `${this.name} is a mammal`;
  }

}

// Create an object
let monkey = new Mammal("Fred");

// Change name
monkey.name = "Mark";

// Call getter
document.write(`Mammal : ${monkey.name}<br />`);

// Create Mammal using static function
let chipmunk = Mammal.makeMammal("Chipper");
document.write(`Mammal 2 : ${chipmunk.name}<br />`);

// You can inherit properties and methods with extends
class Marsupial extends Mammal{
  constructor(name, hasPouch){
    // Call the super class constructor
    super(name);
    this._hasPouch = hasPouch;
  }

  get hasPouch() {
    return this._hasPouch;
  }

  set hasPouch(hasPouch){
    this._hasPouch = hasPouch;
  }

  // You can override methods
  getInfo(){
    return `${this.name} is a marsupial`;
  }

}

let kangaroo = new Marsupial("Paul", true);
document.write(`It is ${kangaroo.hasPouch} that ${kangaroo.name} has a pouch<br />`);

// Test overridden method
document.write(`${chipmunk.getInfo()}<br />`);
document.write(`${kangaroo.getInfo()}<br />`);

// You can dynamically inherit from Classes
function getClass(classType){
  if (classType == 1) {
    return Mammal;
  } else {
    return Marsupial;
  }
}

class Koala extends getClass(2){
  constructor(name){
    super(name);
  }
}

let carl = new Koala("Carl");
document.write(`${carl.getInfo()}<br />`);

// ---------- SYMBOLS ----------
// A Symbol is like an enumerated type that can be used as
// identifiers and they can't be changed (immutable).

// Create a symbol that is used like a label in an array
// You can provide a description in quotes
let capital = Symbol("State Capital");

let pennsylvania = {};
pennsylvania[capital] = "Harrisburg";
document.write(`Capital of PA : ${pennsylvania[capital]}<br />`);

// Get the description
document.write(`Symbol Capital : ${capital.toString()}<br />`);

// You can share symbols by using symbol.for()
let employNum = Symbol.for("Employee Number");

let bobSmith = {};
bobSmith[employNum] = 10;

let sallyMarks = {};
sallyMarks[employNum] = 11;

document.write(`Bob : ${bobSmith[employNum]}<br />`);
document.write(`Sally : ${sallyMarks[employNum]}<br />`);

// ---------- ARRAYS ----------
// Array.of() is used to create arrays instead of the array
// constructor
let array1 = Array.of(1,2,3);

// Create an object into an array
let array2 = Array.from("word");

// You can use Array.from to manipulate values
let array3 = Array.from(array1, (value) => value * 2);

// Iterate over values
for (let val of array3) document.write(`Array Val : ${val}<br />`);

// ---------- SETS ----------
// A Set is a list of values with no duplicates
var randSet = new Set();
randSet.add(10);
randSet.add("Word");

// Check to see if set contains a value
document.write(`Has 10 : ${randSet.has(10)}<br />`);

// Get size of Set
document.write(`Set Size : ${randSet.size}<br />`);

// Delete item from list
randSet.delete(10);

// Iterate a Set
for (let val of randSet) document.write(`Set Val : ${val}<br />`);

// ---------- MAPS ----------
// A Map is a collection of key/value pairs
var randMap = new Map();
randMap.set("key1", "Random String");
randMap.set("key2", 10);

// Get values
document.write(`key1 : ${randMap.get("key1")}<br />`);
document.write(`key2 : ${randMap.get("key2")}<br />`);

// Get size
document.write(`Map Size : ${randMap.size}<br />`);

// Iterate Map
randMap.forEach(function(value, key){
  document.write(`${key} : ${value}<br />`);
});

// ---------- PROMISES ----------
// Promises define code that is to be executed later
// Promises either succeed or fail once
// They either are fulfilled, rejected, pending, or settled

// A Promise that is handled immediately
var p1 = Promise.resolve('Resolve Me');

// then takes 2 optional arguments being first a callback
// for a success and another for failure
p1.then((res) => document.write(`${res}<br />`));

// Create a promise that executes after 2 seconds
var p2 = new Promise(function(resolve, reject){
  setTimeout(() => resolve('Resolve Me'), 2000);
});

p2.then((res) => document.write(`${res}<br />`));

// Here I demonstrate how then is used if a promise is
// fulfilled or rejected
let randVal = 18;

var p3 = new Promise(function(resolve, reject){
  if (randVal == 6){
    resolve("Good Value");
  } else {
    reject("Bad Value");
  }
});

p3.then((val) => document.write(`${val}<br />`),
        (err) => document.write(`${err}<br />`));

// You should add catch to a chain to handle errors

var p4 = new Promise((resolve, reject) => {
  if (randVal <= 17){
    throw new Error("Can't Vote"); // Same as a Reject
  } else {
    resolve("Can Vote");
  }
});

p4.then((val) => document.write(`${val}<br />`))
  .catch((err) => document.write(`${err.message}<br />`));

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

---------- ecmascripttut.html ----------

<!doctype html>

<html>

<head>

</head>

<body>

</body>

</html>

---------- ecmatut.js ----------

// ---------- LET ----------

if(true){

// If you use var then the variable is available

// globally versus let which makes the variable

// available only in the block

// let x = 10;

var x = 10;

document.write("x = " + x + " ");

}

// x is undefined here

document.write("x = " + x + " ");

// If you use let in a block with the same name

// it won't effect the value outside of the block

var y = 10

if(true){

let y = 20

}

document.write("y = " + y + " ");

// ---------- CONST ----------

// You can define constant values that can't change

const PI = 3.14159

// This throws an error

// PI = 2.13

// This won't since the constant is in a block

if(true){

const PI = 2.13

}

// ---------- DATA TYPES ----------

// You still don't declare a data type, but instead

// the value defined defines the type being Boolean,

// Number, String, Object, Symbol

document.write(typeof true + " ");

document.write(typeof 3.14 + " ");

document.write(typeof "string" + " ");

document.write(typeof Symbol() + " ");

document.write(typeof {a:1} + " ");

document.write(typeof [1,2,3] + " ");

document.write(typeof undefined + " ");

// ---------- STRINGS ----------

// You can use string interpolation using template

// literals

let fName = "Derek";

let lName = "Banas";

document.write(`${fName} ${lName}` + " ");

// Calculation in output using template literals

let num1 = 10

let num2 = 5

document.write(`10 * 5 = ${num1 * num2}` + " ");

// You can use tagged template literals to modify

// output using a function

// The strings array contains the strings and the

// values array the substitutions

function doMath(strings, ...values) {

if (strings[0] == 'Add'){

document.write(`${values[0]} + ${values[1]} = ${values[0] + values[1]} `);

} else if (strings[0] == 'Sub'){

document.write(`${values[0]} - ${values[1]} = ${values[0] - values[1]} `);

}

doMath`Add${10} ${20}`;

doMath`Sub${10} ${20}`;

// Iterate over characters

for(let c of fName){

document.write(`${c} `);

}

// Repeat a string

document.write("Hello ".repeat(3) + " ");

// Does a string start with a value

document.write(fName.startsWith("De") + " ");

// Does it end with

document.write(fName.endsWith("ek") + " ");

// Does it include

document.write(fName.includes("ere") + " ");

// Multiline strings

let multilineStr = "This is \

a multiline \

string";

document.write(`${multilineStr} `);

let anothermlstr = `Another

multiline

string`;

document.write(`${anothermlstr} `);

// ---------- FUNCTIONS ----------

// Default values are defined next to parameters

function getSum(num1 = 1, num2 = 1){

document.write(`${num1} + ${num2} = ${num1+num2} `);

// arguments[] only receives the value passed

document.write(`${arguments[0]} + ${arguments[1]} `)

}

getSum(3);

// Rest parameters, which are preceeded by ...

// become an array

// You can only have 1 rest parameter and it must

// be defined last

function getSumMore(...vals){

let sum = 0;

for(let i = 0, len = vals.length; i < len; i++){

sum += vals[i];

}

document.write(`The sum is ${sum} `);

}

getSumMore(1,2,3,4);

// You can also pass arrays

let vals = [1,2,3,4,5];

getSumMore(...vals);

// Arrow functions define parameters followed

// by the body of the function

let difference = (num1, num2) => num1 - num2;

document.write(`5 - 10 = ${difference(5,10)} `);

// They can contain more then 1 statement

let mult = (num1, num2) => {

let product = num1 * num2;

document.write(`${num1} * ${num2} = ${product} `);

};

mult(5,50);

// You can use arrow functions with map, filter and

// map

let valArr = [1,2,3,4,5];

// Reduce applies a function against an accumulator

// to get a single result

let sumVals = valArr.reduce((a, b) => a + b);

document.write(`Sum : ${sumVals} `);

// Filter returns those values that pass the condition

let evens = valArr.filter(v => v % 2 == 0);

document.write(`Evens : ${evens} `);

// Map performs the given action on every item passed

let doubles = valArr.map(v => v * 2);

document.write(`Doubles : ${doubles} `);

// ---------- OBJECTS ----------

// You create object literals like this

function createAnimal(name, owner){

return {

// Properties

name,

owner,

// Create a method

getInfo(){

return `${this.name} is owned by ${this.owner}`

// Objects can contain other objects

address: {

street: '123 Main St',

city: 'Pittsburgh'

}

};

}

var spot = createAnimal("Spot", "Doug");

// Execute method

document.write(`${spot.getInfo()} `);

// Access object in the object

document.write(`${spot.name} is at ${spot.address.street} `);

// Get properties and methods of object

document.write(`${Object.getOwnPropertyNames(spot).join(" ")} `);

// You can store values from Objects with destructoring

let { name, owner } = spot;

document.write(`Name : ${name} `);

// Get the inner class value

let { address } = spot

document.write(`Address : ${address.street} `);

// You can destructor arrays as well

let favNums = [2.718, .5772, 4.6692];

let [,,chaos] = favNums;

document.write(`Chaos : ${chaos} `);

// You can use rest items to grab part of an array

let [, ...last2] = favNums;

document.write(`2nd Num : ${last2[0]} `);

// This can be used to switch values

let val1 = 1, val2 = 2;

[val1,val2] = [val2,val1];

document.write(`Val2 : ${val2} `);

// ---------- CLASSES ----------

// Classes now work much like they do in other languages

class Mammal{

constructor(name){

this._name = name;

}

// Getter

get name() {

return this._name;

}

// Setter

set name(name){

this._name = name;

}

// Static Mammal creator

static makeMammal(name){

return new Mammal(name);

}

getInfo(){

return `${this.name} is a mammal`;

}

// Create an object

let monkey = new Mammal("Fred");

// Change name

monkey.name = "Mark";

// Call getter

document.write(`Mammal : ${monkey.name} `);

// Create Mammal using static function

let chipmunk = Mammal.makeMammal("Chipper");

document.write(`Mammal 2 : ${chipmunk.name} `);

// You can inherit properties and methods with extends

class Marsupial extends Mammal{

constructor(name, hasPouch){

// Call the super class constructor

super(name);

this._hasPouch = hasPouch;

}

get hasPouch() {

return this._hasPouch;

}

set hasPouch(hasPouch){

this._hasPouch = hasPouch;

}

// You can override methods

getInfo(){

return `${this.name} is a marsupial`;

}

let kangaroo = new Marsupial("Paul", true);

document.write(`It is ${kangaroo.hasPouch} that ${kangaroo.name} has a pouch `);

// Test overridden method

document.write(`${chipmunk.getInfo()} `);

document.write(`${kangaroo.getInfo()} `);

// You can dynamically inherit from Classes

function getClass(classType){

if (classType == 1) {

return Mammal;

} else {

return Marsupial;

}

class Koala extends getClass(2){

constructor(name){

super(name);

}

let carl = new Koala("Carl");

document.write(`${carl.getInfo()} `);

// ---------- SYMBOLS ----------

// A Symbol is like an enumerated type that can be used as

// identifiers and they can't be changed (immutable).

// Create a symbol that is used like a label in an array

// You can provide a description in quotes

let capital = Symbol("State Capital");

let pennsylvania = {};

pennsylvania[capital] = "Harrisburg";

document.write(`Capital of PA : ${pennsylvania[capital]} `);

// Get the description

document.write(`Symbol Capital : ${capital.toString()} `);

// You can share symbols by using symbol.for()

let employNum = Symbol.for("Employee Number");

let bobSmith = {};

bobSmith[employNum] = 10;

let sallyMarks = {};

sallyMarks[employNum] = 11;

document.write(`Bob : ${bobSmith[employNum]} `);

document.write(`Sally : ${sallyMarks[employNum]} `);

// ---------- ARRAYS ----------

// Array.of() is used to create arrays instead of the array

// constructor

let array1 = Array.of(1,2,3);

// Create an object into an array

let array2 = Array.from("word");

// You can use Array.from to manipulate values

let array3 = Array.from(array1, (value) => value * 2);

// Iterate over values

for (let val of array3) document.write(`Array Val : ${val} `);

// ---------- SETS ----------

// A Set is a list of values with no duplicates

var randSet = new Set();

randSet.add(10);

randSet.add("Word");

// Check to see if set contains a value

document.write(`Has 10 : ${randSet.has(10)} `);

// Get size of Set

document.write(`Set Size : ${randSet.size} `);

// Delete item from list

randSet.delete(10);

// Iterate a Set

for (let val of randSet) document.write(`Set Val : ${val} `);

// ---------- MAPS ----------

// A Map is a collection of key/value pairs

var randMap = new Map();

randMap.set("key1", "Random String");

randMap.set("key2", 10);

// Get values

document.write(`key1 : ${randMap.get("key1")} `);

document.write(`key2 : ${randMap.get("key2")} `);

// Get size

document.write(`Map Size : ${randMap.size} `);

// Iterate Map

randMap.forEach(function(value, key){

document.write(`${key} : ${value} `);

});

// ---------- PROMISES ----------

// Promises define code that is to be executed later

// Promises either succeed or fail once

// They either are fulfilled, rejected, pending, or settled

// A Promise that is handled immediately

var p1 = Promise.resolve('Resolve Me');

// then takes 2 optional arguments being first a callback

// for a success and another for failure

p1.then((res) => document.write(`${res} `));

// Create a promise that executes after 2 seconds

var p2 = new Promise(function(resolve, reject){

setTimeout(() => resolve('Resolve Me'), 2000);

});

p2.then((res) => document.write(`${res} `));

// Here I demonstrate how then is used if a promise is

// fulfilled or rejected

let randVal = 18;

var p3 = new Promise(function(resolve, reject){

if (randVal == 6){

resolve("Good Value");

} else {

reject("Bad Value");

}

});

p3.then((val) => document.write(`${val} `),

(err) => document.write(`${err} `));

// You should add catch to a chain to handle errors

var p4 = new Promise((resolve, reject) => {

if (randVal <= 17){

throw new Error("Can't Vote"); // Same as a Reject

} else {

resolve("Can Vote");

}

});

p4.then((val) => document.write(`${val} `))

.catch((err) => document.write(`${err.message} `));

	Facebook
	YouTube
	Twitter
	LinkedIn

ECMAScript 6 Tutorial

Leave a Reply Cancel reply