Bootcamp
Search…
0.2.1: ES6 Basics

Variable Declaration with let and const

In Coding Basics we declared variables with var.
var kilometers = 10;
var randomDiceRolls = [3, 2, 4, 5];
In ES6 we change variable declaration syntax to use let and const instead.
let kilometers = 10;
const randomDiceRolls = [3, 2, 4, 1];
The following sections are guidelines on when to use let vs const.

let for Primitive Values that Change

Use let if the value in our variable is a primitive data type (e.g. number, string, or boolean) and we expect the value to be reassigned.
let kilometers = 10;

const for Primitive Values that Don't Change

Use const if our variable's value will not change.
const sidesOfDice = 6;

Reassigning a const Variable Throws an Error

const pi = 3.14;
pi = 99999; // you will get an error with this line

const for Arrays and Objects

We typically use const for arrays and objects, even if we plan to mutate the values inside them. This is because arrays and objects (and other variable-size data types over than strings) are known as "mutable" data types, whose variable values are actually "pointers" to "memory addresses" that store the variable-size data type. When we modify arrays and objects, the contents at their addresses may change, but the addresses and pointers themselves do not change, thus const is appropriate for var declarations.
const diceRolls = [3, 4, 1, 6, 1];

Mutable vs Immutable Data Types

Arrays, objects, and data structures in general are "mutable" data types, meaning the variables that reference them actually store pointers to their memory addresses. This happens under the hood, which is why many beginner developers may not realise this. Primitive data types are "immutable" data types, thus variables that reference them store their actual values instead of pointers.

Altering values inside an array works fine with const

const diceRolls = [4, 2, 1, 4];
// the following affects values *inside* array, not address of array itself
diceRolls.push(5);

Reassigning the value of the variable that stored the array_ _will cause an error

const diceRolls = [4, 2, 1, 4];
diceRolls = [5]; // this will cause an error
This is also related to why we cannot compare two arrays (or objects) directly with ===. The 2 arrays being compared live at different addresses in memory, and by default it is the memory addresses being compared, not the values at those addresses.
[1, 2, 3] === [1, 2, 3]; // this boolean statement will not be true

Block Scope

Variables we define in "blocks" like an if statement will not be available anymore when we use let and const. var in ES5 uses "function scope", which makes variables declared with var accessible anywhere within a given function.

Old Way (Function Scope)

var myFunc = function () {
if (diceRoll === 6) {
var win = true;
}
console.log(win); // this will be true
}

New Way (Block Scope)

var myFunc = function () {
if (diceRoll === 6) {
let win = true;
}
// this will error. win variable doesn't
// exist here, outside the if statement
console.log(win);
}
Block scope refers to JavaScript blocks, which are lines of code within curly braces {}. These typically include if, (and else if, etc.), loops and switch statements. let and const variables declared in a block will not exist outside the block.

3 Ways to write Functions in Javascript

There are multiple ways to define functions in JavaScript.

Named Syntax

The function is explicitly named in the declaration.
function rollDiceNamed() {
var myRandomValue = Math.random();
return myRandomValue;
};

Anonymous Function Syntax

The function is created anonymously (without a name), then assigned to a variable.
var rollDiceCheat = function () {
// always return 6 to win.
return 6;
};

Anonymous Function Arrow Syntax

Another way to create an anonymous function is through the arrow syntax. Similar to the example above the function is assigned to the `rollDiceArrow`.
const rollDiceArrow = () => {
var myRandomValue = Math.random();
return myRandomValue;
};

Implicit Return value in Arrow Functions

If the right side of an arrow function is a single statement, it is automatically returned by the function. Because of this arrow functions can be used to write very short functions.
// Always get 5.
const rollDiceCheatArrowImplicitReturn = () => 5;
​
// Implicitly returns the result of Math.floor(Math.random() * 6 + 1)
const rollDiceArrowImplicitReturn = () => Math.floor(Math.random() * 6 + 1);
We also always use const when defining a function.
Below is a runnable code snippet that illustrates the above functions:
function rollDiceNamed() {
var myRandomValue = Math.random() * 6 + 1;
return Math.floor(myRandomValue);
};
​
const rollDiceCheat = function () {
// always get six
return 6;
};
​
const rollDiceArrow = () => {
var myRandomValue = Math.random() * 6 + 1;
return Math.floor(myRandomValue);
};
​
// always get 5.
const rollDiceCheatArrowImplicitReturn = () => 5;
//explicitly returns the result of Math.floor(Math.random() * 6 + 1)
const rollDiceArrowImplicitReturn = () => Math.floor(Math.random() * 6 + 1);
​
​
console.log(rollDiceCheat()); // always 6
console.log(rollDiceCheatArrowImplicitReturn()); //always 5
​
console.log(rollDiceNamed()); // legitimate dice roll
console.log(rollDiceArrow()); // legitimate dice roll
console.log(rollDiceArrowImplicitReturn()); //legitimate dice roll

Template Literals

Old Way

let output = "you rolled " + diceRoll + ". nice job!";

New Way

let output = `you rolled ${diceRoll}. nice job!`;

Exercises

let & const

Open up the dev tools console in Chrome. Follow the const examples above to get the error. What does the error message say?
Go back to an old piece of code you've written. Change a few of the variable declarations to let and const.

Arrow Functions

Go back to an old piece of code you've written. Change the function definition to use arrow functions in one place that you can easily test.
You can change the definition of the main function in any old code from Coding Basics.

Template Literals

Change one string output where you used plus sign and change it to a template literal.