Day 1 - 2020.05.19

Basic JS - Part 1

Let's assume we all have no problem with the introduction. So let's carry on. To get started with React.js, first we need some basic knowledge about JS. As we all have Node installed in our Windows machine. We can just run any JS code without facing any difficulties, just open your CMD and type node. That's all, now you should see a > (arrow pointing right, so you are ready for upcomings)

Todays sections :

These are the basic JS, we must need to know for React.js, so hold tight.

Print

To print something, we will use the methods below :

> console.log("hello world")
hello world
undefined
> console.debug("hello world")
hello world
undefined
> console.error("hello world")
hello world
undefined
> console.info("hello world")
hello world
undefined
>

All prints exactly the same. Right ? And there are many more methods for logging or printing(actually to assist these or customize these functions output), but these are the 4 methods for printing. We will eventually find out when and where to use which one. For now we will be using console.log(...) only. Actually the don't print exactly the same, when we will be doing this on a browser or on a colorized environment, we will find out the difference.

And another question is wht there is a undefined at the end of every output ? - Just ignore it. And DON'T try to even search on Stackoverflow or Quora, and try to disble this. If you do so, you will face serious issues in debugging your code in the future. For now just bear in mind that it just prints whatever those funtions returns you have entered.

Variable and Primitive types

First stop variables

> var a//we have just declared a variable named a
undefined
> console.log(a)                  //let's see what this a contains
undefined                         //it contains undefined, unlike C, it doesn't contain grabage value, as we haven't initialized the variable a
undefined
> a=19                            //let's assign value to a
19
> console.log(a)                  //and try to see it's value again
19                                //ok, it holds 19 as we have assigned 19 to it
undefined
> a="maifee"                      //let's try assigning something again and of different type, as 19 was number and "maifee" is string
'maifee'
> console.log(a)                  //and print again
maifee                            //it prints 'maifee', why ? - cause JS is loosely typed language, means we can change any variables type, means - it doesn't restrict variable of changing types
undefined
> console.log(b)                  //let's try printing something, we haven't defined yet
Thrown:
ReferenceError: b is not defined  //we get error, as we should, as it is not declared
> var b                           //we have declared another variable called b
undefined
> console.log(b)                  //lets try once again
undefined                         //it's fine
undefined
>

We have 9 types in JS. Why don't we just directly try them :

> console.log(typeof 19)
number                      //19 is a number
undefined
> console.log(typeof 'maifee')
string                      //"maifee" or 'maifee' is a string
undefined
> console.log(typeof false)
boolean                     //true and false are of type - boolean
undefined
> console.log(typeof {})
object                      //{} looks like an object(more precicely JSON object), and it is an object
undefined
> console.log(typeof [])
object                      //arrays are treated as object
undefined
> var c=null
undefined
> console.log(typeof c)     
object                      //variable c has been created and assigned with some value, but this value doesn't represent any specific type for now, so it is also treated as object
undefined
> var d
undefined
> console.log(typeof d)     //variable d create but not assigned, so no need to even think about type of d, so d is undefined
undefined
undefined
> console.log(typeof function test(){})
function                    //you know it, when you see it
undefined
> console.log(typeof null)
object                      //funny right ? 
undefined
> console.log(typeof undefined)
undefined                   //now i'm serious. Actually - is JS, when variable are created and not assigned it is assigned with 'undefined', but if you initialize it with null or later assign it to null, the reason is explained just check last few comments(may last 4th from here?!?)
undefined
>

We have seen 'number','string','boolean','object','function' types for now, and already seen 'undefined'. Other types are - 'symbol', 'bigint'. And maybe in future we won't be seeing them. LOL. And 'null'? - Can you really have something with typeof null ? Cause 'undefined' and 'object' are better player here.

Let's try to know about let, by example :

> {var x=435;console.log(x)}
435
undefined
> {var x=435;{console.log(x)}console.log(x)}          //line 1
435
435
undefined
> {var x=435;{console.log(x+"inside")}console.log(x+"outside")}         //line 2
435inside
435outside
undefined
> {var x=435;{var y=45654;console.log(x+"inside");}console.log(x+"outside")}          //line 3
435inside
435outside
undefined
> {var x=435;{var y=45654;console.log(x+"inside x");console.log(y +"inside y")}console.log(x+"outside x")}          //line 4
435inside x
45654inside y
435outside x
undefined
> {var x=435;{var y=45654;console.log(x+"inside x");console.log(y +"inside y")}console.log(x+"outside x");console.log(y+"outside y")}         //line 5
435inside x
45654inside y
435outside x
45654outside y
undefined
> {var x=435;{var y=45654;let z=1;console.log(x+"inside x");console.log(y +"inside y")}console.log(x+"outside x");console.log(y+"outside y")}         //line 6
435inside x
45654inside y
435outside x
45654outside y
undefined
> {var x=435;{var y=45654;let z=1;console.log(x+"inside x");console.log(y +"inside y");console.log(z+"inside z");}console.log(x+"outside x");console.log(y+"outside y");console.log(z+"outsize z")}         //line 7
435inside x
45654inside y
1inside z
435outside x
45654outside y
Thrown:
ReferenceError: z is not defined
>

What actually happened here ? -

Now, lets try to know about const

> const ff=5
undefined
> console.log(ff)
5
undefined
> ff=55
Thrown:
TypeError: Assignment to constant variable.
> const test_var;
Thrown:
const test_var;
      ^^^

SyntaxError: Missing initializer in const declaration
>
Do we really need an explaination here ? - We can't just reassign constant variables. And const variables, must be initialized, when declared.

Conclusion

If anyone has any issue or clarification, feel free to mail at : maifeeulasad@gmail.com with subject "React Tutorial - day - 1", or create a bug report in my git repository : here. Give title like - "Day - 1 - little description"

Next : 2020.05.23 or 2020.05.24, try to keep up like this till I intigrate with a way more managable calander or something