JS Fun

1. Try and Catch

The try statement allows you to define a block of code to be tested for errors.

The catch statement allows you to define a block of code to be executed if an error occurs in the try block.

try {
 Block of code to try
}
catch(err) {
 Block of code to handle errors
}

2. The Concept of Data Types

Data types are an important concept.

• When adding a number and a string, JavaScript will treat the number as a string.

var x = 20+ “Laptop”;

• JavaScript evaluates expressions from left to right.

var x = 25 + 5+ "Laptop";

• JavaScript Types are Dynamic

var x; // Here x is undefined
x = 5; // Here x is a Number
x = “Devil”; // Here x is a String

3. Array Function

Array function is a function which is called function expression also. This is not like our regular function it is something different fromthe other function in behavior and also in look .

• In the Array function, there is no argument
• we cannot use the array function as a class component constructor
• we don’t need binding for array function and it does not have any binding

4. Default parameter in Javascript

The default parameter is a way to set default values for function parameters a value is no passed in (ie. it is undefined).In a function, Ii a parameter is not provided, then its value becomes undefined. In this case, the default value that we specify is applied by the compiler.

• Default parameters are like when we declare a function
• when we declare a function to add two value with two-parameter like (num1,num2) we can also like (num1 =8 , num2 =12)
• But when we declare a function with a parameter we also can declare a function with a parameter

5. All about Blog Scope

let value = true;
if(value) {
  let name = "Maruf";
} else {name= "something"; }
console.log(name)

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

Now, let me describe that’s another topic with hoisting and scope. that’s called block scope there is an if block and let is block scoped. Not like var, it will not be hoisted in the upper level and it will not available out of the scope.

6. Scope

In JavaScript, the scope defines the clarity and accessibility of a variable or other resource in the source code.

Global Scope

Global scope in JavaScript defines the outside area of the function. Variable that declare inside the global scope can be accessible in any other scopes.

Local Scope

When we declare a variable inside the functions, it becomes local to the function and is considered as a local scope variable. A local scope can be classified as a function scope and block scope.

Function Scope

When we declare a variable in a function, the variable is accessible only within the function. We can’t access it outside the function. var is used to declare a variable for function-scope accessibility.

Block Scope

Block scope is the area with if the condition or switch statement or for and while loops. Usually, we see a block with { }. In ES6, two keywords are allowed to declare variables in the block scope: let, const. Those are accessible only in the corresponding block.

7. Closure

In JavaScript, it is the most important concept. The closure is something that is widely discussed but still confusing. Well!! Let’s discuss the closure:

From a function when an inner function is being called or return, then a close environment is created. They keep a reference of an external variable. This is called closure. In the following code, inner forms a closure with the lexical environment of the execution context created when foo is invoked, closing over variable secret:

function foo() {
  const secret = Math.trunc(Math.random()*100)
  return function inner() {
    console.log(`The secret number is ${secret}.`)
  }
}
const f = foo() 
f() 

8. Closure

Bind creates a new function that will force the this inside the function to be the parameter passed to bind().

Here’s an example that shows how to use bind to pass a member method around that has the correct this:

var myButton = {
  content: 'OK',
  click() {
    console.log(this.content + ' clicked');
  }
};
myButton.click();
var looseClick = myButton.click;
looseClick(); // not bound, 'this' is not myButton - it is the globalThis
var boundClick = myButton.click.bind(myButton);
boundClick(); // bound, 'this' is myButton

Output:

OK clicked
undefined clicked
OK clicked

9. Apply

apply works by spreading out the array and passing each element of that array as a different parameter. This is all determined by the order in which they appear in the array.

Example:

function printThings(pre, a, b, c) {
  var el = document.querySelector('pre'); // Put the text into an element
  el.innerHTML += pre + '> 1: ' + a + '\n';
  el.innerHTML += pre + '> 2: ' + b + '\n';
  el.innerHTML += pre + '> 3: ' + c + '\n\n';
}
// Calling it normally
printThings('Normal', 'A', 'B', 'C');
// Call using apply
// Notice how the array is in the same order as when we called it normally
printThings.apply(null, ['Apply (1)', 'A', 'B', 'C']);
// Now we'll rearrange the arguments
printThings.apply(null, ['Apply (2)', 'C', 'A', 'B']);

10. Hoisting

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. Therefore we can say that no matter where functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local.

Stay tuned =)