
This will get a NodeList containing the direct children of the body tag, and convert that NodeList to an array

```javascript
let mySelection = document.querySelectorAll('body > *');
mySelection = [].slice.call(mySelection);
```

Convert NodeList to array


To target an element in JavaScript that has certain inline styles, you can use the following code:

```js
var elem = document.querySelector('h1[style*="color: red;"]');
```

The value of elem will now be the first H1 on the page that has a style attribute with a value that includes color: red;

The use of style*= allows for other inline styles to be present, otherwise the query would have to match the exact value of the style attribute.

Target elements with inline styles


Higher order functions are functions that take other functions as parameters, and can be a highly useful type of abstraction.

Here's a good definition of higher order functions from [Eloquent JavaScript](https://eloquentjavascript.net/05_higher_order.html):
> "Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions. Since we have already seen that functions are regular values, there is nothing particularly remarkable about the fact that such functions exist. The term comes from mathematics, where the distinction between functions and other values is taken more seriously."

A simple example of a higher order function would be Array.map.

## array.map()

Map takes a function as its argument, which runs on each element in the provided array and creates a new array containing the values returned by the function. Consider the following example:

```js
let numbers = ['10', '20', '30'];
let numbersDoubled = numbers.map(num => num * 2);
// numbersDoubled = [20, 40, 60]
```

In the above example we're iterating over the numbers array and creating a new array made up of the results of doubling each element in the first array.

Of course, you can achieve the same result in a less abstracted way with a loop like this:

```js
let numbers = ['10', '20', '30'];
let numbersDoubled = [];
for (let i = 0; i < numbers.length; i++) {
  numbersDoubled.push(numbers[i] * 2);
}
// numbersDoubled = [20, 40, 60]
```

This code is fine, and would work for the situation described. In fact, since it is less of an abstraction than Array.map, it can be more flexible. For example we could use a for loop like this to construct a single, complex object or perform mutations on the original array. One of the benefits of map is that it doesn't let us do this, which makes it useful in a functional programming context, (where we would aim to avoid mutating existing values).

---

So Array.map will only ever return a new array, and in a case where we want to perform operations on every item in an array in order to produce a new array of results, map saves us a lot of the extra work (and a couple of lines of code) by abstracting away some repetitive elements, and makes for a good entry point into the basics of higher order functions.

Map - an introduction to higher order functions in JavaScript


A JavaScript Promise is an object that can be used to handle asynchronous operations, which will either successfully resolve, or be rejected when an error occurs. Examples of this could be waiting on the response from an AJAX request before using that response data for further operations, or making requests to a database.

Instead of relying on traditional callback functions, Promises allow us to chain functionality off the results of these kinds of asynchronous function calls and handle any errors that occur.

**Here's a basic example of a Promise:**
```js
let myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {resolve('Promise resolved message')}, 1000);
});
// 0ms - 1000ms, myPromise = Promise {<pending>}
// 1000ms +, myPromise = Promise {<resolved>: "Promise resolved message
```

So, starting off with a pretty unrealistic use case for the sake of explanation, here we can see that myPromise is created as a Promise object, which is pending. But once the setTimeout has triggered the resolve method, myPromise becomes a 'resolved' Promise, (otherwise known as 'fullfilled'). To access the value that the Promise now contains, we'll need to call the .then() method.

**For example:**

```js
let myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {resolve('Promise resolved message')}, 1000);
}).then(res => {
  console.log(res);
});
```

The call to .then() occurs when the Promise has successfully resolved and the value exists for further operations. If you run the above example in a JS console you will see that a second passes, then the message is logged, since the Promise has now resolved with that value.

## Chaining .then()

One of the benefits of the .then() method is that we can chain them together and pass returned values from one to the next like so:

```js
let myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {resolve('Promise resolved message')}, 1000);
}).then(res => {
  console.log(res);
  return `${res} 1`;
}).then(str => {
  console.log(str);
  return `${str} 2`;
}).then(str => {
  console.log(str);
  return `${str} 3`;
}).then(str => {
  console.log(str);
  return str;
});
// 1000ms +, myPromise = Promise {<resolved>: "Promise resolved message 1 2 3"}
```

Once this Promise resolves, we'll see the following messages logged to the console:

```
Promise resolved message
Promise resolved message 1
Promise resolved message 1 2
Promise resolved message 1 2 3
```

And the resolved value in the Promise will be the final returned value in the chain of .then() functions:

## Error handling

In addition to .then(), Promises also have a .catch() method which we can use for catching errors and any values that the Promise is rejected with.

**For example:**

```js
let myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {resolve('Promise resolved message')}, 1000);
  setTimeout(() => {reject(new Error('Promise rejected'))}, 900);
}).then(res => {
  console.log(res);
  return res;
}).catch(err => {
  console.error(err);
  return err;
});
// 900ms +, myPromise = Promise {<resolved>: Error: Promise rejected at setTimeout (<anonymous>:3:28)}
```

Since the above Promise will be rejected after 900ms have passed, it will not resolve and the .then() method will never be called, instead the Promise rejection will trigger the .catch() method, where we're logging the contents of the Error. In a more real-world scenario this would be where we access the results of errors thrown, perhaps as a result of a malformed API call or database failure.

---

Some further resources:

- [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
- [Google - JavaScript Promises: an Introduction](https://developers.google.com/web/fundamentals/primers/promises)


The basics of JavaScript Promises


Now that we know a little about what higher order functions are and we've had a look at the Array.map example, lets take a look at a couple of other frequently used examples of higher order functions in JS.

## Array.filter()

You can pretty much guess what [Array.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) does from the name. It filters an existing array and returns a new array of filtered results. More specifically, it tests each element in the given array against a function that returns a boolean, if the result of the function is true, the element passes the test and is added to the resulting array.

**Here is a basic example:**

```js
let mixedArray = [1, "one", 2, "two", 3, "three", 4, "four", 5, "five"];
let numbersArray = mixedArray.filter(el => Number.isInteger(el));
// numbersArray = [1, 2, 3, 4, 5]
```

We start with an array of mixed types, integers and strings, and we want to get an array which only contains the integers. Filter loops over the mixedArray and passes each value to Number.isInteger, which returns true when the current element is an integer. All the elements that pass this 'test' are added to the resulting array and we end up with an array containing only the integers.

## Array.reduce()

The basic concept of [Array.reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) in JavaScript is that it iterates over an array and allows us to perform operations on each item, kind of similar to Array.map, but unlike the map function, reduce also passes the result of the previous operation to the function used in the next iteration.

**Here's an example:**

```js
let count = [1, 2, 3, 4, 5].reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);
// count = 15
```

Here we're using reduce to simply count up the total of the numbers in the starting array. Reduce loops through the array, adding the previous number to the 'accumulator', which is the value returned by the previous loop.

Reduce also takes a second argument as it's starting value, which in our case is 0 since that's what where we want to start the count.

Reduce can be quite a bit more flexible than map and filter, which have fairly specific use cases. For example, we could use reduce on our mixedArray from the filter example to count both the sum of the numbers, and the number of words in the array at the same time.

```js
let mixedArray = [1, "one", 2, "two", 3, "three", 4, "four", 5, "five"];
let countObj = mixedArray.reduce((accumulator, currentValue) => {
	if (typeof(currentValue) === 'number') {
		accumulator.total += currentValue;
	} else if (typeof(currentValue) === 'string') {
		accumulator.wordCount++;
	}
	return accumulator;
}, {
	total: 0,
	wordCount: 0,
});
// countObj = { total: 15, wordCount: 5 }
```

We pass an object with a couple of properties as our initial value, and use the function to either add the number to the existing sum, or tally up a word count, based on type.

---

So to summarise, Array.filter can be used to filter out items in an array and return a new array with just the elements that pass a provided 'test'. And reduce can be used in any cases where we want to perform operations on array items where we also need access to the previous result.

More higher order functions - filter and reduce


To build a React component with multiple adjacent elements without wrapping them in a tag or container div, use React.Fragment:

```js
render() {
    return <React.Fragment>
        <SubComponentOne />
        <SubComponentTwo />
    </React.Fragment>;
}
```

There is also a shorthand syntax: 

```js
render() {
    return <>
        <SubComponentOne />
        <SubComponentTwo />
    </>;
}
```

**Documentation:**

[Fragments – React Documentation](https://reactjs.org/docs/fragments.html)

Adjacent elements in a React component without wrapping


I recently wrote some code to try and understand JavaScript Object creation and Prototypal Inheritance a bit better, here it is, heavily commented to explain what's going on:

```javascript
// Let's declare a person object using an object literal
const person = {
	init: function(name) {
		this.name = name;
	},
	introduce: function() {
		console.log(`My name is ${this.name}`);
	}
}

// We can create a new object using Object.create and set its prototype to 'person'
const adam = Object.create(person);
adam.init('Adam');
adam.introduce(); // ​​​​​My name is Adam​​​​​

// Let's create another person
const nick = Object.create(person);
nick.init('Nick');
// We can set a property on an object that has the property already set in its prototype
// ... and when called, it will refer to the property highest on the 'prototype chain'.
// If the property doesn't exist on the object we called, it'll look for it in the prototype instead
nick.introduce = function() {
	console.log(`My name is ${this.name}, and I'm totally obsessed with Emacs`);
}
nick.introduce(); // ​​​​​My name is Nick, and I'm totally obsessed with Emacs​​​​​

// How to check the prototypes of an object - use isPrototypeOf
console.log(`person is the prototype of ${adam.name}: ${person.isPrototypeOf(adam)}`); // ​​​​​person is the prototype of Adam: true​​​​​
console.log(`person is the prototype of ${nick.name}: ${person.isPrototypeOf(nick)}`); // ​​​​​person is the prototype of Nick: true​​​​​

// You can also do typechecking using isPrototypeOf
// Is person the prototype of a string?
console.log(`person is the prototype of 'myStr': ${person.isPrototypeOf('myStr')}`); // ​​​​​person is the prototype of 'myStr': false​​​​​
// Is Array.prototype the prototype of a new array?
const myTestArr = [];
console.log(`Array.prototype is the prototype of myTestArr: ${Array.prototype.isPrototypeOf(myTestArr)}`); // ​​​​​Array.prototype is the prototype of myTestArr: true​​​​​


// Here's another way using a constructor
const Person = function(name) {
	this.name = name;
	this.introduce = function() {
		console.log(`My name is ${this.name}`);
	}
}
// Create tommy as a new instance of Person
const tommy = new Person('Tommy');
tommy.introduce(); // ​​​​​My name is Tommy​​​​​

// This time, the prototype of tommy is not Person as you might expect, but Person's prototype
// This is because 'Person' is simply the constructor used to create the object and is of type function
console.log(`Person's prototype is the prototype of ${tommy.name}: ${Person.prototype.isPrototypeOf(tommy)}`); // ​​​​​Person's prototype is the prototype of Tommy: true​​​​​
// And tommy is an instanceof Person
console.log(`${tommy.name} is an instanceof Person: ${tommy instanceof Person}`); // ​​​​​Tommy is an instanceof Person: true​​​​​

// Whereas for our objects created with Object.create, we need to check if they're instances of the prototype's constructor!
console.log(`${nick.name} is an instanceof person.constructor: ${nick instanceof person.constructor}`); // ​​​​​Nick is an instanceof person.constructor: true​​​​​
```
---
Try running the above code in a browser to test the results.

Adam Hollister