Skip to content

JMT branch #117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions array-map.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Array `map()` method

The `map()` method creates a new array, without altering the original, by applying a function to each element of the array. The transformation (or processing) is done by a callback function, which is specified as the first parameter of the method. Higher-order functions such as `map()`, `reduce()` or `filter()` are an shorter, more readable alternative to iterating through an array with a loop.
The `map()` method creates a new array, without altering the original, by applying a function to each element of the array. The transformation (or processing) is done by a callback function, which is specified as the first parameter of the method. Higher-order functions such as `map()`, `reduce()` or `filter()` are a shorter, more readable alternative to iterating through an array with a loop.

## Example

Expand Down Expand Up @@ -85,7 +85,7 @@ As you can see, `Math` is specified as the second parameter, which is used as `t

## Slightly more practical example

One of slightly more practical examples of using `map()` method is transposing a 2 dimensionl array (swap rows and columns), which I found [here on StackOverflow](http://stackoverflow.com/questions/17428587/transposing-a-2d-array-in-javascript):
One of the slightly more practical examples of using the `map()` method is transposing a 2-dimensional array (swapping rows and columns), which I found [here on StackOverflow](http://stackoverflow.com/questions/17428587/transposing-a-2d-array-in-javascript):

```javascript
var newArray = array[0].map(function(col, i) {
Expand Down
30 changes: 15 additions & 15 deletions array-methods-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ Array.isArray([]); // true
```

## Accessing items in an Array
An array provides random access to the elements of the list via the items position (index) within the list. Indexes start at zero.
An array provides random access to the elements of the list via an item's position (index) within the list. Indexes start at zero.

```javascript
var arr = ['a', 'b', 'c', 'd'];
Expand Down Expand Up @@ -91,7 +91,7 @@ c; // 10

## Arrays and equality

An equality check on a reference type checks if the values point to the same reference, so an equality check on an array will check if the two refrences point to the same array object. It will not check if the contents of the arrays are the same.
An equality check on a reference type checks if the values point to the same reference, so an equality check on an array will check if the two references point to the same array object. It will not check if the contents of the arrays are the same.

```javascript
var a = [1, 2, 3];
Expand Down Expand Up @@ -200,39 +200,39 @@ As traversing arrays is such a common task, there is a built-in Array method for
present in the array in ascending order. It is not invoked for index properties that have been
deleted or are uninitialized (i.e. on sparse arrays).

The callback is a function which will be passed (i) the element value, (ii) the element index, (iii)
The callback is a function which will be passed (i) the element value, (ii) the element index, and (iii)
the array being traversed.

```javascript

var myArr = [1, 2, 3];

var myCallback = function (val, idx, arr) {
console.log(val ' is item ' + idx + 'in array: ' + arr);
console.log(val + ' is item ' + idx + ' in array: ' + arr);
}

myArr.forEach(myCallback);

// Outputs:
// 1 is item 0 in [1, 2, 3]
// 2 is item 1 in [1, 2, 3]
// 3 is item 2 in [1, 2, 3]
// 1 is item 0 in array: [1, 2, 3]
// 2 is item 1 in array: [1, 2, 3]
// 3 is item 2 in array: [1, 2, 3]
```

Of course, you can also use an anonymous function:

```javascript
var myArr = [1, 2, 3];

myArr.forEach(function (val, idx, arr) { console.log(val ' is item ' + idx + 'in array:' + arr); });
myArr.forEach(function (val, idx, arr) { console.log(val + ' is item ' + idx + ' in array: ' + arr); });
```

Which, with ES2015, can be written more succinctly with arrow functions:

```javascript
var myArray = [1, 2, 3];

myArr.forEach((val, idx, arr) => console.log(val ' is item ' + idx + 'in array:' + arr));
myArr.forEach((val, idx, arr) => console.log(val + ' is item ' + idx + 'in array: ' + arr));
```

Because arrow functions work so well with array methods which take functions, we will use them from here on.
Expand All @@ -243,7 +243,7 @@ Often we want to traverse arrays because we want to manipulate the data in the a
provides a number of methods which apply a function to each value, returning a new result.

The first array manipulation method to look at is ```Array.prototype.map(callback[, thisArg])```. See
[definition](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) for full description.
[definition](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) for a full description.
This method applies the callback to each value and returns a new array (so does not change the
original array).

Expand All @@ -257,7 +257,7 @@ arr; // [1, 2, 3]

The second array manipulation method to look at is ```Array.prototype.reduce(callback[, initialValue])```. See
[definition](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)
for full description. This takes applies a function to each value and collects the results into a new value.
for a full description. This takes an array, applies a function to each value and collects the results into a new value.

The most common example used for reduce is summing values in an array, which could work like this:

Expand Down Expand Up @@ -285,7 +285,7 @@ arrayMap(arr, v => v + 1); // [2, 3, 4]
### More array manipulation methods

In addition to map and reduce, JavaScript provides various other array manipulation methods. All of
which work in a similar way to ```forEach``` ```map``` and ```reduce``` (i.e. they take a callback
which work in a similar way to ```forEach```, ```map``` and ```reduce``` (i.e. they take a callback
which is applied to each element in the array). Next we'll have a look at some of the most useful
and also implement them using ```reduce```.

Expand Down Expand Up @@ -371,14 +371,14 @@ some(arr3, v => v % 5 === 0); // false

Sorting algorithms are hard. In fact there's almost a whole [Khan Academy course](https://www.khanacademy.org/computing/computer-science/algorithms) on the subject. Whilst this is all very interesting, it's a lot to learn just to put some values into order. Fortunately arrays have a built in sort method ```Array.prototype.sort([compareFunction])``` (see [definition](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)).

An important thing to note about ```Array.prototype.sort``` is that it sorts <u>in place</u>, which means the original array is changed. If you need to keep the original array, then you should make a copy of the original before sorting (see ```Array.prototype.slice``` section above for a way how to make a copy).
An important thing to note about ```Array.prototype.sort``` is that it sorts <u>in place</u>, which means the original array is changed. If you need to keep the original array, then you should make a copy of the original before sorting (see ```Array.prototype.slice``` section above for one way to make a copy).

By default elements are converted to strings and then compared in Unicode point order. This means sort is great for lists of strings:

```javascript
var arr = ['orange', 'kiwi', 'apple', 'pear', 'banana'];

var sortedArr = arr.sort(['orange', 'kiwi', 'apple', 'pear', 'banana']); // ['apple', 'banana', 'pear', 'kiwi', 'orange']
var sortedArr = arr.sort(['orange', 'kiwi', 'apple', 'pear', 'banana']); // ['apple', 'banana', 'kiwi', 'orange', 'pear']

sortedArr === arr; // true
```
Expand Down
6 changes: 3 additions & 3 deletions array-reduce.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ console.log(sum);
// 20
```

At the first iteration of the callback function, the first parameter (`a`) stores the initial value (`10`). The second parameter (`b`) stores the first element of the array (`0`). Then the rest of the calculation is done in the same way as the first example.
At the first iteration of the callback function, the first parameter (`a`) stores the initial value (`10`). The second parameter (`b`) stores the first element of the array (`0`). Then the rest of the calculation is done in the same way as in the first example.

![reduce() method](images/array.reduce2.gif)

Expand Down Expand Up @@ -108,7 +108,7 @@ arr.reduce(function (a, b) {

Note that you need to specify the initial value `0` as the second parameter of the `reduce()` method, because, as mentioned above, the initial value of the parameter `a` would be the first element of the array (`{x:1}` in this case) if the second parameter of the `reduce()` method were not specified.

Another example of the `reduce()` method is to count the occurence of values in an array. For example, the following example shows one of the ways to count how many times each letters appears in an array:
Another example of the `reduce()` method is to count the occurence of values in an array. For example, the following example shows one of the ways to count how many times each letter appears in an array:

```javascript
var array = ['A', 'B', 'C', 'B', 'B', 'A', 'A', 'C', 'A', 'B'];
Expand All @@ -124,7 +124,7 @@ Note that the initial value of the object `{}` is specified as the second parame

## Other parameters of the callback function

The `reduce()` method can actually take 2 more parameters:
The `reduce()` method can actually take two more parameters:

- The third parameter stores the index value of the element at the current iteration
- The fourth parameter stores the array itself
Expand Down
41 changes: 18 additions & 23 deletions basic-performance-testing.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# Basic Performance Testing

This guide will follow a worked example on how to go about comparatively performance testing functions. Performance testing is not a subject that should worry beginners, however, it is very interesting to look at and will become useful on complex projects.
This guide will follow a worked example on how to go about comparatively performance testing functions. Performance testing is not a subject that should worry beginners. It is very interesting to look at and will become useful on complex projects.

The following is almost certainly not the only (or necessarily the best) way, however, it is fairly easy to understand and use.
The following is almost certainly not the only (or necessarily the best) way, however it is fairly easy to understand and use.

## The Functions

Expand All @@ -22,7 +22,7 @@ function makestring() {
}
```

This received feedback that it is extremely ineffcient to sum X strings as it generates X-1 intermediate objects; but it is instead always better to use an array and finally perform a .join("") over them. So we created the following:
This received feedback that it is extremely inefficient to sum n strings as it generates n-1 intermediate objects; it is instead always better to use an array and finally perform a .join("") over them. So we created the following:

```javascript
function makestring2() {
Expand All @@ -37,16 +37,16 @@ function makestring2() {

## Performance Test

Now rather than just accepting the advice, how do we actually test these?
Now, rather than just accepting the advice, how do we actually test these?

Our chosen method is to make use of javascripts `new Date()` constructor. This gives the time since 01 January 1970 00:00:00 UTC. The number is specified in milliseconds. Therefore if we wrap a for loop repeating the function in two variables that equal `new Date()` and find the difference between these variables we should have the time taken to perform the function. To give a large enough data set, consider repeating the function 20,000 times.
Our chosen method is to make use of JavaScript's `new Date()` constructor. This gives the time since 01 January 1970 00:00:00 UTC. The number is specified in milliseconds. Therefore, if we wrap a for loop repeating the function between two variables that are assigned `new Date()` and find the difference between these variables we should have the time taken to perform the function. To get a representative measure of performance, consider repeating the function many times over. Here we have used 20,000 times.

```javascript
var start = new Date(); // log start timestamp
for (var i = 0; i < 20000; i++) {
console.log(makestring());
}
var end = new Date(); // log end timestamp
var end = new Date(); // log end timestamp
var diff = end - start;
console.log(diff.toString());
```
Expand All @@ -56,20 +56,20 @@ and for the second function:
```javascript
var start1 = new Date(); // log start timestamp
for (var i = 0; i < 20000; i++) {
console.log(makestring1());
console.log(makestring2());
}
var end1 = new Date(); // log end timestamp
var end1 = new Date(); // log end timestamp
var diff1 = end1 - start1;
console.log(diff1.toString());
```

## The Comparison

By comparing the time taken to perform each function you will be able to get a rough idea for performance. In this example, our `makestring()` takes approximately 2322 ms and our array function `makestring1()` takes approximately 323 ms.
By comparing the time taken to perform each function we are able to get a rough idea of performance. In this example, our `makestring()` took approximately 2322 ms and our array function `makestring1()` took approximately 323 ms.

*Note: Values may not be constant between seperate runs, but will be in a similar range. Likewise consider moving `console.log(diff)` to end of function for ease of reading.*
*Note: Values may not be the same between seperate runs, but will be in a similar range. Likewise consider moving `console.log(diff.toString())` to the end of the function for ease of reading.*

Moving beyond this example, the same method should be applicable to any other set of functions. Wrap a loop repeating functions in date variables, find difference, compare!
Moving beyond this example, the same method should be applicable to any other set of functions. Wrap a loop repeating the test function(s) between date variables, find the difference, compare!

## Appendix

Expand All @@ -80,7 +80,7 @@ function makestring() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

for( var i=0; i < 50; i++ ) {
for( var i = 0; i < 50; i++ ) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
Expand All @@ -89,7 +89,8 @@ function makestring() {
function makestring2() {
var array = [];
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < 50; i++ ) {

for( var i = 0; i < 50; i++ ) {
array.push(possible.charAt(Math.floor(Math.random() * possible.length)));
}
return array.join("");
Expand All @@ -102,19 +103,13 @@ for (var i = 0; i < 20000; i++) {
var end = new Date(); // log end timestamp
var diff = end - start;

var start1 = new Date(); // log start timestamp
var start = new Date(); // log start timestamp
for (var i = 0; i < 20000; i++) {
console.log(makestring2());
}
var end1 = new Date(); // log end timestamp
var diff1 = end1 - start1;
var end = new Date(); // log end timestamp
var diff1 = end - start;

console.log(diff.toString());
console.log(diff1.toString());
```






```
4 changes: 2 additions & 2 deletions best-js-resources.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<h1>Best JavaScript Resources Online</h1>
<p>Learning something new is scary. For all of us the biggest issue with picking up a new skill is don't know where to start. It's often useful if we have a Plan of actions , A Blueprint , A Roadmap. It makes our journey towards that new step a lot easier. But you don't have to worry about that now i have found the best resources on the Internet sorting out the bad ones. Available to us for free. All these resources are authentic, reliable and effective.</p>
<p>Learning something new is scary. For all of us the biggest issue with picking up a new skill is not knowing where to start. It's often useful if we have a plan of action, a blueprint, a roadmap. It makes our journey towards that new skill a lot easier. But you don't have to worry about that now I have found the best resources on the internet, weeding out the bad ones. These are all available to us for free. All these resources are authentic, reliable and effective.</p>

<h1>Massive Open Online Courses(MOOC)/Online Courses</h1><br>
[Udacity-Web Development Program](https://www.udacity.com/courses/web-development)<br>
Expand Down Expand Up @@ -64,7 +64,7 @@

<br>
<h1>JavaScript Books</h1><br>
[Eloquent JavaScript](http://eloquentjavascript.net/) (one of the best resources for detailed explanations with good examples, try running and then rewriting the examples by yourself in the browser)<br>
[Eloquent JavaScript](http://eloquentjavascript.net/) (One of the best resources for detailed explanations with good examples; try running and then rewriting the examples by yourself in the browser)<br>
[Exploring ES6](http://exploringjs.com/es6/)<br>
[JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/)<br>
[Speaking JavaScript](http://speakingjs.com/es5/)<br>
Expand Down