Understanding callbacks - They aren’t as hard as you think!

Nena — Mon, 09 Nov 2020 16:07:23 +0000

Why callbacks aren't as hard as you think

When I started my first job as a JavaScript developer I was heavily confused by callbacks. And by heavily confused I mean thoroughly and utterly confused. With my little knowledge of JavaScript at that time I had only stumbled across callbacks while using event listeners or timeouts, but didn't really notice them and didn't even try to think about how these functions actually work.

So when I had to use callbacks actively for the first time, I was just lost.

But how did I solve this problem? To be honest: I didn't. I pushed it aside for a few weeks and hoped it wouldn't bother me again. But suddenly a wave of determination hit me and one evening I started my research into the world of callbacks again and guess what? In a few minutes I somehow grasped the concept of a problem that had been bugging me for weeks by then. I don't know if it was because I suddenly found the perfect explanation or because I wasn't stressing myself out anymore but I remember feeling so proud and suddenly wanted to use callbacks for every possible problem.

I'm telling you this little story because I want to encourage you to never give up developing. Everybody is going to face problems while learning to program one day, don't let them get you down. I'm sure you'll be able to tackle them! :) So let's get into it.

What exactly is a callback?

To put it into simple words: A callback is a function that is passed into another function as an argument – just like you would do with variables.

The function is then going to be called inside the outer function.

How do I use them?

Let's have a look at a simple example:

function myName(name, callback){
    console.log('Hi, my name is ', name);
    callback();
}

function myCallback(){
    console.log('and this is how callbacks work!');
}

myName('Nena', myCallback);

// output:
// Hi, my name is Nena
// and this is how callbacks work!

Anonymous callbacks

Alternatively, if you don't plan on using your callback function again, you can define it directly in the function call by using an anonymous function:

function myName(name, callback){
    console.log('Hi, my name is ', name);
    callback();
}

myName('Nena', function(){
    console.log('and this is how callbacks work!');
});

// output:
// Hi, my name is Nena
// and this is how callbacks work!

// Notice how the output is the same as before.

As you can see, the declared function has no name and is therefore called an anonymous function.

And why do I need callbacks?

If you have made it this far you've probably (or hopefully) understood the concept of callbacks by now – Congratulations! But you may be wondering why you would ever need this. So stay tuned, here's why:

JavaScript usually runs your code from top to bottom. But since it's an event-driven language you sometimes need to wait for something else to finish before you can continue with your script. This is called asynchronous programming. That's where callbacks come in handy.

By using callbacks you can ensure that your script waits for a task to finish before it continues.

This is especially important when you're requesting information from an http or API request. You can define a callback which only executes after your response is ready and then handles the information.

Here's a simple fictitious example:

myAPI.get(request, function(response) {
  // process your response here
});

Callbacks and event listeners

But even if you didn't work with API requests yet, you probably still used callbacks before. Maybe even without even noticing them, just like I didn't. Callbacks are the key concept of event listeners. Whenever you're using the addEventListener function, you're using callbacks. The function waits for the event to happen and then invokes a callback function.

myElement.addEventListener('click', function(){
  // this is a callback
}

You did it!

By now I hope that I successfully was able to teach you everything you need to know to start working with callbacks. If you have any questions feel free to ask them in the comment section below! :)

If you don't, congratulations! I'm proud of you for understanding this concept which bugs a lot of new JavaScript developers.

Easily parse an excel spreadsheet into JSON

Nena — Wed, 28 Oct 2020 13:21:20 +0000

Did you know that you can easily parse an excel spreadsheet using Node.js? Keep reading to speed up your information retrieval processes.

Why do I need this?

I learned this a few months ago and came back to using it ever since. I've found that there are several use cases in my daily life that can profit from this little script - in my job as well as in my private life or side projects. You can use it for nearly every scenario where you need to transform your spreadsheet into JSON.

Here are some examples:

your working with a client and need an easy way for them to maintain the data your using for the project, most people are familiar with working with excel
your collaborating with a few people and want a safe place for everybody to collect data
you like planning your life in excel but want to process the data further - Maybe you want to create a beautiful website about your carefully planned road trip
and many more, get creative!

How do I use it?

You only need two Node.js modules for this: xlsx-stream-reader for parsing the data and fs for saving the created JSON file.

xlsx-stream-reader parses each row of your spreadsheet and lets you process the data however you want. I usually save my data in an array, where each row represents one element:

Code example of the parsing process

let currentRow = {};

// iterating the rows 
row.values.forEach(function (rowVal, colNum) {

    if (rowVal && rowVal !== "") {
        // parsing all columns 
        if (colNum == "1") {

            currentRow.id = rowVal; // ID
        } else if (colNum == "2") {

            currentRow.name = rowVal; // name
        } else if (colNum == "3") {

            currentRow.img = rowVal; // img
        } 
    }
});

if (currentRow.name) {

    console.log(currentRow);

    // push the current row into your array
    dataInRows.push(currentRow);
}

The stream reader also emits events, e.g. when it reaches the end of the spreadsheet or an error occurs.

Overall the script is pretty lightweight and short. The longest part is usually the one where you define the rows (see above).

Your input

I hope you could learn something new from this little post. Feel free to add your thoughts or questions in the comments below! :)

DEV Community: Nena