🎩 Fancy JavaScript

Template strings, arrow functions, and iterators

Template strings

ℹ️ Use in order to make a string with variables (like Madlibs)

ℹ️ Template strings use backticks, or "bent apostrophes": `Welcome back...`

alert( `Welcome back, ${firstName}, we missed you!` )

ℹ️ Backticks can make combinations of strings and variables more readable.

// Write something like "Welcome Sue, your color for Tuesday is hsla(180 60% 30% / .5)":
			
// Normal quotes.
alert("Welcome " + name + ", your color for " + weekday + " is hsla(" + hue + " " + saturation + "% " + lightness + "% / " + alpha + ")");

// Backticks.
alert(`Welcome ${name}, your color for ${weekday} is hsla(${hue} ${saturation}% ${lightness}% / ${alpha})`);

👴 Regular v. 🧑‍🎨 arrow functions

// Old-school style function definition.
function showUserOnMap( latitude, longitude ) {
	...
} ;
// "Variable" style function definition.
const user = "Fred" ;
const showUserOnMap = function( latitude, longitude ) {
	...
} ;

// Cool-looking arrow style function definitions.
// You can write a single command on one line.
const showUserOnMap = ( latitude, longitude ) => ... ;
// You can enclose multiple lines of commands with braces {}.
const showUserOnMap = ( latitude, longitude ) => {
	...
	...
} ;
// You can omit the parentheses for a single parameter.
const showTimeZone = longitude => {
	...
} ;
// Write empty parentheses if there's no parameter.
const getUserLocation = () => {
	...
} ;

Anonymous functions

ℹ️ Use when you're only calling a function in a single context (eg, inside an iterator like forEach).

ℹ️ Basically a single-use, throwaway function 🧻.

// Old-school anonymous function definition, with parameter.
function( parameter ) {
	...
} ;
// Old-school anonymous function definition, without parameter.
function() {
	...
} ;

// Arrow style anonymous function definition, with parameter.
parameter => {
	...
} ;
// Arrow style anonymous function definition, without parameter.
() => {
	...
} ;

Use anonymous functions with iterators like forEach

✅ Yay for simple syntax!

// Example of an anonymous arrow function in an array method.
myDivs.forEach(
	div => alert( div.id )
) ;

⚠️ Can't use semicolons directly inside ()

// A semicolon inside array method parentheses () will break your code.
myDivs.forEach(
	div => alert( div.id ) ; ❌
) ;
// Semicolons inside braces {} are fine though!
myDivs.forEach(
	div => {
		alert( div.id ) ; ✅
		div.id.style.display = "block" ; ✅
	}
) ;

Arrow function pros and cons

• ✅ Simplify anonymous functions.
• ✅ Simplify iterators (like forEach).
• ✅ A single-line arrow function doesn't require a return command.
• ⚠️ Must be declared before calling.
• ⚠️ Best defined with const.
• ⚠️ Can't construct other objects or HTML tags.
• ⚠️ Don't understand this keyword (use event.target when possible).

🔁 Iterators

Methods that transform arrays

forEach iterator

The most general iterator, forEach executes any commands you want as it loops through your array.

// Say you want to alert each of your pets so you remember to feed them.
let myPets = [ "🐶", "🐱", "🐰" ]

// 👴 The old school "for" loop is klunky.
for	( let counter=0; counter < myPets.length; counter++ ) {
	alert( myPets[counter] ) ;
}

// 🧑‍🎨 The chic "forEach" iterator is simpler.
myPets.forEach(
	pet => alert( pet )
) ;

✅ forEach syntax is way shorter!

ℹ️ counter and pet are variables invented just for the loops and have no meaning outside.

⚠️ forEach doesn't work with collections of HTML tags (eg, getElementsByClassName) in older browsers.

⚠️ Can't break out of a forEach loop as you can a for loop.

⚠️ Hard to keep track of where you are in a forEach loop (no counter).

filter iterator

Returns a new, smaller array that matches the criteria returned in your embedded function.

let myPets = [ "🐶", "🐱", "🐰" ]
let outdoorPets = myPets.filter(
	pet => ( pet !== "🐰" )
) ;
// outdoorPets is now [ "🐶", "🐱" ]

map iterator

Returns a new array of the same size that transforms your original array.

let myPets = [ "🐶", "🐱", "🐰" ]
let petsWithFood = myPets.map(
	pet => return ( pet + "🍲" )
) ;
// Or, with backticks:
let petsWithFood = myPets.map(
	pet => return ( `${pet}🍲` )
) ;
// petsWithFood is now [ "🐶🍲", "🐱🍲", "🐰🍲" ]

ℹ️ The arrow function inside map doesn't require a return if it's on one line.

ℹ️ map is very common in React Native!

reduce iterator

Returns a single value from your embedded function.

let myPets = [ "🐶", "🐱", "🐰" ]
let lovingPets = myPets.reduce(
	( petsSoFar, pet ) => `${petsSoFar}❤️${pet}`,
	""
) ;
// lovingPets is now 🐶❤️🐱❤️🐰

ℹ️ The arrow function inside reduce doesn't require a return if it's on one line.

ℹ️ counter and pet are variables invented just for the loops and have no meaning outside.

ℹ️ The second argument to reduce (in this case, an empty string) is the initial value before you start adding pets in the loop.

🎗 Remember to be careful with semicolons

// Semicolons directly inside () will throw an error.
myDivs.forEach(
	div => alert( div.id ) ; ❌
) ;

// Semicolons inside braces {} are OK.
myDivs.forEach(
	div => {
		alert( div.id ) ; ✅
		div.id.style.display = "block" ; ✅
	}
) ;