DEV Community: Rohit Singh Rajput

20 tricky JavaScript string-related program output questions

Rohit Singh Rajput — Wed, 04 Sep 2024 06:12:07 +0000

Below is a compilation of 20 challenging JavaScript string-related programming questions, each accompanied by its solution and a brief explanation. These questions delve into various string manipulations, covering topics like concatenation, character extraction, case transformations, and more. Ideal for testing and enhancing your understanding of JavaScript’s string handling capabilities, these questions provide a comprehensive overview of common scenarios and nuances in string operations, offering valuable insights for developers looking to deepen their JavaScript expertise.

Question 1:

console.log('hello' - 'world');

Answer:

NaN

Explanation:

Subtracting strings is not a valid operation in JavaScript, resulting in NaN (Not a Number).

Question 2:

console.log('hello' + 'world');

Answer :

helloworld

Explanation :

Using the + operator concatenates strings, producing the combined string 'helloworld'.

Question 3:

console.log('hello'.length);

Answer :

5

Explanation :

The length property returns the number of characters in the string, which is 5 for 'hello'.

Question 4:

console.log('hello'.charAt(0));

Answer :

h

Explanation :

The charAt(0) method returns the character at the specified index, here 'h' at index 0.

Question 5:

console.log('hello'.toUpperCase());

Answer :

HELLO

Explanation :

toUpperCase() converts all characters in the string to uppercase, resulting in 'HELLO'.

Question 6:

console.log('hello' === 'Hello');

Answer :

false

Explanation :

Strict equality (===) compares both value and case, so 'hello' is not equal to 'Hello'.

Question 7:

console.log('hello'.split(''));

Answer :

['h', 'e', 'l', 'l', 'o']

Explanation :

split('') splits the string into an array of characters.

Question 8:

console.log('hello'.replace('l', 'L'));

Answer :

heLlo

Explanation :

replace('l', 'L') replaces the first occurrence of 'l' with 'L'.

Question 9:

console.log('hello'.indexOf('l'));

Answer :

2

Explanation :

indexOf('l') returns the index of the first occurrence of 'l' in the string.

Question 10:

console.log('hello'[1]);

Answer :

e

Explanation :

Accessing the character at index 1 using square brackets results in ‘e’.

Question 11:

console.log('hello'.concat(' ', 'world'));

Answer :

hello world

Explanation :

The concat method appends 'world' to 'hello' with a space in between.

Question 12:

console.log('hello' + 5);

Answer :

hello5

Explanation :

The + operator concatenates the string 'hello' with the number 5.

Question 13:

console.log('hello' - 5);

Answer :

NaN

Explanation :

Subtracting a number from a string results in NaN.

Question 14:

console.log('hello'.repeat(3));

Answer :

hellohellohello

Explanation :

The repeat method duplicates 'hello' three times.

Question 15:

console.log('hello'.endsWith('o'));

Answer :

true

Explanation :

Checks if ‘hello’ ends with the character ‘o’, resulting in true.

Question 16:

console.log('hello'.includes('ll'));

Answer :

true

Explanation :

The includes method checks if the string contains the specified substring ('ll' in this case).

Question 17:

console.log('hello'.slice(1, 4));

Answer :

ell

Explanation :

The slice method extracts a portion of the string (from index 1 to 3).

Question 18:

console.log('hello'.padStart(8, '_'));

Answer :

___hello

Explanation :

The padStart method pads the string with underscores to reach a length of 8 characters.

Question 19:

console.log('hello'.charAt(10));

Answer :

''

Explanation :

Accessing a character beyond the string’s length returns an empty string.

Question 20:

console.log('hello'.substring(2, 4));

Answer :

ll

Explanation :

The substring method extracts characters from index 2 to 3 (excluding the end index).

Conclusion

In conclusion, the set of 20 JavaScript string-related programming questions serves as a robust resource for developers aiming to refine their skills. Covering diverse aspects of string manipulation, the questions explore concatenation, character extraction, case transformations, and other fundamental operations. The accompanying answers and explanations offer a comprehensive understanding of intricate scenarios, fostering a deeper insight into JavaScript’s string handling capabilities. These questions not only facilitate proficiency in string-related concepts but also encourage critical thinking and problem-solving skills. Whether preparing for interviews or seeking to bolster one’s JavaScript expertise, this collection provides a valuable opportunity for developers to master the nuances of string manipulation in the JavaScript programming language.

All React hooks in one short.

Rohit Singh Rajput — Sat, 24 Aug 2024 12:20:05 +0000

React hooks are a powerful feature in React that allow you to add state and other features to functional components. They were introduced in React 16.8 and have since become an integral part of React development. In this blog, we’ll explore some of the most commonly used React hooks and provide easy-to-understand examples.

Lets take look at the various hooks :

Basic Hooks

useState
useEffect
useContext

Additional Hooks

useReducer
useMemo
useCallback
useRef
useLayoutEffect
useImperativeHandle
useDebugValue

1: useState hook

The useState hook allows you to add state to a functional component. It takes an initial value as an argument and returns an array with two elements: the current state value and a function to update it.

Here’s an example of how to use useState to add a counter to a functional component:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment= () => {
    setCount(count + 1);
  }
const decrement = () => {
    setCount(count - 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>decrement</button>
    </div>
  );
}

In this example, we start with a count of 0 and update it every time the “Increment” and ‘’decrement’’ button is clicked.

2: useEffect hook

The useEffect hook allows you to perform side effects in a functional component. Side effects include things like fetching data from an API, updating the DOM, or subscribing to an event.

Here’s an example of how to use useEffect to fetch data from an API:


import React, { useState, useEffect } from 'react';

export function App(props) {
  const [data, setData] = useState([]);

   useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);


  return (
    <div className='App'>
      <h1>Hello React.</h1>
      <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>

    </div>
  );
}

In this example, we fetch data from an API and update the component’s state with it using the setData function.

3: useContext hook

The useContext hook allows you to access a context object in a functional component. Context is a way to pass data down the component tree without having to pass props manually.

Here’s an example of how to use useContext to access a theme context:

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemeButton() {
  const theme = useContext(ThemeContext);

  return (
    <button style={{ background: theme === 'dark' ? 'black' : 'white', color: theme === 'dark' ? 'white' : 'black' }}>
      Toggle Theme
    </button>
  );
}

In this example, we create a theme context with a default value of “light” and use the useContext hook to access it in the ThemeButton component.

4: useReducer hook

The useReducer hook allows you to manage complex state in a functional component. It’s similar to the useState hook, but instead of a simple value, it takes a reducer function and an initial state.

Here’s an example of how to use useReducer to manage a shopping cart:

import React, { useReducer } from 'react';

function cartReducer(state, action) {
  switch (action.type) {
    case 'add':
      return [...state, action.payload];
    case 'remove':
      return state.filter(item => item.id !== action.payload.id);
    default:
      return state;
  }
}

function ShoppingCart() {
  const [cart, dispatch] = useReducer(cartReducer, []);

  const addItem = (item) => {
    dispatch({ type: 'add', payload: item });
  }

  const removeItem = (item) => {
    dispatch({ type: 'remove', payload: item });
  }

  return (
    <div>
      <h2>Shopping Cart</h2>
      <ul>
        {cart.map(item => (
          <li key={item.id}>
            {item.name} - ${item.price}
            <button onClick={() => removeItem(item)}>Remove</button>
          </li>
        ))}
      </ul>
      <button onClick={() => addItem({ id: 1, name: 'Item 1', price: 9.99 })}>Add Item</button>
    </div>
  );
}

In this example, we define a cartReducer function that takes a state and an action and returns a new state based on the action type. We then use the useReducer hook to manage the cart state with the cartReducer function.

We also define two functions, addItem and removeItem, that dispatch actions to the cartReducer to add or remove items from the cart state.

Finally, we render the shopping cart with the cart items and buttons to add or remove items. When the buttons are clicked, the addItem or removeItem functions are called to update the cart state using the dispatch function returned by the useReducer hook.

5: useCallback hook

The useCallback hook allows you to memoize a function so that it’s only re-created when its dependencies change. This can help improve performance by preventing unnecessary re-renders.

Here’s an example of how to use useCallback to memoize a function:

import React, { useState, useCallback } from 'react';

function SearchBar({ onSearch }) {
  const [query, setQuery] = useState('');

  const handleQueryChange = useCallback(event => {
    setQuery(event.target.value);
    onSearch(event.target.value);
  }, [onSearch]);

  return (
    <input type="text" value={query} onChange={handleQueryChange} />
  );
}

In this example, we define a SearchBar component that takes an onSearch prop function. We use the useCallback hook to memoize the handleQueryChange function so that it’s only re-created when the onSearch function changes.

6: useMemo hook

The useMemo hook allows you to memoize a value so that it’s only re-computed when its dependencies change. This can help improve performance by preventing unnecessary re-computations.

Here’s an example of how to use useMemo to memoize a calculated value:

import React, { useState, useMemo } from 'react';

function ExpensiveCalculation({ a, b }) {
  const result = useMemo(() => {
    console.log('Calculating...');
    return a * b;
  }, [a, b]);

  return <p>Result: {result}</p>;
}

In this example, we define an ExpensiveCalculation component that takes two props, a and b. We use the useMemo hook to memoize the result of the calculation so that it’s only re-computed when a or b changes.

7: useRef hook

The useRef hook allows you to create a mutable ref object that persists for the lifetime of the component. You can use it to store and access values that don’t trigger a re-render.

Here’s an example of how to use useRef to access the value of an input element:


import React, { useRef } from 'react';

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

  const handleClick = () => {
    inputRef.current.focus();
  }

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

In this example, we define an InputWithFocus component that creates a ref object with the useRef hook and attaches it to the input element. We use the ref object to focus the input when the “Focus Input” button is clicked.

8: useLayoutEffect hook

The useLayoutEffect hook is similar to useEffect, but it’s executed synchronously after all DOM mutations. This makes it useful for manipulating the DOM immediately after a component is rendered.

Here’s an example of how to use useLayoutEffect to measure the size of an element:


import React, { useState, useLayoutEffect, useRef } from 'react';

function ResizableBox() {
  const [width, setWidth] = useState(100);
  const [height, setHeight] = useState(100);
  const boxRef = useRef(null);

  useLayoutEffect(() => {
    const handleResize = () => {
      setWidth(boxRef.current.clientWidth);
      setHeight(boxRef.current.clientHeight);
    };

    handleResize();

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div ref={boxRef} style={{ width: '50%', height: '50%', backgroundColor: 'red' }}>
      <p>Width: {width}px</p>
      <p>Height: {height}px</p>
    </div>
  );
}

In this example, we define a ResizableBox component that uses the useLayoutEffect hook to measure the size of a div element. We then use the size values to render the width and height of the box. The hook also adds and removes a resize event listener to update the size values when the window is resized.

9: useDebugValue hook

useDebugValue is a hook that allows you to display custom debugging information for custom hooks in the React DevTools. This can be useful for debugging hooks and understanding what's happening behind the scenes.

Here’s an example of how to use useDebugValue:

import { useState, useEffect, useDebugValue } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]);

  useDebugValue(data ? `Data loaded: ${data.length} items` : 'Loading...');

  return data;
}

In this example, we define a custom hook called useFetch that fetches data from a URL and returns it. We use the useDebugValue hook to display a custom debugging message in the React DevTools. If the data is loaded, we display a message that includes the number of items in the data. If the data is still loading, we display a message that says "Loading...".

When you use the useFetch hook in a component, the custom debugging message will be displayed in the React DevTools. This can help you understand what's happening behind the scenes and debug any issues that might arise.

Note that the useDebugValue hook should only be used for debugging purposes and should not affect the behavior of your custom hook. It's a great tool to have in your debugging toolbox when working with custom hooks.
10: useImperativeHandle hook

The useImperativeHandle hook allows you to customize the instance value that is exposed to parent components when using ref. This can be useful when you need to provide a certain interface to parent components, but you don't want to expose all of the internal implementation details of a child component.

Here’s an example of how to use useImperativeHandle:


import React, { useRef, useImperativeHandle } from 'react';

const Input = React.forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    value: inputRef.current.value
  }));

  return (
    <input
      type="text"
      ref={inputRef}
      placeholder={props.placeholder}
    />
  );
});

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

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <Input ref={inputRef} placeholder="Type here" />
      <button onClick={handleClick}>Focus input</button>
    </div>
  );
}

In this example, we define a custom Input component that uses useImperativeHandle to expose a focus method and a value property to parent components when using ref. The useImperativeHandle hook takes two arguments: the ref object and a callback function that returns an object with the properties and methods that should be exposed to parent components.

In the App component, we use the Input component and pass a ref object to it. We also define a handleClick function that calls the focus method of the inputRef object when a button is clicked.

When you run this code, you’ll see an input field with a placeholder text and a button that says “Focus input”. When you click the button, the focus method of the inputRef object is called, and the input field is focused.

In summary, the useImperativeHandle hook allows you to customize the instance value that is exposed to parent components when using ref. This can be useful when you need to provide a certain interface to parent components but don't want to expose all of the internal implementation details of a child component.
Summary

“With these powerful React hooks in your toolkit, you can take your web development to the next level and build more efficient and effective applications than ever before.”
“From managing state with useReducer to optimizing performance with useMemo and useCallback, these React hooks are a game-changer for developers."
“Whether you’re a seasoned React developer or just starting out, these hooks can help you streamline your code, improve performance, and enhance the user experience.
“By utilizing the full potential of React hooks such as useDebugValue and useImperativeHandle, you can optimize your code and make it more maintainable and extensible."
“In summary, React hooks are a powerful tool that every developer should have in their arsenal. By incorporating these hooks into your projects, you can create better, faster, and more responsive web applications.”

If you like it then don’t forget to like and follow.

Promise of JavaScript

Rohit Singh Rajput — Sat, 24 Aug 2024 12:10:07 +0000