Javascript: What You Need to Know (Part one)
Tags: webdev, javascript, programming
Published: 2023-02-02 21:19:24

## Table of contents

- [Basic Syntax ](#basic-syntax)
  - [Numbers](#numbers)
  - [Strings](#strings)
  - [Booleans](#booleans)
  - [Undefined and Null](#undefined-and-null)
- [Operators](#operators)
  - [Arithmetic Operators](#arithmetic-operators)
  - [Assignment Operators](#assignment-operators)
  - [Comparison Operators](#comparison-operators)
  - [Logical Operators](#logical-operators)
  - [Conditional Operator](#conditional-operator)
  - [Console.log function](#consolelog-function)
 

**The Nitty Gritty of The Javascript Language**
As a newbie programmer or a beginner to the _Javascript_ language, you often find yourself stranded on what to learn. 
First of all, what exactly is this _Javascript_ that I am talking about? Well, Javascript is the most popular language used in the websites' client-side development. More about [Javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) can be found in MDN's website, the developer's best friend. Here I am a bit biased on the web development side, but hey, do not go away just yet; you will encounter these Javascript basics irregardless of your motivation to taking any Javascript roadmap.

**Learn these Basics of Javascript Language and then move on:**

1. Basic syntax
2. DOM Manipulation (Web Development).
3. Fetch API / Ajax.
4. Async Await.
5. Event Listeners. (Web)
6. ES6+ Javascript.
7. Promises.
8. Classes.
9. Array Methods.
10. Scoping.
11. Hoisting.
12. Closures.

## Basic Syntax
The ice peak of any language is learning the basic syntax of the language and advance to the challenging parts with time. Javascript has data types that are the building blocks of any code written in Javascript. These data types include: numbers, strings, Booleans, Undefined and Null.

### Numbers
_Numbers _are the integer values, both negative and positive and are used to quantify something and can also be used in arithmetic calculations.

```Javascript
let y = 10;
let x = 9;
let z = y + x;
//->19
```
### Strings
_Strings_ are used to represent text. This data type makes use of quotation marks; Single quotes('), double quotes("), and backticks(`). Backticks have a special purpose when used in strings and are called **Template literals**-More about this to be discussed a bit later.
It is mandatory to use the quotation marks since not using them would introduce bugs to your code.

````Javascript
let day = 'Wednesday';
let lesson = "Javascript Fundamentals";
let newStr = "123";
````
### Booleans
Booleans are _true_ and _false_ values. These values are assigned to variables, object properties, arrays and comparisons. These data types are used just as they are:

````Javascript
let married = false;
let hasDriversLicense = true;

console.log( 3 > 2);
//-> true
````
The last code evaluates to true. This is because, the program asks the question, "Is 3 greater than 2?" and prints the answer to the console. Those are the booleans.

### Undefined and Null
**Null** is the deliberate absence of a value in the code. It is encountered whereby you assign it to a variable to mean that the variable might not have a value now, but it will have one later.

**Undefined** on the otherhand means that the value that is being referred to does not exist in the compiler. An example is when you define an empty variable.

````Javascript
let newNum;
console.log(newNum);
// -> undefined

let boxLabel = null;
````

## Operators
 Now that we have looked at data types, let's look at [Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators). There are different types of operators in Javascript. The most common and the most used operators include: 

1. Assignment Operators.
2. Arithmetic operators.
3. Comparison operators.
4. Logical operators.
5. Conditional operators.

### Arithmetic Operators
The Arithmetic operators takes two numerical values as their operands, one on the left and one on the right side and returns one numerical value. The most common ones are addition(+), subtraction(-), division(/) and multiplication(*).

In addition to these standard operators, there are other arithmetic operators that are offered by Javascript that include:
1. **Remainder operator** -denoted by (**%**).This one returns the value that remains after dividing two values. 

2. **Increment operator** - denoted by (**++**). It adds 1 to its operand. It is a unary operator meaning that it performs operations on only one operand.

3. **Decrement operator** - denoted by (**--**). It subtracts 1 from its operand. It is a unary operator too.

````Javascript
let x =  5 + 2 - 3 * 2 / 2;
// Ans = 4

let y = 5;
y++;
//y will be equal to 6

let z = 10;
z--;
//z will be equal to 9

let remainder = 10 % 3;
// Ans = 1 
````

Operators have _precedence_ whereby one operation is performed first before it moves on to the other incase they appear in the same code. *, / and modulo (%) have the same precedence and are handled first in an operation. - and + have the same precedence and are handled last after *, % and /.

### Assignment Operators
Assignment operators as the name suggests, are used to assign values on their right to operands on their left side. The most common assignment operator is the `=` and we have seen it before in the code blocks.
````Javascript
let x = 10;
//Assigns the value 10 to x. Thus whenever we invoke x, we get 10.
````

There are other types of assignment operators called the _Compound Assignment Operators_ which are shorthand for some operations.

````Javascript
x += 1; means x = x + 1;
//Addition Assignment 

x -= 2; means x = x - 2;
//Subtraction Assignment 

x *= 5; means x = x * 5;
//Multiplication Assignment

x /= 4; means x = x / 4;
//Division Assignment 

x %= 2; means x = x % 2;
//Remainder Assignment 
````

### Comparison Operators
The comparison operators are used to compare two operands (Binary operators). They compare whether one operand is greater than denoted by (**>**), less than denoted by (**<**), less or equal to denoted by (**<=**), greater or equal to denoted by (**>=**), equal to the other (**==**) or strictly (exactly) equal to denoted by (**===**).

````Javascript
console.log(3 > 2);
//->true (This is true because 3 is greater than 2)

console.log(5 < 7);
//->true (This is true because 5 is less than 7)

console.log(2 >= 3);
//->false (This is false because 3 is greater than 2)

console.log(2 <= 3);
//->true (This is true because 2 is less than 3)
````


The most crucial part of using the loosely equal (==) operator and the strict equal operator (===) is to know the difference between the two. The loosely equal(==) applies type conversion before comparison while the strict equal (===) compares the two operands without conversion. In Javascript, there is type conversion that is triggered by some operators before comparison. For example, a string can be converted to a number before the comparison is done. This is done internally by Javascript.

````Javascript
console.log("2" == 2);
//-> true (This comparison translates to true since the string "2" is first converted to number then compared to 2.)

console.log("2" === 2);
//-> false (This translates to false since there is no type conversion done here. The operands are compared as they are.)
````

The `Not equal (!=)` operator - Returns `true` if the operands are not equal.
The `Strict not equal (!==)` - Returns `true` if the operands are of the same type but not equal, or are of different type.

### Logical Operators
Logical operators are used with Boolean (logical) values. They return a Boolean value after the conditions set by the operands are met. There are three logical operators:
1. The logical **and**  denoted by **&&**. This operator returns true if both the operands are true. 

````Javascript
const example = true && true; //true
//-> return true since both the operands are true.

const example2 = false && true; //false
//->returns false since one of the operands is false meaning they are different.

const example3 = false && false; //false
//->returns false since all the operands are false.

const example4 = "Cats" && "Dogs" //Dogs;
//->returns Dogs.
````

2. The logical `or` denoted by `||`.It returns `expression1` if it can be converted to `true`; otherwise, returns `expression2`. Thus, when used with Boolean values, `||` returns `true` if either operand is `true`; if both are `false`, returns `false`.

````Javascript
console.log(true || false) // true.
// -> returns true since one of the operands is true.

console.log(false || false) //false
// -> returns false since all the operands are false and none can be converted to true.
````

3. The logical `not` denoted by `!`. This operator gives the opposite of the operand given. For example, `!true == false` and `!false == true`.

### Conditional Operator
The conditional operator (Also called the `Ternary operator`) is the only Javascript operator that takes three operands. It's general syntax is:  `condition ? expression to execute if the condition is met(truthy) : expression to execute if the condition is not met (falsy).`
This operator is used instead of if...else condition.

````Javascript
console.log(true ? 1 : 2) // 1
//-> returns 1 because the condition is true.

const age = 13;
age >= 18 ? console.log("Adult") : console.log("Minor") // Minor
// -> returns Minor because the condition has not been met / it is false since age is 13.
````

### Console.log function
You might be wondering what console.log in my code means. Well,
**console.log** is a function that is used to print values to the console in Javascript.

PART 2 IS ON THE WAY...HAPPY CODING.