What the Javascript?

Tools and techniques for learning, playing, and understanding Javascript

Javascript is a wonderfully strange language. It’s extremely flexible and is being used in increasingly varied ways. At times, particularly when first learning the language, it can be tough to understand exactly what javascript is doing or how you should approach a particular problem in javascript. Luckily, there are a host of extremely powerful and useful tools out in the wilderness to assist you in understanding the language and how to accomplish certain tasks. In this article, I will survey some of the tools I find useful in my day-to-day development.

The Docs

MDN is way more organized than this — thankfully.

When tackling any technical endeavor, one of the first things any good engineer should reach for is the documentation. Since javascript was initially a browser-based technology, it should come as no surprise that the best available documentation on the javascript language comes from the Mozilla Foundation — the governing organization behind the Firefox browser , as well as the Mozilla Developer Network . The MDN has the most comprehensive and clearly-written javascript documentation available on the web. When you are in doubt about how to use a particular javascript function, or when your memory fails you on how to correctly order the arguments of a particular function, your first instinct should be to do a quick search on the MDN’s Javascript section.

However, pretending that MDN’s resources on javascript amounts to purely documentation would be a mistake. The articles available on the site include rich examples and explanations of how to effectively utilize the functions and methods you may be referencing, along with links that summarize some of the particularly complicated concepts discussed in the documentation. This allows developers to walk away with a complete understanding of the topic in question. Take, for instance, the documentation on the Promise object constructor. As expected, the documentation starts with an explanation of the expected parameters that the object requires to initialize. Then it goes further into a description on how the object is constructed, its purpose and usage, and follows up with concrete examples. At the top of the documentation, however, the reader is nudged towards reading the guide ‘Understanding Promises’ before continuing further — providing a high level understanding of the concept before digging into the nitty-gritty described above.

I should note that the MDN is primarily a resource for web developers, and the javascript documentation specifically discusses javascript’s usage on the web, but most core methods and concepts are transferrable across all implementations of javascript, so regardless of whether you are programming a web-connected robot , or writing a react native app , MDN’s javascript documentation remains an invaluable resource.

Chrome Developer Tools

Note: After singing the praises of the MDN’s documentation and resources, it seems strange to then call out the developer tools available in Firefox’s competitor, Chrome. This comes more from my personal familiarity of the toolset available to developers in Chrome versus what is available in Firefox and less about the viability of one toolset over the other. From my understanding, a similar or identical toolset is available in Firefox as well, this was just not always the case.

Chrome’s developer tools, or DevTools for short, is an extremely powerful asset in your JSDev toolbox. The feature-set is rich and you can uncover new uses for the tools every time you reach for them. Chrome’s developer tools can be found under the Chrome menu under the ‘More tools’ flyout menu. All the features and how to use them are itemized in Google’s official documentation, but the documentation itself is a bit daunting at first look, so let me highlight some of the features that are particularly useful when toying with javascript:

Javascript Console

The javascript console is the main tool that you can use to your advantage while developing javascript, regardless of whether or not you are writing javascript to be used in a web page. Obviously, like most of the tools available in Chrome, the console is more powerful when used in conjunction with a webpage you are working on. However, it also makes for an extremely good javascript REPL — an interactive scratch-pad that gives you instant feedback on the code you are writing.

In practice, I generally use the console as a REPL when I’m confused on how I am supposed to write a particular line of code, or if I am confused as to why a particular piece of javascript code is not behaving as I expect. I can isolate specific chunks of code and get instant feedback as to how it behaves in a vanilla environment.

Javascript Debugger

If you are doing web development (or if the project you are working on lets you hook into chrome’s developer tools as a debugger ), you can use the ‘Sources’ tab of the developer tools to set breakpoints in your javascript source code and allow the devtools to assist you in debugging your code. This feature can be extremely powerful, and is re-implemented as a debugger for many use cases outside of its original usage for javascript ran in the browser. Using DevTools as a debugger is outside the scope of this article, but the official documentation has a nice guide on how to use the debugger effectively.

Performance Profiler

DevTools has an extremely comprehensive and powerful profiler for javascript baked in as well. To my knowledge, I believe this feature only works for javascript ran in the browser, but I would be pleased to be corrected this point!

From FPS drops to information on where in the code the processor has to spend most of its time performing calculations, this can be your best friend in determining what parts of our code needs some TLC.

Like the debugger, the features in the javascript profile are a bit beyond the scope of this quick survey of tools, but the official documentation comes to the rescue yet again with a succinct explanation on how to use and read the results of the profiler.

Sandboxes

Javascript, and web development at large, enjoys a rich community-ran ecosystem of in-browser tools for sandboxing standalone javascript experiments. These tools generally provide you with the same features and depending on your needs it may just be a matter of taste. Personally, I use JSBin frequently to work out a gnarly algorithm or test a one-off theory, but many people prefer an alternative called CodePen instead. Evaluate both, pick your poison, and enjoy the freedom that comes with an interactive one-off javascript scratchpad that provided immediate feedback and results on screen.

If you are like us at 4Thought Studios, and you are using React Native, you might also be interested in the https://expo.io/ , particularly the Expo Snack project that allows you to play around with React Native, in the browser, without any installation or mucking with Xcode or Android Studio!

What did I miss?

There are approximately a gazillion javascript tools and resources out there to make your life as a javascript developer easier and more productive. Throughout this article I have taken you on a brief tour on some of my most-used javascript tools, but I’m sure I’ve overlooked (or didn’t know about) some other great resources. Do you think something should be included? Is there a project or tool out there that you think no javascript developer should be without? Leave a comment on this article — I can’t wait to learn about that next great tool!

Further Reading: