DEV Community: Cronj IT Technologies

Javascript String Methods | Properties | Objects

Cronj IT Technologies — Tue, 20 Apr 2021 02:42:09 +0000

A javascript string is data type in any programming language and it’s used to store text rather than numbers. In Javascript, strings are used for manipulating the text. A string can be declared with enclosing of single quotes or double quotes or backticks like below examples.

var singleQuote = 'single-quote';

var doubleQuote = "double-quote";

var backTicks = back-ticks;

You can use quotes inside the string, as long as they didn’t match with surrounding quotes.

var person = "It's me..";

var company = 'This is called "Cronj" ';

var company = "This is called 'Cronj’ ";

Javascript Strings have to place within the quotes, otherwise, it will misunderstand:

var country = "This is "India” country'';

In the above example, the string will take up to “This is “. So, The solution here is to use backslash(). Backslash character converts special characters into the string character.

Eg: Double Quote (\’)

var country = "This is \"India\" country";

Output: This is “India” country

Eg: Single Quote (\”)

var country = 'This is \'India\' country';

Output: This is ‘India’ country

Eg: Backslash ()

var specialCharacter = "This character \ is called backslash";

Output: This character \ is called backslash.

Find String Length:

In Javascript, we have a built-in property called length. By using length property we can find the length of a javascript string.

var alphabates = "Cronj";

var strLength = alphabates.length;

Long code lines break:

Programmers are used to avoiding code lines above 80 characters. In Javascript best practice is to break line after an operator

Eg: document.getElementById(“string”).innerHTML = “Hello world”;

We can also break the code within the text also, like below by using the backslash.

Eg: document.getElementById(“string”).innerHTML = “Hello \

World”;

Some browsers do not allow the spaces after . So safer way to break like using javascript string concatenation using the ‘+‘ operator.

Eg: document.getElementById(“string”).innerHTML = “Hello” +

“World”;

Sting Objects:

In Javascript, String can be objects. Here strings are also be defined as objects with the keyword new:

var personNameString = "John";

var personNameObject = new String("John");

Here typeof(personNameString) will return string and typeof(personNameObject) will return object. But the better way to define string without new, because it will affect execution speed and it causes unexpected results.

String properties:

Constructor returns the string’s constructor function. Length returns the length of a javascript string. Prototype allows you to add methods and properties to an object.

String Methods:

charAt():
charAt() method will returns the character at the specified position(index).

Eg:

var exString = "Hello world";

var response = exString.charAt(6);

console.log(response);

Output: w

charCodeAt():
charCodeAt() method will return the Unicode of the character at the specified index in a javascript string.

Eg:

var exString = "Hello world";

var response = exString.charAt(6);

console.log(response);

Output: 72

concat():
concat() method is used to join strings. This method doesn’t change the existing string, It will return the new concatenated string as output.

Eg:

var string1 = "Hello";

var string2 = "world";

var response = string1.concat(string2);

console.log(response);

Output: Helloworld

You can concatenate two or more javascript strings.

Eg:

var string1 = "Hello";

var string2 = " world";

var string3 = " Have a nice day!!";

var response = string1.concat(string2, string3); console.log(response);

Output: Hello world Have a nice day!!

[Read: Node Js: Non-blocking or asynchronous | Blocking or synchronous]

endsWith():
endsWith() method determines whether a javascript string ends with specified string or not. This method will return true if a string exists or it will return false if the string does not exist.

Eg:

var string1 = "Hello world, Have a nice day!";

var a = string1.endsWith("day!");

console.log(a);

Output: true

fromCharCode():
fromCharCode() method converts the unicode character.

Eg:

var string1 = String.fromCharCode(67);

console.log(string1);

Output: C

includes():
includes() method determines whether a string contains in the characters of the specified javascript string, and returns true if the string contains the characters and false if not contains.

var string1 = "Hello world, Have a nice day!";

var a = string1.includes("Have");

Output: true

indexOf():
indexOf() method determines the first occurrence of a specified value in a javascript string and it returns -1 if the value is not found in our occurrence.

var string1 = "Hello world, Have a nice day!";

var a = string1.indexOf("Good");

Output: -1

lastIndexOf():
lastIndexOf() method returns the position of the last occurrence of a specified value in a javascript string and it returns -1 if the value is not found in our occurrence.

Eg:

var string1 = "Hello world, Have a nice day!";

var a = string1.lastIndexOf(" day!");

Output: 24

match():
match() method will search a string for a match against a regular expression and returns the matches as an array.

Eg:

var string = "The rain in India stays mainly in the plain";

var response = string.match(/ain/g);

console.log(response);

Output: ain,ain,ain

repeat():
repeat() method always returns a new string with a specified number of copies of the string.

Eg:

var string = "Winter season! ";

var response = string.repeat(2);

console.log(response);

Output: Winter season! Winter season!

replace():
replace() will search a javascript string for a specified value or a regular expression and returns a new string where the specified values are replaced.

Eg:

var string = "Winter season!";

var response = string.replace("!", "@");

console.log(response);

Output: Winter season@

search():
search() method searches a javascript string for a specified value or a regular expression and returns the position of the match.

Eg:

var string = "Winter season!";

var response = string.search("season");

console.log(response);

Output: 7

slice():
slice() method to extract a part of the javascript string and it returns a new string. It takes two parameters like start and endpoints that what we want to extract.

Eg:

var string = "Winter season!";

var response = string.slice(0, 6);

console.log(response);

Output: Winter

split():
split() method is used to split a javascript string into an array of substrings and it returns a new array

Eg:

var string = "Winter season!";

var response = string.split(" ");

console.log(response);

Output: Winter, season!

[Read: Node JS WebSocket: Examples | Chat Features | Client-Server communication]

substr():
substr() method always extracts parts of a string, beginning at the character at the specified position, and returns the specified number of characters.

Eg:

var string = "Winter season!";

var response = string.substr(0, 8);

console.log(response);

Output: Winter s

substring():
substring() method will extract the characters from the two specified positions in parameters and returns the new substring. Two parameters are starting position and ending positions.

Eg:

var string = "Winter season!";

var response = string.substring(0, 8);

console.log(response);

Output: Winter s

toString():
toString() method returns the value of a string. If the value in the variable is object then it will convert as a string object.

Eg:

var string = "Winter season!";

var response = string.toString();

console.log(response);

Output: Winter season!

trim():
trim() method removes the white spaces of a sting in both(starting and ending) sides.

Eg:

var string = " Winter season! ";

var response = string.trim();

console.log(response);

Output: Winter season!

If you’ve any doubts, please let us know through comment!!

Be it a software developer, programmer, coder, or a consultant, CronJ has it all. CronJ has been a trustworthy company for startups, small companies, and large enterprises. Hire the web of experienced ReactJS Development Services for your esteemed project today.

Let CronJ assist you..!

Thank you !!!

Memory Management in Javascript | Memory life cycle

Cronj IT Technologies — Fri, 16 Apr 2021 04:33:32 +0000

Memory Management! When things (string, array, object) are created, memory is allocated to them in JavaScript. Unlike Low-Level Programming Language C, JavaScript does not have alloc(), malloc(), free() primitive to do a job for them. Memory is automatically freed when that is no longer useful.

This process is called Garbage Collection. Word Automatically brings confusion to developers, that they need not worry about Memory, And this is a mistake, Sir!

In memory management, its life cycle
Allocate Memory(explicit or implicit depending on a programming language for us it is implicit)
Use it.
Release it.
This is a general life cycle.

Allocation Of Memory in JavaScript for memory management
When values are assigned to any variable memory is assigned to it.

var a = 10;

var b = "CronJ";

var c = {

d : 1,
e: 'name'
}

var f = [1,2,3,4,5]

var g = new Date();

Release when the memory is not needed anymore
This is the climax scene. When? how? to decide memory is no longer useful. High-Level Programming Language like Javascript has some software called Garbage Collector, which does the job of automatic memory deallocation. This is the approximation Process. Exact point from memory management which that memory is not gone any benefits to an application is not solved yet.

Garbage Collector
Finding the exact point from which memory will be no longer useful is not solved yet. This is the general problem any Programming language face.

Reference-counting garbage collection:
Any variable which has zero reference points can be considered to garbage.

Let’s take an example. Taken Mozilla developer Guide.

var o = {
a: {
b: 2
}
};
// 2 objects are created. One is referenced by the other as one of its properties.
// The other is referenced by virtue of being assigned to the 'o' variable.
// Obviously, none can be garbage-collected

var o2 = o; // the 'o2' variable is the second thing that
// has a reference to the object
o = 1; // now, the object that was originally in 'o' has a unique reference
// embodied by the 'o2' variable

var oa = o2.a; // reference to 'a' property of the object.
// This object has now 2 references: one as a property,
// the other as the 'oa' variable

o2 = 'yo'; // The object that was originally in 'o' has now zero
// references to it. It can be garbage-collected.
// However its 'a' property is still referenced by
// the 'oa' variable, so it cannot be freed

oa = null; // The 'a' property of the object originally in o
// has zero references to it. It can be garbage collected.

Limitation: cycles
There are limitations to it. If two objects are referencing to each other then they will be thrown out of the scope of garbage collection.

var a = {};

var b = {};

a.c = b;

b.c = a;

Conclusion:
Although JavaScript has software called Garbage Collector. We have to take care that we are not causing circular referencing to variables. We are not coding anything which will lead to throwing variables from out of Garbage collection Cycle.
Be it a software developer, programmer, coder, or a consultant, CronJ has it all. CronJ has been a trustworthy company for startups, small companies, and large enterprises. Hire the web of experienced ReactJS Development Services for your esteemed project today.

Redux Middleware: A Perfect Beginner’s Guide

Cronj IT Technologies — Tue, 06 Apr 2021 10:36:27 +0000

Redux Middleware: What struck your mind when you first heard the term ‘Middleware’? Let’s first try to understand it with the most general definition:-

Middleware offers a means for communicating with the action being dispatched before they reach the reducer.

Before understanding Redux Middleware, you should have a clear concept of redux. So let’s have a brief introduction about redux.

Redux
Redux is an open-source JavaScript library for front-end development. It’s an application data flow architecture. It is used with React to solve the ‘state transfer problem.’ It maintains a single immutable store tree to keep the state of the whole application which can’t be changed directly. A new object of the state is created when something changes (using actions and reducers). Redux has become popular because of its simplicity and small size(2 KB).

Redux Middleware
Redux middleware acts as a medium between dispatching an action and handing over the action to the reducer. It listens to all dispatches and executes code with the details of the actions and the current states. It is possible to combine multiple middlewares to add new features, and each middleware does not require an understanding of what happened before and after.

Action -> Middleware -> Reducer

Examples of middleware include, handle asynchronous requests(like HTTP call to the server), logging, routing, etc.

Middlewares are mainly used to handle asynchronous actions in your application. Redux’s popular middleware libraries that allow for side effects and asynchronous actions are Redux-thunk and Redux-Saga.

Redux thunk
Redux thunk is the most popular middleware that allows you to call action creators, which then returns a function instead of an action object. This function receives the store’s dispatch method, which is then used to dispatch the regular synchronous actions within the function’s body once the asynchronous operations have been completed. It is a programming concept where the function(thunk) is used to delay the evaluation of the operation or process. It is used for communicating asynchronously with an external API(Application Programming Interface) to fetch or save data.

Let’s see how you can include Redux-thunk in your application.

Installation & Setup

$ yarn add redux-thunk

Or using npm:

$ npm install redux-thunk

Let’s try to understand how ‘thunk’ actually works by implementing a small example of fetching the details of a particular user by hitting an API.

// Index.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import * as serviceWorker from './serviceWorker';

import userDataReducer from './Reducer/reducer';

import {Provider} from 'react-redux';

import {createStore, applyMiddleware} from 'redux';

import thunk from 'redux-thunk';

const store= createStore(userDataReducer, applyMiddleware(thunk))

ReactDOM.render(, document.getElementById('root'));

serviceWorker.unregister();

// Api

Here you can hit the API and return the response back to the calling function.

import axios from 'axios';

const reposApi = {

getUserDetails: () => {

   let url = 'https://users/getUserData/1';

   return axios.get(url);

}

export default reposApi;

// Action creator

It returns a function that calls an API, which further returns a promise. Once it has been resolved, it dispatches an action again, which is then matched to the corresponding action-type and eventually reaches the reducer.

import * as actionType from './actionType';

import reposApi from '../Api/repos';

export function getUserDetails(){

return (dispatch) => {

reposApi.getUserDetails()

.then(response => {

dispatch(getUserDetailsAction(response));

})

.catch(err => {

console.log("error occurred ====>>>", err);

})

}

export const getUserDetailsAction = item => {

return {

   type: actionType.GET_PROFILE,

   payload: item

}

// Reducer

Reducer updates the state object after performing the required calculation.

import * as actionType from "../Action/actionType";

const initialState = {

profile: {}

};

const userDataReducer = (state = initialState, action) => {

switch (action.type) {

case actionType.GET_PROFILE:

 return {

   ...state,

   profile: action.payload.data

 };

default:

   return state;

}

export default userDataReducer;

Let’s move on to the next Redux middleware.

Redux Saga
Like Redux-Thunk, Redux-Saga is a middleware library used to handle side effects and asynchronous action calls in a redux app in an effective way. It achieves this by using the generator function. Generator functions are not like the actual functions which we know, but rather it is a special type of function which has the ability to pause in the middle of the execution and resume later. Not only this, but you can also do this as many times as you want. Inside the generator function, there is a keyword ‘yield’, which is used to pause the execution. It is favored over thunk, because of easy testability.

Here is the syntax of a generator function:-

function *function_name{

yield “Hi, I am generator”;

}

Let’s try to understand Redux-Saga by implementing a small example in which we will hit an API to fetch the user.

// Action Creators

const requestUser = () => {

return { type: 'REQUESTED_USER' }

};

const requestUserSuccess = (data) => {

return { type: 'REQUESTED_USER_SUCCESS', url: data.message }

};

const requestUserError = () => {

return { type: 'REQUESTED_USER_FAILURE' }

};

const fetchUser = () => {

return { type: 'FETCHED_USER' }

};

// Sagas

function* watchFetchUser() {

yield takeEvery('FETCHED_USER', fetchUserAsync);

}

function* fetchUserAsync() {

try {

 yield put(requestUser());

 const data = yield call(() => {

   return fetch('https://getData/userDetails/user')

           .then(res => res.json())

   }

 );

 yield put(requestUserSuccess(data));

} catch (error) {

 yield put(requestUserError());

}

// Reducer

const initialState = {

url: '',

error: false

};

const reducer = (state = initialState, action) => {

switch (action.type) {

 case 'REQUESTED_USER':

   return {

     url: '',

     error: false

   };

 case 'REQUESTED_USER_SUCCESS':

   return {

     url: action.url,

     error: false

   };

 case 'REQUESTED_USER_FAILURE':

   return {

     url: '',

     error: true

   };

 default:

   return state;

}

};

// Store

const sagaMiddleware = createSagaMiddleware();

const store = createStore(

reducer,

applyMiddleware(sagaMiddleware)

);

sagaMiddleware.run(watchFetchUser);

Working
The component first dispatches the action FETCHED_USER. Then, the watcher saga (watchFetchUser) takes the dispatched action and calls the worker saga (fetchUserAsync), followed by the execution of the API call. At last, an action to update the state is dispatched (success or failure).
Be it a software developer, programmer, coder, or a consultant, CronJ has it all. CronJ has been a trustworthy company for startups, small companies, and large enterprises. Hire the web of experienced ReactJS Development Services for your esteemed project today.