0.4.2: Common Syntax
Understand and apply the following JS language features.
- 1.
letandconstin variable declaration - 2.Block scope (ES6) vs function scope (ES5 and before)
- 3.Arrow functions
- 4.Template literals
In Coding Basics we may have 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.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;
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
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];
We can alter values inside arrays declared with
const.const diceRolls = [4, 2, 1, 4];
// The following affects values inside diceRolls but not the address of diceRolls
diceRolls.push(5);
But we cannot reassign the value of array variables declared with
const.const diceRolls = [4, 2, 1, 4];
// This will cause an error for reassignment of a const variable
diceRolls = [5];
Comparing mutable data types
Because variables referring to data structures store addresses, we cannot compare the values in 2 arrays with
=== because === will compare their memory addresses and not values. To compare values in arrays we will need to write a loop.// This boolean statement will return false
[1, 2, 3] === [1, 2, 3];
Variables declared with
let and const in "blocks" like an if statement will not be available outside those blocks. A block is a section of code surrounded by curly braces {} such as conditional statements, loops and functions. var in ES5 uses "function scope", which makes variables declared with var accessible anywhere within a given function.var myFunc = function () {
if (diceRoll === 6) {
var win = true;
}
// This will return true
console.log(win);
};
var myFunc = function () {
if (diceRoll === 6) {
let win = true;
}
// This will error because win does not exist outside the if statement
console.log(win);
};
Arrow functions are Rocket's preferred syntax for writing functions in ES6 due to their conciseness and wide adoption. There are technical considerations for when to use arrow functions vs other function declaration syntax, but none of them should matter for Rocket's Bootcamp.
Arrow syntax is a concise syntax for initialising anonymous functions. Always use
const when declaring a function variable (functions are a mutable data type).const rollDiceArrow = () => {
var myRandomValue = Math.random();
return myRandomValue;
};
Arrow functions with implicit return value
If the right side of an arrow function is a single statement outside a block
{}, the function will automatically return the evaluation of that statement. This allows us to write concise functions with arrow syntax.// Always get 5.
const rollDiceCheatArrowImplicitReturn = () => 5;
// Return result of Math.floor(Math.random() * 6 + 1)
const rollDiceArrowImplicitReturn = () => Math.floor(Math.random() * 6 + 1);
Like arrow function syntax except the function is declared with the
function keyword.const rollDiceCheat = function () {
// always return 6 to win.
return 6;
};
Explicitly name the function in the declaration after the
function keyword.function rollDiceNamed() {
var myRandomValue = Math.random();
return myRandomValue;
}
Rocket strongly suggests using template literals for more concise string interpolation. This will help your code be more concise and readable.
Old way: string concatenation
let output = "you rolled " + diceRoll + ". nice job!";
New way: template literals
let output = `you rolled ${diceRoll}. nice job!`;
Open the console in Chrome DevTools. Reproduce errors from
const examples above. What do the error messages say?Turn the
main function in any code from Coding Basics (or any function in other code you've written) into an arrow function. Verify the app still works.Change string output in previous code you've written from concatenation syntax to template literal syntax. Verify the syntax works as expected.
Last modified 1yr ago