README.md

JavaScript - Tutorial

A short introduction to JavaScript.

The goal of this section is to review JavaScript with an eye toward features that are
appear often in React projects. In this section you will build the shopping cart
described in the previous module. If you are familiar with JavaScript pay close attention
to the section on map, filter, and reduce. If you found the shopping cart challenge to
be challenging or you did not finish it pay closer attention to this module as to how it
solves the shopping cart.

After the shopping cart example there are some challenges to solve using map, filter,
and reduce.

Shopping Cart solution

As a review the shopping cart should fit this description:

Keeps a list of items stored in the cart

Each item in cart knows the name, price, and quantity

Has methods to manage items in the cart

Add item to cart

Remove Item from cart

Clear cart

Get count of items in cart

Get total cost for all items in cart

List items in cart. This should list items with:

Name, price, and quantity

Total cost for item of quantity

The completed project need only display the results in the console. The system
should consist of a single JavaScript module that holds a collection, and
methods that perform the operations listed above.

Creating the example

To follow this example you can create a text file with the .html file extension.
Wrap all of your JavaScript in the <script> and </script> tags.

shopping-cart.html

Test your work by opening the file in any web browser and looking at the results in
the console.

Managing items in an array

Use one of the methods above to create objects and add them to an array with
array.push().

var cart = [];
cart.push( addItem(1, "Apple", 0.99, 1) );

or

var cart = [];
cart.push( new Item(1, "Apple", 0.99) );

Increasing the quantity

You need to check the items in the cart array for the id of the new item.
If this id exists you need to increment the qty. If the item doesn't exist
add the new item with a qty of 1.

There are several solutions to this. I chose Array.map(). Map returns a new
array rather than mutating the existing array. This is an important distinction.
When we are heading into React, which uses functional programming paradigm.
Reduces side effects in app, enables one way directional data flow which makes state
easier to manage.

Reducing cart data

Use Reduce to generate a single value from an array. In this case of the shopping cart
we use reduce to count the number of items in the cart, get the total cost of the cart,
and generate a string description of the cart.

Note! in this case reduce() is iterating through objects! This means the initial
value must be set! Otherwise the initial value is the first item in the array,
which is an object rather than an Number! The intial value is the second param
to reduce().

Notice the 0 at the end of the line below:

cart.reduce(function(acc, item) {return acc + item.qty;}, 0);

Reduce the total value of the cart. This requires you multiply the qty and
price of each item and accumulate the total.