Variables, Operators, Conditions | Beginner | Mysterious Topics of Js | #1
Tags: javascript, beginners, programming, webdev
Published: 2022-03-04 12:41:50

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


![JavaScript Datatypes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f58fd7366ht2z3m4ngox.jpg)

**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;
```

![Assignment Operators](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohlbrla79oc9guzoi7s2.jpg)

#### Arithmetic Operators
Arithmetic operators are used to perform arithmetic calculations.

```
const number = 3 + 5; // 8
```

![Arithmetic Operators](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8myni7h48tpjr5fk8pwt.jpg)

#### 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 
```

![Comparison Operators](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9u7c8n9fqkwjtrfctj6s.jpg)

#### 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
```

![Logical Operators](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6u2nivn1l1i1cmhqkuw.jpg)

---

## 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