Variables, Operators, Conditions | Beginner | Mysterious Topics of Js | #1

Hi folks 👋
I hope you all are doing great.
I have started a series of blogs on some Mysterious JavaScript topics from beginner to expert level.

"Great things happen to those who don't stop believing, trying, learning, and being grateful." ~ Roy T. Bennett

List of topics we will be discussing,

• Variables
• Datatypes
• Operators
• Conditions

Variables

Variable means anything that can vary. In JavaScript, a variable stores the data value that can be changed later. Variables are containers that store specific data.

We use a reserved keyword like var in JavaScript to declare a variable.

Syntax
var <variable-name>; // declaration
var <variable-name> = <value> // initialization

Here the var <variable-name>; has no value because we have not assigned it. The default value of such variables is undefined.

There are two types of variables.

• Local Variables
• Global Variables

Local Variables

When we use JavaScript, local variables are defined within functions. They have local scope, which means we can only use them within the functions that define them.

Code

function demo(){
    var greet = "Hello";
    console.log(greet);
}
demo();
console.log(greet);

Output

Hello
Uncaught ReferenceError: greet is not defined

Here greet is not accessible outside the function scope.

Global Variables

In contrast, global variables are variables that are defined outside of functions. These variables have global scope, so they can be used by any function without passing them to the function as parameters.

Code

var greet = "Hello";
function demo(){
    greet = "Hi folks";
    console.log(greet);

}
demo();
console.log(greet);

Output

Hi folks
Hi folks

Here we have updated the value of the greet variable in the demo function because greet is a global variable.

Rules JavaScript has for naming variables:

1. Variable names cannot contain spaces.
2. Variable names must begin with a letter, an underscore _(), or a dollar sign ($).
3. Variable names can only contain letters, numbers, underscores, or dollar signs.
4. Variable names are case-sensitive.
5. Certain words(reserved words) may not be used as variable names because they have other meanings within JavaScript.

In ES5, we could only declare variables using the var keyword,
In ES6, there are two new ways to define variables: let and const.

DataTypes

Data types describe the different types or kinds of data that we will be working with and storing in variables.

Types of DataTypes

In JavaScript, we have two types of datatypes.

Primitive data types

• Number
• String
• Boolean
• Undefined
• Null

Composite data types

• Object
• Array
• Function
• RegEx

Primitive datatypes can hold only one value at a time, whereas composite datatypes can hold collections of values and more complex entities.

The basic difference between variables and datatypes is:
A variable can be considered a memory location that can hold values of a specific type (DataType). Each variable has a specific data type, indicating which type of data it may hold.

Operators

In JavaScript, an operator is a special symbol used to perform operations on operands(values/variables)

For E.g.

var a = 10;
var b = 5;
var c = a + b; // 15

Here + is an operator.

JavaScript Operator Types

Here is a list of some common operators

• Assignment Operators
• Arithmetic Operators
• Comparison Operators
• Logical Operators

Assignment Operators

Assignment operators are used to assign values to variables.

const x = 5;

Arithmetic Operators

Arithmetic operators are used to perform arithmetic calculations.

const number = 3 + 5; // 8

Comparison Operators

Comparison operators compare two values and return a boolean value, either true or false.

const a = 3, b = 2;
console.log(a > b); // true 

Logical Operators

Logical operators perform logical operations and return a boolean value, either true or false.

const x = 5, y = 3;
(x < 6) && (y < 5); // true

Conditions

Conditional statements control behavior in JavaScript and determine whether or not pieces of code can run. They are used for making decisions in our program.

Types of conditions

• if
• else
• else if
• switch case

They are used to check a specific condition and execute the code based on the specified condition.
Let us have a look at each of these.

if statement

Use if to specify a block of code to be executed, if a specified condition is true

let a = 5;
if(a == 5){
    console.log("a is equal to 5");
}
Output: a is equal to 5

else statement

Use else to specify a block of code to be executed if the same condition is false. We can skip the else statement because it is optional

let a = 5;
if(a == 10){
    a = 5;
}else{
    console.log("a is not equal to 10");
}
Output: a is not equal to 10

else if statement

Use else if to specify a new condition to test, if the first or previous condition is false

let a = 5;
if(a == 10){
    console.log("a is equal to 10");
}else if(a == 5){
    console.log("a is equal to 5");
}
Output: a is equal to 5

switch statement

Use switch to specify many alternative blocks of code to be executed

const a = 2;
switch(a){
    case 1:
         console.log("a is equal to 1");
    break;
    case 2:
         console.log("a is equal to 2");
    break;
    default:
        console.log("this is default case");
}
Output: a is equal to 2

JavaScript Ternary Operator

A ternary operator is used as a shorthand for if...else. It can be used to replace an if..else statement in certain situations.

Syntax

condition ? expression1 : expression2

Consider this block of code using if...else

let a = 10;
let condition;
if(a == 10){
    condition = true;
}else{
    condition = false;
}
console.log(condition);

Output: true

Using ternary operator, it looks like this

let a = 10;
let condition = (a == 10) ? true : false;
console.log(condition);

Output: true

Wrapping Up

That's all for this post, if you find any mistakes, or want to share more information leave it in the comments.
Stay healthy = Happy coding

Moazam Ali
Front-End Developer