Data Type and Operators in JavaScript

Hey Guys, This is the second article from the series A, B, C's of JavaScript, If you haven't read my first article from the series, I do recommend you to read it here. In this article, I will be explaining the Basic Data Structure and Operators in JavaScript.

For every programming language, the values are the basic building blocks, values could have any type there could be a name of an entity, or numeric representation of an entity, or a simple yes or no format. In JavaScript for this, there are several types of value in programming terms we call it as Data Types. Before diving deep into the data types, let's just understand how to define any type of value in JavaScript.

Conventionally there was only one way to define the value, with the help of the keyword var, but in modern programming, we were introduced with two new ways to define a value i.e let and const, Defining a value is pretty easy in JavaScript you just need to follow this syntax,

var name = 'hashnode';
let name = 'hashnode';
const name = 'hashnode';

The syntax is similar, but there are differences in each of the variations, take a look at the following differences,

The values with keyword var and let can vary throughout the program, that is why we refer to them as variables, In the case of const once define can not be changed so they are called constant values or just constants.

Data Types

• Number

  To represent a numeric value we use a Number data type, it could be 10, -10, or 3.14.

  let valueOfPI = 3.14; // data with the value type Number
  

  There are three special values in javascript, they are considered numbers but they do not behave like numbers, The first two are Infinity and -Infinity, which represent the positive and negative infinities. Infinity - 1 is still Infinity, and so on. The third one is NaN, NaN stands for “not a number”, even though it is a value of the number type. You’ll get this result when you try to calculate 0 / 0 (zero divided by zero), Infinity - Infinity, or any number of other numeric operations that don’t yield a meaningful result.

• String

  A String is another basic Datatype, they are used to represent the text value you can define a string value by enclosing the text in quotes,

  let name = 'Adarsh Thakur Blogs'; // enclosed in single quote
  let anotherName = "A, B, C's of JavaScript"; // enclosed in double quote
  

  Apart from these two conventional methods, In modern programming, we can also use the backticks (`) to represent a string, they are helpful to create template literals in JavaScript that we will cover in upcoming articles,

  let language = `JavaScript`; // this is also valid
  

  You can almost enclose anything inside quotes, and it would end up as a string, But some characters need to be treated differently Imagine adding a quote on side of quotes or adding a new line(\n) into an input value, To make it possible to include such characters in a string, the following notation is used: whenever a backslash ( \ ) is found inside quoted text, it indicates that the character after it has a special meaning. This is called escaping the character.

  let title = "A newline character is written like \"\\n\".";
  

• Boolean

  There can be some scenarios where have a value that distinguishes between only two possibilities, like “yes” and “no” or “on” and “off”. For such Javascript has special DataTypes Boolean they can only have two values true and false.

  let isThisArticleGreat = true;
  

• Empty Values

  There are two special types of value in JavaScript, denoted as null and undefined, they are actual values but they do not carry any meaningful information. Documents suggest that the difference between the meanings of two values is an accident, you can use them interchangeably.

Operators

The special character in the language like * and + are called Operator, they are very useful in the programming, let's learn some of the operators and their uses.

• Arithmetic Operator

  The main reason we have numeric values is to perform arithmetic operation like, Addition, Multiplication, and so on. To add two numbers we simply use the Addition operator +, -, * and \ subsequently for Subtraction, Multiplication, and Division.

  let sum = 10 + 10;
  // Expected output 20
  let square = 2 * 2;
  // Expected output 4
  

• Unary operators

  Not all the operators and symbols, some of the written as words(keywords), One of them is typeof, which when applied on a value gives us the type of that value

  const numberOfGirlfriendsIhave = 1; // 🥰 
  console.log(typeof numberOfGirlfriendsIhave);
  // -> number
  

  The typeof operator uses only one value hence said to be a Unary operator, some operator uses two values and that is why they are Binary operator, please note the - can be used as binary as well as a unary operator,

  console.log( - (9 -5) );
  // → -4
  

• Comparision Operator

  You may encounter some situations where you need to compare 2 values, Javascript provides operators that may come in handy in such situations. here is the list of comparison operators,

  cosole.log(10 > 20); // > 'Greater than`
  cosole.log(10 < 20); // < 'Less than`
  cosole.log(10 >= 20); // > 'Greater than or equal to`
  cosole.log(10 <= 20); // < 'Less than or equal to`
  cosole.log(10 == 20); // < 'Equals to`
  

Fun Fact: In JavaScript, all the values are equal to themselves except NaN.

• Logical Operator

  Some operations can be applied to the Boolean values themselves. JavaScript supports three logical operators: and, or, and not. The && operator is a logical AND operation, It is a binary operator and it returns true only if both values are true otherwise false.

  console.log(true && false);
  // → false
  console.log(true && true);
  // → true
  

  The || operator is a logical OR operation, It is also a binary operator and it returns true if any one of the values is true.

  console.log(false || true);
  // → true
  console.log(false || false);
  // → false
  

  The operator NOT is represented by Exclamation Mark !, it is a unary operator and flips its value.

  console.log(!false);
  // → true
  console.log(!true);
  // → false
  

• Ternary Operator

  Till now we have seen unary operator and binary operator, but there is a ternary operator in JavaScript that is represented using Question Mark(?) and Colon(:) Symbol like follows,

  console.log(true ? 1 : 2);
  // Expected Output 1
  

  In this operator, the output is dependent on the truthfulness of the value before the ?, If the value provided is true the output will value before colon : otherwise the value after it, sometimes is also referred to as the conditional operator.

We learned the basic Datatypes in JavaScript, you might be wondering 🤔 in all of the examples we are no specifying the data type of the values then how JavaScript come to know that 10 is a number and "10" is a string, here comes a concept how Automatic Type Conversion.

Automatic Type Conversion

If you have followed my first article from this series then you must remember that JavaScript is one of the cleverest programming languages, Let me give you the proof,

console.log(5 * null)
// → 0
console.log("3" - 1)
// → 2
console.log("6" + 1)
// → 61

Whenever a wrong data type is used for an operator, JavaScript silently converts that value into an appropriate type using a set of rules that often aren’t what you want or expect. This is called type coercion.

In this case, the null becomes 0, "3" gets converted into 3, and in the third example we are trying to contact the "6" with a number do 1 get converted to "1" giving us the result of "61".

When you do not want JavaScript to convert the values and compare them as it is, There is a special type of operators that JavaScript provides, === and !==. The first operator checks whether both of the values are precisely equal and the second one checks that both of the values are precisely unequal.

Tip: I recommend you to use === and !== operator to accidentally fall for the automatic type conversion.

So we are good to use the different data types and operators to perform some operations, in the next article from this series I will be explaining Function and Object in JavaScript.

To get notified about my next article do follow me, till then You can connect me on Twitter or DM on Discord.