So how do you bundle up your application so that it can run the same way in every local environment? That’s where Docker comes in.

For beginners, Docker isn't always a very easy concept to grasp. But once you get it, I promise that it’s very interesting. So interesting that you’ll want to dockerize every application you lay your hands on.

For this article, a Go application will be our case study. The fundamental concept of containerization as explained here is transferable, so don’t worry too much about how dockerizing applications in another language will look like.

We’ll go through the basics of dockerizing a Go app with just Docker, images and containers, setting up multiple containers in one application with Docker Compose, and the constituent of a Docker Compose file.

By the end of this article, you'll have a basic understanding of what Docker is, what an image or container is, and how to orchestrate multiple, dependent containers with Docker Compose.

What We'll Cover:

1. Prerequisites

2. What is Docker?

3. How to Install Docker

4. What is a Dockerfile?

5. What is Docker Compose?

6. The app Container

7. The database Container

8. The phpMyAdmin Container

9. Running Everything Together

10. Wrapping Up

Prerequisites

You don't need any prior knowledge of Docker to follow this tutorial. This article is written with a beginner POV in mind, so it's okay if the concept is new to you.

In order to be fully engaged and understand the Go coding examples used here, it'll be helpful if you have basic knowledge of Golang. If you already understand how to set up a Go application on your local computer, you're good to go. If not, you can check this article on how to get started coding in Go.

What is Docker?

Imagine that you have a box. In that box, you put your code and everything that it needs to run. That is, the programming language it uses and any other external packages you need to install.

If someone needs your application, you can just hand them the box. You can also hand this box to as many people as you want. They don’t need to install the language or any other thing on their computer because everything they need is already inside the box. So, when they run the application, what they're actually doing is running an instance of that box.

The app is running within the box which is the standard environment. This means for everyone who got the box and “opened it”, the application is going to run the exact same way.

With the help of Docker, apps can run under the same conditions across different systems, and you avoid the problem of “it works on my machine”.

In technical Docker terms, this box is called an image and the running instance is called a container.

An image is a lightweight, standalone, executable package that includes everything needed to run a piece of software. That is, code, runtime, libraries, system tools, and even the operating system.

A container is simply a runnable instance of an image. This represents the execution environment for a specific application.

If all this seems to abstract, don’t worry. We’ll get our hands dirty in a little bit.

How to Install Docker

In order to install Docker, we're going to install Docker Desktop which comes bundled up with the Docker Engine. Docker Destop is a GUI for managing containers, and you'll see how useful it is in subsequent sections.

At the time of writing, I'm using WSL (Windows Sub-system for Linux). If you're doing the same, you'll need to take that into consideration before installing because Docker requires different installation prerequisites and steps for different operating systems.

To install Docker Desktop on WSL,

1. Download and install the windows .exe file

2. Start Docker Desktop from the Start Menu and navigate to settings

3. Select Use WSL 2 based engine from the General tab

4. Click on apply.

That’s it for the WSL installation. If you are running another operating system, the official docs have a list of installation options for you.

What is a Dockerfile?

In order to build your box in the first place, Docker needs to follow a couple of outlined steps. It needs to know the dependencies, the run time, and it also needs to have the source code. All these steps we list in a Dockerfile.

Before we get down to cracking anything, let’s create a working directory and navigate into it.

mkdir go_book_api && cd go_book_api

To intialise the Go module in your application, run the following command:

go mod init go_book_api

This creates a go.mod file to keep track of your project dependencies. In the root of the project, create a cmd directory, and a main.go file in it. This will serve as the entry point of your application. In the main.go file, you can have a simple print statement:

// cmd/main.go
package main

import "fmt"

func main() {
	fmt.Println("Look at me gooo!")
}

Now, go ahead and create a file in the root of your project and call it Dockerfile. This file has no extensions, but your system automatically knows that it's a file for Docker commands.

Go ahead and paste the following in that file, and then we'll go through each of them one by one:

# base image
FROM golang:1.24

# define the working directory
WORKDIR /app

# copy the go.mod and go.sum so that the packages to be installed
# are known in the container. ./ here is the WORKDIR, /app
COPY go.mod ./

# command to install modules
RUN go mod download

# copy source code into working dir
COPY . .

# build
RUN CGO_ENABLED=0 GOOS=linux go build -o /docker-gs-ping ./cmd/main.go

# run the compiled binary when the container starts
CMD ["/docker-gs-ping"]

Most Dockerfiles begin with a base image, which is specified by the FROM keyword. A base image is a foundational template that provides minimal operating system environment, libraries, or dependencies required to build and run an application within a container.

In this case, your base image is golang:1.24 . Your base image could have been an operating system like Linux. In that case. when you ship your code to someone who isn’t running a Linux operating system, they wouldn’t have to worry because they will be running the application in an environment that already has a minimal Linux OS. In the same light, someone who doesn’t have Go installed locally can run your application.

To figure out what base image to use when setting up your Dockerfile, you can always peruse the official Docker Hub repository for published images. For this case, you can check out base images that are officially published by Golang here.

The next step is to define a working directory. Inside your box, you have a filesystem that is almost identical to the ones you’d see on a Linux system. You have folders like /app, /bin , /usr , and /var , and so on. The working directory you've defined in this case is /app, and it's done with the WORKDIR command.

After setting a working directory, you want to copy the go.mod and go.sum file into it, so that Docker knows what dependencies to add into your box.

The COPY command in Docker takes at least two arguments: the source directory(ies), and then the destination directory. In this case, you want to copy go.mod and go.sum into the working directory of your box, /app.

In the box, you'll run a command that downloads and installs all the modules defined in the go.mod file. To run a command in Docker environment, use RUN and then the command, which is go mod download in this case.

The next step is to copy any source code you have into the working directory.

At this point, you have the dependencies and the source code. The last step is to build the Go application into a single executable file which can be run inside your environment (inside the container).

Within the container, you’ll have a compiled binary at /docker-gs-ping, which is as a result of the compilation of the code in your main.go file. The last step is a RUN command that just tells Docker to run the executable binary after building it. It’s a way of saying “once the container starts running, execute this binary file”.

With these steps, Docker will build an image (a box per our analogy) that you can run. To build the image, you can run this command in your terminal:

docker build -t go_book_api .

The docker build command tells Docker to build an image based on the steps in the Dockerfile. -t is the flag for a tag, and this helps you refer to the image later when running the container.

To accompany your tag, you'll provide a name to the image which is go_book_api in this case. The . at the end is important because it tells Docker where the Dockerfile in question is, and the files that you need to copy into your image.

This is what the building looks like in my IDE:

If you check the Images tab on Docker Compose, you'll see that an image is built:

You can host this image on a public image repository platform like Docker Hub, and share it with your friends. They can pull your image, set it up, and run your application even if they don’t have Go installed. All they need to do is get the container running.

If you click on the little play button to the far-right, you can spin up an instance of the image (a container).

You can give a descriptive name to the container (Docker will generate a random one if you don’t), and click on the Run button. Once the container starts running, you're redirected to its log page.

Your container is up and running! You can see that this is a running instance of your application.

What is Docker Compose?

If you were building a simple Go application that needed no external dependencies, the above set-up would be more than sufficient.

In our example here, the application is supposed to be for a book API, so you’d expect that we'd have some service like a database and a database administrator client like phpMyAdmin to visualize or tables.

To set all this up in one file would be a little complicated using just Docker. This is because Docker doesn't allow you to have one base image for Go, another base image for a database, and so on, in one file.

You could use the base image of a small operating system, and then run commands to manually install these other services as dependencies, but this method makes your application hard to maintain and scale. This method isn't advisable because if one dependency crashes, the whole application will collapse instantly.

To remedy this situation, Docker compose allows you to have multiple containers for your application that are connected together. Docker compose handles running the containers in the right order, allows one container to use a folder from another container, or even keep its data in another container – and so on.

Our previous analogy of boxes is the same, except with Docker Compose, we don’t necessarily have only one box anymore:

The point of Docker Compose is to help you orchestrate multiple images needed to run your application. You can think of it as connecting several boxes together.

Following the explanation from before, your application would be running in the Go book api container, the book data we'll create with your application would be stored in the mysql container which is the database, and you can visualize your database with phpMyadmin, which is in the phpMyadmin container.

To see this technically, create a docker-compose.yml file in the root of the project. The name of this file is important, and Docker Compose only accepts filenames such as compose.yml , docker-compose.yml , or docker-compose.yaml. The file extension hints that the commands are written in yaml which is a language mostly used for file configurations.

services:
  app:
    depends_on:
      - database
    build: 
      context: .
    container_name: go_book_api
    hostname: go_book_api
    networks:
      - go_book_api_net
    ports:
      - 8080:8080
    env_file:
      - .env
    
  database:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
      MYSQL_DATABASE: ${DB_NAME}
      MYSQL_PASSWORD: ${DB_PASSWORD}
      MYSQL_USER: ${DB_USER}
    volumes:
      - mysql-go:/var/lib/mysql
    ports:
      - 3356:3306
    networks:
      - go_book_api_net

  phpmyadmin:
    image: phpmyadmin
    restart: always
    ports:
      - 9000:80
    environment:
      PMA_HOST: database
      PMA_ARBITRARY: 1
    depends_on:
      - database
    networks:
      - go_book_api_net

volumes:
  mysql-go:

networks:
  go_book_api_net:
    driver: bridge

At the root level of the docker-compose file, you have services . These are all the containers that are your application needs to run, and in the context of Docker Compose, they're each regarded as a service.

The app Container

 app:
    depends_on:
      - database
    build: 
      context: .
    container_name: go_book_api
    hostname: go_book_api
    networks:
      - go_book_api_net
    ports:
      - 8080:8080
    env_file:
      - .env

The very first container is the app container, which is your Go application. Under the app container, you'll need to define a few parameters that this container also needs to run.

The depends_on attribute controls the start-up and shut-down order of services within a container. This ensures that if container A depends on container B to start, the container B should be started first so that container A can use it. In this case, the database container must be started before the app container. Note that this doesn't mean app will always wait for the database to be ready.

The next attribute which is build tells Docker Compose to build the Docker image from the local project. Since the Dockerfile for your application is in the root of your app, you'll specify the root path with the context attribute as . .

To give a specific name to your container, you'll use container_name. hostname is what other containers will use for communication.

Recall that the point of Docker Compose is to have multiple containers communicating with each other. They do this with the help of networks. So you'll create another attribute, networks, and give it a name, go_book_api_net . To every other container that you want to associate with this app, you're going to specify the same network.

The next attribute is ports . Your application is an API, which means it's running on a backend Go server. To access the API, you'll need to map a local port to a port on the container. You're mapping port 8080 on your computer to port 8080 in the container.

The env_file attribute just tells Docker Compose where to read environment variables from. In this case, you can create a .env file in the root of your project to store important variables that your container will need.

The database Container

  database:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
      MYSQL_DATABASE: ${DB_NAME}
      MYSQL_PASSWORD: ${DB_PASSWORD}
      MYSQL_USER: ${DB_USER}
    volumes:
      - mysql-go:/var/lib/mysql
    ports:
      - 3356:3306
    networks:
      - go_book_api_net

The second container is the database container. Note, that you can give whatever name you choose to your listed services, but giving your containers descriptive names is always a good convention to follow.

For your Go application database, you'll be working with a MySQL database in this case. Your application needs MySQL to run, so you must set it up as one of the services.

Remember that to build a container, you need a base image. Your base image in this case is mysql:8.0 , as you've specified with the image property above. When trying to set up this container, Docker Compose knows to build your database container from this already existing official image.

If you’ve set up a database locally before, you know that configuration is a step you can’t skip. Every database you create needs a user, a password, and the database name. You can set these variables up in the environment property. Instead of hardcoding these values, you can set them up in a .env file, and reference the environmental variables as you've done here.

Database servers usually listen on specific ports for incoming connections, whether the database is running locally or remotely. Just as you specified for your app container, you can set a port for your database and map it to a corresponding port in the container. If you want to access the database locally, you'd do that on port 3356, and all requests are forwarded to port 3306 in the database container.

Once your containers go functional and your application starts running, creating, and storing data in the database, you’ll realise that every time you stop and then restart your containers, you lose the data stored in the database.

To avoid this, you'll need to store your data outside the container. That way, you won't lose the contents of your database every time you stop running your containers.

This is what volumes are for. You can allocate a specific location outside the database container to store all that content. For your volume in this case, the storage location you specified is mysql-go:/var/lib/mysql .

Just as you set the network in your app container above to go_book_api_net, you'll specify the same network for this database container. Since you want the containers to communicate with each other, it makes sense that they're within the same network.

The phpMyAdmin Container

The last container or last service you need (but that is optional) to configure in this case is the phpMyAdmin container. I find it easier having a database client because it lets me easily see the structure and content of my database.

 phpmyadmin:
    image: phpmyadmin
    restart: always
    ports:
      - 9000:80
    environment:
      PMA_HOST: database
      PMA_ARBITRARY: 1
    depends_on:
      - database
    networks:
      - go_book_api_net

The process is almost the same as the previous containers you've configured. You'll start by pulling the official phpmyadmin image from Docker so that your container is built on it.

The restart option here is just so that if you stop and restart the container, phpMyAdmin automatically reloads again.

On the host machine, which is your local environment, you can have access to this service via port 9000 and it maps to port 80 in the container.

As for the environment , PMA_HOST tells phpMyAdmin to connect to a host called database (which is your database container). This works because both containers are on the same network, as you can see in the networks attribute. PMA_ARBITRARY is used so that if you decide to connect to another host (say, you set up a another database in future and still wish to connect via phpMyAdmin), you can do that via the UI.

Your database client depends on the database container, and so you need to specify that in depends_on:

volumes:
  mysql-go:

networks:
  go_book_api_net:
    driver: bridge

The final section of your Docker Compose file is where you declared named values for the volume and network you've used in setting up your containers.

For the volumes, you'll declare a value called mysql-go. To the container where you want to attach this volume, you'll assign a specific storage location. You can see this in use in the database container.

 volumes:
      - mysql-go:/var/lib/mysql

The same concept follows for the network. You have a named network called go_book_api_net that every container within this same network can use. The driver option is used here to specify the network type, and bridge is used for private internal networks.

Running Everything Together

Before Docker Compose, you had one Dockerfile that built a single container for your Go application. With Docker Compose, You’re gonna be building three containers (your application container, the database, and phpMyAdmin), and orchestrating them to work together as one single application.

You can push all this to a platform like GitHub, and someone can clone, start, and run the application without having any of these services (MySQL or PhpMyAdmin) installed locally on their computer. But they do need to have Docker installed.

To build your containers all together, you can use the command docker compose build:

If you check your Docker Compose UI again, we see that a new image has been built, and it corresponds to the app service

To start running the containers, you can use the command docker compose up:

If you navigate to the container tab of Docker Compose, you can see that your containers are up and running:

The main app service, go_book_api, isn’t running because when you run your image, your binary runs and exits almost immediately.

In your main.go, let’s rewrite the code to set up a minimal HTTP handler function that listens on port 8080:

// cmd/main.go
package main

import (
	"log"
	"net/http"
)

func main() {
	http.HandleFunc("/health", func(w http.ResponseWriter, r *http.Request) {
		w.WriteHeader(http.StatusOK)
		_, _ = w.Write([]byte("ok"))
	})

	log.Println("listening on :8080")
	if err := http.ListenAndServe(":8080", nil); err != nil {
		log.Fatal(err)
	}
}

If you’re new to Go, don’t let the code above bother you too much. All it does it set up a health endpoint with an associated handler function that listens on a port (8080 in this case) and prints “ok”.

In your Dockerfile, let’s add a command to execute the created binary when the container starts:

# run the compiled binary when the container starts
CMD ["/docker-gs-ping"]

After adding this, you'll need to rebuild the containers and start them again. You can see that all containers are running now:

If you click on the go_book_api container, you can see that your server is running on port 8080 as configured:

Since your app is running on port 8080 and you have a /health endpoint set up for it, you can actually visit that endpoint in a browser to see the output “ok”.

Also, if you click on the exposed phpmyadmin port, you can access the database client locally on port 9000. Based on the environment variables set up in the .env file, you can log in.

Another interesting thing to look for on Docker desktop is volumes. There is a volumes tab where you can see your configured mysql-go volume.

You can always open these volumes/containers on the docker GUI, go through the files and logs, experiment with putting one container down and seeing how the others respond, and so on.

After this entire setup, what do you notice? You didn’t have to install Go, MySQL, or phpMyAdmin locally. You only used officially published base images to orchestrate a full application. That's the magic of Docker.

Wrapping Up

Docker can be very abstract at the beginning, but understanding the fundamental purpose behind it makes everything much clearer.

In this article, you've learned what Docker is, how to containerize a basic Go application, and how to manage multiple containers with Docker Compose.

If you have trouble wrapping your head around why or how the Dockerfile is set up in the order that it is, my advice is not to get too stuck figuring it out on your own. As a Docker beginner, I realised that it’s easier if you imagine it as creating a recipe. If you try to build an image and it fails, you know there’s a step that you’re skipping.

The official docker documentation has amazing resources if you want to understand Docker further than this tutorial. I encourage you to do so because this article only scratches the surface of the amazing things you can achieve with containerization.

I’ve tried my hand at a few of them, and the one language that feels like it touches both worlds is Golang – popularly known as Go. Although Go is a high-level language, it has pretty amazing performance that brings it close to the low-level edge.

Go is a fast, statically typed programming language. Types are declared at compile time, and you don’t need to run the code before catching errors. It’s also a general-purpose language that you can use for backend, cloud, servers, and more.

Go has built-in testing support, so you don’t need to install extra testing libraries. Go also has some features of object-oriented languages, but in its own way. It mirrors some OOP concepts, but also uses concepts like interfaces, structs, and so on.

In this tutorial, we're going to be looking at a few basic concepts you need to know when getting started in any programming language. A few of them are generic to many programming languages, but some of them are concepts specific to the Go programming language. We'll take a look at:

• Variables

• Formatting strings

• Arrays and slices

• Loops

• Functions

• Maps

• Structs, and

• Package scope

By the end of the article, you'll be grounded in the pure basics of Go, and we'll run a few examples to see how these work on the command line.

What we'll cover:

1. Prerequisites

2. How to Install Go

3. How to Write Your First Go Program

4. How to Work with Variables and Numbers in Go

5. How to Format Strings in Go

6. How to Work with Arrays and Slices in Go

7. How to Work with Loops in Go

8. How to Work with Functions in Go

9. How to Work with Maps in Go

10. How to Work with Structs in Go

11. Package Scope in Go

12. Conclusion

Prerequisites

To follow along with this tutorial, it’ll be helpful if you know the basics of any programming language, such as variables, data types, and data structures. I’ll assume that you’ve worked with at least one programming language before.

How to Install Go

To install Go, head to golang.org. Depending on what OS you are running, the documentation provides different installation options.

In my case, I’m using WSL (Windows Subsystem for Linux) with Ubuntu, so I’ll install Go inside that environment.

First, update your package list:

sudo apt update
sudo apt upgrade -y

Next, install a tool to download files from the internet. We’ll use wget:

sudo apt install -y wget

Now download the Go binary package:

wget https://dl.google.com/go/go1.24.2.linux-amd64.tar.gz

Extract the archive to /usr/local:

sudo tar -C /usr/local -xzf go1.24.2.linux-amd64.tar.gz

After installing Go, add the Go binary directory to your PATH so the go command is available in the terminal:

export PATH=$PATH:/usr/local/go/bin

You can make this change permanent by adding the line above to your ~/.bashrc or ~/.profile.

To confirm Go was installed successfully, run:

go version

You should see the installed Go version printed in the terminal.

If you use VS Code, you can also install the Go extension for syntax highlighting.

How to Write Your First Go Program

Before we get into writing our first program, we need to establish how Go puts its code together. In Go, every file or code is part of a package.

In this example, we’ll create a file called main.go. The name isn’t special to Go, but it’s a common convention for the file that contains the program’s entry point.

package main

import "fmt"

func main() {
	fmt.Println("Hello, ninjas")
}

This is the most important file in our project. We'll begin by making the code we’ll write in this file part of a package we call main.

The fmt import is a package from the Go standard library. fmt is for formatting strings and outputting to the console. Notice that the Println function starts with a capital letter, because within the fmt package, the method is exported. Variables or methods that are exported in Go should begin with capital letters. The Println prints a line to the console.

The main function serves as the entry point of a Go program. A compiled Go program must contain exactly one main function inside a package main. (A larger codebase can still contain multiple programs, each in its own directory with its own package main.)

So when you run a Go program, the Go toolchain builds all files in the same package together and then starts execution from the main() function. The filename main.go does not determine execution order – it’s simply a common naming convention.

Unlike other custom packages, which are used to bundle application logic into libraries or reusable code, the main package is used to specify that a program is a standalone executable.

To run the code, you can simply type go run main.go, specifying the Go file that we want to execute.

Hello, ninjas

How to Work with Variables and Numbers in Go

How to Declare Variables

A variable is just a store for data. Go does not allow unused local variables. If you declare a variable inside a function and never use it, the compiler will raise an error. This helps prevent cluttered code and unused definitions.

Let’s see how to declare variables in Go by declaring a string

package main

import "fmt"

func main() {

	// strings
	var nameOne string = "emy"

	fmt.Println(nameOne)
}

Because Go is a statically typed language, every variable must have a type at compile time. Here, we have a variable nameOne, it’s type, and then an initial value assigned to it.

But what if we don't want to state the variable type ourselves? Fortunately, Go lets us define variables without a type stated at compile time

// strings
var nameOne string = "emy"
var nameTwo = "blessing"
var nameThree string

For nameTwo, we don’t need to explicitly state the type because Go directly infers it. If you hover above the variable, you can see that Go already tells you the type. The third variable, nameThree, has no value assigned to it just yet. We’ve only just declared it.

If you log the output to the console, you can see nameOne and nameTwo displayed, but you can’t see nameThree. It’s also logged, you just can’t see it because it has no value.

emy blessing 

There’s an even shorter and simpler way to declare variables in Go:

nameFour := "peaches"

Here, Go also infers the variable type based on the value assigned to it. Notice how we also didn’t use the var keyword. You can use this method inside any function, not just in main. Just keep in mind that you can't use this method of declaring variables when reassigning or updating a variable, declaring constants, or declaring safe types.

How to Declare Integers

When it comes to declaring integers, we pretty much use the same technique as above:

var ageOne int = 20
var ageTwo = 30
ageThree := 40

fmt.Println(ageOne, ageTwo, ageThree)

When declaring integers, we can specify the amount of memory or the bit size we want an integer to have. We can declare the integer as int8, int16, or int64.

Each of these memory sizes can hold a specific range of numbers. int8, for example, can only hold integers between -128 and 127. Anything bigger than that would throw an error:

// bits and memory
	var numOne int8 = 25
	var numTwo int8 = -128

	var numThree int8 = 129 // will throw an error

Another type of integer in Go is the unsigned integer, declared with uint. You’ll use this to declare only positive integers – you can’t use it to store negative values.

uint, just like the int type, can also be associated with bit sizes. You could have a uint8, uint16, and so on. But the ranges for these are different. You can check the complete list of bit sizes for the integer type and their ranges on this Go page.

int is specifically used to declare whole integer numbers. To declare decimal numbers, you can use a float. The concept is the same with int, where you can have floats with different bit sizes. But you can only have float32 and float64, where the latter can store bigger numbers than the former.

How to Format Strings in Go

Printing Strings to the Console

We came across the fmt package at the beginning of the article. Let’s go through some of the methods this package exposes.

First, we have the Print() method which logs some output the console. This method is used to log simple strings to the command line when we just want to see the output of something, and don’t really care about the readability.

If we have two simple strings as shown below;

// Print
fmt.Print("Hello, ")
fmt.Print("world!")

// Output: Hello, world!

You can see that the code above is not on separate lines, and this is the downside of the Print function. If we had multiple things to log to the command line, this function would just lump them together and readability could suffer.

But we can enforce a new line with Print() by using the escape character \\n .

fmt.Print("hello! \\n")
fmt.Print("new line \\n")

/*
	hello! 
	new line 
*/

Using escape characters throughout our code can get tiring very quickly. Luckily for us, Go has a function that helps us achieve the perfect separate line formatting we are looking for. We don’t need to use escape characters when we use Println .

fmt.Println("Hello, friends.")
fmt.Println("How are you?")

/*
	Hello, friends.
	How are you?
*/

Format Specifiers

Sometimes, you may want to log a string to the console, but you may also want to have variables within that string. This is called a formatted string, and we can achieve this with the help of format specifiers. These format specifiers are reserved characters that Go uses at runtime to position variables within strings.

Let’s use a concrete example to see the concept better,

name := "Emy"
age := 27

fmt.Printf("my age is %v and my name is %v", age, name)

// Output: my age is Emy and my name is 27

The format specifier %v is the default format specifier that stands for variable. We can see that in the position of the format specifiers, Go has placed the values of the arguments we passed to the Printf (age and name). It's important to note that the order in which we pass these arguments is important.

As we just saw above, the output of this code:

name := "Emy"
age := 27

fmt.Printf("my age is %v and my name is %v", name, age)

Would be my age is Emy and my name is 27. The order in which we pass the arguments is the same way in which the compiler will replace the format specifier within our string.

Something new you might also notice is that we didn't use Print or Println in this code like we did before. When working with formatted directives, Go puts the functions Printf, Sprintf, and Appendf at our disposal.

• Printf directs the output to the console, as we’ve seen.

• With Sprintf, we don't direct the output to the command line, but we can store it in a variable and then use that variable somewhere else in our code.

• It gets a little more complex when working with Appendf, which formats according to a format specifier and appends the result to a byte slice (bytes are a bit out of the scope of this article, so we won’t dwell on them).

Besides the %v format specifier, we can also use %q if we want the embedded variable to have quotes around it.

// strings
	name := "Emy"

	fmt.Printf("my name is %q", name)

// output: my name is "Emy"

This will work for the name variable, but not really for the age because it’s an integer.

name := "Emy"
age := 27

fmt.Printf("my age is %q and my name is %q", name, age)

//Output: my age is '\\\\x1b' and my name is "Emy"

We also have the %T specifier, which is used to output the type of a variable.

If we wanted to get the type of age:

fmt.Printf("This is a variable of type %T", age)

The output of this would be:

This is a variable of type int

You can check out other format specifiers on the official fmt package page.

How to Work with Arrays and Slices in Go

Arrays in Go

Arrays in Go are a little bit of a mouthful. Let’s take a look at how to define an array:

var ages = [3]int{20, 25, 30}

In this code, we have the variable name on the left side as is typical. On the right side, we have [3] to specify the size of the array, the type as int , and the values for the array inside the squiggly braces.

Once we declare an array, we can never change its size. This is kind of a bummer if you ask me, because during coding, you don’t always know the size of an array when you declare it (more on this below when we talk about slices).

Arrays in Go also can’t contain multiple types. The array we declared above can’t also contain a string, for example.

If we log the array to the console alongside its length with fmt.Println(ages, len(ages)), on the console we get:

[20 25 30] 3

Slices in Go

If you need to define an array where you don’t know or don’t want to specify the size during declaration, you can use a slice. Slices are abstractions of arrays, and are more flexible than arrays because they have dynamic sizing.

var scores = []int{100, 50, 60} // we don't specify the size
scores[2] = 25 // to update a value
scores = append(scores, 50) // returns a new scores slice with 50 appended to it  (you cannot do this with arrays)
fmt.Println(scores, len(scores)) // [100 50 60 50] 4

An important part of working with arrays, slices, or any data structures that store data is knowing how to get the elements we want. We may only want to grab data that belongs to a certain range, or data at certain positions, based on certain conditions, and so on.

When it comes to dealing with ranges, say you want to output the slice elements from position 1 (that is, index 0, the first element) right up to the third position (index 2).

rangeOne := scores[0:3] // [100 50 60]

The range scores[0:3] indicates that the code should list the scores from index 0 up to index 3 minus 1. So it doesn’t include the element at index 3.

If you wanted to log from index 2 in the slice right up to the end, for example, you’d write scores[2:] . Similarly, you could log from the beginning of the slice up to and excluding some position (in this case, index 3) like so, scores[:3] .

How to Work with Loops in Go

How to Iterate Loops

Loops in Go are similar to loops in other programming languages. The difference is that Go focuses on the for loop and doesn’t really dwell on while, do-while, or for-each.

x := 0
for x < 5 {
	fmt.Println("the value of x is", x)
	x++
}

The loop above is straightforward and just prints the value of x from 0 to 4.

To create a loop that uses an iterator, you can write this:

for i := 0; i < 5; i++ {
	fmt.Println("value of i is", i)
}
    /*
		value of i is 0
		value of i is 1
		value of i is 2
		value of i is 3
		value of i is 4
	*/

It does pretty much the same thing as the loop above it, but we declared the iterator, it’s range, and we iterate over it in the same expression.

What if you wanted to iterate or loop over a slice, for example? We can also use an iterator to achieve this as we have above.

names := []string{"emy", "ble", "winkii"}

for i := 0; i < len(names); i++ {
		fmt.Println(names[i])
}

How to Use the range Keyword

Another interesting keyword related to iterations is range. Using the range keyword, you can use loops to perform actions on elements in a slice. range provides the index and value of the element in a slice, and allows you to access those within the loop.

for index, value := range names {
		fmt.Printf("the position of %v is %v \\\\n", value, index)
	}

What if you didn’t want to use the index and only the value? Well, range requires that you define an index and a value. So if you rewrite your loop like this:

for index, value := range names {
		fmt.Printf("the value is %v \\\\n", value)
}

Go is going to throw an error because you’re declaring the index but not using it.

Luckily, there’s a way to bypass this, and Go does it neatly using the blank identifier, _. We use this identifier when a method or function expects that you define a return value that you don't need.

for _, value := range names {
		fmt.Printf("the value is %v \\\\n", value)
}

You could apply the same strategy if you wanted only the index, but not the value.

for index, _ := range names {
		fmt.Printf("the index is %v \\\\n", index)
}

How to Work with Functions in Go

A function is a reusable block of code. Functions in Go are mostly created outside the main function. This way, other files can access and use them.

package main

import (
	"fmt"
)

func sayGreeting(n string){
	fmt.Printf("Good morning")
}

func main() {
	sayGreeting("emy")
}

Go also allows you to pass functions as parameters to other functions.

func cycleNames(n []string, f func(string)) {
	for _, value := range n {
		f(value)
	}
}

The function above takes a slice and a function as parameters. The function passed as a parameter in turn takes a string. You could pass a slice of names alongside the greeting function, so that for each name in the slice, you run the greeting function to print a greeting for that name.

func main(){
	cycleNames([]string{"emy", "pearl"}, sayGreeting)
}

When passing the sayGreeting function as a parameter, you don’t invoke it immediately because that’s done within the cycleNames function already. You only pass its reference.

Functions with return Values

Functions may also need to have a return value. So, how does Go handle that? Let’s see a small example:

package main

import "fmt"

func sayHello(name string) string {
	fmt.Printf("Hello %v", name)
	return name
}

func main() {
	sayHello("Emy")
}

// Output: Hello Emy

Just like with variables, we must specify the data type for every function parameter, and also specify the data type of the expected return value. In the example above, our function sayHello takes a string and returns a string.

Functions can also have multiple return values, as we see in the example below:

package main

import "fmt"

func sayHello(name string, age int) (string, int) {
	fmt.Printf("Hello %v, you are %v years old", name, age)
	return name, age
}

func main() {
	sayHello("Emy", 27)
}

Just like the previous example, we have to specify data types for our function parameters and return values.

How to Work with Maps in Go

A map in Go is a built-in, unordered collection of unique key-value pairs, similar to dictionaries in Python or hash tables in other languages. Maps provide fast lookups, insertions, and deletions.

With maps, all the keys must be of the same data type, and so must the values. If one key is a string, then all the other keys must also be strings. The same concept applies for values.

scores := map[string]float64{
		"maths":           20,
		"english":         15,
		"french":          14,
		"spanish":         12,
	}

	fmt.Println(scores)
	fmt.Println(scores["maths"])

	/*
	map[english:15 french:14 maths:20 spanish:12]
	20
	*/

You can also loop through maps to get their keys and corresponding values:

// loops maps
	for key, value := range scores {
		fmt.Println(key, "-", value)
	}

	/*
	french - 14
	spanish - 12
	maths - 20
	english - 15
	*/

When it comes to mutating maps, it's important to note that maps are reference types. Reference types are types whose variables don’t store the actual data, but rather an internal pointer to the actual data. This means that if the same data is assigned to multiple variables, when one instance gets modified, the original gets modified as well.

Let’s understand this with an example;

package main

import "fmt"

func main() {
	scores := map[string]float64{
		"maths":   20,
		"english": 15,
		"french":  14,
		"spanish": 12,
	}

	scores2 := scores

	scores2["maths"] = 15
	fmt.Println(scores)
}

// Output: map[english:15 french:14 maths:15 spanish:12]

If you check out the output, you can see that we modified the math score for scores2, but that modification also affected the original map, scores .

How to Work with Structs in Go

A big downside of using maps is that we can only store one data type for keys and one data type for values. This feels restrictive. We need a data structure that lets us store a collection of data with different data types. This is where structs (or structures) come in.

Let’s look at an example:

type Book struct {
	ID     uint
	Title  string
	Author string
	Year   int
	UserID uint
}

Here we have a Book struct. Structs are defined by specifying the key of the data you want the struct to carry, and the data type associated with that key.

package main

import "fmt"

type Book struct {
	ID     uint
	Title  string
	Author string
	Year   int
    UserID uint
}

func main() {

	var book1 Book

	book1 = Book{1, "Jane Eyre", "Jane Austen", 1990, 6}

	fmt.Println(book1)
}

We initialised the Book struct by providing it with the data we stated in its definition. If you check the output of this (and ignore that Jane Austen didn’t write Jane Eyre, of course):

{1 Jane Eyre Jane Austen 1990 6}

If you look closely, structs resemble classes from the OOP languages. They define properties (just as with methods, properties starting with a capital letter are public and can be exported), and these properties can be used within methods or functions. The difference comes at the level of inheritance, because structs, unlike classes, support only composition and not inheritance.

We can also individually modify the properties of a struct using dot notation, like so:

	var book1 Book

	book1 = Book{1, "Jane Eyre", "Jane Austen", 1990, 6}

	book1.Title = "Things Fall Apart"
	book1.Author = "Chinua Achebe"

	fmt.Println(book1)

If you check the output again, you can see that what you initialised the struct to contain has been modified at the level of the Title and Author.

{1 Things Fall Apart Chinua Achebe 1990 6}

When working with real systems, structs come in very handy when creating models or designing the structure of data you want to store in your database.

Package Scope in Go

Importing Functions Within the Same Package

When coding real applications, it's uncommon to write all our application files in one file. This can get messy very quickly. Normally, we would write a function in one file and then call it from another file.

In this case, you can declare variables and functions in other files and still use them in your entry point file. Say you create another greetings.go file and declared some variable and method in it like this:

// greetings.go
package main

import "fmt"

var points = []int{20, 90, 100, 45, 70}

func sayHello(n string) {
	fmt.Println("Hello", n)
}

Notice that there is no func main() in this file (remember that we can have only one throughout our application).

Now, in your main.go file, you can reference the sayHello() function and points variable you created.

// main.go
func main() {
	sayHello("emy")

	for _, v := range points {
		fmt.Println(v)
	}
}

To run this, you’ll need to have both files running at the same time. That is:

go run main.go greetings.go

You can see that the output is the result of running the sayHello() function and looping over the points slice.

You could also define functions and variables in the main.go file and pass them to the greetings.go file. Remember that all these functions and variables passed between files must be declared outside the main() function.

Importing Functions Across Different Packages

What if your application has, say, 100 files? Will you run all those files simultaneously? No, you won't. Since our Go code can be organised in packages, we can import a function from one package within another package. Let’s rewrite our code above, but using two different packages.

In our greetings.go file, we now have our code under a new package, greetings , and our SayHello function begins with a capital letter so that other files can import and use it.

// greetings.go
package greetings

import "fmt"

var Points = []int{20, 90, 100, 45, 70}

func SayHello(n string) {
	fmt.Println("Hello", n)
}

In our main.go file,

// main.go
package main

import (
	"fmt"
	"greetings"
)

func main() {
	greetings.SayHello("emy")

	for _, v := range points {
		fmt.Println(v)
	}
}

As you can see, we’ve imported the greetings package we declared in another file, and we can access the SayHello() method from it with dot notation.

Conclusion

In this tutorial, you’ve learned some key Go concepts. You’re now familiar with how variables, strings, arrays and slices, loops, functions, maps, structs, and package scope works in Go.

At this point, you should try to take that further by building something a little bigger so you can see just how powerful and amazing Golang is.

The official Tour of Go website is also an amazing resource to reference if you want to explore these concepts a little deeper.

Many people want to be involved in this open side of tech, and luckily there are many different ways to contribute.

Still, open source can be scary at first sight. My first official contribution was during Hacktoberfest 2021, and even after that, it took me while to really feel welcome.

The open source community helped a ton, and it's the route I would advise any new techie to take – get involved with the community around a project you care about.

In addition to being a contributor – making updates to open source code bases, updating documentation, and so on – you can also eventually become a project maintainer. Maintainers are responsible for the thrill you experience when your pull requests get merged.

As daunting as it is to become a first time contributor, it is also quite scary becoming a first time maintainer. So in this article, I'll discuss some of the soft skills project maintainers should cultivate to be successful.

A Little Background

After open sourcing a project very close to my heart, I was lucky enough to gain some much needed experience. I also held a Twitter space with some amazing folks, and they had much to share as well. Hence, this article.

I won't say I am an expert, but to successfully scale an open source project, no matter how big or small, there are certain skills you need to have. And some of these I didn't pick up until after I had been a maintainer for a while.

Skills You Need to Maintain an Open Source Project

Develop Good Time Management Skills

On day one of releasing the project, my email was flooded with GitHub notifications.

I was happy people where checking the project out, but it was too much for me to handle. I was putting off work to attend to issues, assigning, labeling, merging pull requests, fixing conflicts... It quickly became too much to manage. I needed to allocate time and set boundaries.

If you are running a big project, notifications are probably nothing new. If you're running the project alone (like I was at that point), it is way worse.

Putting aside specific time to attend to GitHub tasks was the best way out. It could be in the morning before work, or after work, or only on weekends, depending on what works for you and the project.

Be Patient

I hear people advise contributors that they shouldn't spam maintainers if those maintainers can't attend to their issues/pull requests in time. This level of understanding should go both ways.

Contributors also have lives. If a contributor claims an issue, it is important to give them time to actually submit a pull request. Open source is fun (we've agreed on that already, but just for emphasis), but some people can only contribute in their spare time.

If a claimed issue is taking too long to address, a subtle reminder is fine. Constantly reminding a contributor that they need to submit a pull request could be off-putting, and it isn't a good look for you or your project.

On some rather large projects, however, a time frame is given to contributors who claim issues. I've seen cases where a contributor has about seven days to raise a pull request. While this is understandable because of the fast paced nature of these projects, I personally feel that it's too much pressure, especially for new contributors.

Be Empathetic

For me, this is the most important skill. I can remember my first open source contribution. The joy I felt when my pull request got merged and the immense support from the community were wonderful.

Think of this when you merge pull requests. It could be the contributor's first time too. I try to close off pull requests with a message other than just 'LGTM'. It can be as simple as throwing in a bomb emoji, and thanking them.

People come back to a place where they feel welcome.

Be Firm

This can be hard, but it's also important. You won't merge every pull request that is opened, and that's a fact. But abruptly closing off a pull request without justification isn't exactly good practice either.

If a pull request is too big, or it doesn't add to the project like you would've wanted, it is okay to close it. But do not be afraid to kindly explain to the contributor why it can't be merged. Don't leave a pull request open forever because you feel guilty about closing it.

People can be more understanding than you think if you give them simple common courtesy.

Work on Communication Skills

Collaboration is the basic foundation of open source as a whole. And to collaborate effectively, you need to be a good communicator.

Having people come in and work with you on your project is cool and all – but if you can't properly communicate with these people, you'll end up with a closed open source project (if that makes sense).

Collaboration doesn't have to be you spinning up some huge discord server for the project. It could just be you sharing messages in your code reviews.

If the comment sections under your issues are too small, then GitHub has a discussion tab for each repository. This is a great place to spin up new ideas and start some great connections.

You never know whom you might meet!

Listen and Learn

After open sourcing my app, I've probably learnt more React than I would've if I was watching tutorials and building in private.

Smart people will come along and open your eyes to ideas that you couldn't have thought of on your own. My project has improved so much, mainly because I wasn't afraid to try out new things.

The community wants to help – so let them.

Cultivate a Community Spirit

Someone recently reached out to me, saying they wanted to get involved in reviewing pull requests because it was fun. They aren't officially a maintainer, but I would like to think that they enjoy being a part of the project.

Building an open source project is a community effort. And as a maintainer, you will need that community spirit.

You need to be excited with what you do. Collaboration should be fun. You are happy that the contributor added something, but let them also be happy that they contributed.

People love good, honest feedback. And it also helps you build up your little community.

Be Responsible

If the open source project is your idea, then you're the pioneer. If you decide to be the lead maintainer, be the lead maintainer. Be reliable, and most importantly, be present.

Even if you are a supporting maintainer for some big project, it is good to show that you know what you're doing and that you're committed to the project.

Some projects go stale because the maintainers stop responding to issues and pull requests. It's true that life catches up to us sometimes. If you decide to commit to a project, though, it's important to always show that the project is alive.

But how? Well, everything leads back to collaboration. Keep your collaborators involved and they'll help you out.

Be Nice and Welcoming

People are coming from different backgrounds to check out your project. Whoever they are, they won't come back if their first experience was a mean maintainer, whose project had poor documentation.

No matter how easy you make things, expect questions. Be ready to answer these questions. Point people to the right resources, no matter how obvious the solution could be.

If a contributor is having a hard time, check your documentation. Most times, it's not them, it's us (pun intended). The README might've skipped some steps, or a screenshot wasn't clear enough. Instead of telling them off, point them in the right direction and update your docs if need be.

Conclusion

All in all, being a maintainer is hard work. Whether you're going solo on your project, or working with other maintainers, the goal is the same: collaborating to build great products.

Projects with poorly structured management and responses are one of the main reasons some people feel discouraged when it comes to contributing to open source.

The skills I've covered here are mostly based on personal experience, but I hope they help anyone maintaining a project, or thinking of being an open source maintainer.

If you want to check out my open source project, you can do so here.

Getting started with an animation library does not have to be hard. Anyone can add a bit of animation to their site regardless of whether they are good working with the front end or not.

Let me show you how you can get started.

What is Rough Notation?

Rough notation is lightweight yet amazing JavaScript animation library that you can use to get started with animations pretty quickly. And it is open source!

The docs are pretty straightforward, which is one reason it's a great animation library to start with.

In this article, I'll take you through the basic steps to get started with Rough Notation, and we'll build a pretty small site with some animations.

If you like using the library, check out their super repository. Give it a star, and if you love this article, shout them out! (This isn't sponsored. I just love the library :))

You can check out the Rough Notation docs here.

Let's Get Animating

How to Code the HTML/CSS

We can't animate something we don't see. So to start, we'll create a pretty simple static page with some minimal HTML and CSS.

For now, our HTML will just look bland. Nothing much going on. Just a nicely centered thing with a Poppins font going on.

<div class="main">

        <header>
            <h1 class="header">Aloha. Hello. Salut.</h1>
        </header>

        <main>
            <p>Today, we will animate this with <scan class="rough-notation">Rough Notation</scan></p>

            <p>This is a pretty simple site. If you love this, check Rough Notation out on <scan class="link">Github</scan>. They are open source, and they are amazing!</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores omnis molestias voluptas, odit laboriosam esse distinctio provident pariatur accusamus cum?</p>

            <h2>A bit about Rough Notation</h2>
            <ul class="list">
                <li>It's open source.</li>
                <li>It's easy to start with.</li>
                <li>I love it!</li>
            </ul>
        </main>
    </div>

In the above code, notice the classes I have added to some of the elements. This is how we select what elements to animate.

Our CSS itself is bare, but here is how it is and what our page looks like:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    font-family: 'Poppins', sans-serif;
}
.main{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 10px;
    margin: 40px;
}
h1{
    margin-bottom: 10px;
}
p{
    margin-bottom: 15px;
}
ul{
    margin: 20px;
}

Screenshot of how our bare static page looks. There is an h1 header that says 'Aloha. Hello. Salut.' A few other paragraphs make up the page and there is an unordered list that states three little facts about Rough Notation.

Let's Add Some JavaScript

Hold on, this is the juicy part! For our animations to take any kind of effect, we need a JavaScript file. Just create one, and link it to your HTML like you would normally do.

Now let's see how Rough Notation works.

The docs offer a few ways to add the library to our projects. For the sake of simplicity, we will load the ES module directly.

Check out the repo and the docs here.

So essentially, we will add the an extra script tag to our HTML so that it looks like this:

<script type="module" src="https://unpkg.com/rough-notation?module"></script>

Now that Rough Notation is partially present in our project, we can dig into our JavaScript file, and import it. The first line of our JavaScript doc would look like this:

import { annotate } from 'rough-notation';

Now that Rough Notation is fully set up, let's grab what we want to animate from the page. Based on what elements we added classes to, we would have the following:

const header = document.querySelector('.header');
const roughNotation = document.querySelector('.rough-notation');
const link = document.querySelector('.link');
const list = document.querySelector('.list');

The next step is what will bring our page to life. Say, I wanted to highlight the header a light pink color. I would write this code:

const annotation = annotate(header, { type: 'highlight' , color:'pink'});
annotation.show();

We assign the variable annotation to a function called annotate. The annotate function takes two parameters – the element we want to annotate, and an object.

The object can take in a few attributes. In this case we have two: the type of annotation we want on the header, and the color.

And just to mention a few other types of annotations that we can do:

• Highlight

• Circle

• Underline

• Brackets

• Box

• Strike-through

• Crossed-off

Back to our header animation. The last line is annotation.show() which just basically displays our animation.

If we save our page, and check our browser, nothing happens. It was supposed to work (according to the docs), but we get nothing.

I found a solution to the problem on a YouTube video, and in order for us to make the animation come to life, we have to adjust the import line in our JavaScript file.

So you can update it like this:

import { annotate } from "https://unpkg.com/rough-notation?module";

If you are like me, and love opening issues to complain (just kidding) about open source projects, feel free to raise an issue on the Rough Notation repository if the animation doesn't work for you either. But only open an issue if no one has beat you to it yet. So do check recent open and closed issues first. May the best issue opener win :)

If you refresh after fixing the problem we had, our header gets a nice pink highlight. You see it nicely swooshing across the page.

Screenshot of our site now, with the header highlighted in pink.

Nice and pretty, right?

Let's go ahead and add a few more animations:

const annotation = annotate(header, { type: 'highlight' , color:'pink'});
const annotation2 = annotate(roughNotation, {type:'circle', color:'yellow', padding:7});
const annotation3 = annotate(link, { type: 'box' , color:'blue', padding:7});
const annotation4 = annotate(list, { type: 'bracket' , color:'red', brackets:['left', 'right'], strokeWidth:5});

const array = annotationGroup([annotation, annotation2, annotation3, annotation4]);
array.show();

This time, we have added quite a bit. But don't let it get overwhelming. We'll walk through it step by step.

First, we have added padding to our annotation2 animation. Just like we saw with the header, the roughNotation (which is the rough-notation class in our HTML) gets a yellow circle with a padding of 7.

But padding isn't the only new attribute we introduced. annotation4 has a few new things we need to learn about. The object parameter has an attribute, brackets, with an array as value. left and right indicate that we want opening and closing brackets on both sides of the element. It also has strokeWidth, which determines the thickness of the brackets.

Since we have to "show" the animation of each element, which kind of gets boring if we have to animate a lot, I created an array, stored each animation in it, and then "showed" the array all at once. It's neat, and saves a lot of time.

So we've introduced annotationGroup. For this to take effect, we are going to add it to our import line like this:

import { annotate, annotationGroup } from "https://unpkg.com/rough-notation?module";

So... our final site looks like this:

The animations will work better on your browser, because you get to refresh and see them take effect one after the other.

Conclusion

Writing this was fun! And I hope that you not only learned something new, but that you tried it out too.

Make sure to check out the Rough Notation repository and docs, because they cover a whole lot more than what we discussed in this article.

Happy animating!

This is because JavaScript is an asynchronous language...but what does that really mean? In this article, I hope to show you that the concept is not as difficult as it sounds.

Synchronous vs Asynchronous

Before we hop into the real deal, let's look at these two words – synchronous and asynchronous.

By default, JavaScript is a synchronous, single threaded programming language. This means that instructions can only run one after another, and not in parallel. Consider the little code snippet below:

let a = 1;
let b = 2;
let sum = a + b;
console.log(sum);

The above code is pretty simple – it sums two numbers and then logs the sum to the browser console. The interpreter executes these instructions one after another in that order until it is done.

But this method comes along with disadvantages. Say we wanted to fetch some large amount of data from a database and then display it on our interface. When the interpreter reaches the instruction that fetches this data, the rest of the code is blocked from executing until the data has been fetched and returned.

Now you might say that the data to be fetched isn't that large and it won't take any noticeable time. Imagine that you have to fetch data at multiple different points. This delay compounded doesn't sound like something users would want to come across.

Luckily for us, the problems with synchronous JavaScript were addressed by introducing asynchronous JavaScript.

Think of asynchronous code as code that can start now, and finish its execution later. When JavaScript is running asynchronously, the instructions are not necessarily executed one after the other as we saw before.

In order to properly implement this asynchronous behavior, there are a few different solutions developers has used over the years. Each solution improves upon the previous one, which makes the code more optimized and easier to understand in case it gets complex.

To further understand the asynchronous nature of JavaScript, we will go through callback functions, promises, and async and await.

What are Callbacks in JavaScript?

A callback is a function that is passed inside another function, and then called in that function to perform a task.

Confusing? Let's break it down by practically implementing it.

console.log('fired first');
console.log('fired second');

setTimeout(()=>{
    console.log('fired third');
},2000);

console.log('fired last');

The snippet above is a small program that logs stuff to the console. But there is something new here. The interpreter will execute the first instruction, then the second, but it will skip over the third and execute the last.

The setTimeout is a JavaScript function that takes two parameters. The first parameter is another function, and the second is the time after which that function should be executed in milliseconds. Now you see the definition of callbacks coming into play.

The function inside setTimeout in this case is required to run after two seconds (2000 milliseconds). Imagine it being carried off to be executed in some separate part of the browser, while the other instructions continue executing. After two seconds, the results of the function are then returned.

That is why if we run the above snippet in our program, we will get this:

fired first
fired second
fired last
fired third

You see that the last instruction is logged before the function in the setTimeout returns its result. Say we used this method to fetch data from a database. While the user is waiting for the database call to return results, the flow in execution will not be interrupted.

This method was very efficient, but only to a certain point. Sometimes, developers have to make multiple calls to different sources in their code. In order to make these calls, callbacks are being nested until they become very hard to read or maintain. This is referred to as Callback Hell

To fix this problem, promises were introduced.

What are Promises in JavaScript?

We hear people make promises all the time. That cousin of yours who promised to send you free money, a kid promising to not touch the cookie jar again without permission...but promises in JavaScript are slightly different.

A promise, in our context, is something which will take some time to do. There are two possible outcomes of a promise:

• We either run and resolve the promise, or

• Some error occurs along the line and the promise is rejected

Promises came along to solve the problems of callback functions. A promise takes in two functions as parameters. That is, resolve and reject. Remember that resolve is success, and reject is for when an error occurs.

Let's take a look at promises at work:

const getData = (dataEndpoint) => {
   return new Promise ((resolve, reject) => {
     //some request to the endpoint;

     if(request is successful){
       //do something;
       resolve();
     }
     else if(there is an error){
       reject();
     }

   });
};

The code above is a promise, enclosed by a request to some endpoint. The promise takes in resolve and reject like I mentioned before.

After making a call to the endpoint for example, if the request is successful, we would resolve the promise and go on to do whatever we want with the response. But if there is an error, the promise will get rejected.

Promises are a neat way to fix problems brought about by callback hell, in a method known as promise chaining. You can use this method to sequentially get data from multiple endpoints, but with less code and easier methods.

But there is an even better way! You might be familiar with the following method, as it's a preferred way of handling data and API calls in JavaScript.

What is Async and Await in JavaScript?

The thing is, chaining promises together just like callbacks can get pretty bulky and confusing. That's why Async and Await was brought about.

To define an async function, you do this:

const asyncFunc = async() => {

}

Note that calling an async function will always return a Promise. Take a look at this:

const test = asyncFunc();
console.log(test);

Running the above in the browser console, we see that the asyncFunc returns a promise.

Let's really break down some code now. Consider the little snippet below:

const asyncFunc = async () => {
    const response = await fetch(resource);
       const data = await response.json();
}

The async keyword is what we use to define async functions as I mentioned above. But how about await ? Well, it stalls JavaScript from assigning fetch to the response variable until the promise has been resolved. Once the promise has been resolved, the results from the fetch method can now be assigned to the response variable.

The same thing happens on line 3. The .json method returns a promise, and we can use await still to delay the assigning until the promise is resolved.

To Block Code or Not to Block Code

When I say 'stalling', you must think that implementing Async and Await somehow blocks code execution. Because what if our request takes too long, right?

Fact is, it doesn't. Code that is inside the async function is blocking, but that doesn't affect program execution in any way. The execution of our code is just as asynchronous as ever. To show this,

const asyncFunc = async () => {
    const response = await fetch(resource);
       const data = await response.json();
}

console.log(1);
cosole.log(2);

asyncFunc().then(data => console.log(data));

console.log(3);
console.log(4);

In our browser console, the output of the above would look something like this:

1
2
3
4
data returned by asyncFunc

You see that as we called asyncFunc, our code continued running until it was time for the function to return results.

Conclusion

This article does not treat these concepts in great depth, but I hope it shows you what asynchronous JavaScript entails and a few things to look out for.

It is a very essential part of JavaScript, and this article only scratches the surface. Nonetheless, I hope this article helped to break down these concepts.

Question is, how does the computer store these data types? It can't possibly treat every data type the same.

In JavaScript, data types are split in two categories, and the computer treats each one differently. We have primitive data types and reference data types. But what are these? And why is it important to know the difference? That's what we'll learn in this article.

Primtive data types in JavaScript

These data types are pretty simple, and are sometimes treated as the lowest level of implementation of a programming language. They are not objects, and do not have methods.

Examples of such data types are numbers, strings, booleans, null, and undefined.

But you might be wondering about strings, because they do have methods. The fact is, JavaSvript converts primitive strings to string objects, so that it is possible to use string object methods.

How are primitive data types treated in JavaScript?

When you declare a primitive data type in JavaScript, it is stored on a stack. A stack is a simple data structure that the computer uses to store and retrieve data quickly.

A primitive data type on the stack is identified by the variable name you used for declaration in your program. With each primitive data type you create, data is added to the stack.

To implement this, say we declare a variable, numOne, and give it a value of 50. We go on to create another variable, numTwo, and assign it the same value of 50. So both variables have the same value.

What happens on the stack is that, the computer creates room for numOne and stores its assigned value on the stack. When numTwo is created, the computer again creates room, and stores 50 on the stack. It does not matter that both variables are assigned the same value.

What if during the coding process, we decided to update the value of numOne to say, 100? Does it mean numTwo will change too? The answer is no.

Since numOne and numTwo were stored differently on the stack, updating one of them will not affect the other. And we can experiment with that by actually trying it out in our code editor.

Logging numOne to the console will output 100, and logging numTwo will output 50. So, in effect, the two variables have no relationship to each other.

let numOne = 50;
let numTwo = numOne; //numTwo=numOne=50
numOne = 100;
console.log(numOne); //outputs 100
console.log(numTwo); //outputs 50

Now that we've seen how easy it is to handle primitive data types, let's see how similarly reference data types work.

Reference data types in JavaScript

Reference data types, unlike primitive data types, are dynamic in nature. That is, they do not have a fixed size.

Most of them are considered as objects, and therefore have methods. Examples of such data types include arrays, functions, collections, and all other types of objects.

What's the difference between primitive and reference data types?

The difference comes in when the computer has to store a reference data type. When you create a variable and assign it a value that is a reference data type, the computer does not directly store that data type in that variable (as is the case with primitive types).

What you have assigned to that variable is a pointer that points to the location of that data type in memory. Confusing? I know.

As you can see in the image above, we have two data structures now. A stack, and a heap. Say we declared an object, for example. The object itself is stored on a heap, and its pointer is stored on a stack. The pointer is identified by the object's variable name, and points to that object.

Now, we could create a variable, object1, and assign an object to it. What if like before, we create another variable object2, and assign it to object1. Does that mean another object will be created on the heap? The answer is no.

Since the object already exists on the heap, object2 and object1 will both point to the same object.

Another difference comes in when we update object1. If we log both variables to the console, we see that the change affected them both. This is because they are pointing to the same object on the heap – and updating one variable of course affects the other.

let object1 = {
name:'Bingeh',
age:18
};
let object2 = object1;

//updating object1,
object1.age = 20;

console.log(object2); //we see that object2 also updates the age attribute

Wrapping Up

Now you know the difference between primitive and reference data types. It is important to know these differences – especially when you get errors like 'null pointer reference' – so you can figure out why they're happening.

This sometimes happens with Java developers, so I hope that this article helps you clear up any doubts.