DEV Community: Jehad Hossain

JavaScript Common String Methods

Jehad Hossain — Wed, 20 Apr 2022 13:41:11 +0000

In this article I’m going to discuss with you about the string methods in JavaScript charAt, concat, includes, endsWith, indexOf, lastIndexOf, replace, slice, split, startsWith, substring, toLowercase, toUppercase, trim, trimStart, and trimEnd.

charAt(): It returns the text at the index which is given as the input.

const text = "hello world"
console.log(`text at the index 4 is ${text.charAt(4)}`);

concat(): It combines all the given strings and returns a new string.

const vowels = "aeiou"
const consonents = "bcdfghjklmnpqrstvwxyz";
const word0 = "Hello world.
const word1 = " Hi world.";
const word2 = " Bye world.";
const alphabets = vowels.concat(consonents);
const sentence = word0.concat(word1, word2);
console.log(alphabets);
console.log(sentence);

includes(): It tries to find the element which is given as input if it finds the element on the string it returns true if not then false.

const vowels = "aeiou

console.log(vowels.includes("u"));// true

console.log(vowels.includes("z"));// false

const consonents = "bcdfghjklmnpqrstvwxyz"

console.log(consonents.includes("h"))// true

console.log(consonents.includes("a"))// false"

endsWith(): It checks the last character of a string. If it matches then it returns true if not false. You can give the last character or the last word to find or match.

const text = "hello world"

console.log(text.endsWith("d")); // true

console.log(text.endsWith("world")); // true

console.log(text.endsWith("l"));// false;

indexOf(): It returns the index number of the given input if the input does not match then it returns -1. It takes two parameters the first one is the element and the second one is the starting index number which is optional.

const alphabets = "abcdefghijklmnpqrstuvwxyza"

console.log(alphabets.indexOf("i")); // output: 8

console.log(alphabets.indexOf("a", 1)); // output: 25

console.log(alphabets.indexOf("o")); // output: -1

lastIndexOf(): It searches the string for the given input from backward of the string. It returns the index number of the matched element. If no element is matched it returns -1.

const alphabets = "abcdefghijklmnpqrstuvwxyza"

console.log(alphabets.lastIndexOf("i")); // output: 8

console.log(alphabets.lastIndexOf("a")); // output: 25

console.log(alphabets.lastIndexOf("o")); // output: -1;

replace(): It replaces the given input from the string and returns a new string. It takes two parameters first one is which word to replace and the second parameter is what will be set on the replaced position if the second parameter is not given it returns undefined on the replaced position. You can use regex as the first input.

const text = "The quick brown Bear jumps over the lazy dog."

const regex = /Bear/;

console.log(text.replace("Bear", "goat"));

console.log(text.replace(regex, "lion"));;

slice(): It returns a piece of text from a string. It takes two parameters one is the starting index and the second is the ending index. If you just give the first index then it will copy all the elements of a string after that index and return a new string. If you give a two-parameter then it will copy from the start index to the end index and return a new string.

const text = "The quick brown fox jumps over the lazy dog."

console.log(text.slice(10)); // output: brown fox jumps over the lazy dog.

console.log(text.slice(10, 20)); // output: brown fox

// if you use negative index then it will count from the end of string

console.log(text.slice(-9, -1)); // output: lazy dog

split(): It divides the string by following the pattern which is given as input. Then it puts the divided parts into an array and returns the array.

const text = "The quick brown fox jumps over the lazy dog."

const words = "ab, eb, ib, ob, ub";

console.log(text.split(" "));
console.log(words.split("b"));

startsWith(): It checks the string if it has started with the word or letter which has been given as the input to this method. If the word matches then it returns true if not then false.

const text = "The quick brown fox jumps over the lazy dog."

console.log(text.startsWith("T")); // output: true

console.log(text.startsWith("The")); // output: true

console.log(text.startsWith("A")); // output: false

console.log(text.startsWith("quick")); // output: false;

substring(): It returns the part of a string. It takes two parameters first one is the starting index and the second one is the ending index. If you don’t give the second parameter then it will return everything after the starting index as a new string.

const text = "The quick brown fox jumps over the lazy dog."

console.log(text.substring(10)); // output: brown fox jumps over the lazy dog.

console.log(text.substring(4, 15)); // output: quick brown

// if you give greater value on the first parameter then it will automatically swap the parameters

console.log(text.substring(15, 4)); // output: quick brown;

toLowerCase(): Makes all the words of the calling string into lower case. Then returns them as a string.

const text = "The Quick Brown Fox Jumps Over The Lazy Dog."

console.log(text.toLowerCase());

toUpperCase(): Makes all the words of the calling string into upper case. Then returns them as a string.

const text = "The quick brown fox jumps over the lazy dog."

console.log(text.toUpperCase());

trim(): It removes all the white spaces from starting and ending of the calling string. And returns a new string.

const text = "      Hello world     "

console.log(text.trim()); // output: Hello world;

trimStart(): It removes the white spaces from the beginning of the calling string. And returns a new string.

const text = "      Hello world     "
console.log(text.trimStart());;

trimEnd(): It removes the white spaces from the end of the calling string. And returns a new string.

const text = "      Hello world     "
console.log(text.trimEnd());

useCallback, useMemo, useRef, and useReducer hook

Jehad Hossain — Tue, 11 Jan 2022 14:52:53 +0000

In this article, I’m going to discuss the use of useCallback, useMemo, useRef, and useReducer hook.

useCallback hook: It memorizes a callback function. So new instances of that function are not created. And it will only forget it when the dependency value is changed.

import React, { useCallback, useState } from "react";
import "./App.css";
import Title from "./components/Title/Title";

function App() {
 const [increase1, setIncrease1] = useState(0);
 const [increase5, setIncrease5] = useState(0);

 const handleIncrease1 = useCallback(() => {
   console.log("inside 1");
   setIncrease1(increase1 + 1);
 }, [increase1]);

 const handleIncrease5 = useCallback(() => {
   console.log("inside 5");
   setIncrease5(increase5 + 5);
 }, [increase5]);

 return (
   <div className="App">
     <Title />
     {/* increase value by 1 */}
     <h4>Increase value by 1</h4>
     <p>{increase1}</p>
     <button onClick={handleIncrease1}> Increase by 1</button>

     {/* increase value by 5 */}
     <h4>Increase value by 5</h4>
     <p>{increase5}</p>
     <button onClick={handleIncrease5}> Increase by 5</button>
   </div>
 );
}

export default App;

UseMemo hooks: It’s a little different from useCallback hook. useCallback memorizes the whole function but it memorizes only the return value of a function. And it forgets that when the dependency value is changed.

import React, { useCallback, useMemo, useState } from "react";
import "./App.css";
import Title from "./components/Title/Title";

function App() {
 const [increase1, setIncrease1] = useState(0);
 const [increase5, setIncrease5] = useState(0);

 const handleIncrease1 = useCallback(() => {
   console.log("inside 1");
   setIncrease1(increase1 + 1);
 }, [increase1]);

 const handleIncrease5 = useCallback(() => {
   console.log("inside 5");
   setIncrease5(increase5 + 5);
 }, [increase5]);

 const isEvenOrOdd = useMemo(() => {
   let i = 0;
   while (i < 1000000000) i++;
   return increase1 % 2 === 0;
 }, [increase1]);

 return (
   <div className="App">
     <Title />
     {/* increase value by 1 */}
     <h4>Increase value by 1</h4>
     <p>{increase1}</p>
     <p>{isEvenOrOdd ? "Even" : "Odd"}</p>
     <button onClick={handleIncrease1}> Increase by 1</button>

     {/* increase value by 5 */}
     <h4>Increase value by 5</h4>
     <p>{increase5}</p>
     <button onClick={handleIncrease5}> Increase by 5</button>
   </div>
 );
}

export default App;

useRef: If we want to get a element or its value then we use document.getElementById or document.getElementsByClassName etc. You can use them on react but it is not a good practice. To solve this react give us useRef hook. You just have to say which node element you want to reference. Then it will return the referenced node in the referenced variable.current

import React, { useEffect, useRef } from "react";

const Form = () => {
  const inputRef = useRef();

  useEffect(() => {
    console.log(inputRef.current.value);
  }, []);
  return (
    <div>
      <input ref={inputRef} />
    </div>
  );
};

export default Form;

If you have to use ref to a child component then you have to use forward ref to pass ref from parent to child component

Parent component where the ref is located

import React, { useEffect, useRef } from "react";
import "./App.css";
import Input from "./components/Input";

function App() {
 const inputRef = useRef();

 useEffect(() => {
   inputRef.current.focus();
 });
 return (
   <div className="App">
     <Input placeholder="Enter your name" ref={inputRef} type="text" />
   </div>
 );
}

export default App;

Child component where I want to use the ref

import React from "react";

const Input = ({ type, placeholder }, ref) => {
 return <input ref={ref} type={type} placeholder={placeholder} />;
};

const forwardedInput = React.forwardRef(Input);

export default forwardedInput;

Here’s a little trick of using useRef. When you want to use a function which is scoped inside the useEffect hook.

import React, { useEffect, useRef, useState } from "react";

const Clock = () => {
 const [date, setDate] = useState(new Date());
 const intervalRef = useRef();

 const tick = () => {
   setDate(new Date());
 };

 useEffect(() => {
   intervalRef.current = setInterval(tick, 1000);

   // do the cleanup stop the timer
   return () => {
     clearInterval(intervalRef.current);
   };
 }, []);
 return (
   <div>
     <p>Time: {date.toLocaleTimeString()}</p>
     <p>
       <button onClick={() => clearInterval(intervalRef.current)}>Stop</button>
     </p>
   </div>
 );
};

export default Clock;

useReducer: useReducer is like the Array.prototype.reduce method in vanilla JS. The difference is that reduce method takes a reducer function and initialValue but useReducer takes the reducer function and initialState as the second parameter. Reduce method returns a single value but useReducer returns a tuple [newState, dispatch]

import React, { useReducer } from "react";
import "./App.css";

const initialState = 0;
const reducer = (state, action) => {
 switch (action) {
   case "increment":
     return state + 1;
   case "decrement":
     return state - 1;
   default:
     return state;
 }
};
function App() {
 const [count, dispatch] = useReducer(reducer, initialState);
 return (
   <div className="App">
     <p>{count}</p>
     <button onClick={() => dispatch("increment")}>Increase</button>
     <button onClick={() => dispatch("decrement")}>Decrease</button>
   </div>
 );
}

export default App;

You can use useReducer in a complex situation where you have different as for example counters and they have a different functions to update their value.

import React, { useReducer } from "react";

const initialState = {
 counter: 0,
 counter2: 0,
};
const reducer = (state, action) => {
 /* you have to merge object immutably to do that use the spread operator */
 switch (action.type) {
   case "increment":
     return { ...state, counter: state.counter + action.value };
   case "decrement":
     return { ...state, counter: state.counter - action.value };
   case "increment2":
     return { ...state, counter2: state.counter2 + action.value };
   case "decrement2":
     return { ...state, counter2: state.counter2 - action.value };
   default:
     return state;
 }
};

/* you have to merge state immutably */
function Counter() {
 const [count, dispatch] = useReducer(reducer, initialState);
 return (
   <React.Fragment>
     {/* counter 1 */}
     <div>
       <p>Counter1: {count.counter}</p>
       <button
         onClick={() =>
           dispatch({
             type: "increment",
             value: 1,
           })
         }
       >
         Increment by 1
       </button>

       <button
         onClick={() =>
           dispatch({
             type: "decrement",
             value: 1,
           })
         }
       >
         Decrement by 1
       </button>
     </div>

     {/* counter 2 */}
     <div>
       <p>Counter2: {count.counter2}</p>
       <button
         onClick={() =>
           dispatch({
             type: "increment2",
             value: 1,
           })
         }
       >
         Increment2 by 1
       </button>

       <button
         onClick={() =>
           dispatch({
             type: "decrement2",
             value: 1,
           })
         }
       >
         Decrement2 by 1
       </button>
     </div>
   </React.Fragment>
 );
}

export default Counter;