DEV Community: mimansha-swarup

JavaScript Hoisting. What happens behind JavaScript ?

mimansha-swarup — Thu, 26 Aug 2021 10:53:15 +0000

If you are looking for hoisting in JavaScript you might come across this definition."Hoisting is JavaScript's default behavior of moving declarations to the top".

But what actually happens behind JavaScript ?

Hoisting reefer to the process where compiler allocate memory for variable and function before executing code.

NOTE:- Declarations that are made using var are initialized with a default value of undefined. Declarations made using let and const are not initialized as part of hoisting.

Lets see how JavaScript work Behind?

When a JavaScript Code is executed Execution Context is created.

What is Execution Context?

Execution Context is an abstract concept that hold information about environment within which code is being executed
When we run JavaScript Code Execution Context is Created in two phase Memory Creation and Code Execution

if we break down Execution Context we have 2 component

Memory
Code

Memory Part is also called as Variable Environment.
Code Part is known as Thread of Execution.

Consider a code block

var n=2;
function message(){
console.log("Hello JavaScript");
}
console.log(n);
message();

Output of this code block will be

2
Hello JavaScript

When we will run this code Global Execution Context will be created and memory will be allocated to each variable and function after that only code will be allocated.
when variable n is encountered JavaScript reserve a memory space for n. Then JavaScript will store a special value undefined
and for function it will store entire function.

This is what happens under the hood.
Now consider

console.log(n);
message();
var n=2;
function message(){
console.log("Hello JavaScript");
}

we are logging 'n' and calling function before declaring , we should be getting error but JavaScript works differently like we saw memory is allocated before execution
that's why output will be

undefined
Hello JavaScript

so this is how it works you can access these variable and method even before actually initialization in your code

Learn Value, Types and Operators in JavaScript

mimansha-swarup — Fri, 04 Dec 2020 21:04:36 +0000

So in this series of blog I will be blogging chapters of Eloquent JavaScript

Let's see what is data and how machine interpret data.We store our data on Electronic devices for example we stored a image on a computer now this image is been stored in a long sequence of bits
and bits have two value 0 and 1, true and false,high volt and low volt etc

Table of Content

Numbers
Special Numbers
String
Boolean Value
Logical Operator
Ternary Operator
Empty Value

Numbers

name itself is self explanatory that this means numerical values for example 13 is a number.
JavaScript use 64 bit to store number value, the largest number that can be stored is 2 power 64 i.e 2^64 which is around 18000000000000000000 in short 18 followed by 18 zeros but there is a catch this is theoretical but the problem is js also need to store -ve values also so for that JS use one bit to store - or +if number is -ve it will have 1 and even if value is +ve 0 will be used

FunFact : In real JS can store upto 9000000000000000 which is 9 followed by 15 zeros

Special Number

There are 3 special numbers in JS who are termed as number but are nothing like number. These are

Infinity
- Infinity
NaN Infinity Name itself says that this value refers to infinite value and - Infinity means negative of infinite

FunFact: If we subtract Infinity from Infinity we will get NaN

NaN means not a number this you will get NaN as result when a calculation has done but result is not meaningful for eg: 0/0

Strings

so string are basically any text whether it's a letter ,word or sentence wrapped with single quotes or double quotes back tick any value warped with above characters are considered as String eg:

" This is a String !"
'This is a String too.'
`This is String with Back Tick`

There are some special charterers for string one is newline character( \n )

console.log("example of\nnew line character")
/*example of
new line character*/

on string we can't perform any arithmetic operation but anyway we van add strings this is called as string concatenation
"app" + "le" this will result "apple"

Back tick string are called template literal
using Back tick we can print the value of variable inside string this can be done using ${} in between curly braces you need to write variable name eg:

`The area of square is ${variableName}`

Boolean

boolean are the true false value. If the expression is correct then it will give True and if wrong False value is given by the expression on evaluation

console.log(3>1) True
console.log(3<1) False

FunFact: Js try to accept every calculation/command you give even if its odd and try to return a value for eg: if you add string with a number '3'+1 o/p will be 31

Logical Operators (and,or,not)

and(&&) : if both the value are true it will give true if one or more value is false it will return false
or(||) : if one or more value is true it will return true if both the value are false it will return false
not(!) : if value is true it will return false if value is false it will return true > Note: || has lowest Priority after that && and after that comparison operator(==,<,>,<=,>=,!=) have third lowest priority and then the rest example:

1 + 1 == 2 && 10 * 10 > 50 first arithmetic operators will be evaluated

Note: in arithmetic *,/,% operators have highest priority then +,-

10*10 will be evaluated

1 + 1 == 2 && 100 > 50 now 1+1 will be evaluated

2== 2 && 100> 50 next comparison operators will be evaluated 2==2 and 100>50

True && True

True

Ternary Operator

ternary operators are kind of shortcut of Conditional statement or one liner of if else Syntax:

Condn ? st1 : st2

if the condition is evaluated as true statement 1 will be executed and if it is evaluated as false statement 2 will be executed

Empty Values

these are another two special values null and undefined which indicate absence of meaningful value

Automatic Type Conversion

js automatically tries to convert type of variable on operation and it tries to accept all kind of operations example:

and in this process JS tries to do operation on odd values like it's adding sting to a number and giving output as string so we will not be getting expected type of value this is called as type coercion

console.log(null || "name")
// name
console.log("hello" || "name")
// hello

Here the || operator will return the left value if it can be converted to true and will return the right value otherwise.
That's why at first we are getting name and in second line output is hello

Making Node CLI(Command Line Interface) quiz app

mimansha-swarup — Mon, 30 Nov 2020 21:20:08 +0000

Let's Make a Quiz App which you can share with our family and Friends

So to make this quiz app we will use Repl.it, you can also use VS Code or any other code editor.

Setting up the enviorment

We will use two node modules

readline-sync: It can take input in various manner from user
chalk: it is an expressive api which adds colors and styling

So if you are using repl you can directly use require function
to include these modules example:

const rs =require('readline-sync');
const chalk = require('chalk');

If you are on VS Code
open the project folder on terminal and use command
npm init -y
this mean to initialize package manager and -y means yes
so after this just run this command to get above mentioned modules
npm install --save readline-sync chalk
now make a JavaScript file and write the require statement mentioned above

Note: In repl you don't need to manually install modules

Figuring out quiz app

So we want to make a quiz app which will take input for asked question and check whether the answer is correct or not -For every correct answer we will increment marks by 2 and for incorrect answer we will reduce by 1
Also we will have to see if user beat the High score

Planing a bit more precise

we will greet the user and ask for the user name
We need a global variable to keep account of score
We need a function to evaluate whether user answer is correct or not
We need a array of questions and answers which can be done by using array of objects with key vale question and answer
We need a for loop to iterate this array -At last need to check whether User Defeated High score or not

Coding Part

we have already imported required module and now we have to ask user name and greet as well as create a global variable, ok so it will be like this

// importing
const rs =require('readline-sync');
const chalk = require('chalk');

console.log(chalk.green.bold("Welcome to The Game!!!\n"));

// asking name
var playerName = rs.question("HEy Whats ur Name : ");

//greeting user
console.log(chalk.yellow(`Welcome ${playerName}\n`));


//global variable to keep account of score
var score = 0;

rs.question() helps us to take user input from console read this for more info

chalk.bold means make the string bold while printing it and chalk.yellow means the printed string should be of color yellow read this for more info

Now we will implement the function which will check user answer is correct or not if answer is correct we will increment the score by 2 and print correct in green color, and if it's not correct then we will print wrong in red color and print the correct answer after conditional statement we will just print some '-' for styling and the updated score of user

// a function to check whether user answer is correct or not
function gamePlay(questions , correctAnswer){

    var answer  = rs.question(chalk.cyanBright
(questions));
    if(answer == correctAnswer){
        console.log(chalk.green('\tcorrect'));    
        score = score+2;
    }
    else{
        console.log(chalk.red('\twrong'));    
        console.log(chalk.greenBright("Correct Answer is: "+correctAnswer));
        score = score-1;

    }
        console.log(chalk.yellowBright('Your score is  :' + score));    
        console.log(chalk.blue('\n----------------\n'));    

}

now we will create array of objects with key question and answer

qusArray = [
    {
    qus:"What is my name : ",
    ans:"mimansha"
},
{
    qus:"are you reading this : ",
    ans:"yes"
},
 {
    qus:"which year covid widely spread : ",
    ans:"2020"
}

];

Now we will use for loop and iterate through every object and while iterating we will be calling the function ,let's see how it is done and printing final score after for loop cause when this loop will end all qus has been asked and user can't answer any more question

//calling function
for(let i =0 ; i<qusArray.length;i++){
    gamePlay(qusArray[i].qus,qusArray[i].ans);

}
console.log('Final score is  :' + score);

This might look bit confusing let me explain
gamePlay(qusArray[i].qus,qusArray[i].ans);
see function gameplay has 2 parameter questions and correctAnswer so we are iterating through array by qusarray[i]
if i =0 first object will be accessed now we want the string stored with the key qus example:
console.log(qusArray[0].qus)
output will be What is my name
in same way we are accessing the ans string.

Now we will make Dummy High Score array and printing the high score value also we are checking highest score of our dummy data and storing it inside a variable

//array of highscore
highScore = [
    {
        username: "Naruto",
        point: 2
    },
    {
        username: "MEE6",
        point: 1
    },
    {
        username: "random",
        point: 0
    }
];

//displaying highscore
console.log(chalk.bgYellow(" High Score "));

console.table(highScore);

// getting high score
var max = highScore[0].point;
for (let i = 1; i < highScore.length; ++i) {
  if (highScore[i].point > max) {
    max = highScore[i].point;
  }
}

This is The Last part of quiz app , We have to check if user beat the high score or not and print statement according to that ,let's do it


//checking if user beat the hihg score
if(score>max){
    console.log(chalk.inverse.bold("\n Congrats u beat high score \n"));
}
else{
    console.log(chalk.inverse.bold("\n Better Luck Next Time \n"));

}

so final code will be something like this

const rs =require('readline-sync');
const chalk = require('chalk');

console.log(chalk.green.bold("Welcome to The Game!!!\n"));
// naae input
var playerName = rs.question("HEy Whats ur Name : ");
//greeting user
console.log(chalk.yellow(`Welcome ${playerName}\n`));
//global varibale to keep account of socre
var score = 0;
// a function to check whether user answer is correct or not
function gamePlay(questions , correctAnswer){
    var answer  = rs.question(chalk.cyanBright
(questions));
    if(answer == correctAnswer){
        console.log(chalk.green('\tcorrect'));    
        score = score+2;
    }
    else{
        console.log(chalk.red('\twrong'));    
        console.log(chalk.greenBright("Correct Answer is: "+correctAnswer));
        score = score-1;
    }
        console.log(chalk.yellowBright('Your score is  :' + score));    
        console.log(chalk.blue('\n----------------\n'));    
} 
//creating qus answer  objects
var firstQus = {
    qus:"What is my name : ",
    ans:"mimansha"
};
var secondQus = {
    qus:"are you reading this : ",
    ans:"yes"
};
var thirdQus = {
    qus:"which year covid widely spread : ",
    ans:"2020"
};
// list of all qus answer
qusArray = [firstQus,secondQus,thirdQus];
//calling function
for(let i =0 ; i<qusArray.length;i++){
    gamePlay(qusArray[i].qus,qusArray[i].ans);

}
console.log('Final score is  :' + score);    
//array of highscore
highScore = [
    {
        username: "Naruto",
        point: 2
    },
    {
        username: "MEE6",
        point: 1
    },
    {
        username: "random",
        point: 0
    }
];
//displaying highscore
console.log(chalk.bgYellow(" High Score "));
console.table(highScore);
// getting high score
var max = highScore[0].point;
for (let i = 1; i < highScore.length; ++i) {
  if (highScore[i].point > max) {
    max = highScore[i].point;
  }
}
//checking if user beat the hihg score
if(score>max){
    console.log(chalk.inverse.bold("\n Congrats u beat high score \n"));
}
else{
    console.log(chalk.inverse.bold("\n Better Luck Next Time \n"));

}

When you put all the code and run it output will be like this

You can share your Repl with your friends with some changes on link exapmle: https://repl.it/@MimanshaSwarup/cli-app#index.js

by removing file name and add this at ?outputonly=1&lite=true ending of link example: https://repl.it/@MimanshaSwarup/cli-app?outputonly=1&lite=true