Getting to grips with JavaScript ES6
Since my last blog post I’ve completed another version of the beloved String Calculator kata with a view to learning some more about JavaScript ES6. You can see this latest version on my Github here. As ever any feedback would be much appreciated!
Below I’ll share a few struggles and learnings that I experienced whilst working on the kata.
Set up
Whilst I found the syntax of ES6 much cleaner and easier to work with, I struggled with the initial set up of the project. I had heard of Babel but hadn’t integrated it before in a project. I had many failed attempts at correctly setting up the project, just to get the dependencies correctly installed and run the first test.
A challenge I encountered was that many of the resources/tutorials were out of date, and often didn’t separate out command line and browser testing set up.
In the end though I found this invaluable article, Setting up JavaScript Testing Tools for ES6 by Jani Hartikainen. The article gives a much needed step by step walk through of the dependencies you’ll need to install, and an explanation of what these dependencies do and why you need them. It then gives a break down of setting up various different testing frameworks, and separating command line and browser testing. It even goes as far to give an example ES6 test syntax. Thanks to this article I was able to crack on with my first test- really recommend it!
Tests
I opted to use Karma and Chai for my tests. The benefit of this was it was easier to integrate than Jasmine and allowed me to run tests on the command line without needing to install browser dependencies like webpack. I immediately saw that working with ES6 gave a cleaner and less verbose looking test file.

I found having the empty parenthesis and arrow a much clearer way of representing anonymous functions, compared to earlier versions of JavaScript.
One challenge I encountered with testing however was correctly setting up a throw error message using Mocha and Chai. I had forgotten that syntax from Chai’s ‘expect’ and ‘assert’ aren’t interchangeable and that it needed to be treated as its own function! Thanks to the kind help of Eli and Christoph I got these tests to pass in the end.
Enumerable Functions
In my last post I used Lodash in my project to use more enumerable functions than (I thought) Vanilla JS comes equipped with. Thanks to Rufus for pointing that I didn’t need to use Lodash in my project:
Just want to let you know, you don’t need lodash for most enumerable mutations. Vanilla JS used not to come with `filter` and co, but it does now. So unless you’re developing for users on very old browsers, it’s very rarely necessary to resort to lodash.
In this version then I used a number of JS Vanilla enumerable functions including reduce and filter. I found this article, .map, .reduce & .filter, Oh My! by Dave Atchley a really useful read to learn more about how to implement these correctly.
Another challenge I faced was carrying out enumerable mutations on arrays.

I would like to improve the above converter & checkForNegatives functions, as manually creating new arrays and pushing return values into them feels like a code smell. I’m also not convinced the for loop variations are the best enumerable functions for the job, but was unsure how to use conditionals for other enumerable options. I’d like to get better at using map to simplify these functions, and avoid multiple conditional if statements. Any advice on refactoring these would be great!
Yarn and Jest
As mentioned previously, in the future I’d like to move towards using Yarn. For this kata though I found the majority of the ES6 tutorials used NPM which is why I played it safe and used NPM. Next time around I’d also like to experiment using Jest as my testing framework, recommended by my awesome mentor Eugenia Guerrero.
That’s it for now! More posts on some different topics to come.
