📝 update notes

01 - Before We Get Started/README.md

@@ -0,0 +1,29 @@
+# Section 01: Before We Get Started
+
+- [What is ECMAScript 6?](#what-is-ecmascript-6)
+- [JavaScript Playgrounds](#javascript-playgrounds)
+
+## What is ECMAScript 6?
+
+The ECMAScript is the standard or the description of scripting languages such as JavaScript. In other words, JavaScript is one of the implementation of that standard. The ECMAScript 6, also known as ES6 and ECMAScript 2015, was the second major revision to JavaScript.
+
+These new features of ECMAScript 6 has to be implemented by the browser that's running on. All the browsers might not have full support for the ECMAScript 6 standard, so we should write the codes and run it through the tool called [`babel`](https://babeljs.io/).
+
+<br/>
+<div align="right">
+  <b><a href="#section-01-before-we-get-started">[ ↥ Back To Top ]</a></b>
+</div>
+<br/>
+
+## JavaScript Playgrounds
+
+- [JSFiddle](https://jsfiddle.net/)
+- [PlayCode](https://playcode.io/)
+- [jsComplete](https://jscomplete.com/playground)
+- [JS Bin](https://jsbin.com/)
+
+<br/>
+<div align="right">
+  <b><a href="#section-01-before-we-get-started">[ ↥ Back To Top ]</a></b>
+</div>
+<br/>

02 - The forEach Helper/README.md

@@ -0,0 +1,113 @@
+# Section 02: The `forEach` Helper
+
+- [The `forEach` Helper](#the-foreach-helper)
+- [[Exercise] Moving Away From For Loops](#exercise-moving-away-from-for-loops)
+- [[Exercise] Processing Values](#exercise-processing-values)
+
+## The `forEach` Helper
+
+The `forEach()` method executes a provided function once for each array element.
+
+```javascript
+let colors = ['red', 'blue', 'green'];
+
+// loop the array by using for loop
+for (let i = 0; i < colors.legnth; i++) {
+  console.log(colors[i]);
+}
+
+// loop the array by using forEach method
+colors.forEach(color => console.log(color));
+```
+
+Let's see another example, we're going to use `forEach()` helper to calculate the sum of a list of numbers.
+
+```javascript
+let sum = 0                     // create a variable to hold the sum
+let numbers = [1, 2, 3, 4, 5];  // create an array of numbers to be added
+
+// loop over the array with forEach() helper
+numbers.forEach(num => sum += num);
+```
+
+Note that the `forEach()` helper is kind of Swiss Army Knife of array helpers and every other helpers could be reimplemented using `forEach()` helper.
+
+<br/>
+<div align="right">
+  <b><a href="#section-02-the-foreach-helper">[ ↥ Back To Top ]</a></b>
+</div>
+<br/>
+
+## [Exercise] Moving Away From For Loops
+
+### Question
+
+The code below is calling `savePost` three times, but it is doing so using a for loop. This implementation works, but the for loop makes it more challenging to understand the purpose of the function. Rather than using a for loop, refactor the code below to instead use the forEach helper.
+
+```javascript
+function handlePosts() {
+  var posts = [
+    { id: 23, title: 'Daily JS News' },
+    { id: 52, title: 'Code Refactor City' },
+    { id: 105, title: 'The Brightest Ruby' }
+  ];
+
+  for (var i = 0; i < posts.length; i++) {
+    savePost(posts[i]);
+  }
+}
+```
+
+### Solution
+
+```javascript
+function handlePosts() {
+  let posts = [
+    { id: 23, title: 'Daily JS News' },
+    { id: 52, title: 'Code Refactor City' },
+    { id: 105, title: 'The Brightest Ruby' }
+  ];
+
+  posts.forEach(post => savePost(post));
+}
+```
+
+<br/>
+<div align="right">
+  <b><a href="#section-02-the-foreach-helper">[ ↥ Back To Top ]</a></b>
+</div>
+<br/>
+
+## [Exercise] Processing Values
+
+### Question
+
+The array below contains an array of objects, each of which is a representation of an image. Using the `forEach()` helper, calculate the area of each image and store it in a new array called `areas`. The area of an image can be calculated as `image.height * image.width`.
+
+```javascript
+var images = [
+  { height: 10, width: 30 },
+  { height: 20, width: 90 },
+  { height: 54, width: 32 }
+];
+var areas = [];
+```
+
+### Solution
+
+```javascript
+let images = [
+  { height: 10, width: 30 },
+  { height: 20, width: 90 },
+  { height: 54, width: 32 }
+];
+
+let areas = [];
+images.forEach(image => areas.push(image.height * image.width));
+```
+
+<br/>
+<div align="right">
+  <b><a href="#section-02-the-foreach-helper">[ ↥ Back To Top ]</a></b>
+</div>
+<br/>

03 - The map Helper/README.md

@@ -0,0 +1,147 @@
+# Section 03: The `map` Helper
+
+- [The `map` Helper](#the-map-helper)
+- [[Exercise] Plucking Values](#exercise-plucking-values)
+- [[Exercise] Calculate Values with `map()`](#exercise-calculate-values-with-map)
+- [[Exercise] Implement `Pluck`](#exercise-implement-pluck)
+
+## The `map` Helper
+
+The `map()` method executes a provided function once for each array element and creates a new array with the results. Make sure that we have the `return` keyword in the given function.
+
+```javascript
+let numbers = [1, 2, 3];
+let doubleNumbers = [];
+
+// loop the array by using for loop
+for (let i = 0; i < numbers.length; i++) {
+  doubleNumbers.push(numbers[i] * 2);
+}
+
+// loop the array by using map() method
+doubleNumbers = numbers.map(number => number *2);
+```
+
+Note that the `map()` method doesn't change the original array. Let's see another example which would be frequently with client side rendering frameworks like React or Angular.
+
+```javascript
+let cars = [
+  { model: 'Buick', price: 'cheap' },
+  { model: 'Camaro', price: 'expensive' }
+];
+
+let prices = cars.map(car => car.price);
+```
+
+<br/>
+<div align="right">
+  <b><a href="#section-03-the-map-helper">[ ↥ Back To Top ]</a></b>
+</div>
+<br/>
+
+## [Exercise] Plucking Values
+
+### Question
+
+Using `map()`, create a new array that contains the `height` property of each object. Assign this new array to the variable `heights`. Don't forget to use the `return` keyword in the function!
+
+```javascript
+var images = [
+  { height: '34px', width: '39px' },
+  { height: '54px', width: '19px' },
+  { height: '83px', width: '75px' },
+];
+
+var heights;
+```
+
+### Solution
+
+```javascript
+let images = [
+  { height: '34px', width: '39px' },
+  { height: '54px', width: '19px' },
+  { height: '83px', width: '75px' },
+];
+
+let heights = images.map(image => image.height);
+```
+
+<br/>
+<div align="right">
+  <b><a href="#section-03-the-map-helper">[ ↥ Back To Top ]</a></b>
+</div>
+<br/>
+
+## [Exercise] Calculate Values with `map()`
+
+Using `map()`, create a new array that contains the `(distance / time)` value from each trip. In other words, the new array should contain the `(distance / time)` value. Assign the result to the variable `speeds`.
+
+### Question
+
+```javascript
+var trips = [
+  { distance: 34, time: 10 },
+  { distance: 90, time: 50 },
+  { distance: 59, time: 25 }
+];
+
+var speeds;
+```
+
+### Solution
+
+```javascript
+let trips = [
+  { distance: 34, time: 10 },
+  { distance: 90, time: 50 },
+  { distance: 59, time: 25 }
+];
+
+let speeds = trips.map(trip => trip.distance / trip.time);
+```
+
+<br/>
+<div align="right">
+  <b><a href="#section-03-the-map-helper">[ ↥ Back To Top ]</a></b>
+</div>
+<br/>
+
+## [Exercise] Implement `Pluck`
+
+### Question
+
+Implement a `pluck` function. Pluck should accept an array and a string representing a property `name` and return an array containing that property from each object.
+
+**Example**
+
+```javascript
+var paints = [ { color: 'red' }, { color: 'blue' }, { color: 'yellow' }];
+
+// returns ['red', 'yellow', 'blue']
+pluck(paints, 'color');
+```
+
+**Hint**
+
+Remember that you can access a property on an object by using square bracket notation.
+
+```javascript
+var person = { name: 'Bill' };
+// returns 'Bill'
+person['name'];
+```
+
+### Solution
+
+```javascript
+function pluck(array, property) {
+  return array.map(object => object[property]);
+}
+```
+
+<br/>
+<div align="right">
+  <b><a href="#section-03-the-map-helper">[ ↥ Back To Top ]</a></b>
+</div>
+<br/>