DEV Community: Mozibur Rahman

React Basic (Part-1)

Mozibur Rahman — Fri, 07 May 2021 14:59:45 +0000

What is React?
jsx
dom
components
Lifecycle of Components
Events in React
props
hooks
useState
useEffect

JavaScript (Part-2)

Mozibur Rahman — Thu, 06 May 2021 13:55:51 +0000

Function

We use a function for performing operations. Sometimes we have to perform similar operations in many places of code. A function's code can be used several times, so we don't need to write repetitive code. To declare a function, we use the function keyword, and to call a function we use functionName();

//function declaration
function functionName() {
  console.log("Hello!");
}
//function calling
functionName(); //"Hello!"

Function with Parameters

Function basic structure is first function keyword, then the name of the function, then parameters between parentheses. If there is no parameter, it is empty. If there is more than one parameter then we have to put a comma between them. Finally function body between curly braces.

function name(parameter1,parameter2) {
  //body
}

Below there is a add function, that takes two parameters (a and b) and add them.

function name(a,b) {
   let sum = a+b; 
   console.log(sum);
}

add(5,6); // 11

Function with Default Value

If a function takes one or more parameters, but during function calls, if a parameter is not passed, then the value of the parameter becomes undefined. So, to avoid this we can set a default value. If no value is passed for the parameter, it will use the default value.

function square(n){
   console.log(n*n);
}

square(); // undefined
square(2); // 4

But if we set default value.

function square(n = 3){
   console.log(n*n);
}

square(); // 9
square(2); // 4

Arrow Function

An arrow function expression is a compact version of a traditional function. If a function doesn't have a name identifier, it is called an anonymous function. Every arrow function is an anonymous function. Example of Arrow Function.

()=> {
   //function body
   return;
}

//If there is a single statement
()=> console.log("Hi!");

// If there is a single parameter
msg => console.log(msg);

if there are multiple parameters
(a,b) => console.log(a+b);

Spread Operator

Spread operator refers to ellipsis of three dots(...). We used the spread operator when we need to use all elements of an array or object.

let fruit = ['Apple','Banana','Orange'];
let moreFruit = ['Pine-Apple','Plam', ...fruit];

// Object Example
let obj1 = { p : 1, q : 2 };
let obj2 = { r : 3 };
let obj3 = {...obj1, ...obj2};

console.log(obj3); // {p: 1, q: 2, r: 3}

Use in Math Function.

let value = [12,33,42,65,36,78];
Math.max(...value); // 78

Rest Parameters

In javascript, we can call a function with any number of arguments, and there will be no error because of it. But if the number of arguments is fixed then the arguments without parameters will be lost. Rest parameter is used to store the value of all remaining arguments. It allows us to use an indefinite number of parameters as an array. The rest parameter has to be the last parameter and it is prefixed with the three-dots ( ...).

function checkingRestParameter(a,b,...args) {
   console.log(a);
   console.log(b);
   console.log(args);
}

checkingRestParameter(1,2,3,4,5,6);
//output
//1
//2
//[3,4,5,6]

Global Scope

If a variable is declared out of any function and then it becomes a global variable. We can access and modify a global variable from anywhere. Its scope is global.

let num = 10;
console.log(num); // 10

function modifyNum() {
    num = 30;
}

//Before function call
console.log(num); // 10

modifyNum();

//Before function call
console.log(num); // 30

Local Scope

If a variable is declared inside a function, then it can only be accessed within that function. A local variable cannot be accessed or modified outside the function declaration. The scope of A local variable is called local scope or function scope.


function modifyNum() {
    let num = 10;
    console.log(num); // 10
    num = 30;
    console.log(num); // 30
}


modifyNum(); // 10 30

console.log(num); // Throws Error because num is only accessible within the function.

Block scope

Block scope is the scope of a variable within the curly braces that it has been declared. A block can be a function, an if statement, or a loop. let is block-scoped and var is function scoped.

function checkingScope() {
    if(true){
        var x =10;
    }
    //x can be accessible because it is function scoped.
    console.log(x); // 10
}

Now an example of block scope.

function checkingScope() {
    if(true){
        let x =10;
    }
    //x cannot be accessible because it is block scoped.
    console.log(x); // error
}

Error Handling 'try...catch'

We use the try-catch statement to handle errors that may occur in a block of code without stopping the program. In the try statement, we write the code that needs to be tested during execution. If an error occurs code that we write in the catch block will execute. If no error is thrown, the catch block is skipped.

try {
    //Code-block that needs to be checked.
}
catch(err) {
    // Code block that will be execute if exception is thrown.
}

try {
    checkingFunction();
}
catch(error) {
    console.log(error.message);
}

Basic JavaScript (Part-1)

Mozibur Rahman — Wed, 05 May 2021 14:38:32 +0000

Data Types

There are two basic data types in Js. They mainly represent two different ways that data are stored in memory.

Primitive Data Types: data stored as a single value and they are immutable.

string ('Hi!', "Hello")
number (12,14.23)
BigInt (22n)
boolean (true, false)
symbol
null
undefined.

Non-Primitive Data Type: data stored as value correspond to memory reference and the values are mutable.

Object

Checking Data Type

To check the data type of a variable or literal, we can use the typeof operator.
Syntax: typeof operand
It will return the type.

console.log(typeof 23); //"number"
console.log(typeof 23); //"number"
console.log(typeof NaN); //"number"

console.log(typeof "Hi!"); //"string"
console.log(typeof true); //"boolean"
console.log(typeof false); //"boolean"

console.log(typeof {a: 1}); //"object"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"

Dynamically Typed Language

In a programming language, if variables value are not bound to single data types, then it is called dynamically typed language. Javascript is a dynamically typed language. A variable can number and then it can be reassigned to string or other data types.

// no error
let greetings = "hi";
greetings = 789;

Number

There is a total of five types of numerical values in Number Type.

integer
float

let value = 456; // integer
value = 4.56; // floating point number

Others three are special Numeric values.

Infinity: It is greater than any number.
-Infinity: It is lower than any number.
NaN: It means there is a computational error or incorrect or undefined operational result.

let value = ( 1 / 0 ); // Infinity
value = "asdf" / 2 ; // NaN

Number Parsing

We can parse a string to number using the parseInt and parseFloat function. they are top-level functions and not associated with any local object. They are the function property of the global object. The parseInt() function parses a string and returns an integer. The parseFloat() function parses a string and returns a floating-point number.
If the first character cannot be converted to a number, parseInt() and parseFloat() returns NaN.

//Example of parseInt()
parseInt("11")
// Output: 11
parseInt("11.29")
// Output: 11
parseInt("10 20 30")
// Output: 10
parseInt("Hello29")
// Output: NaN


//Example of parseFloat()
parseFloat("11")
// Output: 11
parseFloat("11.29")
// Output: 11.29
parseFloat("10 20 30")
// Output: 10
parseFloat("Hello29")
// Output: NaN

Number Rounding

There are built-in functions for rounding:

Math.floor(): Moves down.
Math.ceil(): Moves Up.
Math.round(): Rounds to the nearest integer

Math.floor(2.1) // 2
Math.floor(-2.1) // -3

Math.ceil(2.1) // 3
Math.ceil(-2.1) //2

Math.round(4.1) // 4
Math.round(4.5) // 5
Math.round(3.6) // 4

String

A string is a single or a series of characters. In javascript, strings are surrounded by quotes. There are three types of quotes.

single Quotes
Double Quotes
Backticks

let string1 = 'Single quotes are ok too';
let string2 = "Double Quotes";
let string3 = `Backticks Quotes`;

There are no difference between double and single quotes. They are simple quotes. But, Backticks strings are called template strings because variables and expressions can be embedded into them.

let name = "Rishu";
let greetings = `Hi!, ${name}`;
let a = 10, b=15;
let sum = `Sum = ${a+b}`;

Case Change

There are two very helpful functions to change the case of a text.

toLowerCase()
toUpperCase();

Example of toLowerCase()

let text = "HI!, EARTH";
console.log(text.toLowerCase());
// Output: "hi!, earth"

Example of toUpperCase()

let text = "Hello, everyone";
console.log(text.toUpperCase());
// Output: "HELLO, EVERYONE"

Trimming a string

In javascript, we can use the trim() method to remove whitespace (spaces, tabs, etc) from both the start and end of a string. It is a method of the String object. It returns a string without start and end whitespaces.

let checkingString = "   Hello, How are you?     ";
console.log(checkingString.trim());
// Output: "Hello, How are you?"

Check string

startsWith() and endsWith() are string method. With startsWith(), we can check Whether a string starts with the specified prefix and With endsWith(), we can check Whether a string ends with the specified suffix.

Example of startsWith()

let checkingString = 'Hello World!';

console.log(checkingString.startsWith('Hello')); // true
console.log(checkingString.startsWith('Heppo')); // flase

Example of endsWith()

let checkingString = 'Hello World!';

console.log(checkingString.endsWith('World!')); // true
console.log(checkingString.endsWith('World')); // flase