Satyadarshin

It's all about me

Learning JavaScript is not a straight path

Over the years I’ve frequently found that tasks I expect to be tricky can be solved with a single function, whilst ostensibly simple ones end up becoming time-consuming, complicated, and downright frustrating.

Here’s one that went full byzantine.

In order to get practice with JavaScript‘s native Higher Order array functions, I created a simple project with barely more than three files in it (an index.html, app.js and app.css). To make this just a tad more sophisticated, and with a vague sense that I might want to build up to a more complex sandbox, I turned my dummy data into a JSON data file.

For context, I’m using a Linux Mint laptop, writing my code in Microsoft’s Visual Studio Code and using it’s integrated Terminal for operations like Git (I pretty much always set up Git repositories for more than the very simplest of sandbox projects). I’m outputting the results of some operations to the console in Chromium. The point of this is to stage complexity: check the data is actually being chugged over in the way I expect, before I try to attach the output to any end-user visible HTML structures like a list or a table. But as we’ll see, so much for keeping it simple.

The objective is to pull in both the data and a vanilla JavaScript file into a rudimentary, static HTML file. I then want to create some simple custom functions to apply 8 common higher order array functions (including .map .filter .forEach), outputting the results to the page. My custom functions will be attached to pertinent buttons that will run and display the results.

So in my imagination, I simply file > Open in Chromium, load my index.html and have a few buttons do something a bit trivial. Obstacle the first: you can’t just include a link to a JSON file in your HTML and have your JavaScript reach it like any other data type.

This forces a digression from .forEach() to AJAX. I end up at an actually quite unhelpful article on how to use XMLHttpRequest() to achieve my end. Those of you who are ahead of my curve on this will have twigged that I need to solve another problem first: I need a local server environment to run the AJAX call.

From here I briefly had to step into the bigger picture of DevOps to wrap my simple app into an off-the-peg Docker LAMP stack. This is a directory template I built for just such an eventuality. Although this is technical overkill, the ability to run a local server environment and push the whole project somewhere public relatively quickly, is proving to be a useful secondary skill set. If I was working on my iMac I would have built my project under MAMP by habit, but Linux Mint doesn’t have such an app: we need to install and manage the separate parts manually. Docker allows us to build quite different environments (like a MongoDB, Express.js, Vue.js, and Node.js (MEVN) stack) in a much more adaptable utility.

So with this all set up, I can finally and successfully load my JSON data.

But not so fast! The console is telling me that the array I’m expecting JSON.parse() to provide me with, is actually an object my .forEach() chokes on (I used a temporary for loop to test that I’m actually able to manipulate the data).

So this morning I’ve been recommended to look at VS Code’s built in debugger. Working with a debugger is also an obviously useful skill to have, but this proves to be several digressions into the wilds: VS Code’s documentation tutorial recommends I install both Node and Express to follow along.

Ironically, facility with Node and Express (alongside MongoDB and Vue.js) is actually where I want to end up, and why I’m doing remedial JavaScript in the first place.

Characters .JS drawn graffiti style

The characters .JS drawn graffiti style. .js is the JavaScript file extension. Gouache on cartridge paper (version 1).

Post categories

JavaScript, Web Development

Post tags