Delicious JavaScript: Delectable Explanations of the Power of JS

RVAJS 2019

@adriennetacke

JavaScript is hard
JavaScript is complicated
JavaScript is confusing...
What do I do?
🎶 *cue Def Leppard's Pour Some Sugar on Me*
Little cookie iconfilter() Little marshmallow iconmap() Little donut iconreduce()
Little cookie iconfilter()
Little cookie iconfilter()
`Array.prototype.filter()` "*The `filter()` method creates a new array with all elements that pass the test implemented by the provided function.*" - **Official MDN Web docs**
Cool.
							
							const food = ['🍩', '🍪', '🍪', '🥕', '🥐'];
Little cookie iconfilter()
							
							
const food = ['🍩', '🍪', '🍪', '🥕', '🥐'];

				
							const onlyCookies = food.filter();
Little cookie iconfilter()
							
							const food = ['🍩', '🍪', '🍪', '🥕', '🥐'];
				
							const onlyCookies = food.filter(x => x === '🍪');
Little cookie iconfilter()
							
							// Output of console.log(onlyCookies);
							['🍪', '🍪' ]
Little cookie iconfilter()
Little marshmallow iconmap()
`Array.prototype.map()` "*The `map()` method creates a new array with the results of calling a provided function on every element in the calling array.*" - **Official MDN Web docs**
Tell me again, only tastier...
							
              const bagOfMarshmallows = [
                'marshmallow', 
                'marshMallow', 
                'MarshMallow', 
                'MARSHmallow', 
                'marshMALLOW', 
                '☁'
              ];
Little marshmallow iconmap()
							
              const bagOfMarshmallows = [ 
                'marshmallow', 
                'marshMallow', 
                'MarshMallow', 
                'MARSHmallow', 
                'marshMALLOW', 
                '☁'
              ];

              const jumboMarshmallows = bagOfMarshmallows.map();
Little marshmallow iconmap()
							
              const bagOfMarshmallows = [ 
                'marshmallow', 
                'marshMallow', 
                'MarshMallow', 
                'MARSHmallow', 
                'marshMALLOW', 
                '☁'
              ];

              const jumboMarshmallows = bagOfMarshmallows.map(marshmallow => {
                return marshmallow.toUpperCase();
              });
Little marshmallow iconmap()
							
							// Output of console.log(jumboMarshmallows);
							[ 'MARSHMALLOW',
							  'MARSHMALLOW',
							  'MARSHMALLOW',
							  'MARSHMALLOW',
							  'MARSHMALLOW',
							  '☁' ]
Little marshmallow iconmap()
Sweet. Jumbo MARSHMALLOWS are the best!
But wait... what's that ☁ doing there?
              
              const bagOfMarshmallows = [
                'marshmallow', 
                'marshMallow', 
                'MarshMallow', 
                'MARSHmallow', 
                'marshMALLOW', 
                '☁'
              ];

              const jumboMarshmallows = bagOfMarshmallows.map(marshmallow => {
                return marshmallow.toUpperCase();
              });
Little marshmallow iconmap()
              
              const bagOfMarshmallows = [ 
                'marshmallow', 
                'marshMallow', 
                'MarshMallow', 
                'MARSHmallow', 
                'marshMALLOW', 
                '☁'
              ];

              const jumboMarshmallows = bagOfMarshmallows.map(marshmallow => {
                return marshmallow.toUpperCase();
              });
Little marshmallow iconmap()
              
              const bagOfMarshmallows = [ 
                'marshmallow', 
                'marshMallow', 
                'MarshMallow', 
                'MARSHmallow', 
                'marshMALLOW', 
                '☁'
              ];

              const jumboMarshmallows = bagOfMarshmallows
              
                .map(marshmallow => {
                  return marshmallow.toUpperCase();
                });
Little marshmallow iconmap()
              
              const bagOfMarshmallows = [ 
                'marshmallow', 
                'marshMallow', 
                'MarshMallow', 
                'MARSHmallow', 
                'marshMALLOW', 
                '☁'
              ];

              const jumboMarshmallows = bagOfMarshmallows
              
                .map(marshmallow => {
                  return marshmallow.toUpperCase();
                });
Little marshmallow iconmap()
              
              const bagOfMarshmallows = [ 
                'marshmallow', 
                'marshMallow', 
                'MarshMallow', 
                'MARSHmallow', 
                'marshMALLOW', 
                '☁'
              ];

              const filteredJumboMarshmallows = bagOfMarshmallows
              
                .map(marshmallow => {
                  return marshmallow.toUpperCase();
                });
Little marshmallow iconmap()
              
              const bagOfMarshmallows = [ 
                'marshmallow', 
                'marshMallow', 
                'MarshMallow', 
                'MARSHmallow', 
                'marshMALLOW', 
                '☁'
              ];

              const filteredJumboMarshmallows = bagOfMarshmallows
              // Filter out any random clouds first!
                .map(marshmallow => {
                  return marshmallow.toUpperCase();
                });
Little marshmallow iconmap()
              
              const bagOfMarshmallows = [ 
                'marshmallow', 
                'marshMallow', 
                'MarshMallow', 
                'MARSHmallow', 
                'marshMALLOW', 
                '☁'
              ];

              const filteredJumboMarshmallows = bagOfMarshmallows
                .filter(x => x !== '☁')
                .map(marshmallow => {
                  return marshmallow.toUpperCase();
                });
Little marshmallow iconmap()
              
              const bagOfMarshmallows = [ 
                'marshmallow', 
                'marshMallow', 
                'MarshMallow', 
                'MARSHmallow', 
                'marshMALLOW', 
                '☁'
              ];

              const filteredJumboMarshmallows = bagOfMarshmallows
                .filter(x => x !== '☁')
                .map(marshmallow => {
                  return marshmallow.toUpperCase();
                });
Little marshmallow iconmap()
                
                // Output of console.log(filteredJumboMarshmallows);
                [ 'MARSHMALLOW',
                  'MARSHMALLOW',
                  'MARSHMALLOW',
                  'MARSHMALLOW',
                  'MARSHMALLOW']
Little marshmallow iconmap()
Little donut iconreduce()
`Array.prototype.reduce()` "*The `reduce()` method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.*" - **Official MDN Web docs**
That's a mouthful... (and not the sweet kind.)
							
              const donutLog = [
                { day: 'Monday', totalEaten: 2 }, 
                { day: 'Tuesday', totalEaten: 1 } ,
                { day: 'Wednesday', totalEaten: 3 },
                { day: 'Thursday', totalEaten: 2 },
                { day: 'Friday', totalEaten: 4 } 
              ];
Little donut iconreduce()
							
              const donutLog = [
                { day: 'Monday', totalEaten: 2 }, 
                { day: 'Tuesday', totalEaten: 1 }, 
                { day: 'Wednesday', totalEaten: 3 },
                { day: 'Thursday', totalEaten: 2 },
                { day: 'Friday', totalEaten: 4 }, 
              ];

              const caloriesConsumed = donutLog.reduce();
Little donut iconreduce()
							
              const donutLog = [
                { day: 'Monday', totalEaten: 2 }, 
                { day: 'Tuesday', totalEaten: 1 }, 
                { day: 'Wednesday', totalEaten: 3 },
                { day: 'Thursday', totalEaten: 2 },
                { day: 'Friday', totalEaten: 4 }, 
              ];

              const caloriesConsumed = donutLog.reduce((accumulator, currentValue) 

              );
Little donut iconreduce()
							
              const donutLog = [
                { day: 'Monday', totalEaten: 2 }, 
                { day: 'Tuesday', totalEaten: 1 }, 
                { day: 'Wednesday', totalEaten: 3 },
                { day: 'Thursday', totalEaten: 2 },
                { day: 'Friday', totalEaten: 4 }, 
              ];

              const caloriesConsumed = donutLog.reduce((lastCount, currentEntry) => {
                return lastCount + (currentEntry.totalEaten * 278);
              }, 0);
Little donut iconreduce()
							
              // Output of console.log(caloriesConsumed);
              3336
Little donut iconreduce()
🍩🤤🍩
That was a GREAT week! 
							
              const menu = [
                {
                  name: 'Fresh Strawberry',
                  emoji: '🍓',
                  calories: 453,
                  price: 1.45
                },
                {
                  name: 'Espresso',
                  emoji: '☕',
                  calories: 376,
                  price: 1.45
                },
                {
                  name: 'Chocolate Iced',
                  emoji: '🍩',
                  calories: 273,
                  price: 1.45
                },
                {
                  name: 'Salted Caramel',
                  emoji: '🍬',
                  calories: 492,
                  price: 1.55
                },
                {
                  name: 'Sweet Coconut',
                  emoji: '🥥',
                  calories: 391,
                  price: 1.55
                },
              ];
Little donut iconreduce()
							
              const order = ['🍓', '☕', '🍩', '🍩', '🍬', '🥥'];
              const RIC_COMBINED_SALES_TAX = 0.053;
Little donut iconreduce()
              
              // Get receipt items ready
              const receiptItems = menu
                .filter((food) => order.includes(food.emoji))
                .map((item) => {
                  const numberOrdered = order.filter(x => x === item.emoji).length;

                  return {
                    emoji: item.emoji,
                    price: item.price * numberOrdered,
                    numberOrdered: numberOrdered
                  };
                });
Little donut iconreduce()
							
              const totals = receiptItems
                .reduce((totals, { price }) => {
                  const subtotal = totals.subtotal + price;
                  const salesTax = totals.salesTax + price * RIC_COMBINED_SALES_TAX;

                  return {
                    subtotal,
                    salesTax
                  };
                }, { subtotal: 0, salesTax: 0 });
Little donut iconreduce()
							
              const receipt = 'Receipt - Adrienne - Sugar Shack Donuts\n' +
                receiptItems.map((x) => {
                  return `${x.numberOrdered} ${x.emoji} \t\t$${x.price.toFixed(2)}`
                }).join('\n') + '\n' +
                `----------------------\n` +
                `Sub Total \t$${totals.subtotal.toFixed(2)}\n` +
                `Sales Tax \t$${totals.salesTax.toFixed(2)}\n` +
                `-----------------------\n` +
                `Order Total \t$${(totals.subtotal + totals.salesTax).toFixed(2)}`;
Little donut iconreduce()
							
             console.log(receipt);
Little donut iconreduce()
							
                Receipt - Adrienne - Sugar Shack
                1 🍓 		$1.45
                1 ☕ 		$1.45
                2 🍩 		$2.90
                1 🍬 		$1.55
                1 🥥 		$1.55
                -----------------------
                Sub Total 	$8.90
                Sales Tax 	$0.47
                -----------------------
                Order Total 	$9.37
Little donut iconreduce()
Salamat! // That means 'Thank you' in Tagalog!

Find me here

Twitter: @adriennetacke Blog: blog.adrienne.io

Delicious JavaScript: Delectable Explanations of the Power of JS
Little cookie iconfilter() Little marshmallow iconmap() Little donut iconreduce()