DEV Community: Coding Sam

What really is a constant in Javascript and what it is not

Coding Sam — Mon, 16 Nov 2020 17:29:19 +0000

Introduction

I have been coding in Javascript in the last 2 years of my full time job, using the most recent ECMAScript standard, which has all the cool features. One of them, is to be able to define constants. Other programming languages already had this feature. In Javascript this was not possible to do until ES6 came out and introduced the const keyword.
Sometimes, while I am talking to other developers, I can see some confusion around constants. Some people think that constants are more than they really are. I decided to write this post to make it clear what really is a constant in Javascript once and for all. If you are a developer who writes Javascript code, do you think you really know what constants are? For instance, if you have an object declared as a constant, can you still do the same things as if it was just a normal variable?

What is a constant in Javascript?

The const keyword allows you to assign a name to a value, just like let or even the var keyword (remember the old Javascript days?). However, once you assign a value, you cannot reassign another value. For instance, if you do

const a = 2;

Then, you cannot do a = 3; . When you run your code, it will return an error.

This is not true for the let keyword.
If you do:

let a = 2;

Then you can do:

a = 3;

Pretty simple, right? If you have experience with other programming languages that have this constant feature, once you jump to Javascript ES6, you get the idea pretty quickly. For instance, in C++ there is also const. In Java there is final. They all do the same!
Even though, this const keyword implements a pretty simple concept, sometimes there is some confusion around it. If you come from a programming language that does not have constants or if you still code in ES5 Javascript, you only have the var keyword to declare variables. It might be the first time you have to deal with constants in programming languages. Once you get it, you realise how awesome such a simple feature is. It allows you to write less error-prone code. If you have some Javascript extensions for you text editor, you can even get errors about trying to change constants right on your text editor before you try to run the code!

What is not a constant?

At this point, this constant feature should be clear to you, right? It should be if you only think about numbers, booleans and strings. What happens when you start working with objects and arrays? What it means to do something like:

const person = { firstName: 'Sheldon', lastName: 'Cooper' }

Can I do person.age = 30? Usually, we think about something constant as something that never changes. If I declare the person variable as a constant, should I be able to change it? If you try to run that code in the Javascript console of your browser, no errors are thrown!

Declaring an object as a constant and adding a property to that object
Why this happens? Because…
The const keyword means you cannot assign other values to the same name. It doesn’t mean that the value is immutable!
Basically, the const keyword only defines one rule. You can assign a value only once. Unlike var, both let and const keywords use block scope. If you want to know more about the difference between these keywords and their scopes, check my post about Why don’t we use var anymore?

In an assignment, if the left side of it (the variable’s name) holds a mutable value, that value is still mutable.
You can do:

const person = { firstName: 'Sheldon', lastName: 'Cooper };
person.age = 30;

You cannot do:

const person = { firstName: 'Sheldon', lastName: 'Cooper };
person = { firstName: 'Rajesh', lastName: 'Koothrappali' }

Is it possible to achieve immutability?
Just because you use the const keyword, doesn’t mean you can make sure that a value cannot change. You can always change elements in an array and properties in an object.
Is it possible to create an object or an array and prevent changes to it? Yes!
But, there is one small detail. Let me show you an example. Let’s use the same person constant with a slightly different structure:

const person = { name: { first: 'Sheldon', last: 'Cooper'} };

Note that the person object has a name property, which is also an object with two properties, first and last.
You can make this person immutable using the Object.freeze function.

const person = Object.freeze({ name: { first: 'Sheldon', last: 'Cooper' } });

Then, if you try to change the name property, nothing will happen and the person object will hold the same values.

However, this might not be enough protection. The name property is also an object with two properties. What happens if you try to change one property of the person’s name?

As you can see, you can still change some properties in a frozen object.
If you want true immutability, you have to call Object.freeze on all properties of the object recursively.

Conclusion

After a lot of time coding in Javascript, I could see some confusion around constants. The feature to be able to declare a variable that cannot be reassigned is something that wasn’t part of the first version of the language. If you have experience coding in programming languages that have constants, you easily get familiar with it once you start coding in Javascript. However, it can get a bit unclear if you don’t have such experience.
You can declare constants in Javascript by using the const keyword, for instance:

const person = { firstName: 'Sheldon', lastName: 'Cooper' };

When you do that, you are not allowing to assign some other value to the same name in the same block. However, if the value is an object or an array, you can still change some properties inside, because a constant is not immutable. If you need immutability, you can use Object.freeze. But, you need to have in mind that, if some of the properties inside the frozen object are also objects, you still can change those values.

I hope you liked it and learned something!

Happy coding!

Hoisting - One of the trickiest Javascript features

Coding Sam — Sun, 18 Aug 2019 18:46:43 +0000

Javascript is a programming language that can be tricky for beginners. Once you understand how it works, it becomes clear, but in the beginning, you end up debugging problems that you created yourself because you didn't know something about the language.
We all have been there.
Maybe you are learning Javascript and you are in this process of dealing with problems you don't see happening in most programming languages.

In this post, I will show you some code snippets and for some, an embedded codepen. However, you will see document.write calls instead of console.log. This is just to allow you to see the output on the codepen's app. Otherwise, you would have to open your browser's developer tools.

Let's look at the following JS code snippet:

console.log('Hello, my name is ', name);

var name = 'Sam';

What do you think that is going to happen?
Here, you are using a variable before declaring it and assigning a value. This kind of code, in most programming languages, would throw an error because you are trying to use something that is not known yet.
You will see the following output in the console:

Hello my name is undefined

There was not a single error, but you get an unexpected output.
undefined is the default value of any variable.

If you don't know what is going on, you start to ask yourself:

Why didn't the code crash when I tried to use an unknown variable?
Is there some magic that allows me to use a variable declared below? If so, why didn't I get the right variable's value and got undefined instead?

In the previous code example, try to replace name by something else:

console.log('Hello, my name is ', somethingElse);

var name = 'Sam';

You will get this:

ReferenceError: somethingElse is not defined

This error is something that any Javascript beginner would expect.
But it didn't happen in the previous example. It seems that you can use variables before they are declared.

Actually, something else happens behind the scenes to allow developers to do that. It's called Hoisting. Let me help you to understand one of the most tricky features of Javascript, specially for beginners. I will also show you how you can avoid it and when it can be useful.

What is Hoisting?

Hoisting is a process that moves all the declarations to the top of their scope. This is handled by the Javascript engine before running your code.

But... What is the scope of a declaration?

In Javascript, you have function based scope, which means, any variable declared inside a function, will belong to that function's scope, no matter where in the function it happens. For instance, if you declare a variable inside a for loop, that variable will be known anywhere in the function and not just in the loop.
But, any function or variable declared outside a function, will belong to the global scope.

Only declarations are hoisted (moved to the top).
But, which types of declarations?

variable declarations using the var keyword;
functions using the function keyword;

Be careful about var declarations. It is really easy to look at an assignment and think that the variable's name and value will be moved to the top.

Let's look at an example:

var a = 2;

In this line of code, there are two things going on, a declaration and an assignment. This line could be translated to:

var a;
a = 2;

Only the declaration var a will be hoisted. Like what happened in the first code snippet, if you try to use the variable a before the assignment, it will be undefined and not 2.

However, when you declare a function, you also write its body. You can't create a function with just a name and specify its behavior later on. That's why, when you declare a function (using the function keyword) the whole function gets hoisted. This means that, you can declare it in a line after the first call.
For instance, the following example will not throw an error:

var message = getMessage('Sam');
console.log(message);

function getMessage (name) {
  return 'Hello my name is ' + name;
}

You will see "Hello my name is Sam" on the console. The getMessage function got hoisted, which means, moved to the top, by the Javascript engine before running the code.

Let's see it in action!

Look at the following code snippet:


var message = getMessage('Sam');

function getMessage (name) {

  var completeMessage = intro + ' ' + name;
  var intro = 'Hello my name is';
  return completeMessage;
}

console.log('Message: ', message);

The output will be "Message: undefined Sam".
Before running the code, declarations will be hoisted. Let's break down Hoisting and follow through the steps:

First, collect all declarations (var and function)

Move those declarations to the top of their scope

After this process, the Javascript engine will look at your code like this:

var message;

function getMessage (name) {
  var completeMessage;
  var intro;
  completeMessage = intro + ' ' + name;
  intro = 'Hello my name is';
  return completeMessage;
}

message = getMessage('Sam');

console.log('Message: ', message);

The message variable and getMessage function are global, that's why they were moved to the top of the file. The completeMessage and intro variables were moved to the top of the getMessage body, because they are attached to the function's scope.

The completeMessage variable will be undefined Sam, because the assignment to the variable intro happens one line below.

Can you run away from it?

How many programming languages do you know that have this Hoisting feature? Most programming languages don't have it, which means, if you try to use a variable or a function that is not declared yet, you will get an error. For me, it makes a lot of sense. Why would you use a variable before you declare it in the first place?
I don't really know why Javascript has Hoisting. But, I know that ES6 (ECMAScript version 6) added ways of declaring variables that are not hoisted.
ECMAScript is a standardized specification, that Javascript is based on.

If, at this point, you think that Hoisting was a bad idea, maybe you are not the only one and the people that work on the ES specification think like you. Maybe that's why they have created the const and let keywords, that allow you to define constants and variables, respectively. They are not hoisted.

Nowadays, a lot of Javascript developers are not using var anymore, because of Hoisting and the function based scope.
See my post on "Why don't we use var anymore?"

Why don’t we use var anymore?

Coding Sam ・ Apr 27 '19 ・ 7 min read

#javascript #es5vses6 #es6 #softwareengineering

In the following example:

const message = getMessage('Sam');
function getMessage (name) {
  const completeMessage = intro + ' ' + name;
  const intro = 'Hello my name is';
  return completeMessage;
}

console.log('Message: ', message);

You will get an error inside the getMessage function, because you are trying to use the constant intro before you declare it and assign it a value.
Calling getMessage before defining it does not throw an error because, remember, functions are hoisted. But there is also a solution to create non hoisted ones. Just use arrow functions.

const getMessage = (name) => {
  return 'Hello my name is ' + name;
}

They are not hoisted because they don't have a name (you are not using the function keyword). When you create an arrow function, you are creating an anonymous function. If you want to keep a reference to it, you have to assign that anonymous function to a constant or a variable.

Is it all bad?

So far, I have shown you what Hoisting is and how you can avoid it. However, I think that it is not all that bad. There is one good use case for this feature.

Let's say you have a location.js file, that exports a function that any developer can use to get the user's location. Before getting the location, you need to ask permission to get that data. Your file would look something like this:

export const getUserLocation () {
  const userAllowedToGetLocation = askUserPermission();
  if (userAllowedToGetLocation) {
    return userLocation();
  }
  else {
    throw new Error('User refused to provide location');
  }
}

function askUserPermission () {
  // Logic to ask user permission to get his/her location
}

function userLocation () {
  // Logic to get the user's location
}

The exported function is a constant with an arrow function as its value. But, that function uses two other functions, which are defined after the exported getUserLocation.
You can do this because, remember, functions in Javascript are hoisted, but not arrow functions. If these auxiliary functions were arrow functions, you would have to put them before the exported one. This is a simple example but sometimes, you can have more than two auxiliary functions. Other developers that need to work on that file would have to scroll until they find what is being exported.

If you put all the auxiliary functions on the bottom of the file, you make it easier to read, because other developers will see the main logic as soon as they open the file, instead of having to scroll through a lot of functions.

I use this pattern a lot... But you might disagree ;)

Conclusion

Hoisting is a feature that can be tricky to a lot of developers. Fortunately, we have ways to avoid that process of moving all the declarations to the top of their scope. But, you can put this feature to good use. When you have a file that exports something, you can move all auxiliary functions to the bottom and make your code easier to read.

Do you like Hoisting? Do you think that it is useful? Do you know other ways of taking advantage of it? Let me know what you think in the comments!

Happy coding! :)

Coding Sam @ Medium
codingsam @ Twitter

My Top 5 VS Code Extensions

Coding Sam — Wed, 03 Jul 2019 21:59:08 +0000

Since I started coding I have used many text editors, such as Sublime, Atom and even vim (I know this is a bit different but it can be considered an editor anyway). I have been using VS Code for a couple of years and I really really love it.

I love this editor because it has a really good performance (at least I don’t have any issues so far), it is free and you have a lot of extensions available to install. These extensions can make a difference in your everyday work and of course, make your editor look awesome!

Just a screenshot of my favorite text editor

I will share with you what is my top 5 extensions for VS Code. You will find two that are only useful if you write Javascript code, which I do... And I love to!

Extensions

GitLens

If you are working on a project that uses git as the VCS (Version Control System) you will love this one. This basically tells you who made a given change in the line your cursor is on. It shows you the commit message and the user who made the change.

Using gitlens to see commit messages line by line

This extension also adds a new option in the left side menu where you can see in great detail, the commit logs, compare files, see branches, etc.

vscode-icons

This one is also for pretty much any kind of software developer. It is nothing more than a icon package. Let me show you an example…

Example of how icons appear using vscode-icons extension

As you can see, it does a lot more than just looking at each file’s extension and use the right icon. Some files don’t even have an extension in the file name, for instance, the “LICENSE” file. But somehow, the extension uses a different icon for this file, even though it is just a text file. The “Dockerfile” got its own icon too! It really is more than just an icon theme for your text editor!

Bracket Pair Colorizer

Sometimes you have a lot of “(“ and “{“ and it’s hard to find the corresponding “)” and “}” closing characters. I use this extension to solve this first world problem. It applies a different color for each pair of “()” and “{}”.

Each pair of “()” and “{}” gets a different color

Awesome, right?

ESLint

ESLint is a tool to specify code standards. Some questions like:

Should I put a space around the “=” in an assignment?

const a = b;

const a=b;

Should I leave a white space between the if keyword and the condition in an if statement?

if (condition) //...

if(condition) //...

And much more, can be answered by this tool…

All of these code standards can be defined and enforced by ESLint. You just need to integrate this tool in your project and set your rules in a eslintrc file. Your build tool will raise an error if some rule is being broken. But you can do better. You can have all those errors popping up in your VS Code. There’s an extension that does just that. It looks for a configuration file and as you type, your text editor highlights errors that break the rules. Some of these errors can be automatically fixed. Just press Ctrl + Shift + P (on a PC) or Cmd + Shift + P on a Mac and type “fix” until you find an option that says “Fix all auto-fixable problems”.

Using auto fix to fix code standard issues

Import Cost

When you import something from a package, it means you are including some external code. If you have a build process in place that generates a bundle file (all code in just one JS file), each library you use will increase final bundle’s size. With this extension, each import statement is evaluated and it tells you what is the cost of that import, in terms of file size. Because here… The size matters!

Just an example of Import Cost extension in action

Conclusion

It’s not obvious the benefits of the extensions I showed you in this post… Until you start using them! Even if some of them just solve some first world problems, I think all of them added value to my text editor and also to my everyday work. I hope you can get something awesome from this post.

Do you use VS Code? Any other editor, like vim? What extensions do you use? Share in the comments your top 5 extensions for your editor of choice!

Bug detective — When returning JSON goes wrong

Coding Sam — Sun, 02 Jun 2019 21:32:32 +0000

As a developer, I spend a lot of time on fixing bugs. If you are a software developer, you can relate to this, right? I love to create new things and develop new features. However, there are a lot of days that most of my time is spent around debugging. Some days are really hard and you have to act like a detective to fix a bug. Those are your detective days. I think most developers have such days from time to time.

In this post, I will introduce a bug case and I will explain the process of fixing it. The case is based on a real problem that a coworker and I had to debug in the past, while working on a PHP codebase. I changed some variables and functions names to avoid sharing private code. This programming language has a lot of bad reputation because a lot of people wrote really bad code in it. But you can do that in any programming language, right? The focus of this post is not in PHP. You can keep reading it even if you never coded in that programing language before. The main focus is on the case itself and in the process of finding the cause. In the end, I will give you some tips to help you on those detective days.

Let’s just get started with the case!

The case

You work on a web application and one of the pages has a table, which is really important for your users to allow them to make use of your app. One day, you receive a lot of bug reports about this table not showing any data at all. Not a single row was there. Like any bug that is blocking your users, you have to fix it right away.

The first thing you try to do is to reproduce the behavior that your users described. You just do that and of course, they were right. There was no data at all. You check the browser’s developer tools and there is not a single error being thrown. You check your server’s logs and there are no errors there either.

You start investigating…

The investigation

Let’s ask the first question… How the table works and where its data comes from?

An HTTP request is triggered by some code in Javascript to an endpoint written in PHP, which is supposed to return a JSON array. That array contains several objects that will be used to “feed” the table’s content on the frontend.

Pretty simple, right?

What is the endpoint returning? Let’s check the response, maybe it is returning an empty array… But it’s not. The response is completely empty. Not an empty array. There is nothing in the response body but its status code is a 200 OK. Now it starts to become really weird. Not a single error and not an empty array. How is it possible that no error is thrown and you get an empty response body? Something really weird is happening on the server.

How the server endpoint’s code looks like?

<?php

$data = getDataFromDatabase();

echo json_encode($data);

?>

For those of you who never saw any PHP code before, the way you initialize a variable is like this:

$variableName = value;

Let’s break it down:

getDataFromDatabase is a function in the project’s code base that sends a query to the database and returns an array of associative arrays (key-value structures, something like Javascript objects, in PHP).
json_encode is a built-in function, provided by the programming language, that converts an associative array or an array of associative arrays to JSON.
echo is a very well known PHP construct that just outputs one or more strings. In this case, it is outputting the $data array in a JSON format, because of the json_encode call. If everything goes well, you get a JSON array out of the $data variable.

At this point, I challenge you to take a small break and think of what can be causing this endpoint to return nothing.

Did you think about it?

You need to ask yourself… Is there any issue with the getDataFromDatabase function? Is there any error connecting to the database that is being caught and not being thrown to the caller?

Let’s try a top down approach. Which means, let’s start in the top level, which is the endpoint’s code in this case, if something is wrong here, you need to take a look inside the getDataFromDatabase function. Because this is the only function you can look at. json_encode is a PHP built-in function. It should be working properly. Let’s take a look at the $data variable’s content. To do that, you just need to call var_dump, which is a function that dumps the content of a given variable.

<?php

$data = getDataFromDatabase();

// Let's output the $data variable's content
var_dump($data);

echo json_encode($data);

?>

After this change, now your response will look weird because you are dumping the variable’s content, which is expected. When the var_dump executes, you can see an actual array with a lot of associative arrays inside. This getDataFromDatabase function seems to be working just fine, right?

Right now, the only explanation is that, something is wrong with calling the json_encode function. But it is a built-in function. It should behave as expected.

At this point you are thinking that I lied and this is all fake, which I really understand. But, as I told you in the beginning of this post, this case is based on a real problem that I had to debug. Something like this actually happened to me. I ended up asking myself…

“Is it possible that a built-in function like json_encode is not working properly?”

And also… WTF?

This is one of those problems that you spend many hours on it, trying to fix it and the more you dig into it, the more you say “WTF?”. You start to become really desperate and you start googling about your problem. Before doing that, let’s just look at the PHP website and search “json_encode”. There is something really interesting in the “Return values” section:

“Returns a JSON encoded string on success or FALSE on failure.”

Since the endpoint is returning nothing, the json_encode function must be failing and returning false. Let’s change the code to call var_dump to see what json_encode is returning:

<?php

$data = getDataFromDatabase();

// Let's output the $data variable's content
var_dump($data);

// Let's output the result of calling json_encode
$encoded = json_encode($data);

var_dump($encoded);

echo $encoded;

?>

You will see in the endpoint’s response the output of dumping the $data variable and another line with FALSE. That’s right, your HTTP endpoint code is returning nothing because json_encode function is failing and when you pass FALSE to echo, it doesn’t output anything . There are a lot of reasons why this could be failing. When this happened to me, some of my associative arrays had some NaN (Not a Number) values. Looks like it cannot be encoded to JSON.

How do we get the error when json_encode function fails?

Pass JSON_THROW_ON_ERROR option to the function
Call json_last_error function to get the actual error from the last json_encode call
Call json_last_error_msg function to get the error message from the error occurred in the last json_encode call

What was the cause of this bug? You will have to look at the code that actually creates the data that you get from the getDataFromDatabase function. All these hours spent just trying to understand why the endpoint’s response was empty could be avoided if an error was being thrown. I think most times, developers don’t think too much much about errors or they try to write code that fails silently. This is a good example why, in most cases, the best solution is to just throw an error. Your users will get it but you can fix it much faster and start looking at the right place.

What are the takeaways from this?

Some days, I spend long hours debugging. I think most developers can relate to this. The story I told you in this post is based on a problem, that I actually had to fix, that was blocking users. You can get some takeaways that can help you in most of your detective days:

Use a top-down approach. This means, you start looking at the most high level code that seems to be the problem. In this case, you can avoid looking inside the getDataFromDatabase function because you can start looking at the endpoint code itself. If you look inside at that function first, you would spend much more time in this entire investigation
Look at the documentation. If you are using some built-in functions you can’t just assume they always work the right way and there will never be errors. Try to understand how they work and how to do the proper error handling
Avoid to write code that fails silently. If something is not supposed to fail don’t’ just think that it will never happen and you don’t need to do anything. Write code that gets the error and if you don’t know what do with it, just throw it. If something goes wrong your users will be affected but you will be able to fix the problem much faster
Most times, the bug is not where you think it is. This goes in line with previous bullet. If you throw errors instead of thinking they will never happen, you might start looking at the right place in the beginning of your investigation
Take some breaks and drink water or eat something. You will need extra energy. This can be hard while you have users and your boss yelling at you because something is not working. But really, try to do it. Otherwise your brain will just “explode” and you will take much more time that is necessary to fix the problem.

I hope you enjoyed this story and took away something that will help you in your life as a software developer. Specially in those days when you have to fix really weird bugs.

Happy coding! :)

Let me know what you think and follow me for more cool content about dev stuff :)

codingsam @ Twitter

Unboxing Redux

Coding Sam — Sun, 12 May 2019 17:52:04 +0000

Redux is just flux with only one store

Redux is a Javascript library that helps developers manage the application state, for instance, it can be the logged in user or the followers of a given user in a social network app.

I am working with Redux for a couple of months and it's being awesome! Something just popped into my mind when I started using it. Then, I remembered that I have read about the Flux design pattern a long time ago. Don't worry if you don't know anything about redux or flux, I will try to make it clear. I just realized something about these two things. I told myself: "So, this is just a flux implementation, but you only have one store".

When I said it like that to some people, that were used to work with Redux, their reaction was something like:
"What? What is flux?". This was kind of weird because, for me, it was clear that redux was related with flux. But then I realized something. It's really easy to talk about Redux without even thinking about flux. Most people describe Redux just as a application state management library for the frontend, which is true. But I think that is not the most complete answer. If you jump into it and just start using it, you are missing the big picture. Don't worry, I am not judging! If you just joined a project that uses this library, you have to learn how it works and get stuff done, right? It can take some time until it all makes sense.

If you don't know what redux is, you came to the right place. I will try to explain it to you in simple words. Even if you are familiar with Redux, are you sure you really know what it is and where all its concepts come from?

I think that, defining redux implies that you first explain what flux is. Once you understand it, redux just comes out naturally and you will see why I define it as a "flux with only one store".

This is not a flux or redux tutorial. In this post, I will do the "unboxing" of Redux, which means, I am going to try to explain what it is and where its core concepts come from.
If you are already lost, don't worry. I will break it down so you end up understanding what Flux and Redux is. Then, you can jump into the Redux getting started guide and start building awesome projects!
Let me "unbox" Redux for you.

Flux

When I open the Redux box, the first thing I find is Flux. It is a design pattern, created by Facebook, for managing the application state. I am not going to focus on any particular implementation. I think once you understand the pattern, you can just find any implementation and start using it.
It has actions, a single dispatcher, one or more stores and of course the views. Let's break it down:

Action: This is just an object that needs, at least, to have a type key, which will define the action's type. This type will be used later on to make decisions about state updates
Dispatcher: Its responsibility is to send the actions to all the stores
Store: The store receives the actions and updates the application state accordingly
View: This is just the UI component that the user is interacting with

The following diagram shows the main components of this pattern and how they interact with each other:

It works like this:

The user interacts with the app views and those interactions will create actions
Actions are sent to all stores through the Dispatcher
Each store, that is programmed to listen to a given action can update its state
The new state will be available for the views to use if they need to

Each store is responsible for handling the state and logic for a given domain. For instance, if you are creating a social network, you might have one store for managing users and another one for the feed. Some stores will listen to the dispatched actions and some stores will just ignore it, it's up to the developer to decide which store cares about which actions. In this example, an action could be "the user's feed is fetched" or "the user requested to follow another user".
This is a really simplified view of Flux. I recommend that you dive into the oficial documentation.

Now that I showed you what was inside the Redux box, the Flux pattern, let's move on to the box itself… Redux!

Redux

After looking at Flux, change it to only have one store and add the concept of Reducer. That's it, now you have Redux.
The following diagram shows how the different components of Redux interact with each other:

It works like this:

The user interacts with the views, which can create some actions
Those actions are dispatched (through the Dispatcher) to the reducer
The reducer receives the current state and the action and it returns the new state
The views now just have to get the new state from the store

Looks pretty much like Flux, right? But you only have one store. The only way to change the state is dispatching an action. The reducer will get it and return the new state. One really important thing about the reducer is that, it must be a pure function, which is a function that produces the same result for the same arguments and doesn't have any side effects. This means that the reducer has to create a new state object instead of modifying the existing one. This is the only way for Redux to detect that the state was updated.
For instance, if you are working on a social network project, your state could look like this:

{
  "followers": [],
  "following": [],
  "feed": []
}

And the reducer…

function reducer (state, action) {
  switch (action.type) {
    case "FETCH_FEED_SUCCESS": {
      const { feed } = action;
      return { ...state, feed };
    }
    case "FETCH_FOLLOWERS_SUCCESS": {
      const { followers } = action;
      return { ...state, followers};
    }
    case "FOLLOW_SOMEONE": {
      const { userToFollow } = action;
      const { following = []: currentFollowing } = state;
      const following = [...currentFollowing, userToFollow];
      return { ...state, following };
    }
    default:
      return state;
  }
}

The default case does not need to create a new object because it's not modifying the state.
Having only one reducer will take us to a really big and messy reducer function, right? Well, fortunately you can split the reducer into multiple functions and each one will be responsible for handling only part of the state.

// Feed reducer
function feed (state, action) {
  switch (action.type) {
    case "FETCH_FEED_SUCCESS": {
      const { feed } = action;
      return feed;
    }
    default:
      return state;
  }
}

// Followers reducer
function followers (state, action) {
  switch (action.type) {
    case "FETCH_FOLLOWERS_SUCCESS": {
      const { followers } = action;
      return followers;
    }
    default:
      return state;
  }
}

// Following reducer
function following (state, action) {
  switch (action.type) {
    case "FOLLOW_SOMEONE": {
      const { userToFollow } = action;
      return { ...state, userToFollow };
    }
    default:
      return state;
  }
}

You can do this thanks to the combineReducers function. All your combined reducers will receive any action you dispatch. You have to do this because there is only one store here, which means, only one reducer.

Like Flux, you still have actions and the store but, in a more simplified way. You just need to dispatch actions and handle the state changes in the reducer.

You can use Redux with any UI framework of your choice. There are some packages that give you some functions that makes easier to connect your framework to the redux store. For instance, you have react-redux package if you want to use Redux with React.

Conclusion

It's really easy to jump right into redux without understanding what inspired all those concepts, such as, actions and the store. I think it's important to get the big picture and learn about flux, even if it is just a simplified overview, like the one you just read. Flux can be a bit tricky to get at the first glance. I think Redux gives you this pattern in a much more simpler and easier way. You only have one store and state updates are handled by reducers, that need to be pure functions.

Next time someone asks you what is redux, you can just do this unboxing. You first show the Redux box. Then, you open it and take Flux out of the box. Now you explain Flux and in the end, you get back to the Redux box and everything makes sense. This is why I define Redux with this simple sentence: "Redux is just flux with only one store".

I hope you enjoyed and learned something. Happy coding! :)

Let me know what you think and follow me for more cool content about dev stuff :)

codingsam01 @ Twitter

codingsam01 @ Instagram

I am a software engineer. I moved from a big company to a startup since October last year, Ask Me Anything!

Coding Sam — Sat, 06 Apr 2019 13:16:29 +0000

Why don’t we use var anymore?

Coding Sam — Thu, 28 Mar 2019 22:20:26 +0000

If you used to code in Javascript in the old days, you used the var keyword a lot. There was no other way to declare a variable. It was really simple. The only thing you needed to do was just something like this:

var x = 3; var y = 'hello'; // etc...

Since ES6, there are two new keywords, const and let. The first one is a bit self-explanatory, it allows you to define a constant. If you do:

const x = 2;

You can’t reassign another value to the constant x. There are many programming languages that allow developers to define constants. This is a good way to write less error-prone code. However, there is also this “let” keyword, which allows you to declare variables. And that’s all you need, just another keyword that does the same as var, right? Why there is not just “var” and const?

Why don’t we use var anymore?

To answer that question, you need to know how var really works. In Javascript, before ES6, there was no block scope. You have function scope instead. Let’s break down these two concepts.

Block scope

When you declare a variable or a function, it will be accessible inside the block it was declared on. Most programming languages have this type of scope, for instance, Java. See the code snippet below:

public class Example () {
  public void processArray (String[] array) {
    for(int i = 0; i < array.length; i++) {
      System.out.println(array[i]);
    }

    System.out.println("I cannot use the variable i here");
  }
}

You can only use the variable i inside the for loop. It doesn’t exist outside that block. In Java, each time you use a “{“ you are creating a new block and the “}” means, you are closing that block. Of course, if you declare a variable outside the block, you can use it inside the block.

Let me show you the following diagram that illustrates how the block scope would work in this example:

Block scope using the Example class.

Each rectangle is a scope. The “children” scopes can access the functions and variables in the “parent” scopes, but the “parents” cannot access the “children”. In this example, the Example class is a parent of processArray method, which is a parent of the for loop block. The Example class cannot access whatever belongs to the processArray method, which cannot access whatever belongs to the for loop. However, the for loop can access anything in the processArray method and anything in the Example class, for instance, a variable or any other method. This is the kind of scope that most developers are used to work with.

Function scope

Unlike Java, Javascript (ES5) creates scopes based on functions. This means, once you declare a variable inside a function, you can use it anywhere in that function.

function processArray (array) {
  for(var i = 0; i < array.length; i++) {
    console.log('Element ', array[i]);
  }

  console.log('I can use variable i outside the loop ', i);
}

Of course, you also have the global scope. Each time you declare a variable outside a function, it will belong to the global scope.

Let me show you another diagram, but this time, for the function scope:

Function scope for the processArray function

Looks much simpler, right? But where is the for loop?

The for loop is a block, but there is no block scope here, that’s why, it does not have its own scope.

Why do we stop using the var keyword?

It’s all about scope! Most programming languages have block scope. Why? Because it is less error-prone. You can declare variables inside blocks (if statements, for loops and so on) without worrying about overwriting some previously declared variable.

Let me show you an example. Let’s say you are implementing a function that prints each position of a matrix. You will write a for loop inside another for loop. In ES5, where you only have the var keyword available, a beginner would write something like this:

function printMatrix (matrix) {
  for (var i = 0; i < matrix.length; i++) {
    var line = matrix[i];
    for (var i = 0; i < line.length; i++) {
      var element = line[i];
      console.log(element);
    }
  }
}

var matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

printMatrix(matrix);

The output will be:

Output of printMatrix function in ES5

It only logged the first line. To help you understand what is going on, let me show you a scope diagram for this example:

Breaking down the scope in the printMatrix ES5 version

All variables inside the printMatrix function are on the same level. The two for loops are actually using the same variable i!

What happened? When I started coding in Javascript some years ago, I wrote a lot of code like this, because I used to code a lot in Java, which has block scope. So, I thought that if I declared a variable inside the loop, it will stay there… But not really.

After a lot of bugs and frustration I learned that Javascript does not have block scope. There is only function scope. But, even after I learned about it, I forgot a lot of times! This is something that is really easy to forget about. The usual expectation is that, in the second for loop, you are creating a new variable. But you are not. You are just overwriting the variable i in the first for loop. After running the second loop, the condition of the first one will be evaluated again, but the variable i now has the value 3 (the size of the first line in the matrix), which is equal to the matrix length (3). The condition returns false and the loop stops. That’s why only the first line of the matrix gets logged.

In Javascript, it doesn’t matter how many times you use the keyword “var”. If it’s the same name in the same function, you are pointing to the same variable.

This function scope can be a source of a lot of bugs. Fortunately, Javascript has been changing and now we have ES6 and more. There are these two “new” keywords, const and let, which allow you to define a constant and a variable, respectively. They both work with block scope, which means, if variables or constants are declared inside a block, they will not be available to the “parent” blocks.

Let’s rewrite the previous example, logging the matrix, taking advantage of these new keywords. If you replace var by let and add use const for things you know you will need to need to change after initialization…

function printMatrix (matrix) {
  for (let i = 0; i < matrix.length; i++) {
    const line = matrix[i];
    for (let i = 0; i < line.length; i++) {
      const element = line[i];
      console.log(element);
    }
  }
}

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

printMatrix(matrix);

The output will be:

Output of printMatrix function in ES5

All positions in the matrix got logged. It just worked and I just had to replace var by let and const keywords! Because in each for loop I am actually creating a different variable i. In the second loop the first i will not get overwritten.

Let’s see what happened under the hood in terms of scope:

Breaking down the scope in the printMatrix ES6 version

Seems a bit more complicated, but this gives you block scope and each for loop has its own variable i. In the old days Javascript, you would need to give different names to avoid this naming conflict. But seriously, when you need to do a for loop to iterate over an array, the first name that comes to your head, for the current array index value is “i”, isn’t it?

Just a small note : I know that you have forEach, map, and more functions to deal with arrays. This is just a simple example to show how the var, let and const keywords work.

Conclusion

let and const are not just two new cool keywords, they also introduce block scope that allows us to write clean and less error-prone code.

Why don’t we use var anymore? Because now there is a better way of declaring variables and even constants… With block scope! You don’t need to think twice when declaring variables inside blocks. I think that is easier to work with block scope than with function scope. The var usage has being been discouraged. For instance, if you use ESLint to check your code, you can configure a “no-var” rule that throws an error if there is any var being used.

Please, keep in mind that you should use a transpiler tool, like Babel, to transpile your code from ES6 to ES5, to make sure it will run in any browser. Not all browsers support the complete ES6 specification yet.

Embrace let and const and let var go forever!

I hope you enjoyed and learned something. Happy coding! :)

Let me know what you think and follow me for more cool content about dev stuff :)

Awesome Javascript — Destructuring assignment

Coding Sam — Wed, 30 Jan 2019 21:53:55 +0000

Awesome Javascript — Destructuring assignment

Javascript is becoming more and more a really cool language. Why? Because of all the features introduced in ES6 (ECMAScript 6 aka ECMAScript 2015) and all the other more advanced versions. ECMAScript is just the standardized specification of Javascript. Some browsers already support it. However, it is usually not safe to rely on that, because there is no guarantee that any browser will support the complete specification. The best thing to do is to use a transpiler, that converts your ES6 code to ES5, which for sure will run in any browser. Babel is a well known transpiler that you can integrate in most used build tools, such as, webpack or gulp.

I had worked with a lot of Javascript in a web development project in one of my previous jobs. I mean… a lot! Try to work in a frontend without any framework (no React, angular or anything else!). So, as you can imagine, I got really familiar with Javascript, but it was ES5.

Since a couple months ago, I have to deal with a lot of ES6 in my full time job. It has a lot of cool features. That’s why I decided to start a new series of posts about the features I learned about (and still learning)!

This post is about the destructuring assignment, which I think it is a clean way to deal with objects and arrays.

Basically, it is just an awesome way to get values from arrays and objects.

Let’s see how it works!

Array destructuring

You can get some values from a given array and give them any name you want. For instance, let’s say you have an array of numbers, [1, 2, 3, 5, 8, 13, 21] and you want to store the first two indexes in separate variables. In “normal” Javascript you would do something like:

The variable x and y contain the indexes 0 and 1, respectively. The rest, contains all other remaining numbers [3, 5, 8, 13, 21].

Now, let’s do it the ES6 way!

This does the same as the previous code, but it looks much better. You get the first two positions from the array in variables x and y. The remaining values are stored in the rest constant. If you don’t know about what the “const” keyword means, don’t worry, it is something from ES6, it’s used to define a value that cannot be reassigned.

Object destructuring

In ES5, to get values from objects, you just simply need to know which keys have the values you want and type something like myObject.myKey. Let’s say, you have an object that describes a person with the properties: name, age, gender, address and phone number. If you want to extract the name and age properties, you just need to simply do:

If you are using ES6 you can do it like this:

You just extracted some keys from the object and also got another object with the remaining keys (gender, address and phone). Remember the weird “…” thing from the array destructuring? This “…rest” does the same, but in this case, it is an object.

I hope you get the idea, but let me give you an example to help you to get a better feeling about how awesome is this!

Example

Let’s say, you are implementing a 2D game in Javascript, for instance Bomberman. Who does not know about this one, right? Right??? :)

Bomberman game

You already have the following function:

getPosition: returns the bomberman’s current position, in a pair of coordinates (x and y), in the 2D grid where all the action is happening

There are two ways of defining a position, using an array or an object. In the array implementation, the zero and one indexes are the x and y coordinates, respectively. Using an object, this will have the x and y keys with the coordinates values. To use this getPosition function, you can use the destructuring assignment to get your code a lot cleaner than without using it.

Now, you need to implement a function:

getDistance: returns the distance (in x and y axis) between two positions.

For instance, if you have the following positions:

position0 = {x: 2, y: 4}
position1 = {x: 5, y: 3}

The distance between them should be {x: 3, y: -1} because, 5-2=3 and 3–4=-1.

Using an array

Choosing the array implementation, if you call the getPosition function, you will get an array where the index zero is the x coordinate and the index one is the _y _value.

Let’s see how we can use this function, using the destructuring assignment:

What if our getPosition function does return an undefined coordinate for some reason? You can set default values, so your code does not crash!

Remember the getDistance function introduced in the example? Let’s define it assuming our positions are represented using an array:

It is already a really looking good code, but you can remove some lines if you do the destructuring stuff in the function’s arguments list!

Is this too fast? Let’s break it down because there are a lot of stuff going on here :)

[x1 = 0, y1 = 0]: this thing in the function’s header, basically means you expect an array with two positions. You are naming its indexes zero and one to x1 and y1, respectively. In case that the array has less than two positions, or is completely empty, those x1 and y1 values become zero. Have in mind that you can pass an empty array but you cannot omit it, otherwise, you will get an error!
const [xDistance, yDistance] = getDistance(position1, position2): here you are just calling the getDistance function that returns an array. Instead of storing that array in a variable (or a constant as I am doing in this example), you are assigning the zero and one indexes in two constants named xDistance and yDistance, respectively.

Using an object

The same getPosition exercise could be implemented using an object instead of an array. Let’s write an object version!

And you also can set default values, like we did in the array version!

Awesome right? :)

Now, let’s create the getDistance function:

I am using the destructuring assignment here with default values. Also, I am renaming its keys, so I can distinguish between the x and y from position1 (x1 and y2) and x and y from position2 (x2 and y2).

Is it possible to do better? Yes! Let’s do it!

You can save some lines if you already know that your function arguments are objects with some given keys. Like I have done in the array implementation, here I can also move the destructuring part to the function’s header! Let’s break it down:

{ x: x1 = 0, y: y2 = 0 }: Basically this means that you expect an object, as the function’s first argument, with two keys x and y. However, you are naming those keys x1 and y1 (this is useful because the function expects two objects with the same keys). Have in mind that you are not changing anything in the object passed to the function (renaming the keys, {x: x1, y: y2}, does not change the keys names in the object). Also, if this object does not have a defined value for the x key, the value zero (x: x1 = 0) is used instead. The same is true for the y key.
const { x: xDistance, y: yDistance } = getDistance(position1, position2): This calls the getDistance function. You could just put the result in a constant, but as you can see, you can destructure that object if you already know which keys you are expecting. The “x: Distance” part gets the x value from the returned object and renames it to xDistance.

Conclusion

If you already work with Javascript ES6 (and more advanced standards), it’s very likely that you already know this destructuring assignment and you love Javascript.

Anyway, have in mind that, in order to use this feature, you should transpile your code to ES5. Otherwise, there is a small chance that your code will not run in some browsers. As mentioned in the beginning of this post, go check Babel. I didn’t explained anything about how to setup a transpiler because I just wanted to focus on one particular feature instead of writing a really big post.

I hope you liked it and learned something. Share this, especially, with your developer friends that hate Javascript :)

Let me know what you think and follow me for more cool content about dev stuff :)

The Command Line — Your best friend

Coding Sam — Thu, 27 Sep 2018 20:59:19 +0000

The command line is a tool used by software developers, to run framework or development tools related commands, run scripts to automate processes and a lot more. If you are learning to code or already code, I think you should not be afraid of the command line. It can seem intimidating at first, but it will improve your workflow.

I met some people that always ran away from anything that didn’t have a GUI (Graphical User Interface). In some cases, you will be just fine. For instance, if you are a C# developer, you will use Visual Studio. Actions related to running, debugging and deployment can be triggered just by clicking in some icons in the IDE (Integrated Development Environment), in this case, Visual Studio. There is nothing wrong with this approach but… When you try to explore other technologies, languages, frameworks, etc, you end up dealing with the command line.

If you are already a software developer, at this point, your reaction should be something like:

https://medium.com/media/0aa640dad9d0aa8f10d4709e424b8bae/href

“What are you talking about? I know how to open the Terminal app on my Mac or Linux or cmd on Windows and run commands in it”.

I am not here to tell you that you must learn how to use the command line… Instead, let me show you, from my experience, how you can have the best command line… Ever!

First, let me tell you how I learned what I am about to share with you. Everything started when I was in a summer internship at a startup. I was a student looking for some kind of real world experience, so I was not really familiar with the command line. The CTO (Chief Technology Officer) showed me how to have a Quake like console (the one that comes down when you press the ‘\’ key in Quake video game) on my laptop that was running Linux. Then, he told me to install oh-my-zsh, which I will talk about later in this post.

Console in Quake game

The CTO is basically the person that is in charge of the technology and engineering departments of a given company.

From that moment, I started to love the command line. Few years later I still use this tool and I am going to share it with you.

Basically, you will need these things:

A terminal app
Z Shell
oh-my-zsh

I will explain what these things are in a moment.

Just follow the two steps below :)

First — Get a nice terminal app

The first thing to do is to get a terminal app. You can use the one that comes with your Operating System but there are better solutions out there, especially for Windows, believe me, you wouldn’t want to use cmd. The goal here is to have a better terminal app with a Unix based command line. Unix is the base system of Mac and Linux Operating Systems. This is why I prefer Mac or Linux, and maybe that’s why you see a lot of developers using such systems. Anyway, if you use Windows you can still get almost the same experience.

Here are my terminal apps recommendations for Mac, Linux and Windows.

Mac : iTerm

Iterm2 running on my own Macbook Pro

Linux : Guake

Guake running on Ubuntu. Source: https://www.flickr.com/photos/xmodulo/14285529772

Windows : ConEmu

ConEmu running on Windows. Source: https://commons.wikimedia.org/wiki/File:ConEmu_screenshot.png

In the Windows, installing just ConEmu will not give you the best experience. You need to install WSL (Windows Subsystem for Linux) and a Linux distribution available in the Windows Store, for instance, Ubuntu.

This will give you a Unix like command line, which is what this entire post is all about.

I think using one of the terminal apps I mentioned before, it is already an improvement… But let’s make it even better…

Second — Make your terminal awesome

I will just show you something that you can install, to have, what I think is the best command line experience possible.

Now, you need to install two things:

Z Shell, which is essentially an Unix shell (command line interpreter). The installation will depend on your Operating System. I recommend that you use a package manager. On Windows, if you successfully installed the Linux Subsystem, just use the package manager available in your Linux distribution you are using inside the WSL. If you use Linux, you can just use the package manager of your distribution. On Mac OS, I recommend you to use Home Brew.
oh-my-zsh, is a set of plugins that adds more features to the Z Shell. The installation process is just a matter of copy and pasting a command to your terminal. Depending on the installation method you choose, you need wget or curl. Just use your package manager to install one of these two options.

If you made this far, let me show you how awesome this is!

See it in action

Let’s see some examples of cool things you can do with the terminal and oh-my-zsh together.

All the following screenshots were taken from a Mac OS, because I own a Macbook Pro… But if you installed a terminal app and ‘oh-my-zsh’, you will be able to experience the same awesomeness.

Plugins

You have a lot of plugins available. Check the complete plugins list and how to install them. Is as simple as add the plugins names to the plugins list in the .zshrc file in your user’s home folder.

https://medium.com/media/80c061172fa043dadb7e68ae287a08c7/href

Choose a theme

oh-my-zsh allows you to customize the look and feel of your terminal. I just use the default one, but you are free to give it a different look. Choosing a theme just requires you to define a ZSH_THEME variable in your .zshrc file. Check all the available themes and set this variable according to your choice. For instance, if you want to use a theme named “awesomepanda”, you need to add the following to the .zshrc file:

https://medium.com/media/bdb7a2c906ea7f790c93c9540ccff24f/href

Using git

If you use git as the version control of your projects, you know you can use the command line for that. If you navigate to any of your projects folders, you will see the current branch’s name in the right side of the folder’s name. You also have some aliases to make your git commands shorter.

git pull => gl
git push => gp
git commit => gc
git status => gst

See this in action…

Using git with oh-my-zsh

Autocomplete

Maybe you already know that, when you are typing a command, if you press the TAB key, the terminal will try to complete your command. This is already a cool thing. But… Z Shell and oh-my-zsh take this autocomplete thing to another new level. That’s right, it can help you, for instance, to complete a folder name even if you start typing a word in the middle. If more than one option is available, you can use the TAB key to navigate through the available options.

Autocomplete feature for folders and files

Another awesome level of autocomplete, is related with some software development tools. You have several plugins to help you autocomplete some specific tools commands. For instance, if you work with nodejs, you will use a lot of npm commands, like npm install.

Because you know, developers are lazy, so they will avoid to write as much as possible.

Conclusion

Any software developer has to deal with the command line. Some people don’t like it. Unless you work with a really specific tool set, bad news… You can’t run away from it. I can tell you that, from my experience, it can seem intimidating in the beginning because it requires you to memorize a lot of commands. But… once you begin feeling comfortable, you will love it.

Following two simple steps, you can have a really awesome experience. You just need to download a terminal app for your Operating System. Then, go ahead and install z shell and oh-my-zsh on top of it.

If you are a software developer or thinking about being one, remember…

The command line is as important as any other development tool

Having fun with the command line :)

I talked about the terminal and oh-my-zsh but didn’t go into much detail of the installation process of each required package. That would require a post for each Operating System. The most important thing here, is that you become aware of these tools. Let me know if you would like to read about each OS. I think you have the best experience in Mac and Linux. At my current job, I use a Windows laptop. I came from a Macbook from my previous job, so I was used to a kind of Unix based experience. Fortunately, Microsoft somehow partnered with Ubuntu. This partnership allows you to have a Linux command line in your Windows. Anyway, sometimes there are problems… But I can write about that in a new post.

Share this post with software developers that are in the beginning of their careers or always try to run away from the command line :)