Jacob Johns ES6 Lesson

var & let Keywords

Variables set with let keyword cannot be overwriten as with var

							let camper = 'Jacob';
							let camper = 'Kimberly'; //this would throw an error

							//let's scope is similar to var, but is limited inside a block, statement, or expression
							let printNumTwo;
							for (let i = 0; i < 3; i++) {
								if (i === 2) {
									printNumTwo = function() {
										return i;
									};
								}
							}
							console.log(printNumTwo()); //will display 2
							console.log(i); //will error that i is not defined because it is only declared within the for loop

							function checkScope() {
								let i = 'function scope';
								if (true) {
									let i = 'if block scope';
									console.log('block scope i is: ', i);
								}
								console.log('function scope i is: ', i);
								return i; //returns 'function scope'
							}

const Keyword

Has all the same features as let with the added bonus that they are read-only

Arrow Functions

Syntactic sugar to not have to write anonymous functions as in ES5

Parameters

In order to help create more flexible functions, ES6 introduces default, and rest parameters

Destructuring Assignment

Special syntax introduced in ES6

							const HIGH_TEMPS = {
								yesterday: 75,
								today: 77,
								tomorrow 80,
								dayAfterTomorrow: {
									low: 64,
									high: 80
								},
							};

							//extract values from objects
							const {today, tomorrow} = HIGH_TEMPS;

							//assign variables from objects
							const {today: highToday, tomorrow: highTomorrow} = HIGH_TEMPS;

							//assign variables from nested objects
							const {dayAfterTomorrow: {low: dayAfterTomorrowLow, high: dayAfterTomorrowHigh}} = HIGH_TEMPS;

							//assign variables from arrays
							let a = 8, b = 6;
							[b, a] = [a, b]; //swap the values from b to a & a to b

							//rest parameter to reassign array elements
							const source = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
							const [,, ...arr] = source; //omit the first 2, and get the rest

							//pass an object as a function's parameter
							const stats = {
								max: 56.78,
								median: 34.54,
								min: -0.75
							}
							const half = ({max, min}) => {
								return (max + min) / 2;
							}

Literals

Template Literals: special type of string that makes creating complex strings easier / Object Literals: syntactic sugar

Concise Declarative Functions

Shorter is better

Class Syntax

The class syntax (is just syntax) replaces the constructor function creation

getters & setters

Getters & setters hide internal implementation details

							/*instruction
							Use the class keyword to create a Thermostat class. The constructor accepts a Fahrenheit temperature.
							In the class, create a getter to obtain the temperature in Celsius and a setter to set the temperature in Celsius.
							*/

							//my solution
							class Thermostat {
								constructor(fahrenheit) {
									this.fahrenheit = fahrenheit; 
								}
								get temperature() {
									return 5/9 * (this.fahrenheit - 32);
								}
								set temperature(celsius) {
									this.fahrenheit = celsius * 9.0 / 5 + 32; 
								}
							}

							//example calls
							const thermos = new Thermostat(76); // Setting in Fahrenheit scale
							let temp = thermos.temperature; // 24.44 in Celsius
							thermos.temperature = 26;
							temp = thermos.temperature; // 26 in Celsius

Module & Import/Export

An easy way to share code among JavaScript files

							const uppercaseString = (string) => {
								return string.toUpperCase();
							}
							const lowercaseString = (string) => {
								return string.toLowerCase();
							}
							export {uppercaseString, lowercaseString}; //export like so

							import {uppercaseString, lowercaseString} from './string_functions.js'; //import like so

							import * as stringFunctions from './string_functions.js'; //import everything like so
							stringFunctions.uppercaseString('i wanna stay small); //call as such

							//export default is used to declare a fallback value - only one per module/file - cannot use var, let, or const
							export default function add(x, y) {
								return x + y;
							}

							//import default export
							import add from './math_functions.js'; //{} are not required for default import - the variable name add could have been anything

Promises

Exactly what it sounds like - a promise to do something, usually asynchronously

							const makeServerRequest = new Promise((resolve, reject) => {
								//promise() is a constructor function so the new keyword is needed to create it
							});

							//Promise has 3 states: pending, fulfilled, and rejected - the above was pending, the below would reject or fulfill
							const makeServerRequest = new Promise((resolve, reject) => {
								let responseFromServer;
								if (responseFromServer) {
									resolve("Server responded");
								} else {
									reject("Server did not respond");
								}
							});

							//handle fulfilled promises with then
							makeServerRequest.then(result => {
								consle.log(result);
							});

							//handle rejected promise with catch
							makeServerRequest.catch(error => {
								consle.log(error);
							});