Forem: Swarnali Roy

How to prepare for a Coding/Technical Interview

Swarnali Roy — Wed, 24 Dec 2025 20:07:14 +0000

What is a Coding Interview?

A coding interview, also referred as technical interview, is a specialized assessment used by technology companies to evaluate a candidate’s problem-solving skills, logic, and proficiency in software engineering. Unlike a standard behavioral interview, these sessions focus on one's ability to

write clean code
understand computer science fundamentals
communicate your thought process in real-time

The Purpose

The primary goal isn't just to see if a candidate can find the "right" answer, but to understand how one thinks.
Specifically, interviewers look for:

Problem-Solving Skills: Candidates are evaluated on their ability to deconstruct ambiguous prompts into logical, manageable steps. Interviewers look for a systematic approach — moving from a basic "brute-force" solution to a refined strategy — rather than an immediate, perfect answer.

Technical Literacy: This measures a candidate’s grasp of computer science fundamentals, such as data structures and algorithms. They must be able to justify their technical choices and analyze efficiency using Big O notation, specifically O(n) or O(\log n), to show how the code scales with data.

Communication: The candidate must "think out loud," clearly narrating their logic to ensure the interviewer can follow their thought process and verify that they can explain complex concepts to others.

Code Quality: Beyond solving the problem, the candidate must produce "production-ready" code. This involves writing clean, readable syntax and proactively identifying edge cases — such as null inputs or empty sets — to ensure the solution is robust and reliable.

Key Terms to Know

If you're new to the technical scene, you'll often hear these two terms mentioned as the "gold standard" for professional code:

Big O Notation: This is a mathematical way to describe how "fast" or "heavy" an algorithm is.

Time Complexity: How much longer the code takes to run as the input gets bigger (e.g., O(n) means if the data doubles, the time doubles).
Space Complexity: How much extra memory the code needs to finish the job.

DRY (Don’t Repeat Yourself): This is a core principle of clean coding. It means that if you are writing the same logic twice, you should probably move it into a single, reusable function. It makes your code easier to maintain and less prone to bugs.

Preparation Strategies

o reduce performance anxiety and demonstrate a professional workflow, a successful candidate should focus on the following:

Conceptual Planning & Clarification

Identify Constraints: Ask about input sizes, data types, and memory limits before starting.
Align Expectations: Confirm the goal with the interviewer to avoid solving the wrong problem.
Manage Scope: Define what the solution will—and will not—handle initially.

The Power of Pseudocode

Logic First: Write out the step-by-step logic in plain English to validate the approach.
Bridge the Gap: Use pseudocode to transition from a mental concept to actual syntax.
Visual Roadmap: Keep a high-level view of the solution to avoid getting lost in nested loops or complex logic.

Deconstruction of Complexity

Modularize: Split the main problem into smaller, independent functions or blocks.
Solve the "Easy" Parts First: Build momentum by tackling simple components before the core logic.
Iterative Debugging: Test small sections of the logic as they are built rather than waiting until the end.

Algorithmic Optimization

Data Structure Selection: Choose between HashMaps, Trees, or Arrays based on the required search and insert speeds.
Big O Analysis: Evaluate the time and space complexity (O(n)) to ensure the solution scales.
Refactor for Efficiency: Remove redundant calculations and follow "DRY" (Don't Repeat Yourself) principles to keep the codebase clean.

Do's/Don'ts during the interview

Mastering the technical material is only half the battle; the other half is navigating the social and procedural dynamics of the session itself. The following guide highlights the critical behaviors that can either elevate a candidate’s standing or serve as immediate red flags.

Most successful candidates follow a specific rhythm to stay on track:

1.Clarify: Ask targeted questions to uncover hidden constraints and confirm the problem requirements.
2.Plan: Narrate the strategy and logic out loud before typing a single line of code.
3.Implement: Write clean, structured code while explaining how each part solves the problem.
4.Test: Manually "dry run" the solution with a sample input to identify and fix bugs early.
5.Optimize: Analyze the solution's efficiency and discuss ways to improve its speed or memory usage.

Candidates often fail when they fall into these common traps:

1.Rush: Diving straight into coding without a plan, which often leads to logic errors.
2.Silence: Coding in total silence, which prevents the interviewer from understanding the thought process.
3.Assume: Ignoring edge cases or failing to ask about data types and input sizes.
4.Resist: Becoming defensive or dismissive when the interviewer offers a hint or critique.
5.Neglect: Leaving the code messy or using vague variable names that make the logic hard to follow.

While having a strong grasp of algorithms and data structures is vital, the ability to communicate logic and handle feedback is what truly sets one apart in a technical interview. By treating the interview as a collaborative exercise rather than a test of memorization, with consistent practice and a structured approach, a candidate can turn a high-pressure environment into an opportunity to showcase their best work.

Choose your List Component wisely!

Swarnali Roy — Sat, 13 Sep 2025 18:31:05 +0000

Swarnali Roy

Sep 13 '25

React Native: FlatList or SectionList, which one to use in your app?

#javascript #reactnative #design #development

Comments

5 min read

React Native: FlatList or SectionList, which one to use in your app?

Swarnali Roy — Sat, 13 Sep 2025 17:34:00 +0000

In mobile apps, we spend most of the time browsing endless lists of content - a scrollable feed of posts, a stream of chat messages, a library of songs. Behind that smooth scrolling is smart engineering to keep the UI fast even with thousands of items.
In React Native, FlatList and SectionList are the two core, virtualized list components designed to render large data efficiently.
This post explains what these are, props that these provide, why you should use these, how these differ, and gives you battle-tested patterns to build fast, smooth lists.

First of all, let's know what is a virtualized list. A virtualized list (also called list virtualization or windowing) is a front-end performance technique that renders only the items currently visible in the user’s viewport and reuses DOM nodes as the user scrolls. Instead of creating all list elements at once, most items stay in a virtual state, which significantly reduces memory use and improves rendering speed when working with large datasets.

What is FlatList?

FlatList renders a single, one-dimensional list of items (rows).

The FlatList component has two required props you will need to pass to it as a bare minimum.
The first prop is the data that accepts a plain array. This array contains the list of items to display.
The second prop is the renderItem which takes an item from the data and renders it into the list.

Let's see a simple FlatList example:

const menuItemsToDisplay = [
  { name: 'French Fries', id: '1A' },
  { name: 'Buttered Rice', id: '2B' },
  { name: 'Baklava', id: '3C' },
  { name: 'Tiramisu', id: '4D' },
  { name: 'Lentil Soup', id: '5E' },
  { name: 'Eggplant Salad', id: '6F' },
];

import { View, Text, StyleSheet, FlatList } from 'react-native';

const Item = ({ name }) => (
  <View style={menuStyles.innerContainer}>
    <Text style={menuStyles.itemText}>{name}</Text>
  </View>
);


const MenuItems = () => {
  const renderItem = ({ item }) => <Item name={item.name} />;

  return (
    <View style={menuStyles.container}>
      <Text style={menuStyles.headerText}>View Menu</Text>
      <FlatList
        data={menuItemsToDisplay}
        keyExtractor={(item) => item.id}
        renderItem={renderItem}></FlatList>
    </View>
  );
};

An additional prop called the keyExtractor is usually passed to the FlatList component. It instructs the list to use the id of each item as React keys.

FlatList Props

FlatList provides a wide range of props to customize list behavior and appearance.
Among them, the following are most commonly used in everyday projects to structure headers, footers, separators, and scrolling direction:

ItemSeparatorComponent – Renders a component between each item (e.g., a thin divider).
horizontal – Makes the list scroll left-to-right instead of vertically.
ListHeaderComponent – A component displayed above all list items—great for search bars or filters.
ListHeaderComponentStyle – Style object for the header wrapper (padding, margin, background).
ListFooterComponent – A component displayed below all list items—often used for loading spinners or “End of List” messages.
ListFooterComponentStyle – Style object for the footer wrapper, useful for centering or spacing.

To read about other props you can visit this link : FlatList

What is SectionList

SectionList renders a list grouped into sections — each section has a header and its own items. It’s still virtualized, but adds structure and features like sticky section headers.

The SectionList component has two required props you will need to pass as a bare minimum. It is very similar to the FlatList component.
The first prop is the sections that accept a plain array to display list of items.
The second required prop is the renderItem that takes an item from the sections and renders it into the list.

Let's see a simple SectionList example:

import React from 'react';
import {StyleSheet, Text, View, SectionList, StatusBar} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const menuItemsToDisplay = [
  {
    title: 'Main dishes',
    data: ['Pizza', 'Burger', 'Risotto'],
  },
  {
    title: 'Sides',
    data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
  },
  {
    title: 'Drinks',
    data: ['Water', 'Coke', 'Beer'],
  },
  {
    title: 'Desserts',
    data: ['Cheese Cake', 'Ice Cream'],
  },
];

const MenuItems = () => (
  <SafeAreaProvider>
    <SafeAreaView style={styles.container} edges={['top']}>
      <SectionList
        sections={menuItemsToDisplay}
        keyExtractor={(item, index) => item + index}
        renderItem={({item}) => (
          <View style={styles.item}>
            <Text style={styles.title}>{item}</Text>
          </View>
        )}
        renderSectionHeader={({section: {title}}) => (
          <Text style={styles.header}>{title}</Text>
        )}
      />
    </SafeAreaView>
  </SafeAreaProvider>
);

In this code snippet, you can see that a prop called renderSectionHeader is passed. This is a callback function used to render each section’s header. These examples would be Main Dishes, Sides and so on. It renders title from the menuItemsToDisplay array.

SectionList Props

SectionList also offers many props to customize grouped lists.
These are the most frequently used to handle section headers, separators, and grouping behavior:

stickySectionHeadersEnabled – Makes section headers stick to the top while scrolling through their section.
renderSectionHeader – Renders a component above each section’s items (e.g., an A–Z header or date label).
renderSectionFooter – Renders a component below each section’s items (e.g., a summary or action button).
SectionSeparatorComponent – Renders a component between entire sections, useful for extra spacing or dividers.

To read about other props you can visit this link : SectionList

Common Props in FlatList and SectionList

Both FlatList and SectionList are built on top of React Native’s VirtualizedList, so they share a powerful set of props to control rendering, performance and user interaction. Some common props that both of these use are the following:

initialNumToRender – Number of items to render initially (default is 10). Increase for faster first scroll, decrease for lighter startup load.
windowSize – Number of screenfuls worth of items kept in memory (default is 21). Adjust to balance scroll smoothness vs. memory usage.
maxToRenderPerBatch – Maximum number of items to render in each batch while scrolling.
removeClippedSubviews – Set to true (especially on Android) to unmount rows that scrolled out of view, saving memory.
getItemLayout – Supplies fixed item height/width info so the list can skip measuring, enabling instant scrollToIndex and improving scroll performance. refreshing – Boolean to show a pull-to-refresh indicator. onRefresh – Callback triggered on pull-to-refresh. onEndReached – Fired when the list is close to the bottom, perfect for infinite scroll / pagination. onEndReachedThreshold – Distance from the bottom (in viewport heights) to trigger onEndReached (e.g., 0.5 = halfway).

Both FlatList and SectionList renders items lazily, which means it only renders items you visually see on the screen, and once you start scrolling up or down, those items off the screen are removed, and the new items are rendered. This form of lazy rendering is very performant and effective in rendering large lists with sectional support in mobile apps.

When to choose which?

👉 Choose FlatList if:

Your data is naturally a single, ungrouped stream (feed, chat, search results).
You don’t need sticky headers or per-group UI.
You want the lightest abstraction and maximum throughput.

👉 Choose SectionList if:

You need grouping (A–Z, by date, by category) and section headers.
You want sticky headers without custom plumbing.
You need visuals or logic between sections (SectionSeparatorComponent).

Both components share powerful common props for performance tuning, refreshing, and pagination. By understanding their differences and capabilities, you can confidently choose the right list type, deliver smooth scrolling on any device, and keep your app fast—even with thousands of items.

Combining useful JS basics

Swarnali Roy — Mon, 01 Sep 2025 08:36:41 +0000

Swarnali Roy

Sep 1 '25

Understanding map(), filter(), Set, and the Spread Operator in JavaScript

#programming #javascript #webdev #beginners

Comments 2

3 min read

Understanding map(), filter(), Set, and the Spread Operator in JavaScript

Swarnali Roy — Mon, 01 Sep 2025 07:35:07 +0000

When working with JavaScript (ES6+) (especially in frameworks like React), we often use four powerful features: map(), filter(), Set, and the spread operator (...).
Let's break these features with some simple examples and finally a practical example of combining all of these together.

1. The `map()` Method

The .map() method is used to transform each element of an array.
It returns a new array of the same length.
.map() does not change the original array.

Syntax:

array.map(function(element, index, array) {
  // return the new value for this element
});

Explanation of parameters:

element → the current item in the array
index (optional) → the position of the element (0, 1, 2, …)
array (optional) → the whole array being mapped

Example:

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8]

Explanation:

The condition is given inside the function (num => num * 2).
So .map() will go through each element in the array numbers and multiply it by 2. Then it will create a new array with the result value.

👉 In React, map() is often used to render lists:

const fruits = ['Apple', 'Banana', 'Mango'];

<ul>
  {fruits.map(fruit => <li key={fruit}>{fruit}</li>)}
</ul>

2. The `filter()` Method

The .filter() method is used to keep only the elements that match a condition.
It also returns a new array, without modifying the original.
It does not execute the function for empty elements.

Syntax:

array.filter(function(element, index, array) {
  // return true to keep the element
  // return false to remove it
});

Explanation of parameters:

Same as .map() method.

Example:

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // [2, 4, 6]

Explanation:

The condition given inside the function (num => num % 2 === 0) simply means that only even numbers should be returned.
So .filter() will go through each element in the array numbers and return a new array keeping only the even number elements.

3. The Set Object

A Set stores unique values only (no duplicates).
It’s useful when you want to remove repeated items.

Example:

const categories = ['Fast Food', 'Healthy', 'Fast Food', 'Dessert'];
const uniqueCategories = new Set(categories);

console.log(uniqueCategories); 
// Set { 'Fast Food', 'Healthy', 'Dessert' }

If you need it back as an array:
const uniqueArray = [...uniqueCategories];

4. The Spread Operator (...)

The spread operator unpacks values from arrays, objects, or iterables.
It’s useful for copying, merging, or expanding data.

Example with Arrays:

const nums1 = [1, 2, 3];
const nums2 = [4, 5];
const combined = [...nums1, ...nums2];

console.log(combined); // [1, 2, 3, 4, 5]

Example with Objects:

const user = { name: 'Alice', age: 25 };
const updated = { ...user, age: 26 };

console.log(updated); // { name: 'Alice', age: 26 }

Explanation:

The spread operator copies all the properties from the user object into the new object.
After spreading, we also specify age: 26, which overrides the old age value (25) with the new one (26).
As a result, the updated object contains the same name as before ("Alice") but with the updated age.
Importantly, the original user object remains unchanged — we just created a new object with modified data.

Combining It All Together

const availableCategories = [
  'All',
  ...new Set(
    data.foods
      .filter(food => food.isAvailable)
      .map(food => food.category)
  )
];

//Output : ['All', 'Fast Food', 'Healthy', 'Dessert']

Step-by-step explanation:

Assume this is an array of food objects, e.g.

[
  { name: 'Pizza', category: 'Fast Food', isAvailable: true },
  { name: 'Salad', category: 'Healthy', isAvailable: false },
  { name: 'Burger', category: 'Fast Food', isAvailable: true }
]

filter(food => food.isAvailable) → keep only foods that are available.

[
  { name: 'Pizza', category: 'Fast Food', isAvailable: true },
  { name: 'Burger', category: 'Fast Food', isAvailable: true }
]

map(food => food.category) → get their categories: ['Fast Food', 'Fast Food']
new Set(...) → remove duplicates : Set { 'Fast Food' }
... spread operator → convert back into an array: ['Fast Food']
Add 'All' at the beginning for a universal option: ['All', 'Fast Food']

Together, these features make code cleaner, shorter, and easier to understand. Whether you’re building simple scripts or working in frameworks like React, mastering these concepts will give you a strong foundation for handling data in JavaScript.

Nested ScrollViews can be Tricky in React Native! How to solve?

Swarnali Roy — Thu, 22 Aug 2024 18:40:26 +0000

Working with multiple components that use Scrollview or Flatlist in a single screen is a common practice in React Native. Often the nested scrolling behaviour doesn't work properly and can be tricky to use efficiently. I have struggled with this several times so thought to share the easy solution I found for this.

Let's talk a bit about Scrollview and Flatlist at first!

ScrollView or Flatlist, which one to use?

Typically, we use ScrollView to make a screen scrollable in React Native.

This component allows the content to scroll vertically or horizontally when it exceeds the screen size. If the content inside the ScrollView doesn't exceed the screen size, no scrolling may occur.
Needs to have a bounded height in order to work properly, all parents elements also need to get a bounded height. Failing to do so might occur errors and lead to not achieving the desired scrolling behaviour.
ScrollView renders all its react child components at once.
For displaying a very long list of contents, it may cause slow rendering and increased memory usage.

To achieve a more efficient rendering when dealing with long lists of data, using Flatlist is definitely a better choice!

FlatList renders only the items that are currently visible on the screen and a few items before and after for smooth scrolling.
Uses lazy loading and removes items that scroll way off screen to save memory and processing time.
It offers various customization options such as custom item separators, headers, footers, and more, allowing user to create a tailored list experience.

I am not going into much details about the usage of these two here as you can get well documented examples in the official React Native Documentation [https://reactnative.dev/]

If your screen has only one component that needs to be scrollable, it's easier to choose depending on your project requirements. But the problem occurs, when you have to use multiple components in a single screen and more than one component needs to be scrollable!

It is recommended to avoid nesting multiple `ScrollViews` in a single screen.

Reasons to avoid Nested ScrollViews

When user use one Scrollview inside another, the parent and child ScrollViews can compete for touch events, thus leads to unpredictable scrolling behaviour.
The inner ScrollView might not scroll properly or might interfere with the outer ScrollView's scrolling.
The scrolling behaviour may vary across different devices and platforms (iOS vs Android).
Performance can be degraded if the data or list is huge and the layout is complex.
UI design might break, such as the height might not be adjusted as desired.

How to Solve This!

Using a FlatList instead of a ScrollView for the inner scrollable component is a great way to solve this issue, especially when dealing with long lists of data. FlatList is optimized for performance and provides features like pull-to-refresh and infinite scrolling.

In my app, I needed the whole screen to be scrollable, so I used ScrollView as the parent component. Inside that, I had to render a playlist which was a long list so I used a Flatlist to render that in this way:

// Sample data for the FlatList
  const data = Array.from({length: 50}, (_, index) => ({
    id: String(index),
    title: `Item ${index + 1}`
  }));

  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text>{item.title}</Text>
    </View>
  );

return (
    <ScrollView style={styles.mainContainer}>
      <Text>Main Content</Text>
      {/* Some content here */}

      <View style={styles.contentSection}>
        <Text>This is part of the main scrollable area</Text>
      </View>

      {/* Separately scrollable FlatList */}
      <View style={styles.separateScrollContainer}>
        <FlatList
          data={data}
          renderItem={renderItem}
          keyExtractor={item => item.id}
          nestedScrollEnabled={true}
        />
      </View>
      <View style={styles.contentSection}>
        <Text>More content in the main scrollable area</Text>
      </View>
    </ScrollView>
  );

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
  },

  separateScrollContainer: {
    height: 200, // Set a fixed height for the separate scrollable area
    borderWidth: 1,
    borderColor: 'gray',
    margin: 16,
  },
});

At first the Flatlist scroll was not working properly and the height for the inner component was not adjusted, even though I used flex: 1 for the main container .
To make sure it works perfectly the main things that I had to do was:

Using nestedScrollEnabled={true} on the FlatList
Keeping the FlatList inside a View with a fixed height, as shown in the separateScrollContainer style.

In this way, the FlatList automatically handles its own scrolling within the confined space.

Some Additional Tips

FlatList props like initialNumToRender, maxToRenderPerBatch, and windowSize can be used to optimize performance, especially if you're rendering a larger list.
If the FlatList content is shorter than its container, unwanted bouncing effects might occur. To prevent this situation, bounces={false} can be added to the FlatList props.
If user wants the FlatList to take up all remaining space, using flexbox instead of a fixed height for the wrapper View of the FlatList Component might be a better choice.

I hope this helps solving nested ScrollView issues for people who are struggling building up some great quality React Native applications!

Happy Coding!

CSS Variables with Global & Local Scope

Swarnali Roy — Tue, 14 Jun 2022 19:23:37 +0000

Hello everyone!
It's been a long long time since I've posted anything. I am working as a Front-end Developer and suddenly, I realized that I have forgotten many CSS basics. So, I started learning it once again.

This blog is about CSS Variables.

Here I learned the usage of CSS variables and how you can use them in your project.

First of all, a CSS variable name must start with two dashes -- and it is case sensitive.
For example:

--blue: #1e90ff;
--red: rgb(255,0,0);

Global & Local Scope

Declaring Global CSS Variable

CSS Variables can have a global scope and a local scope. When you declare a CSS variable in a global scope, it can be accessed throughout the entire document.

To create a variable with global scope, we need to declare it inside the :root selector. The :root selector matches the document's root element. We declare a global CSS variable as follows:

root: {
    --blue: #1e90ff;
    --red: rgb(255, 0, 0);
    --white: #ffffff;
}

Using CSS Variable in Local Scope

To create a variable with local scope, we need to declare it inside the selector that is going to use it.

The var() function is used to insert the value of a CSS variable. The syntax of the var() function is as follows:

var(name, value);

To use the above declared global variables inside another selector we need to write it in the following way:

body {
    background-color: var(--blue);
    color: var(--white);
}

button {
    background-color: var(--white);
    color: var(--red);
    border: 1px solid var(--red);
}

Usefulness of CSS Variables

CSS variables have access to the DOM, so we can create it with both global and local scope.
It can be changed with JavaScript.
It can be changed based on media queries.
The best way to use CSS variables is to change the color properties of your design. You can declare some variables and use them over and over again instead of copy-pasting the same colors.

I used CSS Variables in a FreeCodeCamp Learning project to change the colors of my design and it came out like this:

You can have a look at the code by accessing this repo:
https://github.com/SwarnaliRoy94/FreeCodeCamp-CSS-Projects/tree/main/CSSVariablesSkyline

I hope you have learned something new reading this blog. Thank you so much for your valuable time. Feel free to ask me anything in the discussion section.

Happy Coding! Happy Learning!!

The keyword "new" in JavaScript

Swarnali Roy — Sun, 19 Sep 2021 17:44:58 +0000

Hello Readers!
Let me introduce you all with something new today!

The topic today is the JavaScript Keyword "new"! In JavaScript, the keyword new is used to create an instance of an object that has a constructor function.

Before diving into the details, we need to understand one thing, that is, in JavaScript almost everything is an Object and the concept of Object is very important to understand the keyword "New". When we define any Boolean, Number or String with the keyword New, it can be treated like an object.

Let me show an example first!

👉 This is a "constructor function" , Animal since it is responsible for constructing a new object, animal.
👉 We had to add properties to the animal object with the dot notation and return it from the constructor function.
👉 Let's assume that we need to create more than one Animal object in our application. So, we instantiated the constructor function twice.
👉 We can see the output where two new animal objects are created with name and legs properties.

Here is the interesting thing about the keyword new. When we use the keyword, a property called this is created which refers to the whole object and is returned automatically. So, we don't need to specify any additional object inside our constructor function. Basically, those two lines are done for us implicitly (under the hood).

Let's take a look what happens under the hood , assuming the Animal constructor is called with the new keyword. It can be re-written as following and it is equivalent to the previous example:

Here, a new object is automatically created and returned. (the commented out lines)

We can compactly write the code without the under the hood comments:

This concept is known as "Pseudoclassical Instantiation".

Similarly, we can define an Object property which is itself another Object!

For example, let's define an object called "Human" And then instantiate two new Human objects as follows:

Now, suppose we want to create an object type for cars and name it "Car". It should have properties named owner, model and yearOfPurchase. Instead of passing a literal string or integer value while creating the new objects, the following statements pass the objects man and woman as the parameters for the owners.

To find out the name of the owner of car2, we can access the property as follows:

console.log(car2.owner.name); //Swarnali

Hope this post help you while creating a lot of similar objects in your application. Discussion and queries are always welcomed! ☺️☺️

Reverse a String in JavaScript

Swarnali Roy — Mon, 06 Sep 2021 09:51:05 +0000

Reversing a String is indeed one of the most common and needed operations in JavaScript. During the journey of any Software Developer's career, a very important and basic question for interviews is "How to Reverse a String in JavaScript"

There are a few ways to reverse a string in JavaScript. We can use loops, built-in functions, recursion and even regular expressions to solve the problem. In this post, I am going to show these approaches with examples. So, let's get started!!

🔶built-in Methods: split().reverse().join()

The very first way that I want to discuss is perhaps the most commonly used way, which is using the built-in methods. First of all, we need to split the string to an Array of Single Characters i.e.("s","t","r","i","n","g"), then reverse the characters and lastly join them again to create the reversed string.
Let's see an example first:

In this example, basically three built-in methods are used. They are : String.prototype.split(), Array.prototype.reverse() & Array.prototype.join(). To understand it properly, I am explaining it elaborately.

🔸 String.prototype.split() method splits the String object into an Array of String by separating the string into sub strings. In this case, stringToReverse.split("") returns the output as:

['S', 'o', 'f', 't', 'w','a', 'r', 'e', ' ', 'D', 'e', 'v', 'e', 'l', 'o', 'p', 'e', 'r']

🔸 After the string is separated as an array of string, the Array.prototype.reverse() does the main work which is reversing the single array elements in place. The first array element is now the last array element and vice-versa.
In our case, splitString.reverse() returns the output as:

['r', 'e', 'p', 'o', 'l', 'e', 'v', 'e', 'D', ' ', 'e', 'r', 'a', 'w', 't', 'f', 'o', 'S']

🔸 The Array.prototype.join() method finally rejoins all the single characters previously separated by the split() method to recompose the reversed string. In our example the final output is:

repoleveD erawtfoS

Chaining these Methods

Well, these three methods can be chained to make our code compact and clean in the following way and the output will be the same.

However,instead of using String.prototype.split(), we can do this work using Spread Operator [...] also, which is a ES6 syntax. It works the same way as before.

So, the spread operator is exactly doing the same work as split() does, it is splitting the string object into single characters.

🔶Using Decrementing For Loop

This is an easy and oldest approach of reversing a string in JavaScript but works pretty well everywhere.

🔸 At first, newString created an empty string to host the new created string.
🔸 The starting point of the loop will be (str.length - 1) which corresponds to the last character of the string, "r". As long as i is greater than or equals zero, the loop will go on. We are decrementing i after each iteration.
🔸 The function then returns the reversed string.

We can also use the for loop syntax introduced by JavaScript ES6 which is also very easy to use and decreases the chances of mistake while writing the conditions of the loop.

Much cleaner than the previous for loop, isn't it?? But works really fine!

🔸 The "c" in the for loop condition is taking each of the letter of the string as a single character. For better understanding I have added two console.log() statement in the following picture and also you can see the output in the terminal.

🔶The Recursive Approach: Recursion Method

Using the Recursion method is another very well-known approach to reverse a string in JavaScript. We need two methods to perform this recursive approach. One is the String.prototype.substr() method and another is the String.prototype.charAt() method.
Let's see an example:

🔸 String.prototype.substr() method returns a portion of the string, beginning at the specified index and extending for a given number of characters afterwards.
In our example, the part str.substr(1) returns "ecursion".

🔸 String.prototype.charAt() method returns the specified character from a string.
In our example, the part str.charAt(0) returns "R".

🔸 reverseString(str.substr(1)) + str.charAt(0) firstly returns the portion of the string , starting at the index of the first character to include in the returned substring . Second part of the method hits the if condition and the most highly nested call returns immediately.
We need to remember that this method won’t have just one call but have several nested calls.

Nevertheless, this approach is not a best approach for reversing a string as the depth of the recursion is equal to the length of the string and in case of a very long string, it takes much more time than any other method and the size of the stack is a major concern here.

🔶 Using Array.prototype.reduce() Method

The Array.prototype.reduce() method executes a reducer callback function on each element of the array, passing in the return value from the calculation on the preceding element and returns a single value as the final result. The syntax can be written as:
reduce((previousValue, currentValue) => { ... } )

Let's see an example of this.

function reverseString(str) {
  const arr = str.split("");
  const stringReversed = arr.reduce((reversed, character) => {
    return character + reversed;
  }, "");
  return stringReversed;
}

console.log(reverseString("Swarnali")); //ilanrawS

🔸 The reverseString function takes a string str as parameter.
🔸 The first thing that we need to do is to split the string into single characters. We took an array arr to hold the values.
🔸 reduce() function takes two parameters, reversed and character. If we compare it with the basic syntax of reduce(), reversed is the previous value/accumulator and character is the current value. The function stringReversed returns the current value adding it with the previous value, which is actually reversing the whole array characters and joining them together in a reversed way.

This code block can be more compact if we use JavaScript ES6 syntax. 👇


const reverseString = (str) => {
  return str.split("").reduce((reversed, character) => character + reversed, "");
};

console.log(reverseString("Roy is a Developer"));
//repoleveD a si yoR

Making it a one-line code:

const reverseString = (str) => str.split("").reduce((reversed, character) => character + reversed, "");

console.log(reverseString("Roy is a developer"));
//repoleveD a si yoR

🔶Using Regular Expressions (RegEx)

This is one of the rarest and trickiest approaches of reversing a string but developers who love to play with JavaScript Regular Expressions can definitely try this approach. Also, in any interview, if you can show this, that might be a plus point as it is such an approach that people generally don't use and they will know that you have mastered another skill that is Regular Expressions!
The following is an example of this approach:

let str = "My name is Swarnali Roy";
let regex = /.{1,1}/ig

let result = str.match(regex);
let reveresed = result.reverse().join("");

console.log(reveresed); //yoR ilanrawS si eman yM

🔸The simplest quantifier in RegEx is a number in curly braces: {n}. A quantifier is appended to a character (or a character class, or a [...] set etc) and specifies how many we need.
In our example, {1,1} denotes we exactly need 1 character to be matched. If we write console.log(result), then we will get something like this:
['M', 'y', ' ', 'n', 'a','m', 'e', ' ', 'i', 's', ' ', 'S', 'w', 'a', 'r', 'n', 'a', 'l', 'i', ' ','R', 'o', 'y']

🔸 The RegEx here is mainly doing the work of separating the string object into single characters of an array. After separating the reverse() and join() method is working exactly like it worked with split() or spread operator as I have shown above in the built-in approach.

I hope the readers understood the tutorial and it can help you in your interviews as well. Queries are always welcomed in the discussion section.

Introduction to React : Real DOM & Virtual DOM

Swarnali Roy — Tue, 31 Aug 2021 15:20:36 +0000

Hello Readers!

I have been writing posts about JavaScript for a couple of months now. A strong foundation of JavaScript is a prerequisite for learning React.JS.

I have been working and developing projects with React.JS for the last one year and I have found it very flexible and useful for building user interfaces and process of developing web applications becomes easier with React.JS.

First of all, let's have a look on what React.JS is and why it is so familiar nowadays among developers.

What is React?

◾ React is an efficient, flexible and open-source JavaScript Library for building simple and scalable front-ends, created by Facebook.
◾ It is basically used to build Single Page Applications. It also allows us to create reusable UI components.
◾ React.JS is not a framework of JavaScript like Angular or React Native.
◾ It is the View layer of MVC (Model View Controller) application.

How Does React Work?

Instead of manipulating the browser's real DOM directly, React creates a virtual DOM in memory. React finds out what changes are made and only manipulates the virtual DOM before changing anything in the real/browser's DOM.
To understand it in a better way, we need to understand the difference between Real/Browser's DOM and React's virtual DOM.

What is Real/Browser DOM?

DOM stands for "Document Object Model". It represents the entire UI of the web application as a tree data structure.

In simpler terms, it is a structural representation of the HTML elements of the web application.

Whenever there is a change in the state of application UI, the DOM gets updated and represents that change. With every change, the DOM gets manipulated and re-rendered to update the application UI, which affects the performance and makes it slower.

Hence, with more UI components and complex structure of the DOM, the DOM updates will be more costly as with every change it needs to be re-rendered.

What is React's Virtual DOM?

To make the performance of the Real DOM better and faster, the concept of Virtual DOM arrives. The Virtual DOM is nothing but the virtual representation of the DOM.

But the key difference is, every time with every change , the virtual DOM gets updated instead of the real DOM.

Like, real DOM , virtual DOM is also represented as a tree structure. Each element is a node in this tree. When a new item is added to the application UI, a node is added to the tree as well. If the state of any of these elements changes, a new virtual DOM tree is created. The virtual DOM computes the best possible way or we can say the minimal operations on the real DOM to make changes to the real DOM. Thus, it makes efficient and better performance by reducing the cost and operations of re-rendering the whole real DOM.

Now that we have the basic understanding of Real and Virtual DOM, let's focus on how React works using the Virtual DOM.

🔸 In React, each UI is an individual component and each component has it's own state.
🔸 React follows the observable pattern and observes the changes of the states.
🔸 Whenever a change is made in the state of any component, React updates the virtual DOM tree but does not change the real DOM tree
🔸 After updating, React then compares the current version of the virtual DOM with the previous version.
🔸 React knows which objects are changed in the virtual DOM, based on that it only changes those objects in the Real DOM, making minimum manipulating operations.
🔸 This process is noted as "diffing". A picture below will clear the concept more.

In this image, the red circles are the nodes that has been changed. That means, the state of these components are changed. React computes the difference of the previous and current version of the Virtual DOM tree and the whole parent sub-tree gets re-rendered to show the changed UI. Then the updated tree is batch updated (This means that updates to the real DOM are sent in batches, instead of sending updates for every single change in state.) to the Real DOM.

To get even deeper knowledge about it, we need to know about React render() function.

Prior to that, we need to know about some most important features of React. I will not dive into deeper knowledge about it as I will write elaborately in other separate posts later. But for now what we need to know is:

🔹 JSX
JSX stands for JavaScript XML. It is a syntax extension of JS. By using JSX, we can write HTML structures in the same file that contains JavaScript code.

🔹 Components
Each UI in a React app is a component. Components are independent and reusable bits of code. A single application may have multiple components.
Components can be of two types, Class Components & Functional Components. Class Components are stateful as they can use their "state" to change the UI. Functional Components are stateless components. They act as a JavaScript function that can take an arbitrary parameter called "props".
Recently, React Hooks are introduced to use state within the Functional Components.

🔹 Lifecycle Methods
Lifecycle methods are special methods built-in to React, used to operate on components throughout their duration in the DOM. Every component in React goes through a lifecycle of events.

The render() method is the most used lifecycle method.

It is the only required method within the React Class Components. So, render() is called in every class component.
render() method handles the rendering of the component to the UI. The render() method contains all the logic that should be displayed on the screen. It might also contain a null value, if we don’t want to show anything on the display.

An example is shown below:

class Header extends React.Component{
render(){
      return <div> React Introduction </div>
   }
}

This example will show the JSX written inside the render() method.

When a state or prop within the component is updated, the render() will return a different tree of React elements.
React then calculates how to update the UI to match the most recent tree changes. At first, React updates its virtual DOM and updates only the object that have changed in the real DOM.

In the next posts, I'll write about the features of React in Details. If you like this post please save, like and press unicorn and also follow me to keep an eye on my other posts.

Using RegEx Capturing Groups

Swarnali Roy — Fri, 27 Aug 2021 18:03:10 +0000

Hello Readers!

I always love to work with Regular Expressions and a very important concept of RegEx is "RegEx Capturing Groups".

Sometimes in a string, patterns we search for may occur multiple times. It is wasteful to manually repeat that regex. A better way to specify when we have multiple repeated substrings is using "RegEx Capturing Groups"

👉 Parentheses ( ), are used to find repeated substrings. We just need to put the regex that will repeat in between the parentheses.
👉 It allows to get a part of the match as a separate item in the result array.
👉 If we put a quantifier after the parentheses, it applies to the parentheses as a whole.

Let's see an example:

let regex = /(go)+/ig;
let str = 'goGoGOgOgoooogo';

let result = str.match(regex);
console.log(result); 
//output: [ 'goGoGOgOgo', 'go' ]

Parentheses ( ), group characters together, so (go)+ means "go", "gogo", "gogogo" and so on. But once it found another o after "go", it stopped matching the regex. Then again, when it found another "go" , it returned a second match.

Specify RegEx Capturing Groups using Numbers

Let's say, we need to write a pattern which will repeat more than once in a string. In that case, we can easily specify it without writing the pattern again and again.

To specify where that repeat string will appear, you need to use a backslash () and then a number. This number starts at 1 and increases with each additional capture group you want to use.

🔸 Example: The code block will match a string that consists of only the same number repeated exactly three times separated by single spaces.

let repeatNum = "93 93 93";
let wrongNum = "100 100 200 100";

let regex = /^(\d+)\s\1\s\1$/;

let result = regex.test(repeatNum);
console.log(result); //true

result = repeatNum.match(regex);
console.log(result); // [ '93 93 93' ]

let wrongRes = regex.test(wrongNum);
console.log(wrongRes); //false

wrongRes = wrongNum.match(regex);
console.log(wrongRes); //null

/^(\d+)\s\1\s\1$/ this regex explains:

(i) a caret ( ^ ) is at the beginning of the entire regular expression, it matches the beginning of a line.
(ii) (\d+) is the first capturing group that finds any digit from 0-9 appears at least one or more times in the string.
(iii) \s finds a single white space
(iv) \1 represents the first capturing group which is (\d+).
(v) a dollar sign ( $ ) is at the end of the entire regular expression, it matches the end of a line.

🔹 The first capturing group is repeated with * \1 * and separated by white space. The output will match any three same numbers like "100 100 100", "93 93 93" but will not match more than 3 times!
🔹 regex.test(repeatNum) returns true and matches "93 93 93" but regex.test(wrongNum) returns false and as it doesn't find any match, .match() returns null.

RegEx Capturing Groups to Search and Replace Text in a String using string.replace()

In regular expressions, we can make searching even more powerful when it also replaces the text we need to match.
string.replace() is the desired method to search and replace any pattern in that string.

👉 It requires two parameters.
👉 First is the regex pattern we want to search for.
👉 Second is the string to replace the match or a function to do something.
👉 Capturing groups can be accessed in the replacement string with dollar signs ($).

🔸 Example: The "str" string includes three different words. We need to capture three different groups. A regex "fixRegex" is used for capturing three capture groups that will search for each word in the string. Then update the "replaceText" variable to replace the string "one two three" with the string "three two one" and assign the result to the result variable.

let str = "one two three";
let fixRegex = /^(\w+)\s(\w+)\s(\w+)$/;
let replaceText = "$3 $2 $1";
let result = str.replace(fixRegex, replaceText);

console.log(result); //three two one

The regex /^(\w+)\s(\w+)\s(\w+)$/ explains:

(i) a caret ( ^ ) is at the beginning of the entire regular expression, it matches the beginning of a line.
(ii) \w means Find a word character including _
(iii) + after \w means find a word character including _ that matches any string that contains at least one word character.
(iv) \s means Find a white space character.
(v) a dollar sign ( $ ) is at the end of the entire regular expression, it matches the end of a line.

As there are three different capturing groups, so \1 after \s will not work as it will repeat the word "one". We need to write (\w+) three times.

🔹 The "replaceText" replaced the 1st capturing group with the 3rd capturing group which is simply done with the dollar sign ($).
🔹 $3 captures the 3rd group which is the word "three" and replaces it with the 1st group 1 which is "one" using $1.
🔹 The 2nd group remains as it is denoted by $2.
🔹 The string.replace() method took the fixRegex as first parameter and replaceText as the second parameter and simply returned "three two one" replacing one and three with each other.

If you find it interesting, write a regex to solve this problem. Replace the following string with "five three one 6 4 2" using RegEx Capturing Groups and string.replace method.

let str = "one 2 three 4 five 6";

//output: five three one 6 4 2

Questions are always welcomed in the discussion section!!

Array.splice() & Array.slice()

Swarnali Roy — Tue, 17 Aug 2021 18:17:13 +0000

Hello Dear Readers,

In the previous posts of this series, we've already learnt how to add elements to an array using array.unshift() & array.push() methods and remove elements from an array using array.shift() & array.pop() methods.
https://dev.to/swarnaliroy94/add-items-to-arrays-with-unshift-push-methods-3ma2
https://dev.to/swarnaliroy94/remove-items-from-arrays-with-shift-pop-methods-5caf

Now, what if we want one or more than one item to be removed from somewhere in the middle of an array, that too at the same time?
Well, that's exactly where array.splice() comes in.

Array.splice() Method

👉 This method allows us to remove any number of consecutive elements from anywhere in an array and/or add new elements in place.
👉 Array.splice() can take up to three parameters.
👉 We can use this method multiple times in a single code snippet , step by step. With each execution , the values of the indices change.

The basic syntax are:

splice(start)

or,

splice(start, deleteCount)

or,

splice(start, deleteCount, item1, item2, itemN)

Let's know about these parameters and what they mean.

Parameters of Array.splice()

start

🔸 splice()'s first parameter represents the index on the array from which to begin removing elements.
🔸 If greater than the length of the array, start will be set to the length of the array. In this case, no element will be removed but the method will behave as an adding function, adding as many element as provided.
🔸 splice() can also take negative integers as parameter. If negative, it will begin that many elements from the end of the array. In this case, -1 means -n , that is the index of the nth last element, and is therefore equivalent to the index of array.length - n.

deleteCount

🔸 The second parameter indicates the number of elements to be removed or replaced.
🔸 It indicates the number of elements in the array to remove from start.
🔸 If deleteCount is omitted or is equal to or greater than the number of elements left in the array, starting at start, then all the elements from start to the end of the array will be eliminated.
🔸 If deleteCount is 0 or negative, no elements will be removed.

item1, item2, ...., itemN

🔸 The third parameter of splice() is optional and only used when we want to add elements to the array, beginning from the start.
🔸 If no element is specified, splice() will only remove elements from the array.

Let's move on to some examples to understand this concept better. We need to always remember that index of an array starts at 0.

🔹 Example 1: Remove 2 elements starting from index 2 and insert two new elements.

let flowers = ["rose", "orchid", "marigold", "sunflower", "belly"];
let removed = flowers.splice(2, 2);

console.log(flowers); //output: [ 'rose', 'orchid', 'belly' ]
console.log(removed); //output: [ 'marigold', 'sunflower' ]

In this example, start is the index 2 and deleteCount is also 2 that means, splice() will start removing elements from index 2 and remove the values of index 2 and 3.

We can see the same example and insert two new elements in place of the removed elements 👇

let flowers = ["rose", "orchid", "marigold", "sunflower", "belly"];
let removed = flowers.splice(2, 2, "almonda", "rosemary");

console.log(flowers); 
//output: [ 'rose', 'orchid', 'almonda', 'rosemary', 'belly' ]
console.log(removed); //output: [ 'marigold', 'sunflower' ]

Here, value of index 2 and 3 are removed and in place of them two new values are added.

🔹 Example 2: Remove elements using splice() multiple times

let flowers = [
  "rose",
  "orchid",
  "marigold",
  "sunflower",
  "belly",
  "almonda",
  "rosemary",
  "hibiscus",
];
let removed = flowers.splice(2,1);

console.log(removed); // [ 'marigold' ]
console.log(flowers); 
// ['rose', 'orchid', 'sunflower', 'belly', 'almonda', 'rosemary', 'hibiscus' ]

let removeAgain = flowers.splice(5,2); 
console.log(removeAgain); //[ 'rosemary', 'hibiscus' ]
console.log(flowers); 
// [ 'rose', 'orchid', 'sunflower', 'belly', 'almonda' ]

let include = flowers.splice(2,1,"tulip");
console.log(include); //[ 'sunflower' ]
console.log(flowers); 
//[ 'rose', 'orchid', 'tulip', 'belly', 'almonda' ]

In the example at first marigold is removed from index 2.
Now, the modified array holds rosemary and hibiscus at index 5 and 6. So, removed them using *splice(5,2). Lastly, "sunflower" has been replaced by "tulip".
In the process of changing the original array, with the first execution, the value of the indices has been changed and depending on that we executed the next steps.

🔹 Example 3: Remove 0 (zero) elements before index 3, and insert 1 new element.

let flowers = ["rose", "orchid", "marigold", "sunflower", "belly"];
let removed = flowers.splice(3, 0, "almonda");

console.log(flowers); 
//output: [ 'rose', 'orchid', 'marigold', 'almonda', 'sunflower', 'belly' ]
console.log(removed); //output: []

Here, deleteCount is 0 so nothing is removed but a new element is added to the array at index 3 as the first parameter of splice() is 3.

🔹 Example 4: Remove elements from index 0 and insert elements/nothing

let birds = ["crow", "pigeon", "parrot"];
let removed = birds.splice(0, 2, "macaw", "peacock", "lovebird");

console.log(birds);
//output: [ 'macaw', 'peacock', 'lovebird', 'parrot' ]
console.log(removed); //output: [ 'crow', 'pigeon' ]

Let's see what happens if we take the same array and remove all the elements and insert nothing.

let birds = ["crow", "pigeon", "parrot"];
let removed = birds.splice(0, 3) ;

console.log(instruments); //output: []
console.log(removed); //output: [ 'crow', 'pigeon', 'parrot' ]

In the above example, there were only 3 values and we removed 3 items from index 0, so the output shows an empty array.

🔹 Example 5: Remove elements from index -n

let colours = ['blue','black','red','pink','yellow','grey'];
let removed = colours.splice(-3, 2);

console.log(colours); //output: [ 'blue', 'black', 'red', 'grey' ]
console.log(removed); //output: [ 'pink', 'yellow' ]

In this case, start is -3 which indicates the 3rd last element of the array and deleteCount is 2 which means the splice() method will remove 2 elements from the 3rd last element and the other values will be same as before.

Let's add some new values to the array.

let colours = ['blue','black','red','grey'];
let removed = colours.splice(-2, 1,'pink','purple');

console.log(colours); 
//output: [ 'blue', 'black', 'pink', 'purple', 'grey' ]
console.log(removed); //output: [ 'red' ]

Here, start is -2 which indicates the 2nd last element of the array and deleteCount is 1 which means the splice() method will remove 1 element from the 2nd last element and add two new values starting from index -2.

🔹 Example 6: Remove all elements, no deleteCount, no new insertion

Remove all elements starting from index 4 👇

let music = ['guitar','drums','violin','piano','tambourine','flute'];
let removed = music.splice(4);

console.log(music); 
//output: [ 'guitar', 'drums', 'violin', 'piano' ]
console.log(removed); //output: [ 'tambourine', 'flute' ]

Remove all elements starting from index -4 👇

let music = ['guitar','drums','violin','piano','tambourine','flute'];
let removed = music.splice(-4);

console.log(music); 
//output: [ 'guitar', 'drums' ]
console.log(removed); //output: [ 'violin', 'piano', 'tambourine', 'flute' ]

At this point, we have known enough of how to modify an array by adding and removing items. But there is another way which we can use to access part of an array without modifying it. That concept is known as Array.slice()

Array.slice() Method

👉 Rather than modifying an array, Array.slice() copies or extracts a given number of elements to a new array, leaving the original array unmodified.
👉 It returns a shallow copy of elements from the original array. Elements of the original array are copied into the returned array.
👉 It can take only two parameters and both of them are optional

The basic syntax are:
slice()
or
slice(start)
or
slice(start,end)

Parameters of Array.slice()

start

🔸 start indicates the index at which to start extraction
🔸 Index can be negative, indicating an offset from the end of the sequence.
🔸 The process generally starts extracting from index 0 if start is undefined.
🔸 If start is greater than the index range of the sequence, an empty array is returned.

end

🔸 end indicates index before which to end extraction.
🔸 slice() extracts up to but not including end. For example, slice(1,4) starts extracting from index 1 through index 3. (elements indexed 1, 2, and 3 will be copied).
🔸 A negative indexing can be used. For example, slice(2,-1) extracts the third element through the second-to-last element in the sequence.
🔸 slice() extracts through the end of the sequence (array.length), if there is no end specified.
🔸 If end is greater than the length of the sequence, slice() extracts through to the end of the sequence (array.length).

A few examples will clear the concept more.

🔹 Example 1: Return a Copy of the Original Array

let music = ['guitar','drums','violin','piano','tambourine','flute'];
let extracted = music.slice();

console.log(music); 
//output: [ 'guitar', 'drums', 'violin', 'piano', 'tambourine', 'flute' ]
console.log(extracted); 
//output: [ 'guitar', 'drums', 'violin', 'piano', 'tambourine', 'flute' ]

As no parameter is passed within slice(), it returns the whole array unchanged.

🔹 Example 2: Return a Part of the Existing Array, only using one parameter

let fruits = ['mango', 'apple', 'orange', 'grape', 'lemon', 'banana', 'kiwi'];
let extracted = fruits.slice(3);

console.log(fruits); 
//output: ['mango', 'apple', 'orange', 'grape', 'lemon', 'banana', 'kiwi']
console.log(extracted); 
//output: [ 'grape', 'lemon', 'banana', 'kiwi' ]

In the above example, the original array is unchanged after slice() being called upon it but the new array extracted holds the copies of the values starting from index 3. As no end is specified, slice() extracted all the value through array.length

🔹 Example 3: Return a Part of the Existing Array, using both parameters

let fruits = ['mango', 'apple', 'orange', 'grape', 'lemon', 'banana', 'kiwi'];
let extracted = fruits.slice(2,5);

console.log(fruits); 
//output: ['mango', 'apple', 'orange', 'grape', 'lemon', 'banana', 'kiwi']
console.log(extracted); 
//output: [ 'orange', 'grape', 'lemon' ]

This example shows, the original array is unchanged after slice() being called upon it but the new array extracted holds the copies of the values starting from index 2 up to index 5 but not including the value of index 5. The extracted array holds the copies of values indexed at 2, 3 and 4.

Summarizing Array.splice() vs Array.slice()

Array.splice()	Array.slice()
The `splice()` method returns the removed item(s) in an array.	The `slice()` method returns the selected element(s) in an array, as a new array object.
This method changes the original array.	This method doesn’t change the original array.
It does not create any copy of the existing array, rather modifies it.	It just creates a shallow copy of the existing array without doing any modification to it.
Can take three parameters	Can take two parameters
When we write splice(2,4), it starts removing values from index 2 and remove 4 elements, including the value of index 4 (removed items will be indexed at 2,3,4 & 5)	When we write slice(2,4), it extracts values of index 2 up to index 4, excluding the value of index 4 (removed items will be indexed at 2 & 3)
In this method, the third parameter gives the option to add one or more new items to the existing array	There is no such adding option in this method

In the end , I'll give only one problem to solve to my readers. Let's see how you solve this.

🔲 Use splice() to remove "USA" first and then from "Japan" to "Canada". Insert "Bhutan" in place of "UK". Use slice() to keep a copy of the original array.

let countries = [
  "Bangladesh","India","Nepal","USA",
  "UK","Germany","Japan","Spain","Canada"
];

Expected Output:

[ 'Bangladesh', 'India', 'Nepal', 'Bhutan', 'Germany' ]

Readers can post their solutions in the discussion part.

Forem: Swarnali Roy

How to prepare for a Coding/Technical Interview

What is a Coding Interview?

The Purpose

Key Terms to Know

Preparation Strategies

Do's/Don'ts during the interview

Choose your List Component wisely!

React Native: FlatList or SectionList, which one to use in your app?

React Native: FlatList or SectionList, which one to use in your app?

What is FlatList?

FlatList Props

What is SectionList

SectionList Props

Common Props in FlatList and SectionList

When to choose which?

Combining useful JS basics

Understanding map(), filter(), Set, and the Spread Operator in JavaScript

Understanding map(), filter(), Set, and the Spread Operator in JavaScript

1. The map() Method

Syntax:

Explanation of parameters:

2. The filter() Method

Syntax:

Explanation of parameters:

3. The Set Object

4. The Spread Operator (...)

Combining It All Together

Nested ScrollViews can be Tricky in React Native! How to solve?

ScrollView or Flatlist, which one to use?

It is recommended to avoid nesting multiple ScrollViews in a single screen.

Reasons to avoid Nested ScrollViews

How to Solve This!

Some Additional Tips

CSS Variables with Global & Local Scope

Global & Local Scope

Declaring Global CSS Variable

Using CSS Variable in Local Scope

Usefulness of CSS Variables

The keyword "new" in JavaScript

Hope this post help you while creating a lot of similar objects in your application. Discussion and queries are always welcomed! ☺️☺️

Reverse a String in JavaScript

🔶built-in Methods: split().reverse().join()

Chaining these Methods

🔶Using Decrementing For Loop

🔶The Recursive Approach: Recursion Method

🔶 Using Array.prototype.reduce() Method

🔶Using Regular Expressions (RegEx)

I hope the readers understood the tutorial and it can help you in your interviews as well. Queries are always welcomed in the discussion section.

Introduction to React : Real DOM & Virtual DOM

What is React?

How Does React Work?

What is Real/Browser DOM?

What is React's Virtual DOM?

In the next posts, I'll write about the features of React in Details. If you like this post please save, like and press unicorn and also follow me to keep an eye on my other posts.

Using RegEx Capturing Groups

Specify RegEx Capturing Groups using Numbers

RegEx Capturing Groups to Search and Replace Text in a String using string.replace()

If you find it interesting, write a regex to solve this problem. Replace the following string with "five three one 6 4 2" using RegEx Capturing Groups and string.replace method.

Questions are always welcomed in the discussion section!!

Array.splice() & Array.slice()

Array.splice() Method

Parameters of Array.splice()

🔹 Example 1: Remove 2 elements starting from index 2 and insert two new elements.

🔹 Example 2: Remove elements using splice() multiple times

🔹 Example 3: Remove 0 (zero) elements before index 3, and insert 1 new element.

🔹 Example 4: Remove elements from index 0 and insert elements/nothing

🔹 Example 5: Remove elements from index -n

🔹 Example 6: Remove all elements, no deleteCount, no new insertion

Array.slice() Method

Parameters of Array.slice()

🔹 Example 1: Return a Copy of the Original Array

🔹 Example 2: Return a Part of the Existing Array, only using one parameter

🔹 Example 3: Return a Part of the Existing Array, using both parameters

Summarizing Array.splice() vs Array.slice()

1. The `map()` Method

2. The `filter()` Method

It is recommended to avoid nesting multiple `ScrollViews` in a single screen.