DEV Community: Stefan Wright

Cookie Consent Headaches Across Subdomains

Stefan Wright — Fri, 06 Sep 2024 10:32:50 +0000

Recently, I ran into a frustrating issue with cookie consent banners popping up on subdomains (moving from subdomain1.example.com to subdomain2.example.com for example). The problem? Our cookie policy covered the entire top-level domain (TLD), so the second banner after consent was already given was redundant.

We were using a Cookie Management Platform (CMP), and this behavior only happened on a few browsers (Safari, Firefox, Brave, you know the ones). We had tried a few workarounds, but they messed up our cookie usage.

For those unfamiliar, these "privacy-focused" browsers block cookies across domains and subdomains to prevent cross-site tracking. While I support privacy, I believe sharing cookie consent between subdomains shouldn't be treated as tracking.

I dug through tons of CMP documentation, but nobody seemed to have a solution. It was either accept the second banner or ditch subdomains (not ideal for an established site).
Then it hit me: iframes! They may be old-school, but they're still useful.

By embedding an iframe from subdomain1.example.com, I could read the consent values and use postMessage to send them to the parent window (subdomain2.example.com). Then, using the CMP's JS API, I updated the consent on subdomain2.

For example, the iframe code that goes in the codebase/hosting on subdomain1 is a basic HTML boilerplate, it loads the CMP javascript, and the inside the body has the following code:

<script>
  function CMPCallback_OnLoad() {
    window.parent.postMessage(
      {
        source: "domainCrossover",
    message: {
      prefs: CMP.consent.preferences,
      stats: CMP.consent.statistics,
      marketing: CMP.consent.marketing,
    },
      },
      "*",
    );
  }
</script>

Then on subdomain2 you would load the iframe hosted from subdomain1 for example, this is how I implemented it (we're using React hence the env variable usage):

<script type="text/javascript">
  const iframeTLD = "%REACT_APP_MAIN_SITE_URL%";
  window.dataLayer = window.dataLayer || [];

  var crossoverProcessMessageEvent = function (event) {
    if (event.data.source === "domainCrossover") {
      window.subdomain1ConsentPreferences = event.data.message.prefs;
      window.subdomain1ConsentStatistics = event.data.message.stats;
      window.subdomain1ConsentMarketing = event.data.message.marketing;
      window.dataLayer.push({ event: "domainCrossover" });
    }
  };
  window.addEventListener("message", crossoverProcessMessageEvent);

  var crossoverIframeNode = document.createElement("iframe");
  crossoverIframeNode.src = iframeTLD + "crossdomain/domaincrossover.html";
  crossoverIframeNode.id = "crossoverExternalIframe";
  crossoverIframeNode.style = "float: left !important; opacity: 0.0 !important; width: 0px !important; height: 0px !important;";

 document.head.appendChild(crossoverIframeNode);
</script>

From a GTM Tag I then read the window variables, and call the CMP JS API to update the consent policy. Then with some GTM configuration changes to trigger tags on the "Consent Updated" event (which comes from the CMP tag on GTM), we had tracking and consent from subdomain1.example.com – all without annoying users with a second banner!

Hopefully, this helps if you're facing a similar issue and want to keep cookie consent consistent across subdomains on those "private" browsers.

ES6 - A beginners guide - Array Helpers

Stefan Wright — Sun, 23 Jan 2022 12:52:47 +0000

You made it to the last post in the series, sorry it's delayed work priorities took precedence over writing this up. This time I will cover Array Helpers, now some of this were drafted into ES5.1 but finalised into code in ES6, so these have been known about for a little while before being public, and of course I am covering ES6 7 years after it was publicly released (always playing catchup in the dev world!).
Arrays are pretty much common place in any JS application, so it makes sense we have some common functions that we can call to help process/manipulate/handle them. ES6 introduced 6 new helper functions, namely:

forEach
map
reduce
filter
find
every
and some and in this article I am going to look into these into a bit more detail and we'll take a look at some examples along the way :) ## forEach() The purpose of forEach() is a relatively simple, for each record in an array do something. So using our array, let's say we want to just output the objects into the DOM, we can use a function that does that, and use it as the parameter for forEach().forEach() takes 2 parameters:
function, this is our processing function which itself can contain 3 parameters, these are:
- currentValue (required) - this is the current element
- index (optional) - this is the index of the current element
- arr (optional) - this is the array that the current element exists in
thisValue (optional) - This is a value to be passed into our function as it's reference to this Let's take a look at an example of forEach():

var blogs = [
    { id: 10, title: 'Daily JS' },
    { id: 20, title: 'Code Refactor Daily' },
    { id: 30, title: 'The Brightest React-ion' }
];

const outputBlogs = (blog) => {
    document.body.innerHTML += `<p>${JSON.stringify(blog)}</p>`
};

blogs.forEach(outputBlogs)

This code will simply just output the following paragraph nodes at the end of the body element:

<p>{"id":10,"title":"Daily JS"}</p>
<p>{"id":20,"title":"Code Refactor Daily"}</p>
<p>{"id":30,"title":"The Brightest React-ion"}</p>

This is of course a very simple example, but very easily shows how we can walk through the array and perform a function on each entry. A more in-depth example would perhaps be an array of images, and we want to store the area these images would take up in another array. For example:

var images = [
  { height: 10, width: 30 },
  { height: 20, width: 90 },
  { height: 54, width: 32 }
];
var areas = [];

images.forEach(function(image){
  areas.push(image.height * image.width)
})
document.body.innerHTML += `<p>${JSON.stringify(areas)}</p>`

In this example we would have the array printed out into a paragraph node that reads [300,1800,1728], so here what we have is a function that is being trigger on each array item, which takes 2 object properties, and then pushes them into another array which we then output.

map()

In the above example, we could have worked this differently, we could have instead used the map() helper. Map essentially takes one array, iterates through it, processing it with another function, and appends the item to an array that map() created. map() takes 2 parameters:

function, this is our map function which itself can contain 3 parameters, these are:
- currentValue (required) - this is the current element
- index (optional) - this is the index of the current element
- arr (optional) - this is the array that the current element exists in
thisValue (optional) - This is a value to be passed into our function as it's reference to this Let's take a look at an example:

var blogs = [
    { id: 10, title: 'Daily JS' },
    { id: 20, title: 'Code Refactor Daily' },
    { id: 30, title: 'The Brightest React-ion' }
];

let blogTitles = blogs.map((blog) => blog.title)

document.body.innerHTML += `<p>${JSON.stringify(blogTitles)}</p>`

In the above example we will have an output that reads: ["Daily JS","Code Refactor Daily","The Brightest React-ion"].
There is one thing to always ensure you remember with map() and that is that you must ensure you return a value in your function else you will get an array of undefined values, the length will still be the same as the existing array but as your callback function doesn't return a value it cannot store anything.
As mentioned above the function you call inside of map() can actually take 3 parameters, 2 of which are optional. We have already seen currentValue which was blog, we can also pass index which is the index position of the current element, and arr which outputs the array that contains the current element (I cannot find an actual useful implementation of this param, feel free to shout out with any example you might have found though). Let's take a look at our example above with the index added:

let blogTitles = blogs.map((blog, index) => `index: ${index} is ${blog.title}`)

document.body.innerHTML += `<p>${JSON.stringify(blogTitles)}</p>`

This updated example will now give us an output of ["index: 0 is Daily JS","index: 1 is Code Refactor Daily","index: 2 is The Brightest React-ion"]. This functionality is a lot easy than using a traditional for loop where we would have to access something like i for each element in the loop.

reduce()

The reduce() filter is definitely an interesting filter, It will ingest the array elements, pass them through a "reducer function", and output an accumulated result. reduce() takes 2 parameters:

function, this is our reducer function which itself can contain 4 parameters, these are:
- total (required) - this is the initialValue OR thw previously returned value of the function
- currentValue (required) - this is the current element
- currentIndex (optional) - this is the index of the current element
- arr (optional) - this is the array that the current element exists in
initialValue (optional) - This is a value to be passed into our function as it's initial value Let's look at an example:

var trips = [{ distance: 34 }, { distance: 12 } , { distance: 1 }];

var totalDistance = trips.reduce((sum, trip) => { return sum += trip.distance }, 0);

In our example above, we start our totalDistance variable with an initialValue of 0. Then we will traverse through our trips array, and then for each item in there we call our reducer function, this takes sum as the total parameter (which defaults to 0 in our initialValue), and trip as the currentValue. Our return from this function is our sum/initialValue + the distance property of the element we are currently on. If we run this in the browser is will tell us that totalDistance is 47.
We would also use the reduce() helper to aid us in counting the occurences of a string in an array. For example, let's say we have an inventory of IT equipment such as desks, we have a mix of sitting and standing style desks. Using the reduce() function we can easily count these easily:

var desks = [
    { type: 'sitting' },
    { type: 'standing' },
    { type: 'sitting' },
    { type: 'sitting' },
    { type: 'standing' }
  ];

var deskTypes = desks.reduce(function(retVal, desk) {
    retVal[desk.type] ++
    return retVal
}, { sitting: 0, standing: 0 });

In the output above, we would see {sitting: 3, standing: 2}, there is a slight shortfall in this example however if we wanted to count all the elements but they were not included in the initialValue we could get such as {"sitting":3,"standing":1,"adjustable":null}. There is a way to combat this, with the use to 2 seperate reducing functions, let's take a look:

function uniqueValues(array) {
  var reducedToObject = array.reduce(function (retVal, desk) {
    // If we have no retValue length, 
    // or if we cannot find desk element we add a new object property
    if (
      !retVal.length || !retVal.find(function (desks) {
        return desks == desk.type;
      })
    ) {
      // Add the unique property to our object with a default 0 value
      retVal[desk.type] = 0;
      return retVal;
    }
    return retVal;
  }, {});
  return reducedToObject;
}
var desks = [
  { type: 'sitting' },
  { type: 'standing' },
  { type: 'sitting' },
  { type: 'sitting' },
  { type: 'standing' },
  { type: 'sitting' },
  { type: 'standing' },
  { type: 'adjustable' },
  { type: 'adjustable' },
];

var deskTypeCount = desks.reduce(function(retVal, desk) {
    retVal[desk.type] ++
    return retVal
}, uniqueValues(desks));

In the above example we will now use a reducer reducedToObject to find the unique values in our array, we will then use that value in our deskTypeCount reducer function, ultimately this gives us {"sitting":4,"standing":3,"adjustable":2}. The reduce() helper, is super powerful in scenarios just like this!

filter()

The filter() handler quickly allows us to take one array, and output it to another array pulling a subset of entries from the first, if nothin in the original array matches the filter then we will get an empty array.

function, this is our filter function which itself can contain 3 parameters, these are:
- currentValue (required) - this is the current element
- index (optional) - this is the index of the current element
- arr (optional) - this is the array that the current element exists in
thisValue (optional) - This is a value to be passed into our function as it's initial value Let's look at an example:

var blogs = [
    { id: 10, title: 'Daily JS' },
    { id: 20, title: 'Code Refactor Daily' },
    { id: 30, title: 'The Brightest React-ion' }
];

var filteredBlogs = blogs.filter(user => {
  return blog.id > 10
})

In the above example filteredBlogs will be the following array [{id: 20, title: "Code Refactor Daily"}, {id: 30, title: "The Brightest React-ion"}]. We would also use filter utilise the index parameter for a subset of blog posts, perhaps for something like pagination and filtering. For example, lets say we want to filter for javascript blogs, and just look in a specific block of results. We could use date or similar, but to keep it simple we could do something like this just grouping in a range of index positions:

var blogs = [
    {blogPostId:100, title:"The best JS Guide", category:"Javascript"},
    {blogPostId:101, title:"Stefan's JS Guide", category:"Javascript"},
    {blogPostId:102, title:"Stefan's Java Guide", category:"Java"},
    {blogPostId:103, title:"Stefan's HTML Guide", category:"HTML"},
    {blogPostId:104, title:"Stefan's NodeJS Guide", category:"Javascript"},
    {blogPostId:105, title:"Phil's JS Guide", category:"Javascript"},
    {blogPostId:106, title:"Phil's Java Guide", category:"Java"},
    {blogPostId:107, title:"Phil's HTML Guide", category:"HTML"},
    {blogPostId:108, title:"Phil's NodeJS Guide", category:"Javascript"},
    {blogPostId:109, title:"Simon's JS Guide", category:"Javascript"},
    {blogPostId:110, title:"Simon's Java Guide", category:"Java"},
    {blogPostId:111, title:"Simon's HTML Guide", category:"HTML"},
    {blogPostId:112, title:"Simon's NodeJS Guide", category:"Javascript"},
    {blogPostId:113, title:"Charley's JS Guide", category:"Javascript"},
    {blogPostId:114, title:"Charley's Java Guide", category:"Java"},
    {blogPostId:115, title:"Charley's HTML Guide", category:"HTML"},
    {blogPostId:116, title:"Charley's NodeJS Guide", category:"Javascript"},
]

const filteredBlogs = (blogPosts,page, category) => {
    return blogPosts.filter((post,index) => {
    return (index > (page-1) * 5 && index < page * 5 && post.category == category)
  })
}

With the example above, if we were to call filteredBlogs(blogs,1,"Javascript") we would get a result such as [{ blogPostId: 101, category: "Javascript", title: "Stefan's JS Guide"}, { blogPostId: 104, category: "Javascript", title: "Stefan's NodeJS Guide"}] because we wanted posts between index position 0 and 5 with a category of "Javascript"

find()

The find() helper is usefuly for finding the first element that passes a test. find() takes 2 parameters:

function, this is our finder function which itself can contain 3 parameters, these are:
- currentValue (required) - this is the current element
- index (optional) - this is the index of the current element
- arr (optional) - this is the array that the current element exists in
thisValue (optional) - This is a value to be passed into our function as it's reference to this An example we could use is using find to find the first blog in our Javascript category from our example above, for example:

var blogs = [
    {blogPostId:100, title:"The best JS Guide", category:"Javascript"},
    {blogPostId:101, title:"Stefan's JS Guide", category:"Javascript"},
    {blogPostId:102, title:"Stefan's Java Guide", category:"Java"},
    {blogPostId:103, title:"Stefan's HTML Guide", category:"HTML"},
    {blogPostId:104, title:"Stefan's NodeJS Guide", category:"Javascript"},
    {blogPostId:105, title:"Phil's JS Guide", category:"Javascript"},
    {blogPostId:106, title:"Phil's Java Guide", category:"Java"},
    {blogPostId:107, title:"Phil's HTML Guide", category:"HTML"},
    {blogPostId:108, title:"Phil's NodeJS Guide", category:"Javascript"},
    {blogPostId:109, title:"Simon's JS Guide", category:"Javascript"},
    {blogPostId:110, title:"Simon's Java Guide", category:"Java"},
    {blogPostId:111, title:"Simon's HTML Guide", category:"HTML"},
    {blogPostId:112, title:"Simon's NodeJS Guide", category:"Javascript"},
    {blogPostId:113, title:"Charley's JS Guide", category:"Javascript"},
    {blogPostId:114, title:"Charley's Java Guide", category:"Java"},
    {blogPostId:115, title:"Charley's HTML Guide", category:"HTML"},
    {blogPostId:116, title:"Charley's NodeJS Guide", category:"Javascript"},
]

const findFirstJSBlog = blogs.find(blog => {return blog.category === "Javascript"})

In this example, we will see that findFirstJSBlog gives the return value of {blogPostId: 100, category: "Javascript", title: "The best JS Guide"}. If we wanted to find an element by index, we could run the following:

const findFirstJSBlog = blogs.find((blog, index) => {return index === 1})

This would then give us { blogPostId: 101, category: "Javascript", title: "Stefan's JS Guide"}, a good use case here would be for a previous/next page button in a blog system, for example if your blogs array was for the blog posts, you could then do something like the following:

let currentBlogIndex = 1
const findBlogByIndex = (position) => {
  switch (position) {
    case 'prev':
      currentBlogIndex -=  -1     
      break;
    case 'next':
      currentBlogIndex += +1;
      break;
  }
  return blogs.find((blog, index) => {
      return index === currentBlogIndex
  })
}

const findCurrentJSBlog = findBlogByIndex('current')
const findPrevJSBlog = findBlogByIndex('prev')
const findNextJSBlog = findBlogByIndex('next')

The above code allows us to easily get the current, previous, and next blog posts, with the 3 variables at the end giving us { blogPostId: 101, category: "Javascript", title: "Stefan's JS Guide"}, { blogPostId: 100, category: "Javascript", title: "The best JS Guide"}, and { blogPostId: 102, category: "Javascript", title: "Stefan's Java Guide"}

every() and some()

Finally, we hit the last 2 helpers, every() and some() are probably the most logical sounding helpers from the whole bunch. Simply put, they will check an array, and return a boolean value based on the conditions of either every element or some elements matching the function condition. You could use this for form validation to ensure all required fields are completed (if you aren't already relying on built in validation supplied by most browsers), maybe you want to check that a series of requests are completed, we'll keep our example simple however and let's look at an array of objects listing blog posts again:

var blogs = [
    {blogPostId:100, title:"The best JS Guide", category:"Javascript", published: true},
    {blogPostId:101, title:"Stefan's JS Guide", category:"Javascript", published: true},
    {blogPostId:102, title:"Stefan's Java Guide", category:"Java", published: false},
    {blogPostId:103, title:"Stefan's HTML Guide", category:"HTML", published: true}
]

const everyBlogPublished = blogs.every((blog) => {return blog.published})
const someBlogsPublished = blogs.some((blog) => {return blog.published})

If we were to call the two consts above, everyBlogPublished would return false and someBlogsPublished would return true. Pretty neat huh? There are literally tonnes of examples and use cases for these helpers around online, I think that the above should help anyone get started, let me know if there are any other examples you've seen that you like.

ES6 - A beginners guide - Promises and Fetch

Stefan Wright — Wed, 15 Dec 2021 08:00:48 +0000

This time I am going to cover ES6's introduction of Promise and Fetch as native JavaScript functionality in the browser. A lot of dev's will use 3rd party libraries such as Axios, SuperAgent, or jQuery although it might not always be necessary to do so and it may just add bloat to your projects. We'll start by looking at ES6 Promises, before heading on over to details about Fetch

Promises

What is a Promise?

Much like in the real world, a promise is the result of saying we will do something and give something back. Let's say we wanted to run this piece of code:

const url = "http://www.json.com";
const data = makeRequest(url);
console.log(data);

In the above, our console.log will result in showing undefined because we will simply be executing line 3 immediately after line 2, regardless of how quick that makeRequest function runs, it will never be quicker than the execution of the following line. JavaScript Promises give us a method of using 3 different states whilst waiting for something to complete, such as an AJAX request. The three states were can use are:

unresolved - This is out "waiting" phase, if we were to check in on the value of a Promise periodically using a setTimeout() or similar we would see this until the promise either completed or failed
resolved - This is our "finished" state, we have finished getting the data, the promise is fulfilled and something is ready to be returned.
rejected - This is our "error" state, something went wrong, this would be used to trigger some form of error handling. Off the back of these states we have two possible callbacks that we can use:
then - This can be used after a resolved state is triggered, it tells our code what to do next
catch - Much like with a try/catch loop, this is where we perform our error handling ### How about an example? The following examples, can easily be plugged straight into the Dev Tools of your browser and run from the Console screen. Let's get started:

promise = new Promise()

Uh oh! we got an error, but why? well, if you run the above code you should see an error similar to Uncaught TypeError: Promise resolver undefined is not a function. This error response is telling us that the browser knows what a Promise is, but we haven't told it what to do in order to resolve the promise. It's actually really simple to fix. Let's fix it now:

promise = new Promise(()=>{})

Now we have created a promise, if you run the above code you'll see that it gives a response similar to this:
Promise {<pending>}[[Prototype]]: Promise[[PromiseState]]: "pending"[[PromiseResult]]: undefined. So now we have created a promise, it doesn't do much right now though. When we define a promise we need to handle how/when its resolved and rejected, luckily the Promise had two built in arguments that we can use, these are resolve and reject. Let's have a look at that:

promiseResolve = new Promise((resolve, reject) => {
  resolve()
});

In the code above you'll see we create a new Promise, we include our two arguments in our inner function. We then call resolve() inside our function in order to complete the execution. If you run the code above the browser will output something like: Promise {<fulfilled>: undefined}. Likewise we can do the same with reject():

promiseReject = new Promise((resolve, reject) => {
  reject()
});

Wait! we got a warning, we have the following returned Promise {<rejected>: undefined} this is expected, however we also got Uncaught (in promise) undefined because we didn't handle the rejection properly. Let's look at our callbacks, they'll help us handle both state calls above.

Using callbacks

ES6 Promises give us two built in callback methods as mentioned above they are .then() and .catch(). We can use .then() when we resolve a promise to instruct our code on the next action, and the parameter in the function will automatically take the value that was returned in our promise. Let's look at an example:

promiseResolve = new Promise((resolve, reject) => {
  resolve('Promise resolved');
});

promiseResolve
  .then((resolvedValue) => console.log(resolvedValue))
  .then(() => console.log('Still resolved'))

Notice how in our first .then() we have a parameter for our function, we then use that parameter in the return of the arrow function, however rather than giving us an error about the variable being undefined the above code will actually give use the following output:

Promise resolved
Still resolved
Promise {<fulfilled>: undefined}

So as we can see resolvedValue actually gives us the value we passed back in the resolve. We're going to revisit this later in the article when we look at using fetch to pull remote data. Now on to error handling, let's jump straight into an example:

promiseReject = new Promise((resolve, reject) => {
  reject('Promise rejected')
});

promiseReject
  .then(() => console.log('Promise resolved'))
  .then(() => console.log('Still resolved'))
  .catch((err) => console.log(err))

As with the above, we can now see that our catch is including a parameter and our console.log message contains Promise rejected but we do not output Promise resolved or Still resolved and this is because we fired the reject() line in out promise.

Using asyncronous callbacks

We can use asyncronous callback in our ES6 Promises, this can help to simulate what would happen when making an AJAX call or similar to pull data. In the example below we will wait for 5 seconds before resolving our promise.

promiseAsync = new Promise((resolve, reject) => {
  console.log('Starting Promise...')
  setTimeout(() => {resolve('Promise resolved')}, 5000)
});

promiseAsync
  .then((response) => console.log(response))
  .catch(() => console.log('Promise rejected'))

We can use a library like jQuery to make a request and using a promise we can then take an action when it completes, take a look below, we will add a log to say we have started, then we'll fetch a JSON sample of blog posts in a promise, and then log that response

promiseAsync = new Promise((resolve, reject) => {
  console.log('Starting promise')
  $.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts/',
    type: 'GET',
    success: function (data) {
      resolve(data)
    },
    error: function (error) {
      reject(error)
    },
  })
})

promiseAsync
  .then((response) => console.log(response))
  .catch((error) => console.log('Promise rejected', error))

Running the code above gives us Starting promise and then Array(100) in the dev tools. I ran this on JSFiddle so that I could ensure jQuery was included.

So what about Fetch?

Fetch is a new feature included with ES6, it provides us to combine a network request with a promise in a super simple form! It does have its limitations though, and i'll go into them in a bit, but first...you know what's coming...an example!

const url = "https://jsonplaceholder.typicode.com/posts/";
fetch(url)

The code above will simply give us a pending Promise in the browser, that's no use to us in this state. With a Promise, as above, we would have to supply a function to handle the resolve/reject conditions, fetch does this for us though. All we need to do is supply callbacks

const url = "https://jsonplaceholder.typicode.com/posts/";
fetch(url)
  .then(data => console.log(data))

Well, we're getting there, we now get the following output when we use this in the Console window:

Promise {<pending>}
Response {type: 'cors', url: 'https://jsonplaceholder.typicode.com/posts/', redirected: false, status: 200, ok: true, …}

This doesn't give us the actual response data, just some metadata. If we want to extract the actual information from jsonplaceholder we are going to pass this through a different function first, let's take a look:

const url = "https://jsonplaceholder.typicode.com/posts/";
fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))

Above, we are first using .json() in order to take the response stream and render the response body text as JSON (MDN Documentation), we then call .then() again, this time taking in the return value from response.json() and then passing that to console.log. This gives us the following output:

Promise {<pending>}
(100) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

But Stefan, you mentioned some downfalls of Fetch??

That's right, I did. I mentioned that we can use .then() and .catch() with Fetch, however the .catch() handler isn't always triggered when you expect it. For example, if you go to a page/endpoint that does not exist and gives you an HTTP404 response you won't actually hit the .catch() code

const badUrl = "https://jsonplaceholder.typicode.com/posts1321654646186/";
fetch(badUrl)
  .then(response => console.log('SUCCESS: ',response))
  .catch(error => console.log('ERROR', error))

The code above will give ue the following output:

Promise {<pending>}
GET https://jsonplaceholder.typicode.com/posts1321654646186/ 404 (Not Found)
SUCCESS: Response {type: 'cors', url: 'https://jsonplaceholder.typicode.com/posts1321654646186/', redirected: false, status: 404, ok: false, …}

We can see we got a 404 response, but the output is from our .then() callback. Fetch is designed in such a way that you would only hit the .catch() callback is there was a network level error (such as a failed DNS lookup). The following example would actually go to the .catch() callback:

const badUrlHost = "https://jsonplaceholder.typicode12345.com/posts/";
fetch(badUrlHost)
    .then(response => console.log('SUCCESS: ', response))
    .catch(error => console.log('ERROR', error))

This time our console gives us:

Promise {<pending>}
GET https://jsonplaceholder.typicode12345.com/posts/ net::ERR_TUNNEL_CONNECTION_FAILED
ERROR TypeError: Failed to fetch at <anonymous>:2:1

This is ok, but we still want to handle HTTP4XX or HTTP5XX errors gracefully

There is a way around this

There are generally a couple of suggested "workarounds" for working with these kinds of requests. If you NEED to use the Fetch API, then the following kind of code construction would be better for you:

const badUrl = "https://jsonplaceholder.typicode.com/posts1321654646186/";
fetch(badUrl)
  .then(response => {
    if(!response.ok){
        throw new Error("I'm an error");
    } else{
        return response.json()
    }
  })
  .then(data => console.log('Response Data', data))
  .catch(error => console.log('ERROR', error))

In the code above we are now throwing an exception because the response metadatas property for ok was false.

Promise {<pending>}
GET https://jsonplaceholder.typicode.com/posts1321654646186/ 404 (Not Found)
ERROR Error: I'm an error

From the metadata we could use either .ok or .status if we wanted to handle errors differently for HTTP4xx errors as opposed to HTTP5XX errors (for example), or we could use both for generic error handling, such as below:

const badUrl = "https://jsonplaceholder.typicode.com/posts1321654646186/";
fetch(badUrl)
  .then(response => {
    if(!response.ok){
        throw new Error(`${response.status} - ${response.statusText}`);
    } else{
        return response.json()
    }
  })
  .then(data => console.log('Response Data', data))
  .catch(error => console.log('ERROR', error))

Now we see the following error output:

Promise {<pending>}
GET https://jsonplaceholder.typicode.com/posts1321654646186/ 404 (Not Found)
ERROR Error: 404 - Not Found

I mentioned that there were a couple of suggestions for workarounds, alternatives to the above would be using 3rd Party Libraries/Tools such as:

jQuery
Axios - This is my personal favourite and I use it in my own projects
SuperAgent

You could also just use XMLHttpRequest which has long been baked into browsers as default functionality, information on that can be found on MDN here

ES6 - A beginners guide - Generators

Stefan Wright — Wed, 01 Dec 2021 15:37:21 +0000

Forewarning: this topic is hard! It's taken me a week to even start to get my head around it. You may have to read this a few times also, I have spent countless hours watching YouTube videos on this. I'll link one of my favourites at the end

What are you talking about?

Generators! An ES6 feature that is ultimately just a function to iterate over a series of values. However it has a bonus feature! What is it? I hear you ask. Well let me try to explain, When using a generator you can ultimately pause the execution of your code to do something and then return to it later in another clode block. They are very intimidating to start with but ultimately easy to understand after a while. The hardest bit for me was finding an example, or a few examples, that would just give me that glimmer as to why they are useful and why they are better than other possible ways of working (if I could find the examples showing both ways of working then awesome!). Normally I would look at the ES5 way's of working first, this time I am going to switch it up a bit, and we're going to look at the ES6 way to begine with!

So what does a generator look like

function * numberGenerator() {
    yield 1
    yield 2
    yield 3
}

Notice the * after the function keyword, that tells us this is a generator function. Then we have a new keyword yield, this keyword is treated as though it's a mini version of return inside the function.

function * numberGenerator() {
    yield 1
    yield 2
    yield 3
}

const myNumbers = numberGenerator()

When you call a generator, as above, it will not start to do anything, it will be in a suspended state and it will return a generator object. Within the generator object there are 3 prototypes that can be called next(), return(), and throw(). We'll start off by looking at the next() prototype.

next() please!

When we call the next prototype, essentially what we are doing is telling the generator function to start and run until it hits a yield keyword, let's take a look at the example:

function * numberGenerator() {
    yield 1
    yield 2
    yield 3
}

const myNumbers = numberGenerator()
console.log(myNumbers.next()) // This will return { value: 1, done: false } in a console log

Here we see that our code has started and run to the first yield of 1. The output of this give us an object with a value property and a done property, the done property will be false until after the last yield statement is seen

function * numberGenerator() {
    yield 1
    yield 2
    yield 3
}

const myNumbers = numberGenerator()
console.log(myNumbers.next()) // This will return { value: 1, done: false } in a console log
console.log(myNumbers.next()) // This will return { value: 2, done: false } in a console log
console.log(myNumbers.next()) // This will return { value: 3, done: false } in a console log
console.log(myNumbers.next()) // This will return { value: undefined, done: true } in a console log

Above we now see that after we get through all the yields we see a value of undefined, with a done value of true. To make the code execution a bit clearer, we can add some log messages into out generator:

function * numberGenerator() {
    console.log('Before 1')
    yield 1
    console.log('Before 2')
    yield 2
    console.log('Before 3')
    yield 3
    console.log('After 3')
}

const myNumbers = numberGenerator()
// We will see a console log stating "Before 1"
console.log(myNumbers.next()) // This will return { value: 1, done: false } in a console log
// We will see a console log stating "Before 2"
console.log(myNumbers.next()) // This will return { value: 2, done: false } in a console log
// We will see a console log stating "Before 3"
console.log(myNumbers.next()) // This will return { value: 3, done: false } in a console log
// We will see a console log stating "After 3"
console.log(myNumbers.next()) // This will return { value: undefined, done: true } in a console log

The above makes it a bit clearer to understand that when we first call .next() we will enter our function, and execute up until the first yield, so we will output Before 1 and then { value: 1, done: false} and so on.

So what about some use cases?

Before writing this article I wanted to try and find some example that would concrete my understanding of this topic, honestly I can't say that I fully understand it but here we are, trying things out, and perhaps you can help me understand more use cases?

Generate user ID's

function* generateId() {
  let id = 1 // We could take this number from a database lookup

  while (true) {
    yield id
    id++
  }
}

const gen = generateId()
console.log(gen.next().value) // This would return 1 in a console log
console.log(gen.next().value) // This would return 2 in a console log
console.log(gen.next().value) // This would return 3 in a console log

In the above example, we use a while loop to make our generator an infinite loop always generating us the next number. The advantage here? Well, if you try to run a while(true) loop in your own code, you will crash the browser in a few mere seconds and the only way to stop it will be to kill the browser processes on your PC (DO NOT TRY THIS!), doing this in a generator mean we only execute it one step at a time.

Can I pass parameters?

Yes, you can pass parameters into a generators next() function, and I must admit this bit stumped me for a while. To put it most simply, you can pass a parameter in, however if it is the first time calling .next() it will not have any effect because you are yet to yield anything. The parameter sent to the .next() essentially replaces the previous yielded. I'll try to explain with a code example below:

const maxScore = 5;

function* keepScore() {
  let score = 0;

  while (true) {
    const addToScore = yield score // the first call to .next() will only run to here therefore returning 0
    if(addToScore) { // addToScore is populated by the parameter you pass in after the first run
      score += addToScore
    }
  }
}

const playerOne = keepScore()
console.log('score after first move: ')
console.log(playerOne.next()) // This would output 0
console.log('score after second move: ')
console.log(playerOne.next(3)) // This would output 3
console.log('score after third move: ')
console.log(playerOne.next(2)) // This would output 5
console.log('score after fourth move: ')
console.log(playerOne.next()) // This would output 5
console.log('score after fifth move: ')
console.log(playerOne.next(6)) // This would output 11

Making an early exit

With generators it is possible to exit from the function, this can be done in one of two ways. Firstly, you can call .return() instead of next to make the generator exit, or you can use a return statement inside the generator function itself. For example:

const maxCount = 50;
let hitMax = false;

function* countUp() {
    let count = 0

  while (true) {
    const addToCount = yield count
    if(addToCount) {
      count += addToCount;
    }
    if(count >= maxCount){
      hitMax = true;
      return `maxCount has been hit or exceeded` 
    }
  }
}

const counting = countUp();
counting.next();
for(let i=0; !hitMax; i++){
console.log(counting.next(i));
}
console.log("I am done")

Above we will keep counting until hitMax is true, after which we will stop and exit our for loop, in that example we return inside the generator. Let's look at an alternative:

const maxCount = 50;
let hitMax = false;

function* countUp() {
    let count = 0

  while (true) {
    const addToCount = yield count
    if(addToCount) {
      count += addToCount;
    }
    if(count >= maxCount){
      hitMax = true;
    }
  }
}

const counting = countUp();
counting.next();
for(let i=0; !counting.next().done; i++){
  if(!hitMax){
    console.log(counting.next(i));
  } else {
    console.log(counting.return('maxCount has been hit or exceeded'))
  }
}
console.log("I am done")

Above we have to work slightly differently, we will keep incrementing until the done value of .next() is true, inside that loop we check our boolean of hitMax and if we have hit that instead of counting again we will call .return('maxCount has been hit or exceeded') which sets the .next().done value to true and allows us to output a "completion" message.

Overview

WOW! This was by far the hardest topic I have looked at, and I think I have understood it to a basic level at least. The biggest challenge I found was finding and understand real-world use cases. I still don't think i have 100% cracked it with the example, perhaps you have something better? Feel free to share examples in the comments if you do :) The bigget point I learnt from this was:

A generator allows you to exit and re-enter the function multiple times until the done value is true, meaning you don't need to have multiple functions that you call at various stages through the lifecycle. Again, if you have a better explanation, hit me up!

Learn JavaScript Generators In 12 Minutes - Web Dev Simplified

ES6 - A beginners guide - Classes

Stefan Wright — Wed, 17 Nov 2021 14:40:43 +0000

Hey!

It's been a while, I apologise! Work has been pretty hectic and I've not found the time for training, but... I am back! This time we are going to look at the introduction of Classes into ES6. Let it be said, I do not come from an OOP (Object Oriented Programming) background so this certainly isn't something that is common knowledge to me. If you see that I have missed something, or maybe misexplained please do reach out in the comments, let me know, and let's learn from each other. As usual, let's start with how we'd have been doing things in ES5...

The ES5 Way

You'll have seen this a lot if you're new to learning JavaScript in general, we'll use a Car in our examples

// This will create the ES5 version of a class
function Car(options) {
  this.make = options.make;
  this.model = options.model;
}
// We would then assign functions to the above Function
Car.prototype.drive = function () {
  return "Vroom";
};

const car = new Car({make: "Ford", model: "Focus"});
console.log(car.make) //This would return Ford in a console log message
console.log(car.model) //This would return Focus in a console log message
console.log(car.drive()) // This would return the string Vroom in a console log message

The above is all well and good, and of course has sufficed for many years and is engrained in many JavaScript applications (including the one I currently support in my employment), my biggest objection here is that it is very "wordy" there is a lot of duplication of strings that just takes more time and is error prone.

Prototypal Inheritence in ES5

Inheritence is the process of taking one thing and expanding upon it for a secondary purpose. For example, we have the generic Car above, but let's say we wanted to expand that for a specific type of car, say a Supercar. Then what? let's expand upon the above

// This will create the ES5 version of a class
function Car(options) {
  this.make = options.make;
  this.model = options.model;
}
// We would then assign functions to the above Function
Car.prototype.drive = function () {
  return "Vroom";
};

function Supercar(options) {
  this.engineType = options.engineType
}

const supercar = new Supercar({engineType: "V8", make:"Ferrari", model: "458"});
console.log(supercar) //This would return {"engineType":"V8"} in a console log message

We have an issue here, the make and model parameters have gone missing, That's because they are not defined in Supercar but they are in Car. We need to inherit the parameters from Car if we want to show them

// This will create the ES5 version of a class
function Car(options) {
  this.make = options.make;
  this.model = options.model;
}
// We would then assign functions to the above Function
Car.prototype.drive = function () {
  return "Vroom";
};

function Supercar(options) {
  Car.call(this,options); // On it's own this will now change the output of supercar to include the make and model
  this.engineType = options.engineType
}

Supercar.prototype = Object.create(Car.prototype); //This copies the prototype functions from Car so we can use them in Supercar
Supercar.prototype.constructor = Supercar;

Supercar.prototype.honk = function () {
  return 'Beep'
}

const supercar = new Supercar({engineType: "V8", make:"Ferrari", model: "458"});
console.log(supercar) //This would return {"engineType":"V8", "make":"Ferrari", "model": "458"} in a console log message
console.log(supercar.drive()); // This would return 'Vroom' in a console log message
console.log(supercar.honk()); // This would return 'Beep' in a console log message

We have a lot of code here, it messy, and its confusing. That's because JavaScript was not designed to be an OOP language. To combat this, ES6 brought in the existence of Classes to try and bridge that gap, making it a little more familiar to OOP developers branching into JavaScript.

Let's look at refactoring into ES6

The idea of using a class is that we can bypass having to set up constructor functions, then setting up prototypes and inheritance, and cutting out a lot of the boilerplate code that was needed in ES5. Setting up a class is easy we simply use the class keyword and then the name of the class, followed by curly braces. Let's take a look:

class Car {
}
const car = new Car();

This gives us an empty class, we're on our way! Let's keep going with the refactoring

class Car {
  drive() {
    return 'Vroom';
  }
}
const car = new Car();
console.log(car.drive()) // This would return 'Vroom' in a console log message

To add some initial data to the class, we would need to create a constructor object:

class Car {
  constructor(options) {
    this.make = options.make;
    this.model = options.model
  }
  drive() {
    return 'Vroom';
  }
}
const car = new Car({make: "Ford", model: "Focus"});
console.log(car.drive()) // This would return 'Vroom' in a console log message

Isn't this already looking cleaner? So that gives us a refactored version of the very first ES5 block we wrote. Let's take a moment and note how this looks a lot cleaner, it's certainly easier to read, we don't have to keep writing Car.prototype for our functions related to Car either. Let's move on to the inheritence part of the refactor to bring in our Supercar. I'll skip past the part of creating a second "base" class for Supercar and creating it's own function, I don't think we need to go into that:

class Car {
  constructor(options) {
    this.make = options.make;
    this.model = options.model
  }
  drive() {
    return 'Vroom';
  }
}

class Supercar extends Car{
  constructor(options){
    super(options) // This line, allows us to inherit the constructor from the class we are inheriting/extending from (Car in our example)
    this.engineType = options.engineType;
  }
  honk() {
    return 'Beep';
  }
}

const supercar = new Supercar({engineType: "V8", make:"Ferrari", model: "458"});
console.log(supercar) //This would return {"engineType":"V8", "make":"Ferrari", "model": "458"} in a console log message
console.log(supercar.drive()); // This would return 'Vroom' in a console log message
console.log(supercar.honk()); // This would return 'Beep' in a console log message

That's it! We created a Car class, we then used that class inside another class for Supercar, and now we can access properties and functions from Car, within Supercar. How awesome is that?!?!

The `super` keyword

The super keyword is critical to our class extension if we want to utilise properties and functions in our secondary class from the primary class. Think of super as the "give me everything that they have" option. You can pass it parameters too as you see above for passing the options array, allowing the parent class to use make and model from our array. You can also use super to invoke a method from the parent class within the return statement of your second method, for example:

class Car {
  constructor(options) {
    this.make = options.make;
    this.model = options.model
  }
  drive() {
    return 'Vroom';
  }
}

class Supercar extends Car{
  constructor(options){
    super(options) // This line, allows us to inherit the constructor from the class we are inheriting/extending from (Car in our example)
    this.engineType = options.engineType;
  }
  drive() {
    return `${super.drive()} Zoom`;
  }
  honk() {
    return 'Beep';
  }
}
const supercar = new Supercar({engineType: "V8", make:"Ferrari", model: "458"});
console.log(supercar) //This would return {"engineType":"V8", "make":"Ferrari", "model": "458"} in a console log message
console.log(supercar.drive()); // This would return 'Vroom Zoom' in a console log message
console.log(supercar.honk()); // This would return 'Beep' in a console log message

Whilst the above is slick, funky, fun I wouldn't advise it in a production environment, it will very likely lead to confusion, you end up needing stepping through so much more code when you try to extend functions and you will lose track of what is actually being called. In my opinion, keep super() at the constructor level.

ES6 - A beginners guide - Object and Array Destructuring

Stefan Wright — Wed, 08 Sep 2021 13:05:29 +0000

Hey, hopefully by now if you have been following this series you feel you have a better understanding of ES6 and the new features it brought it. This article though, is about one of the nicest features to appear with ES6, Object and Array Destructuring. Personally I love this feature, not only does it make the code easier to read, but also easier to write (in my opinion).

Just gimme an example

Ok, so you want an example hey? Well let's have a look at what we would have done with Objects and Arrays in ES5...

var expenseObj = {
    type: 'Business',
    amount: '10GBP'
};
var expenseArr = [
    'Business',
    '10GBP'
];

var objType = expense.type;
var objAmount = expense.amount

var arrType = expense[0];
var arrAmount = expense[1];

Those way's of working aren't awful, at the end of the day they have been (and still do) work and you'll see them being used. Let's take a look at ES6's way of working though...

ES6 Destructuring Objects

So, ES6 allows you to create variables based on the key within an object so you can stop with having to type out .propertyName. What do I mean? Let's have a look:

const file = {
    extension: 'jpg',
    name: 'post',
    size: 1024,
    blah :'meh'
}
//If this were an ES5 Function
function fileSummary(file) {
    debugger;
    return `The file ${file.name}.${file.extension} is of size: ${file.size}`
};

//But in ES6
function fileSummary({name, extension, size}) {
    debugger;
    return `The file ${name}.${extension} is of size: ${size}`
};

console.log(fileSummary(file)); // In both cases returns "The file post.jpg is of size 1024" in a console.log

Personally, I really like the ES6 way because at the very declaration of the function I know what values I will be using from the object we pass in. The character count in the examples is marginally less with ES6, but imagine a larger function where you reference the name more often, it soon becomes tiresome having to write something like file.name and that is relying on the developer using nice short names! An added benefit of ES6 Object Destructuring is that you no longer have to remember the order of the parameters if a function destructures an object such as in the below example:

// Without ES6 Object Destructuring we might have a function like this
function signup(username, password, email, dateOfBirth, city){
    //create the user
}
//and we would call it as below
signup('Bob','password', 'me@me.com', '1/1/1991', 'Lowestoft')

// Bring in ES6 and Object Destructuring
function signup({username, password, email, dateOfBirth, city}){
    //create the user
}
// You may have created an object to be updated as a form is filled out to capture the data
const user = {
    username:'Bob',
    email: 'me@me.com',
    password:'password',
    city: 'Lowestoft',
    dateOfBirth: '1/1/1991'
}
// Note how the user object and the function as in different orders, with destructuring this is fine!
signup(user)

ES6 Destructuring Arrays

Array destructuring is handled in exactly the same way as objects, but the outcome is very different. With array's we don't have a name/key so whilst we can still reference array elements, we need to name them in our destructure and we would want one per array entry. Let's get an example:

const companies = [
    'Google',
    'Facebook',
    'Uber'
]

// In ES5 we would reference array entries like this 
var firstCompany = companies[0];
console.log(firstCompany) // Returns Google in a console.log

//In ES6 we can destructure the array and generate our variables from the positional entries in the array
const [ companyName, companyName2, companyName3] = companies;
console.log(companyName); // Returns "Google" in a console.log
console.log(companyName2); // Returns "Facebook" in a console.log
console.log(companyName3); // Returns "Uber" in a console.log

Above you can see we create a variable name for each entry in the companies array, if you have a large array of course this could be quite cumbersome to use, so it might not be the right solution for your scenario.

// We can also use the ...rest operator to obtain a reference to the rest of the items in the array
const [companyName, ...rest] = companies;
console.log(companyName); // Returns "Google" in a console.log
console.log(rest); // Returns the rest of the array items in a console.log as an array ["Facebook", "Uber"]

Above, you can see we can use the rest operator when destructuring the array, we assign the variable of companyName to the first item in the array, and the rest are assigned to rest variable created using the rest operator. Later on in this article I'll show an example where you can create a recursive function using this very syntax.

How about mixing the two, Object and Array Destructuring together

It is possible to combine Object and Array Destructuring together in order to quickly get to an item. In the example below we have an array of companies, and their location, we then use Destructing to get the companyLocation from the object positioned first in the array.

const companies = [
    {name: 'Google', companyLocation:'Mountain View'},
    {name: 'Facebook', companyLocation:'Menlo Park'},
    {name: 'Uber', companyLocation:'San Francisco'},
]
const [{companyLocation}] = companies // Gives you the first array members location
console.log(companyLocation); // Returns Moutain View in a console.log

We can also use Destructuring in the opposite way, fetching the array item from within an object instead. Below you'll see we have an Object for Google which contains a key for locations. The value of that key is an array of locations. Our destructuring line first destructures the object, looking just at the locations key, we then destructure the array, fetching the first entry and assigning it the variable name of firstLocation.

const Google = {
    locations: ['Mountain View', 'New York', 'London']
}

const { locations: [firstLocation] } = Google
console.log(firstLocation) // Returns Mountain View in a console.log

Some more complex examples

Converting an array of array's into an array of objects

During some training courses I came across test examples where I was supplied with an array which contained arrays of map co-ordinates. This array needed to be converted to an array of objects so they could be named as x and y. For this I ended up using the .map array helper as you'll see below:

const points = [
    [4,5],
    [10,1],
    [0,20]
];

//Requirement
/* [
    {x: 4, y:5},
    {x: 10, y:1},
    {x:0, y:20},
] */

//destructure the array
const newPoints = points.map(([x, y]) => {
    return {x, y}
})

console.log(newPoints) // This returns the requirement in a console.log

A Udemy course that I followed through some of these learnings set a really complex test at the end of its section on Object and Array Destructuring which took a while to figure out. I'm going to include it below and add an explanation of what is happening. Maybe you want to give it a shot and let me know your solutions :)

The task:

Use array destructuring, recursion, and the rest/spread operators to create a function 'double' that will return a new array with all values inside of it multiplied by two. Do not use any array helpers! Sure, the map, forEach, or reduce helpers would make this extremely easy but give it a shot the hard way anyways

The supplied starter code:

const numbers = [1, 2, 3];

function double() {

};

My solution (Look at the end of this article, there can be an issue with this solution):

const numbers = [1, 2, 3];

function double([firstNum, ...rest]) {
    if(!firstNum) return[];    
    return [firstNum * 2, ...double(rest)];
};

double(numbers);

Explanation of the solution:

We start the above with an array of numbers, in our function what is happening is as follows:

The arguments for the function include a deconstructed array value firstNum, and then we use the ... rest parameter (helpfully called rest here)
if firstNum is falsy then we return an empty array
In our return call we multiply was number we were given multiplied by 2, and the second entry is the recursive call to double using the ... spread oprator, ultimately making the call look like this in the first iteration double(2,3) and then double(3) in the second iteration. This nesting/recursion will output 2,4,6]. If you add in some console.log's it can look a little confusing because of the recursion, for example:

const numbers = [1, 2, 3];

function double([firstNum, ...rest]) {
  console.log(`firstNum: `);
  console.log(firstNum);
  console.log(`rest: `);
  console.log(rest);

  if(!firstNum) {
  console.log(`!firstNum`)
  return []; 
  }

  var retValue = [firstNum * 2, ...double(rest)];

  console.log(`retValue: `);
  console.log(retValue);
  return retValue;
}

var endResult = double(numbers);
console.log(`endResult: `);
console.log(endResult);

Below is the output from the console.log messages

firstNum: 
1
rest: 
[2, 3]

firstNum: 
2
rest: 
[3]

firstNum: 
3
rest: 
[]

firstNum: 
undefined
rest: 
[]
!firstNum

retValue: 
[6]
retValue: 
[4, 6]
retValue: 
[2, 4, 6]

endResult: 
[2, 4, 6]

The output may seem confusing because it shows [6], then [4,6], and then [2,4,6] this is because of the recursion. You are running the first iteration, inside that you call a second iteration, and inside that you call a third iteration, and inside that a fourth. The fourth iteration finishes returning an empty array, this in turn finalises the third iteration, adding 6 to the array, this in turn finalises the 2nd iteration, thus adding 4 to the front of the array and finalises the 1st iteration, prepending 2 to the returned array. Finally giving you [2,4,6]. If the return [] was not present when we had got no firstNum value then we would infinitely run through until the browser ran out of memory and threw a Stack Overflow error.

Whoops!!

So, it's been highlighted to me that actually there is an issue with the solution code (goes to show that tutorials aren't always 100%!). Let's say the supplied array contained a 0. A zero is considered falsy when it comes to evaluating the value! so we would get an empty array returned from the double function. We can fix that though:

const number = [0, 1, 2, 3, 4]
function double([firstNum, ...rest]) {
    if(typeof firstNum === "undefined") return[];    
    return [firstNum * 2, ...double(rest)];
};

double(numbers);

I could have just changed the example above but I thought it would be more beneficial for everyone to see where a mistake can easily occur like this.

ES6 - A beginners guide - Rest and Spread Operator

Stefan Wright — Mon, 06 Sep 2021 13:59:58 +0000

In this article I am going to look into the Rest parameter and Spread operator introduced with ES6. The purpose of these two new entries into the JS specification is to help with condensing the volume of code we write and improve readability. rest is used as a parameter in a function declaration to condense an indeterminate number of parameters into a single array, whereas spread is used in the opposite sense in that we can split iterables (arrays/objects/strings) into individual arguments. Let's at these seperately with some code examples shall we?

Rest

How is `...rest` done in ES5?

Typical in ES5 we were quite restricted in the supply of parameters to a function, for example:

function add(a, b){
    return a + b;
}
console.log(add(1, 2)) // Returns 3 in a console.log

If we needed to handle an indeterminate amount of arguments we could reference the arguments keyword:

function newFunc() {
    return arguments;
}
console.log(newFunc('Stefan', 'is', 'coding')) // Returns {0: "Stefan", 1: "is", 2: "coding"}

There is a problem with this approach, the return of the arguments keyword is an array-like object. Unfortunately this means we cannot use array methods such as .filter, or .map. Also, if we were to try and combine the arguments keyword and an ES6 arrow function it would not work because arrow functions do not contain their own arguments binding, this leads to the introduction of the ...rest implementation.

So... how to use `...rest` in ES6

As mentioned previously ...rest is used when we do not know the number of parameters that we want to handle in a function declaration. This can be used nicely for math type functions (when we utilise some of the Array helpers introduced with ES5, I am going to cover them later in the series), for example:

function add(...numbers){
    return numbers.reduce((sum, number) => sum + number, 0)
}
console.log(add(1,2,3,4)); // Returns 10 in a console.log
console.log(add(1,2,3,4,5,6,7,8,9,10)); // Returns 55 in a console.log

We might already have some parameters that will always be supplied that we want to reference by name if so we can still declare tham as parameters and use ...rest to automatically use the rest of the parameters. For example here is a very simple example where we still want to have num1 and num2 as named parameters and we'll use that for the starting value in our .reduce helper, but also we can have reference to the rest of the parameters:

function add(num1, num2, ...numbers){
    return numbers.reduce((sum, number) => sum + number, num1 + num2)
}
console.log(add(1,2,3,4)); // Returns 10 in a console.log
console.log(add(1,2,3,4,5,6,7,8,9,10)); // Returns 55 in a console.log

One thing to note though, ...rest parameters must appear at the end of the list of parameters. Attempting to place anything after the ...rest parameter will trigger an Uncaught SyntaxError in your code.

Spread

So, as I mentioned earlier ...spread is used to split iterables (arrays/objects/strings) into a list of agruments, it can also be used to combine multiple arrays into one single array. Let's take a look:

The ES5 way

var arr1 = [1,2,3];
var arr2 = [4,5,6];
// Concatenate an array
var arr3 = arr1.concat(arr2);
console.log(arr3) // Returns [1, 2, 3, 4, 5, 6] in a console.log

// Copying an array
var arr4 = arr2;
console.log(arr4) // Returns [4, 5, 6] in a console.log
// Note: there is a risk when copying an array in this manner, see explanation after this code block

// Expanding an array
var arr5 = [1,2,3];
var expanded = [arr5, 4, 5];
console.log(expanded) // Returns [[1, 2, 3], 4, 5] in a console.log

// String to Array
var string = "stefan";
var split = string.split("")
console.log(split) // Returns ['s', 't', 'e', 'f', 'a', 'n'] in a console.log

// Math functions
var max = Math.max(arr1);
console.log(max) // Returns NaN in a console.log

In the "copying" example I noted that that way of work is susceptible to error, the reason for this is that in ES5 when you "copy" an array you are actually copying the reference to it, so if you update your "new" variable, you will actually update both copies of the array. Let me show you an example:

var arr1 = [1,2,3];
var arr2 = arr1;
arr2.push(4);
console.log(arr1); // Returns [1, 2, 3, 4] in a console.log
console.log(arr2); // Returns [1, 2, 3, 4] in a console.log

So how does ES6 `...spread` help?

Using the ...spread operator in ES6 we can create a new list of arguments. This allows us to always treat the new var/let/const as a completely new item. Let's take a look at some of the above examples again in ES6 using ...spread:

let arr1 = [1,2,3];
let arr2 = [4,5,6];

// Concatenate an array
let arr3 = [...arr1, arr2];
console.log(arr3) // Returns [1, 2, 3, 4, 5, 6] in a console.log
// Note, the spread operator is ok in an example like this, but it is not recommended in potentially large application as it can cause excessive memory usage and risks of Stack Overflow errors. Using .concat is safer here

// Copying an array
let arr4 = [...arr2];
console.log(arr4) // Returns [4, 5, 6] in a console.log

// Expanding an array
let arr5 = [1,2,3];
let expanded = [...arr5, 4, 5];
console.log(expanded) // Returns [1, 2, 3, 4, 5] in a console.

// String to Array
let string = "stefan";
let split = [...string]
console.log(split) // Returns ['s', 't', 'e', 'f', 'a', 'n'] in a console.log

// Math functions
let max = Math.max(...arr1);
console.log(max) // Returns 3 in a console.log

Notice how the Math function now returns the value we expected?? Thats because instead of passing an array now (which ES5 would have done) we are passing 1, 2, 3 so the function actually compiles like this:

let arr1 = [1, 2, 3];
// ...arr1 outputs 1, 2, 3
let max = Math.max(1, 2, 3);

ES6 - A beginners guide - Default Parameters

Stefan Wright — Fri, 03 Sep 2021 14:52:57 +0000

Welcome, in this article we are going to talk about Default Parameters, a feature that has long existed in other languages but landed in JavaScript in ES6. Simply put, Default Parameters will help us to not only write less code, but to ensure that functions are less likely to throw an exception if someone forget to send a parameter in.
Let's jump straight to an example, as usual we'll show an ES5 snippet first. We'll go with a sample function to create an AJAX request

The ES5 way

With ES5 we would need to check for the lack of a parameter value, if this was found we would give it a default value. This typicaly resulted in a quite unnecessary if statement.

function makeAJAXRequest(url, method) {
    if(!method){
        method = "GET";
    };
    //Rest of the request
}
makeAJAXRequest("https://www.google.com"); // This will generate a GET request because our function will set it as a GET
makeAJAXRequest("https://www.google.com", "POST"); // This will generate a POST request

So, above, if we do not send the method parameter then line 3 of the function will step in and say "Hey! the method needs to be set to GET. If we do send a value then that will be used

ES6 way

The ES5 way works, of course it does it's been around for a while, but its outdated, and its long, and we've come to like making things smaller (just look at what happened to mobile phones!). So ES6 came along and those who came upon the specification decided..."you know what, let's just give the option to set a default value", and that's what they did. Have a look at the example below:

function makeAJAXRequest(url, method = "GET") {
    //Rest of the request
}
makeAJAXRequest("https://www.google.com"); // This will generate a GET request because our function will use the default parameter
makeAJAXRequest("https://www.google.com", "POST"); // This will generate a POST request

Isn't that much tidier? There is one thing to remember here, and that is that Default Parameters must be on the right-hand side of the parameter list. There is no way to skip over them when calling a function so the following would not work:

function makeAJAXRequest(url = "https://www.google.com", method) {
    //Rest of the request
}
makeAJAXRequest("GET"); // This would call the function and url would be "GET" and there would be no method set and so we would likely hit an error

Extra

Default Parameters can have a value generated from other parameters (supplied or defaulted) that have already been set, for example:

function sumOfThree(a, b, c = a + b) {
    return a + b + c;
}
console.log(sumOfThree(1,2)) // Returns 6 in a console.log
console.log(sumOfThree(1,2,4)) // Returns 7 in a console.log

ES6 - A beginners guide - Enhanced Object Literals

Stefan Wright — Fri, 03 Sep 2021 09:02:14 +0000

You came back :) welcome! In this part of the series I am going to talk about Enhanced Object Literals. We've all used objects at some point in our JavaScript journey, ES6 can help to make this process a little more "shorthanded" reducing unnecessary code bloat, improving time to develop, and minimise the risk of simple typo's breaking our object creationg. Let's take a look at some code:

The ES5 way

We've probably all done something like this in the past:

var a = 1, b = 2, c = 3;
  obj = {
    a: a,
    b: b,
    c: c
  };
console.log(obj) // Returns {a: 1, b: 2, c: 3} in a console.log

It's a relatively simple example, and very unlikely to have any issues. Let's see what we can do in ES6:

The ES6 way

In ES6, if your key/value pair in the object is the same then you only need to add the key. The JavaScript engine will process it as a key/value pair. Take a look below:

const a = 1, b = 2, c = 3;
  obj = {
    a,
    b,
    c
  };
console.log(obj) // Returns {a: 1, b: 2, c: 3} in a console.log

Something more advanced

Those example's were extremely simple, let's step it up a gear. We can also use Object Literals in our function returns, speaking of functions though...ES6 permits even more shorthand syntax advantages. Again, let's jump to some code:

The ES5 function

function createBookShop(inventory) {
  return {
    inventory: inventory,
    inventoryValue: function () {
      return this.inventory.reduce(function(total, book) {
        return total + book.price;
      }, 0);
    },
    priceForTitle: function (title) {
      return this.inventory.find(function (book) {
        return book.title === title;
      }).price;
    },
  };
}

const bookInventory = [
  { title: "Harry Potter", price: 10 },
  { title: "Eloquent JS", price: 15 },
];

const bookShop = createBookShop(bookInventory);

console.log(bookShop.inventoryValue()); // Returns 25 in a console.log
console.log(bookShop.priceForTitle("Eloquent JS")); // Returns 15 in a console.log

Above we're creating a book shop containing an inventory and two functions to access the information from the bookshop. You can see we're calling those in the two console log. Let's look at what ES6 can do...

The ES6 function

function createBookShop(inventory) {
  return {
    inventory,
    inventoryValue() {
      return this.inventory.reduce((total, book) => total + book.price, 0);
    },
    priceForTitle(title) {
      return this.inventory.find(book => book.title === title).price;
    },
  };
}

const bookInventory = [
  { title: "Harry Potter", price: 10 },
  { title: "Eloquent JS", price: 15 },
];

const bookShop = createBookShop(bookInventory);

console.log(bookShop.inventoryValue()); // Returns 25 in a console.log
console.log(bookShop.priceForTitle("Eloquent JS")); // Returns 15 in a console.log

So we've reduced our code in a few ways now thanks to the ES6 spec, let's summarise those:

The key/value pair has been reduced down to a single value because they key and value are the same string
We've removed : function in our object functions. Note you cannot use fat arrow functions here
We've used fat arrow functions inside our object functions Overall we saved 100 chars, in a small example like this of course that's not a lot but imagine this in a real world application we can saved 1000's of characters which will hugely impact the file size ultimately

ES6 - A beginners guide - New Variable scoping (Let and Const)

Stefan Wright — Thu, 02 Sep 2021 11:03:52 +0000

Welcome back! It's great to see you on this entry in the series. This time we are going to discuss the new variable scopes called let and const. In ES6 we can essentially forget about var and just use our new friends let and const to have much more control over our variables, ensure that they contain the exact data that we expect at the very point in our code execution.

So what are they?

Although less commonly used now with the introduction of ES6 we'll include var in the explanations below.

var

var can be seen as the most relaxed kind of declaration, it is left open for redeclaration, and also redefinition. For example:

var a = 1; // window.a = 1
var a = 2; // window.a = 2

var b = 1; // window.b = 1
b = 2; // window.b = 2

Neither of these will cause the browser to throw an error or exception. Let's have a look at another var example which you may come across:

var a = 1;
function logVariable() {
  console.log(a);
  var a = 2;
}
logVariable(); // Returns undefined in a console log
console.log(a); // Returns 1 in a console.log

Wait...what? How can we reference a before declaring it? This is what is known as Hoisting. Hoisting is where the JavaScript engine processes the var delcarations during compilation time but it does not assign it a value until the expression is executed so until that time you receive undefined as the return value.
Also, notice how the final console.log returns 1? This is because the first var is globally scoped, and the second is function scoped. So even though in the function we set a = 2, that was in the function scope and would only output 2 if we set a console.log after the assignment in the functions. As we had already set a = 1 at the global scope level when we console.log that outside the function it will use the global var.

So, what about let?

let is block scoped and so applies to everything inside

let a = 1;
console.log(a); // Returns 1 in a console.log
const logVariable = () => {
  console.log(a); // Uncaught ReferenceError
  let a = 2;
};
logVariable(); // Throws an exception
console.log(a); // Doesn't run because of the exception

If you try to run the JavaScript above you will find that it throws an Uncaught ReferenceError, this is because whilst let's are hoisted but not initialized, they live in a "Temporal Dead Zone" (TDZ) meaning we cannot actually access it, thus throwing the ReferenceError.

Patricia has some great descriptions of Hoisting and the TDZ in her article here:

JavaScript Hoisting

Patricia Nicole Opetina ・ Jul 27 '21

#javascript #codenewbie #beginners #webdev

When we hit an exception like we see in the above example it stops the rest of the JavaScript in that block from functioning and thus we do not see the final console.log().

It is worth noting that let's can be re-assigned but not re-declared, for example if we re-assign the variable:

let a = 1;
a = 2;
console.log(a); // Returns 2 in a console.log

but if we try to redeclare the variable as we see below, it will throw an exception:

let b = 1;
let b = 2;
console.log(b); // Throws a SyntaxError because b has already been declared

Interestingly, if you run both of the above snippets at the same time, neither console.log's will output anything despite one of them referencing a variable already defined and assigned, this again is because of hoisting. The declarations are hoisted to the top, and the JS engine detects that there are two declarations for b throws the exception before attempting to execute anything in that block of code.

How about const?

The introduction of const is a nice one. It allow's us to add a level of security to our variables knowing they cannot be changed, well the changes are restricted...i'll go into that in a bit though. As with let, const's are hoisted and will also land in the TDZ during compilation, they also cannot be redeclared and are not available in the global scope.
A key difference between let and const is that const requires assignment at the point of declaration, you cannot create a const and then give it a value. Once given a value, that value is constant (almost).

const a; // Uncaught SyntaxError: Missing initializer in const declaration
const b = 1
b = 2 // Uncaught TypeError: Assignment to constant variable.

I mentioned above that changes to a const are restricted as opposed to flat-out saying they cannot change. Look at the below example, you'll see that I create a const which is assigned an object (array's behave the same here), I can modify the contents of the object/array but I cannot completely change the assignment of the const itself. Let's get an example using an object:

const obj = {name: "Stefan"};
obj = {}; // Uncaught TypeError: Assignment to constant variable.
obj.name = "Bob";
console.log(obj) // Returns Bob in a console.log

and an example using an array:

const arr = [1, 2, 3];
arr = [] // Uncaught TypeError: Assignment to constant variable.
arr.push(4) // You can push into a const array
arr[0] = 11 // You can also modify at the point of an array
console.log(arr) // Returns [11, 2, 3, 4] in a console.log

Why??

Ultimately, const is a "Constant Reference" as opposed to a "Constant Value", this is because the declaration and assignment of a const is to a point in memory. Depending on the data type depends if the reference value is mutable or not. When you assign a string, boolen, number, or maybe even a function you are assigning a primitive value. When you assign an Object or an Array these are non-primitive. The assignment will be protected and y but the data inside it will not be protected. Primitive values are immutable whereas Objects and Arrays are mutable (can be changed). If you are using a const with an Object, and you want to lock those values in, you can use Object.freeze() to do this, see this example:

const obj = Object.freeze({name: "Stefan"});
obj.name = "Bob"; 
// If you are setting 'use strict' in your code then you will see
// Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Object>'
// Else it will silently fail
console.log(obj) // Returns Stefan in a console.log

ES6 - A beginners guide - Template Literals

Stefan Wright — Wed, 01 Sep 2021 12:35:43 +0000

Welcome back! This time I will be covering Template Literals (or Template Strings as some people call them). Primarily, Template Literals are just "syntactic sugar" in the sense that the substitutions it makes make the code much more readable and it can remove the requirement for more variables in your code. Let's look at some examples...

The ES5 way

var person = {name: "Stefan Wright", age: 33};
var retString = "My name is: " + person.name + ", and I am " + person.age + " years old.";

console.log(retString);
// Returns: My name is: Stefan Wright, and I am 33 years old

Above is a really simple example, we only have 2 variables to concatenate into our string and we're only using double quotes. It's not actually too hard to read as ES5. Let's try a harder variation, this time let's imagine we want to create a JSON string:

var device = {device_id:1, guid: "00000000-0000-0000-0000-000000000000", owner: "Stefan", name: "Samsung S20 Plus 5G"};
var todaysDate = "01/01/01";
var retString = '{"device_id":"' + device.device_id + '","device_guid":"' + device.guid + '","device_name":"' + device.name + '", "device_owner":"' + device.owner + '","device_loanDate":"' + todaysDate + '"}';

console.log(retString);
// Returns: "{\"device_id\":\"1\",\"device_guid\":\"00000000-0000-0000-0000-000000000000\",\"device_name\":\"Samsung S20 Plus 5G\", \"device_owner\":\"Stefan\",\"device_loanDate\":\"01/01/01\"}")

Wow! isn't that horrible! Such a mix of quotation marks, singles, doubles, did we miss any? (well, in my example we didn't but it took a long time to write!). This way of working is susceptible to syntax errors and it will take a long time to debug.

The ES6 way of working

Let's tidy this up a bit, bring in ES6 and the first example:

const person = {name: "Stefan Wright", age: 33};
const retString = `My name is: ${person.name}, and I am ${person.age} years old.`;

console.log(retString);
// Returns: My name is: Stefan Wright, and I am 33 years old

Above you can see that we have removed the + symbols for concatenation, we've changes the double quotes for back-ticks and our variables are now wrapped with ${}. Let's have a look at the really long and horrible looking second example from above:

const device = {device_id:1, guid: "00000000-0000-0000-0000-000000000000", owner: "Stefan", name: "Samsung S20 Plus 5G"};
const todaysDate = "01/01/01";
const retString = `{"device_id":"${device.device_id }","device_guid":"${device.guid}","device_name":"${device.name}", "device_owner":"${device.owner}","device_loanDate":"${todaysDate}"}`;

console.log(retString);
// Returns: {"device_id":"1","device_guid":"00000000-0000-0000-0000-000000000000","device_name":"Samsung S20 Plus 5G", "device_owner":"Stefan","device_loanDate":"01/01/01"}

So we've reduced the ES5 version down from 190 down to 166 characters, whilst making the whole string more readable and syntax highlighting in the IDE aids in making it even easier to read. You'll also notice that the output no longer returns escaped quotations which saves on further possible processing.

Extra

When using Template Literals, it is also possible to perform simple function evaluations such as adding two numbers together:

const device = {device_id:1, guid: "00000000-0000-0000-0000-000000000000", owner: "Stefan", name: "Samsung S20 Plus 5G"};
const todaysDate = "01/01/01";
const retString = `{"device_id":"${device.device_id + 10}","device_guid":"${device.guid}","device_name":"${device.name}", "device_owner":"${device.owner}","device_loanDate":"${todaysDate}"}`;

console.log(retString);
// Returns: {"device_id":"11","device_guid":"00000000-0000-0000-0000-000000000000","device_name":"Samsung S20 Plus 5G", "device_owner":"Stefan","device_loanDate":"01/01/01"}

We could also call another function to be evaluated whilst building the Template Literals such as below where I call a function to add 21 days to the provided date:

const addDays = (date, days) => {
    var result = new Date(date);
    result.setDate(result.getDate() + days);
    return result;
}
const device = {device_id:1, guid: "00000000-0000-0000-0000-000000000000", owner: "Stefan", name: "Samsung S20 Plus 5G"};
const todaysDate = new Date("01/01/01");
const retString = `{"device_id":"${device.device_id}","device_guid":"${device.guid}","device_name":"${device.name}", "device_owner":"${device.owner}","device_loanDate":"${todaysDate}","device_returnDate":"${addDays(todaysDate, 21)}"}`;

console.log(retString);
// Returns: {"device_id":"11","device_guid":"00000000-0000-0000-0000-000000000000","device_name":"Samsung S20 Plus 5G", "device_owner":"Stefan","device_loanDate":"Mon Jan 01 2001 00:00:00 GMT+0000 (Greenwich Mean Time)","device_returnDate":"Mon Jan 21 2001 00:00:00 GMT+0000 (Greenwich Mean Time)"}

ES6 - A beginners guide - Arrow Functions

Stefan Wright — Tue, 31 Aug 2021 17:06:45 +0000

Hello! Welcome back to the next part in my series as I work through training resources refreshing (and in some cases learning more) my understanding of ES6. In this post I'll be covering ES6's implementation of Arrow Functions 😍

Arrow Functions are probably one of my favourite additions because visually I feel it makes a HUGE difference when reading the code on the screen. We can make function declarations shorter and more concise, making it easier when a new developer comes to inspect your code to make amendments or reviews.

So... What are they?

Let's imagine we wrote a function using the "old" way of working, it might look something like this:

function someFunkyFunction(param1, param2) {
  var retValue;
  retValue = param1 + param2;
  return retValue;
}
someFunkyFunction(1,2); // Returns: 3

With this way of working there are certain things I feel are inefficient:

The code is 115 characters, we can make that smaller!
We must always use a return statement at the end of the function
We have to write the word function everytime

Let's make it into an arrow function:

someFunkyFunction = (param1, param2) => {
  var retValue;
  retValue = param1 + param2;
  return retValue;
}
someFunkyFunction(1,2); // Returns: 3

With this way of working there are still some things I feel can be improved (and they can be):

The code is 112 characters, it is a bit smaller, but we can lose more weight!
We must always always use a return statement at the end of the function still

But wait!!! There is a way to make this smaller, take a look:

someFunkyFunction = (param1, param2) => param1 + param2;
someFunkyFunction(1,2); // Returns: 3

With this way of working you can see the following:

The code is now only 56 characters in length! that's a massive saving!
There is no return statement

WAIT!! No return statement??

That's right, when using this final version of an ES6 arrow function we can remove the arrow function. But why? Well, if you are performing a single JS expression as part of your ES6 Arrow Function the it's output and inherently be the return value. In doing this we can remove the surrounding curly braces from the function, aswell as the word return.

Extra

If you create an arrow function that only takes a single parameter then you can make things even smaller because you can also remove the brackets from the parameters of the Arrow Function. Let's have a look at an example:

someFunkyFunction = param1 => param1 * 2;
someFunkyFunction(1) // Returns: 2

Now that's tidy!

DEV Community: Stefan Wright

Cookie Consent Headaches Across Subdomains

ES6 - A beginners guide - Array Helpers

map()

reduce()

filter()

find()

every() and some()

ES6 - A beginners guide - Promises and Fetch

Promises

What is a Promise?

Using callbacks

Using asyncronous callbacks

So what about Fetch?

But Stefan, you mentioned some downfalls of Fetch??

There is a way around this

ES6 - A beginners guide - Generators

What are you talking about?

So what does a generator look like

next() please!

So what about some use cases?

Generate user ID's

Can I pass parameters?

Making an early exit

Overview

ES6 - A beginners guide - Classes

Hey!

The ES5 Way

Prototypal Inheritence in ES5

Let's look at refactoring into ES6

The super keyword

ES6 - A beginners guide - Object and Array Destructuring

Just gimme an example

ES6 Destructuring Objects

ES6 Destructuring Arrays

How about mixing the two, Object and Array Destructuring together

Some more complex examples

Converting an array of array's into an array of objects

The task:

The supplied starter code:

My solution (Look at the end of this article, there can be an issue with this solution):

Explanation of the solution:

Whoops!!

ES6 - A beginners guide - Rest and Spread Operator

Rest

How is ...rest done in ES5?

So... how to use ...rest in ES6

Spread

The ES5 way

So how does ES6 ...spread help?

ES6 - A beginners guide - Default Parameters

The ES5 way

ES6 way

Extra

ES6 - A beginners guide - Enhanced Object Literals

The ES5 way

The ES6 way

Something more advanced

The ES5 function

The ES6 function

ES6 - A beginners guide - New Variable scoping (Let and Const)

So what are they?

var

So, what about let?

JavaScript Hoisting

Patricia Nicole Opetina ・ Jul 27 '21

How about const?

Why??

ES6 - A beginners guide - Template Literals

The ES5 way

The ES6 way of working

Extra

ES6 - A beginners guide - Arrow Functions

So... What are they?

WAIT!! No return statement??

Extra

The `super` keyword

How is `...rest` done in ES5?

So... how to use `...rest` in ES6

So how does ES6 `...spread` help?