Simple JavaScript Dev Tools I Wish I Had Discovered Earlier…

If you’ve come across any sort of “Intro to JavaScript” reading material, then you probably learned console.log(). A JavaScript code newbie would know that this dev tool prints to the console whatever the user input is inside console.log(). However, there are many other dev tools to use in JavaScript that require elementary understanding, and I’ll walk through so examples. You can follow along by typing inside your console (right click then select inspect from the dropdown).

console.warn('Oh no…')
//similar to console.log() this will print ‘Oh no…’, but instead it will print as a warning message to the console. Warning messages still allow for proper execution, but can be used to communicate that a more efficient or cleaner alternative is available.

console.error('Oh no!')
//’Oh no!’ will be printed as an error message to the console. This tool can be used in programs to display to the user should an error occur.

//This will clear the console!

As for our last example, let’s say we have the following array:
const cats = [{ name: ‘Lucy’, age: 2 }, { name: ‘Stevie’, age: 8 }];

cats.forEach(cat => {
console.groupCollapsed( ` ${}`)
console.log( ` This is ${} `);
console.log( `${} is ${cat.age} years old`);

//In the console the data will be organized by name, due to console.groupCollapsed(`${}`), and when the name is clicked on in the console, the subsequent console.log messages will be revealed. console.groupEnd() then exits the current inline group in the console.


Imperative Programming vs Functional Programming

While I was first learning how to build web apps, I was learning object oriented design using Ruby. This programming paradigm was easy for me to grasp. I took real world models and replicated these situations via code. For example, my first Rails app was a Yoga class tracker. Through my code I demonstrated that a yoga class has a class plan, and belongs to both a client and a teacher. This app also exemplified Imperative programming. When I first started to learn JavaScript, I first learned the language through the lens of imperative programming. Imperative programming is writing a simple script “do this then this”. Imperative programming consists of loops and conditional statements

Alternatively, functional programming deals with how inputs are transformed into outputs. Functional programming is pure meaning the output only depends on the input of the function. Therefore, functional programming does not have side effects. Also, functional programming does not have a “state” like imperative programming. For flow control, functional programming uses function calls and recursion.

The original inspiration for this blog post was to answer a question I had originally come up with. I wish I had a post like this when I first started to learn Functional Programming. Especially since I started to learn Functional Programming from the perspective of Imperative Programming.

Feel free to re-read this article as many times as you like. I re-read my resources repetitively to get clear about the differences between the two styles of programming.