What is Type?

Data type is a concept of classifying data for using in a program.
__An academic & unhappy Mind

Well, actually, I’m not a fan of using academic words to describe things; Because those words make everything look ugly. Let’s ignore the ugly sentence above. We’re gonna find another way to grasp it. :D

Let’s play around with numbers

Do you love calculators?

We all know that calculators are great at dealing with numbers. You simply need to push some buttons and the result will be there within a blink. Your computer is even more superior than a calculator thousands times. Let’s ask it to perform an addition and print the result to your web browser’s console using JavaScript.

JS code:

Sure, we can give it a bit more complex task.

JS code:

You can easily find division remainder as well.

JS code:

Yet, JavaScript provides a lot more efficient tools to work with numbers; But we’re gonna keep things simple now and save those tools for later tutorials. Let’s do something else.

Get a string

Since numbers are not everything, there are other needs that people deserve from daily computing. In daily life, most of us use words more frequently than numbers. So, when we create a software solution to automate a task, it’s 99 percent sure that we have to deal with text contents as well.

Now you see, there’s a need to represent text contents in code and make your computer treat them differently than numbers. This is where the concept of Type gets in. We have the first basic type: number; And the next one is called string which is used to represent text contents. In JavaScript, a string is enclosed using single quotes ' or double quotes ".

JS code:

You can place a plus sign + between two strings to concatenate them. Since we’re working with strings (not numbers), your computer will consider the plus sign + as a concatenation operator instead of an addition operator.

JS code:

There are also many other tools in JavaScript which allow us to manipulate strings efficiently. But, we’re not gonna bring them all here since our main purpose in this tutorial is just getting to know the concept of Type; And we also have another important concept to care about. Let’s talk a little more about Type in JavaScript before taking the concept of Variable.

Automatic type conversion

Coding in JavaScript is just playful as cooking. Sometimes we can make a dish taste salty by using cinnamon instead of salt. It is possible not because those two are the same; But because they have quite the same meaning to the dish. And the same possibility happens with JavaScript’s types. Sometimes we can use that type instead of this type in an expression which requires this type. :D

JS code:

In the example above, what we expect is a string concatenation; But, we’ve put there a number and… it just works. This is a smart feature of JavaScript which automatically converts the number to a string before the concatenation is processed and helps us to simplify our work.

Generally, in many other programming languages, type conversion must be done explicitly by writing extra lines of code. JavaScript also provides methods which serve explicit type conversion and we’re gonna talk about those tools in later tutorials.

JavaScript is out smart other programming languages.
__A simple & happy Mind

The concept of Variable

Let’s assume that you are building your personal blog. Your blog’s homepage will contain some entries to the 10 latest posts. Each entry will contain an excerpt made from a post’s content. You decide to fully load the contents of articles to the entry components then write some JavaScript code to trim those contents to 300 characters of each excerpt. So, here are steps needed to be done in order to create an excerpt:

• Extract content of an entry from HTML document.
• Trim it down to 300 characters length.
• Append three dots ... at the end of the trimmed content.
• Put the excerpt back to HTML document.

Since the string manipulation takes multiple steps to reach the final result, there’s a need to temporarily store the content somewhere to manipulate it step by step until it reaches the final form. We need a Variable!

JS code:

A variable in JavaScript is declared using the keyword var followed by a name. To assign a value to a variable, an equal sign = is used. The operation will take that something on the right side of the equal sign = and put inside the box on the left. Whenever you want to use the stored value, just call the variable name.

JS code:

You can both create a box and put something inside it at once as in the example above. There’s no difference. For the first example, I’ve broken the statement just for better explanation. :D

A variable is simply a box that you can put anything inside.
__A simple & happy Mind

Ok. Let’s create another box and perform a simple manipulation.

JS code:

In the second statement, the assignment operator = will take something on the right to put into the new box on the left. But, that something is an expression and your computer firstly needs to perform a calculation to get the result: The variable box is called to take out the string 'A cat'; A concatenation is processed and the result is a new string 'A cat and another cat'.

You can also put the result back into the old box instead of a new box. But, I prefer creating a new one since variable name is very useful to describe the state of the stored content after each manipulation and it gives your code more clarity.

About naming variables, we’re freely to use other beautiful names for those boxes but there’re also some rules that we should take notes:

• A variable name can contain letters, digits, underscore _, and dollar sign $.
• It must not begin with a number.
• Variable name is case sensitive. box and Box are two different variables.
• It cannot be any of reserved keywords. See list here: JavaScript reserved keywords

Undefined variables and the value null

The main part of the tutorial has finished. This section is just for taking note some little tiny things before heading to our the next tutorial.

If a variable is not assigned with any value, it is considered as an undefined variable. Or we can say that the variable does not exist.

JS code:

If we want to make a variable exist as an empty box, we can assign the value null to the variable. This value is considered as a worthless value.

JS code:

Ok. We’ve known the first two basic programming concepts and some related common stuff. Let’s take a break then move on. :D

Next: Function & Scope ;