Week 01 → Day 001 → Mon → August 7, 2017

Index
Lecture 1 ⋰ ES6 ⋰ Scope ⋰ const & let⋰ Arrow Functions ⇒ ⋰ Semicolons ⋰ Template Literals
Pair Programming with Adam Lower ⋰ Basic JavaScript

Lecture 1 ━ Ben Nelson

ES6 (ECMAScript 6, ES2015) ━ 🗣 0:00

Scope ━ 🗣 0:00

function foo() {
  var message = 'hi';
  message = 'sup';
  console.log(message); // sup
  function bar() {
    var x = 5;
    console.log(message); // sup
  }
  bar();
  console.log(x); // error
}

foo();

console.log(message);

constandlet ━ 🗣 0:00

constmeans that the identifier can't be reassigned. Use as default choice overletto keep usage as clear as possible in the code.

Useletwhen you need a variable that can be reassigned, such as a counter in a loop, or a value swap in an algorithm.

There is no situation where you would usevaroverletin ES6.

Block Scope in ES6 ━ 🗣 0:00

if (true) {
    let x = 'hi';      // x is confined within {}
    console.log(x);    // "hi"
}
console.log(x);        // "error"

Withletandconst, variables are now scoped at the block level (the nearest curly brackets{}).

() ⇒ {} Arrow Functions ━ 🗣 0:00

function foo () {} // function declaration

var foo = function () {} // function expression

const foo = () => {} // arrow function

Single-line Arrow Function Implicit return ━ 🗣 0:00

const multiply = (x, y) => x * y;

Curly braces need explicit return:

const multiply = (x, y) => { return x * y };

Template Literals ━ 🗣 0:00

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

Template literals are string literals allowing multi-line strings and embedded expressions (${...}).

Tags allow you to parse template literals with a function.

function highlight() {
    // do something
}

const name = 'Snickers';
const age = '100';
const sentence = highlight`My dog's name is ${name} and he is ${age} years old`;

console.log(sentence)

↑

Pair Programming with Adam Lower ━ Basic JavaScript