# Session 02: JavaScript Basics

Welcome to the second session of the Javascript, you will learn the basic concepts of Javascript that qualify you to write a meaningfull code.

**Note** : you will find many usefull resources for more explanation and, you have a time at the end of the sesstion to ask mentors.

---

- **[Learning Outcomes](./learning-outcomes.md)**
- **[Research](./research-topics.md)**
- **[Resources](./resources.md)**

---

## Schechule

- 11:00 - 11:15 | [Morning challenge](#morning-challenge)
- 11:15 - 12:30 | [Comparison operators](#comparison-operators)
- Break
- 12:40 - 1:40 | [Logical operators](#logical-operators)
- Break
- 1:50 - 3:00 | [Conditional statements](#conditional-statements)

---

## <a href='#morning-challenge' id='morning-challenge'>Morning challenge </a>

1- Write javaScript code that multiply two numbers then add the result to the square root of the first number , then console the following result :

- The result is (//final result here)

**Hint** : you will use one of the Math object methods to get the square root .

2- Return the value of the number 4 to the power of 3.

**Hint** : you will use one of the Math object methods.

3- What is the result of :

var x = 16 + 4 + "Volvo";

---

> JavaScript has many types of operators and at this workshop we will discuss comparison and logical operators.

## <a href='#comparison-operators' id='comparison-operators'>
## Comparison operators </a>

In JavaScript, comparison operators are used to compare values and evaluate down to a single Boolean value of either `True` or `False`.

Comparison operator is also called binary operator because it requires two operands, one before the operator and one after the operator so, we can say that the comparison operator compares its operands and returns a logical value based on whether the comparison is true.The operands can be numerical, string, logical, or object values.

- ##### General Syntax
`operand1 operator operand2`

* ##### The table below shows Boolean comparison operators.


> #### Lets discuss them :

- ### Strict and type–converting comparisons.
JavaScript has both strict and type–converting comparisons which as follow :

1. ##### A strict comparison is only true if the operands are of the same type and the contents match.

- Identity / strict equality (===)
The identity operator returns true if the operands are strictly equal.

6 === '6'; // false
2 === 2; // true

- Non-identity / strict inequality (!==)
The non-identity operator returns true if the operands are not equal and/or not of the same type.

6 !== '6'; // true
3 !== 2; // true

2. ##### The more commonly-used abstract comparison converts the operands to the same type before making the comparison.

- Equality (==)

1 == 1; // true
'1' == 1; // true (the string is converted to a number value).

1 == true; // true (true is converted to 1).
0 == false; // true (false is converted to 0).

- Inequality (!=)

1 != 2; // true
1 != '1'; // false

3. ##### For relational abstract comparisons, the operands are first converted to primitives, then to the same type, before comparison.

4 > 3; // true
false <= 0; // true
1 >= true; // true
5 < 2; // false

> Note : Keep this note until you start with JavaScript object sesstion but, just to know If an object (object isn't a primitive type) is compared with a number or string, JavaScript attemptsnto convert the object to a primitive value, a String or Number value.

**[Click to read more about comparison operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators)**

- ### Truthy values VS Falsy values

1. Falsy value : is a value that is considered false when encountered in a Boolean context.

| Falsy values |
| ---------------------------------- |
| False |
| Null : (the absence of any value ) |
| NAN : ( not a number) |
| Undefiend : ( the primitive value) |
| 0 : (The number zero) |
| Empty string : ( '' , "" , `` ) |

2. Truthy value : All values are truthy unless they are defined as falsy.

---

## <a href='#logical-operators' id='logical-operators'>
## Logical operators </a>

Logical operators are typically used with Boolean (logical) values to return a Boolean value.However, they actually return the value of one of the specified operands, so if these operators are used with non-Boolean values, they will return a non-Boolean value.

- ### There are three logical operators in JavaScript :

**1.** **&& (AND)**
The && operation returns the first falsy value or the last value if no falsy value is found.

Example (1) :

// Evaluates conditions from left to right.
// For each operand, converts its value to a boolean. If the result is false, it stops the evaluation of the expression and returns the original value of that operand.
// If all operands have been evaluated (i.e. all conditions are truthy), then it returns the last operand value.

a1 = true && true; // t && t returns true
a2 = true && false; // t && f returns false
a3 = false && 3 == 4; // f && f returns false
a4 = 'Cat' && 'Dog'; // t && t returns "Dog"
a5 = false && 'Cat'; // f && t returns false
a6 = 'Cat' && false; // t && f returns false
a7 = '' && false; // f && f returns ''

Example (2) :

var a = 1;
var b = 2;
var c = 0;
var d = a && b;
console.log(d); // 2 returns last value
var e = c && a;
console.log(e); // 0 returns first falsy value
var f = a && b && c;
console.log(f); // 0 last value

**2.** **|| (OR)**
The OR (||) operation returns the first truthy value or the last value if no truthy value is found.

// Evaluates conditions from left to right.
// For each operand, it converts the value to a boolean. If the result is true, the evaluation of the expression stops and returns the original value of that operand.
// If all operands are evaluated (i.e. all conditions were falsy), then it returns the last operand value.
var a = 2;
var b = 0;

var c = a || b;
console.log(c); // 2 : first truthy value
c = b || a;
console.log(c); // 2 : last value

**3.** **! (Not)**
The not operation returns the inverse boolean value of the variable. It is a unary operation, so it operates on single operand.

// Converts the operand value to a boolean.

var a = 1;

!a; // return 0
!!a; // return 1

**[Click here for more explaination](https://levelup.gitconnected.com/secrets-of-logical-%EF%B8%8F-operator-in-javascript-98efbae5e8aa)**

- ### Operator precedence :

The below operations are listed based on operator precedence. i.e, ! is higher precedence and || is lower precedence.

**1. ! (NOT)**
**2. && (AND)**
**3. || (OR)**

true || (false && false); // returns true, because && is executed first

**[Click here for more explaination](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators)**

---

## <a href='#conditional-statements' id='conditional-statements'>Conditional statements</a>

In JavaScript we have the following conditional statements :

- if
- else
- else if
- switch

**Lets discuss them:**

**1. if statement**
Use if to specify a block of code to be executed, if a specified condition is true.

if (condition) {
  // block of code to be executed if the condition is true
}

---
If the time is less than 20:00, create a "Good day" greeting.

var time = 10;
var greeting;
if (time < 20) {
  greeting = "Good day";
}

**2. else**
Use else to specify a block of code to be executed, if the same condition is false.

if (condition) {
  // block of code to be executed if the condition is true
} else {
  // block of code to be executed if the condition is false
}

---
// If the time is less than 20:00, create a "Good day" greeting, otherwise "Good evening".

var time = 22;
var greeting;
if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

**3. else if**
Use else if to specify a new condition to test, if the first condition is false

if (condition1) {
  // block of code to be executed if condition1 is true
} else if (condition2) {
  // block of code to be executed if the condition1 is false and condition2 is true
} else {
  // block of code to be executed if the condition1 is false and condition2 is false
}

---
// If time is less than 10:00, create a "Good morning" greeting, if not, but time is less than 20:00, create a "Good day" greeting, otherwise a "Good evening".

var time = 23;
var greeting;
if (time < 10) {
  greeting = "Good morning";
} else if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

**4. switch**
The switch statement executes a block of code depending on different cases. it evaluates an expression.The value of the expression is then compared with the values of each case in the structure. If there is a match, the associated block of code is executed.

**Syntax**

switch (expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
  // code block
}

**Switch features :**

- The switch statement is often used together with a `break` or a `default` keyword (or both).
- The `break` keyword breaks out of the switch block. This will stop the execution of more execution of code
- The `default` keyword specifies some code to run if there is no case match.

let a = 5;
switch (a) {
  case 3:
    alert('Too small');
    break;
  case 4:
    alert('Exactly!');
    break;
  case 5:
    alert('Too large');
    break;
  default:
    alert("I don't know such values");
}

// result : Too large.

- If break is omitted, the program continues execution at the next case in the switch statement.

var foo = 0;
switch (foo) {
  case -1:
    console.log('negative 1');
    break;
  case 0:
    console.log(0);
  case 1:
    console.log(1);
    break;
  case 2:
    console.log(2);
    break;
  default:
    console.log('default');
}

// result : 0, 1

- If multiple cases match the provided value, the first case that matches is selected.

var foo = 0;
switch (foo) {
  case -1:
    console.log('negative 1');
    break;
  case 0:
    console.log(0);
    break;
  case 0:
    console.log(1);
    break;
  case 2:
    console.log(2);
    break;
  default:
    console.log('default');
}

// result : 0

- If there is no break then the execution continues with the next cases without any checks.

var a = 2 + 2;

switch (a) {
  case 3:
    alert('Too small');
  case 4:
    alert('Exactly!');
  case 5:
    alert('Too big');
  default:
    alert("I don't know such values");
}

// result :

alert('Exactly!');
alert('Too big');
alert("I don't know such values");

- Different switch cases share the same code.

var foo = 0;
switch (foo) {
  case -1:
  case 0:
    console.log(0);
    break;
  case 1:
    console.log(1);
    break;
  case 2:
    console.log(2);
    break;
  default:
    console.log('default');
}

**[Click here for more examples](https://javascript.info/switch)**

**When should you use switch instead of if/else statments ?** :+1:
switch is the perfect solution for long, nested if/else statements.