Part - 1 → JavaScript Fundamentals

Important

Table of ContentAll# Switch StatementContentsStatement and Expression# The

conditional (Ternary) operator (small version of if/else)How to:Contents

Variable and Naming

Variables are like a box that can hold a piece of data and I can call it any where around the
file.
Variable: let, const, var.

let: let is used to define a data that will change later in the code. Like something will
change it.
const: is used for a constant data, it will never change, just will hold the value.
var: its same as let, but very old, can cause vital errors. We don't use it. its a mix of
both let and const.

Naming: naming a variable is very important then it seem.

the name should describe what the variable holds.

In js we use camelcase names like the first alfebet will be lower case rest can be upper
case.
There is lots of names that is kept for JavaScript, I can't use a name like let, const or
other variable in the name.
and I can't use things like (-, , , ;, &, #) etc

Data Types :
There is total 7 data types in JavaScript:

Type Used For

Number just for numbeers
String text
Boolean holds 2 value(true & false)
 Type Used For
Undefined I can just leave a value with name and it will show me undefined
null just null
symbol
bigint for very big number

I can use a property called typeof before the data; to see what type of data it is.

Assignment operators:
Example data: let i = 10

operators Define
i+ = 5 this will add the value 5 to the i value
>15
i* = 5 this will multiply the value 5 with 'i'
i++ this will add 1 to the value
i-- this will decrease the value by 1

Comparison Operators:
Comparison operators are used to produce a Boolean value:

Symbol Workings
> Gretter Than
< Lower Than
>= Gretter and Equal
<= Lower and Equal

Operator Precedence:
Precedence is which value will be execute first: there are around 20 operator precedence:
but the first one is grouping () :List of Operator precedence.

Templet Literals:
Its used to make a dynamic string, normally I can't add/call any variable in a string, but I can
with templet literals. I have to use back ticks: (``) instead of ('') & ("") . Then a dollar
sign with second brackets.

const age = 18;

consol.log(`My age is ${age}`); // I can put anything in it.

If/else statement:
Its used to take decisions based on Boolean values: like if its something is true then proceed
the if block if not then else block.

if (18 = 18) { // true

consol.log(`Hey its 18 = 18`);
} else {
consol.log(`Hey its not 18`);
}

Type Coarcion & Type conversion

Type conversion:
I can convert any thing to string or number using those methods:

const change = number('strign');

const chagne2 = string(number);
// usualy the input value comes string.

Type Coarsion:
Its happens in the JavaScript engine.
If I plus 3 string it will just make a result by keeping string side by side:

const plse = 'string' + 'String'

// result: strignstring.
// its happens with number strings as well
const plse2 = '8' + '8';
// result: 88
But things kind of turns around when I use (-ve) instead of (+ve):
its just reduce the number with the value:
this only happens with (-ve) but if I use it on string it will show me errors:

const plse3 = '8' - 2;

// reslut: 6
const plse4 = ('8' + '8') - 8;
// result: 80

The Equality & Differential operators:

Equality:
There is 2 operators.

1. == its uses type coarcion, and can call errors.

2. === its the common and safest. It will masures the both side strictly.
Others:
3. != lossly
4. !== if its strictly deferent than other side then log.

The Boolean Logic:

logic operators:

1. ! it will just reverse the Boolean value

2. && - If one value is false then the entire output will be false

And: && True False

True: True False
False: False False
3. ` ` - If one value is true then the output will be true as well:
OR: || True False
True True True
False True False

# Switch Statement
Switch statement is basically used to write complicated if else statement. When there is lot
of option to chose form — we use switch statement instead if/else statement, switch
statement is very easy to use in this situation. Its an conditional statement. Consider this
block of code -

// besic switch statement

const case = 'Value'; //the input

switch (case) {
case "Value":
console.log('loged value');
break;
case "Value-1":
console.log('loged value-1');
break;
default:
console.log('not a valid day');
break;
} //output: 'loged value'

Contents
Switch: the switch statement is actually is a block and its use one value and compare it with
other value that are present,

Case: case is the value that the input value will be compared,

Display Value: in the middle of case and break I can put any value that I want to display on
the page

Break: break is the end of the one option block,

and this makes one block →, but I can make as much block as I want.

// one option block

case "Sunday":
console.log('its sunday and todays reword is book reading');
break;

→ I can also set lots of value for log same thing for both. I just have to place the value with
other value that will log the same thing.

// lots of value for loging same thing.

const case = 'Value'; //the input

switch (case) {
 case "Value":
case "Value-1":
console.log('loged value');
break;
default:
console.log('not a valid day');
break;
}

after all block set in its position I can add a final block like an else block on the if/else
statement, and its called default; I also need to put an break on the end to end the block. →

// final block
default:
console.log('not a valid day');
break;

Important

I can replicate this switch statement with if/else statement// switch statement using
if/else statement
const days = 'Thursday'; // input value

if (days = 'Friday') {
console.log('hey its working now');
} else if (days = 'Saturday') {
console.log( today is ${days}, may allah save me from daingers );
} else if (days === 'Sunday') {
console.log( today is ${days}, may allah save me from daingers );
} else {
console.log('some thing went wrong');
}

Statement and Expression

Statement is like sentence it self and expression is those word that sentence made of.
Basically statement is sentence and expression is word.

Statement —> it don’t produce any thing but make something from the things that are
produces — like an expression,

Expression —> it produces some type of values.

consider this →
 5+5 // its an expression coz its produce a value
'Nafiz' // also an expression
true && true && !false // aslo expression

// the if block is an statement

if (1 === 1) {
const str = 'Nafiz'; // its an expession in side an statement
}
// thats why we call if/else as statement.

# The conditional (Ternary) operator (small

version of if/else)
Important

G:\free course\Udemy - The Complete JavaScript Course 2023 From Zero to

Expert!\02 - JavaScript Fundamentals – Part 1\Video - 24

→ its basically used in a replacement of if/else statement where JavaScript expect

expression. This operator will come in handy when I will think about writing productive and
less code.

How to:
1. I have to make a argument like if/else, for example: 100 > 10 (here 100 is bigger than
10 = true; and its an argument).
2. Define the if block and its content by writing ( ? ) after the question mark I have to put
any content that I want to display. (ternary operator is a expression so I don’t have to
write anything to display it. I just have to put the expression to a variable and log it to
the console)
3. After if block I have to define a else block as well; by writing ( : ) right after if ( ? ) block.

Contents
? - this is the thing that define its a ternary operator

: - for defining an else block

 // ternary oparetor
const age = 18;

arrgument if block else block

age > 37 ? "Eat anything" : "Eat healty";

// on a variable
const age = age > 37 ? "Eat anything" : "Eat healty";
console.log(age);

→ Its actually an expression so I can write it like other expression.

// as an expression
const age = 18;

const ageResult = age >= 18 ? "Eat anything" : "Eat water";

console.log(ageResult);
// result: Eat anything

→ now its an expression so I can use it on template literal as well.

// using ternary expression on template literals

const age = 18;

console.log(`You can ${age >= 18 ? "Eat anything" : "Eat water"}`);

→ its actually another form of if/else statement so I can replicate it into if/else; it will be lots
of work to use it using if/else statement where javascript expect and expression.

// ternary into if/else

const age = 18;

let ageResult2;
if (age >= 18) {
ageResult2 = "Eat anything";
} else {
ageResult2 = "Eat Water";
} //result: Eat enything

Important

I had an challenge about this ternary operator.It goes like this-The questionChallenge
Number-4 Steven wants to build a very simple tip calculator for whenever he goes
eating in arestaurant. In his country, it's usual to tip 15% if the bill value is between 50
and300. If the value is different, the tip is 20%.Your tasks:Calculate the tip, depending
 on the bill value. Create a variable called 'tip' forthis. It's not allowed to use an if/else
statement � (If it's easier for you, you canstart with an if/else statement, and then try to
convert it to a ternaryoperator!)Print a string to the console containing the bill value, the
tip, and the final value(bill + tip). Example: “The bill was 275, the tip was 41.25, and the
total value316.25”Test data: Test for bill values 275, 40 and 430My AnswerAt first the
problem seem very difficult but when I split them into smaller steps—they seem
nothing, I just gone according to those steps I created and the Answer is ready. Al
though, I used spiritual power: Allah has helped me, Allah is everything. And I also used
my subconscious mind power, but in the end I able to answer the question very
productively and I were that much confident about that question; I didn’t even feel the
need to watch solution.I just saved some time doing so, I though dividing the problem
into smaller steps can take long time but in the end it actually takes very less if I
calculate in a right way like I don’t need to watch solution coz I am very confident about
my solution it is cause of breaking the problem into smaller steps.Steps:-step-1: if the
value 50 < bill and bill < 300 then (I have to use ternary operator iensted of if/else
statement)step-2: calculate the tip by 15% and log it.step-3: or else calculate the tip by
20% and log it.step-4: log everything together.Solution:const foodBill = 430;
const tip = Number(50 <= foodBill && 300 >= foodBill ? ${(foodBill / 100) * 15} :
${(foodBill / 100) * 20} );

// console.log(tipNumber);
// console.log(foodBill);
// console.log(tip);
console.log( The bill was ${foodBill}, the tip was ${tip} and the total value is
${foodBill + tip} );