- [Sending JavaScript Http Requests with XMLHttRequest](https://www.youtube.com/watch?v=4K33w-0-p2c)

You did so using an old version of JavaScript.

But if you've ever used `arrow` functions (which you'll learn more about in the next section), you did so using a newer version of JavaScript.

That's good and all, but why is this important to differentiate? There are several reasons:

- Each feature (and its updates) of a language is made to solve a specific problem. It's important to know the context and purpose of each in order to know how to use it

- Software is always evolving. This means that there are different versions that different users might be using. This means not every feature will work for every application.

That's why it's important to know a little about the history of JavaScript: it will make you think of JavaScript (and hopefully software in general) as a continually evolving thing, as opposed to "just a bunch of concepts and techniques you need to memorize".

Check the following resources out to learn more about this:

This is where `Promises` come in. The concept of a Promise, in execution, doesn't add anything new. It does exactly what callbacks aim to do, which is enabling asynchronous actions: for example, clicking a button to load in an image, while still being able to navigate the webpage.

One of a programmer's favorite things to do is to write clean and concise code. Arrow functions are a new way to write functions, given to us by the ECMAScript 6 (The software standard JavaScript is based upon) update of JavaScript.

It is written like this:

() => {};

Go through the following resources to learn more about why they're important:

- [JavaScript ES6 Arrow Functions](https://www.youtube.com/watch?v=h33Srr5J9nY)

- [When (and why) you should use ES6 arrow functions — and when you shouldn’t](https://www.freecodecamp.org/news/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26/)

In JavaScript, like in any other programming language you'll find, there are certain special keywords that always create a specific effect. The `this` keyword is one of those.

In everyday communication we use words like "this" or "that" whenever we want to refer to things in the world or something someone said. It's similarly used in JavaScript.

Simply put: `this` refers to any object it's defined in. The global object, `window` is the default value of `this`. However, anything a new object is created will have its own `this` value.

Go through the following resources to learn more about `this`:

- [Understanding "this" in JavaScript](https://www.codementor.io/dariogarciamoya/understanding--this--in-javascript-du1084lyn)

- [JavaScript "this" keyword](https://www.youtube.com/watch?v=gvicrj31JOM)

Now as we've learned in the previous sections, JavaScript as a language evolves continually. But so do browsers! New features get added to increase the user experience and make life easier for developers.

One of those features added to browsers is an upgraded version of the XHR object. It's called `fetch` and it's the modern way to make API calls. It incorporates Promises, making it easier to handle your server responses.

A `fetch` function is now provided in the global `window` scope in the browser. You can check it out by opening your developers tools and searching for `fetch`. Keep in mind that this only counts for certain browser version. To figure out which browsers can use fetch, check [this](https://caniuse.com/#feat=fetch) out.

- [Fetch API Introduction](https://www.youtube.com/watch?v=Oive66jrwBs)

The answer that OOP gives us can be summarised in 4 pillars. To illustrate these pillars let's use a simple example:

const person = {

name: 'Mohammad',

age: 28,

walk() {

return `${this.name} is walking!`;

},

};

1. **Encapsulation**: In the example data and operations (that manipulate that data)are grouped together. This is called `encapsulation`. The main benefit is that this keeps our code organised. The second benefit is that putting objects inside of a 'capsule' we can prevent direct manipulation by outside sources, this is called `data hiding`. This reduces dependencies between objects, so that change in one place doesn't affect the rest of the application.

2. **Abstraction**: Let's say we had a Complexity of logic hidden away, creating a simpler interface (remote controller to a tv). Only expose the essentials. Abstracting away complexities to create an easier to use element.

4. **Polymorphism**: an object can have many forms of expression, depending on the context. Let's say we inherit

This is called an `object literal`, and it's a valid way of creating an object. However, writing it like this "abstracts away" a lot of what's happening behind the scenes.

You can write the same thing by using the Object `constructor function`.

If we want to create an object we can just use an `object literal` and we're done. But what if we want to create hundreds of object instances of that same object?

For that we use `factory functions`. Don't let the name mislead you though, a factory function is just a regular function. However, the single differentiating factor is that it always returns an object instance: it is a factory that produces object instances, hence the name `factory function`. Here's an example:

function createPerson(name, age) {

var obj = {

name: name,

age: age,

walk: function() {

console.log(`${this.name} is walking!`);

},

};

// other code to manipulate our object in some way here

return obj;

}

This is the most simple way of defining a `class` and creating object instances from it. Now every time we call this function we're creating a new person object.

const noer = createPerson('Noer', 27);

const wouter = createPerson('Wouter', 33);

const federico = createPerson('Federico', 32);

Go through the following to learn more about factory functions:

`Constructor functions` are ordinary functions that have a special purpose: to create object instances. You can consider them the more advanced version of `factory functions`.

Here's an example:

function Person(name, age) {

this.name = name;

this.age = age;

}

The difference with a factory function is the way to instantiate it. Instead of just calling it we have to use the keyword `new`, like so:

const noer = new Person('Noer', 27);

Since ES6 we can make use of the `class` keyword, which is a way to create constructor objects as well. It's essentially the same thing as a constructor function, only written in a clearer and more straightforward way.

Go through the following to learn more: