2019-04---SLC-JS-Learners--Fun-with-Arrays---Presentation

notes.md

Fun with Arrays!!!

Our base array

NOTE: var is used throughout this presentation only because Sean's doing demos in the browser console. Never let Sean catch you using var in any other context!

var foods = ['asparagus', 'butternut squash', 'carrots', 'dates', 'endive'];

Iterating over Arrays

a basic for loop

console.clear()

for (var i = 0; i < foods.length; i++) {
	console.log(foods[i])
}

a decrementing while loop

console.clear()

var i = foods.length
while(i--) {
	console.log(foods[i])
}

forEach

a basic forEach loop

console.clear()

foods.forEach( console.log )

a forEach with a custom function

console.clear()

function logVal (value) {
	console.log(value)
}

foods.forEach( logVal )

passing specific params in a forEach

console.clear()

foods.forEach( c => console.log(c) )

console.clear()
foods.forEach( (c, i, a) => console.log(c, i, a) )

Adding items to & removing items from our array

console.clear()
var foods2 = foods.push('figs')
// console.log('foods:', foods)
// console.log('foods2:', foods2)

console.clear()
var foods3 = foods.pop()
// console.log('foods:', foods)
// console.log('foods3:', foods3)

Revisit loops

for

console.clear()
for (var i = 0; i < foods.length; i++) {
	foods[i] = 'chocolate-covered ' + foods[i]
}
console.log('foods:', foods)

forEach

console.clear()
var foods = ['asparagus', 'butternut squash', 'carrots', 'dates', 'endive'];
var foods4 = foods.forEach( (c, i) => foods[i] = 'chocolate-covered ' + c )
// console.log('foods:', foods)
// console.log('foods4:', foods4)

Functional Fun

map

⚠️ Danger Zone ⚠️

console.clear()
var foods = ['asparagus', 'butternut squash', 'carrots', 'dates', 'endive'];
var foods5 = foods.map( 
	(c, i) => foods[i] = 'chocolate-covered ' + c 
)
console.log('foods:', foods)
console.log('foods5:', foods5)

👍 Mucho Better! 👍

console.clear()
var foods = ['asparagus', 'butternut squash', 'carrots', 'dates', 'endive'];
var foods6 = foods.map( (c, i) => 'chocolate-covered ' + c )
console.log('foods:', foods)
console.log('foods6:', foods6)

filter && includes

console.clear()

var isAllergic = food => !food.includes('a')
var foods7 = foods.filter( isAllergic )

console.log('foods:', foods)
console.log('foods7:', foods7)

reduce

console.clear()

var foods8 = foods.reduce( (r, c, i, a) => {
	return r += c + ', '
}, 'Dinner tonight includes: ' )

console.log('foods:', foods)
console.log('foods8:', foods8)

Time for a bit of a rest & to spread out a bit

Take 1 - rest

console.clear()

function awardTopThree (first, second, third,...rest) {
	console.log(`Bronze goes to ${third}`);
	console.log(`Silver goes to ${second}`);
	console.log(`Gold goes to ${first}`);
	console.log(`Thank you to other competitors: ${rest}`)
}

awardTopThree('Alice', 'Bob', 'Charlie', 'Dan', 'Ed')

Take 2 - spread

console.clear()

function awardTopThree (first, second, third,...rest) {
	console.log(`Bronze goes to ${third}`);
	console.log(`Silver goes to ${second}`);
	console.log(`Gold goes to ${first}`);
	console.log(`Thank you to other competitors: ${rest}`)
}

awardTopThree(...['Alice', 'Bob', 'Charlie', 'Dan', 'Ed'])

Recommended Reading

• https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff

References

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters