Important Topics of JavaScript You Must Know :- Part-2

Aslam Hossain
8 min readNov 3, 2020

1. Data Types in JavaScript

2. Primitive values in JavaScript

3. Event Loop in easier Way

4. All about Try() Catch()

5. Hoisting

6. Block Scope in details

7. Confusion between rest parameter and spread operator

8. Everything about default parameters

9. Block level Function

10. Array Function in depth

1. Data Types in JavaScript

JavaScript has two types of data types: Primitive Data and Non Primitive Data.

Primitive Data Type has 7types those are:-

  • Undefined
  • Null
  • Boolean
  • Numbers
  • Strings
  • Symbols
  • BigInts

Non-Primitive Data Type has 2 types those are:-

  • Object
  • Functions

But you can say non primitive data are not 2 types only one types because functions are also objects

There no Array type, no other type in javascript rather than primitive type everything is objects in javascript that’s sounds wired but that is true.

2. Primitive values in JavaScript

  • Undefined​ , when we define value but not add the value.
  • Null​ (null), when developer add intentionally null value
  • Booleans​ , whether value is true or false
  • Numbers​ (1,7,-8,8.88, and others), we used number for calculation
  • Strings​ (“hello”, “programmer”, and others), we used String for text.
  • Symbols , we hide details of code implementation
  • BigInts​ , using when do big number math.

3. Event Loop in easier Way

Event loop is very important topics of javascript how dom works… why setTimeout () execute after all the code and many more things to understand with this event loop topics. it is very important to understand event loop

  • firs time when we call bar() function then it will take place on to the stack and after that when we call foo() function then it will take place above of the bar() function and in the running execution when foo() returns then it get out of the stack and after that bar() function also out of the stack and stack being clear empty as wel.

It is like when we call a timer function and at the same time we call a asynchronous function the timer will keep time to load and in the min time asynchronous function will run before time…. but as we know javascript is a single threaded runtime then what the heck is happening and how asynchronous run before time ?? there comes the event loop. when timer is on then it will wait in the webapis and when all the other function run completed then it takes place in the event queue and it finished.

4. All about Try() Catch()

  • without learning try catching very well we cannot be a good programmer
  • because it is normal that we will write code and millions of times we have to face bugs but in case of bug fixing, how we can fix bug without knowing try catch.
  • when a bug appear in our apps. we write a try catch block and try to fix the bug but … not all them time bugs happens inside of app it can happens outside then we will write another try catch block and call that try catch block or function inside other try catch block
  • sometimes we don’t want a catch block… we want that what happens i don’t care i need to run these lines of code anyhow here comes the finally block
  • we just write try block and finally block we don’t care about the catch block the code of try block can run or not.. but the from finally block have to run must.

5. Hoisting

Look at this simple code, what you expect from this code. maybe a refrence error will be given by the browser. but no… there is no refrence error . but why not ? variable name call before it declare. here comes the concept of hoisting when javascript runtime read the code it hoisted var declare variable at the top label and that’s why in not a refrence error.

Guess what will be the ans ? can we see the output at the console… ofcourse we do. as i say earlier javascript first declare all the variable and when it say a variable with the name of var it declare at the top label as a global variable and that’s why it will define before name and after that assign name value and log the value easily .

6. Block Scope in details

watch the code carefully and say what will we get from this log ?? maybe you will think that’s an easy things to say. there will be log the name “Aslam” because the name declare before it calls and everything seems ok to me. but it’s not rather then getting the name we will get an refrence error. yes. you will be like what ?? the code your write above you say we will get that value even though the name declare after it calls .. and now you say it will give an error . how come ??

  • well let me describe that’s a another topics with hoisting and scope. that’s called block scope there is a if block and let is block scoped. Not like var it will not hoisting in the upper level and it will not available out of the scope.

if we log inside the if block we will get the expected result. but outside of the block if we call for that variable we will get an error. like let const is also block scoped . when we declare a variable with const we cannot get that outside of that block. there is a difference between let and const. a declare variable can be re assign the value but when we declare a variable with const we cannot re assign it value … it means const variable data is always constant.

7. Confusion between rest parameter and spread operator

  • We use rest parameter to pass arguments when we don’t exactly know that how many value we will get or how many value we need we will accept how many we got…
  • for iterating in a array or doing other thing when we can’t really do those things manually and easily. it is easier to use spread syntax and do lot’s of good things with it
  • We always use rest parameter as a parameter of a functions and Spread operator to use in deferent ways. to iterate array. copy one array from another , expand string etc….
  • rest parameter has only one uses on the other hand we can use spread operator for multipurpose of use.
  • Though they looks similar but they are not similar their uses are different from each other

8. Everything about default parameters

Default parameter is the things which is when we use any thing to declare by the time when we create function like function add(a,b) . suppose when we call that add function but don’t pass any value through it what it will give to us ?? nothing or undefined but.. we can do like this add(a=5, b=6) after declare like this even we would not pass any value… we still get a=5 and b=6

  • Default parameters are like when we declare a function we sometimes gives parameter on it or we can declare without parameter also.
  • But when we declare a function with parameter we also can declare a function with parameter
  • when we declare a function to add two value with two parameter like (num1,num2) we can also like (num1 =5 , num2 =10)
  • The advantage of default parameter is when we call the parameter and if we intentionally or accedently not passing the value.. still it will give an ans for the call . that is 5+10 =15.

9. Block level Function

  • carefully look at the code. what you can see is a function scope. scope is also same for the function as for the let and const.
  • hoisting means that they are behave like var and const and here as well every time in javascript we use braces like {} this it means a block . everything inside braces is block scoped no matter what it is a function or if block
  • block level function means inside a function another function in declare and another function can be return inside a function and it will call the function block

10. Array Function in depth

Array function is a function which is called function expression also. Not like our traditional function it is something different form the other function in look and also in behavior . what other function cannot do it can do easily.

  • we don’t need binding for array function and it does not have any binding
  • in Array function there is no argument
  • as i say that it does not have any binding that’s why bind and call or apply cannot be possible with it
  • we cannot use the array function as a class component constructor

look at the code, how cleaner and how easier is arrow function still valuable and working. from a lots of code it became only one line code. imagine of working in a huge project and less then 2/3 line code you need to write for every function, how many times you can save as well as how easy you can evaluate your code.

That’s it for Today see you in the next Article…. Till Then Stay Well

--

--

Aslam Hossain

Currently I’m working with M E R N stack. I love to learn new technology and explore them. I’m a simply simple person with lots of interests.