DEV Community

P Mukila
P Mukila

Posted on

3

Today I Learn - Understanding Arrays, Spread Operator, map(), and useState in JavaScript and React...

When working with JavaScript and React, there are a few core concepts that you’ll use again and again: arrays, the spread operator (...), the map() function, and React's useState hook. In this blog, we’ll break each one down with simple examples so you can understand how and when to use them effectively.

Arrays in JavaScript

An array is a list-like object used to store multiple values in a single variable.

const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[0]); // Output: apple

Enter fullscreen mode Exit fullscreen mode

Arrays can hold any data type — strings, numbers, objects, or even other arrays.

The Spread Operator (...)

The spread operator allows you to quickly copy or merge arrays and objects.
Copying an array:

const original = [1, 2, 3];
const copy = [...original];

console.log(copy); // [1, 2, 3]

Enter fullscreen mode Exit fullscreen mode

Adding elements:

const numbers = [1, 2, 3];
const moreNumbers = [...numbers, 4, 5];

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

Enter fullscreen mode Exit fullscreen mode

Merging arrays:

const a = [1, 2];
const b = [3, 4];
const combined = [...a, ...b];

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

Enter fullscreen mode Exit fullscreen mode

Using map() to Transform Arrays

The map() method lets you apply a function to every element in an array and returns a new array.
Example: Multiply each number by 2

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

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

Enter fullscreen mode Exit fullscreen mode

In React, map() is commonly used to render lists of components:

const items = ['pen', 'notebook', 'eraser'];

return (
  <ul>
    {items.map((item, index) => <li key={index}>{item}</li>)}
  </ul>
);
Enter fullscreen mode Exit fullscreen mode

useState in React

React's useState hook lets you add state to functional components.
Basic usage:

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Updating an array with useState and the spread operator:

function TodoList() {
  const [todos, setTodos] = useState(['Buy milk']);

  const addTodo = () => {
    setTodos([...todos, 'Walk the dog']);
  };

  return (
    <>
      <ul>
        {todos.map((todo, index) => <li key={index}>{todo}</li>)}
      </ul>
      <button onClick={addTodo}>Add Todo</button>
    </>
  );
}

Enter fullscreen mode Exit fullscreen mode

DevCycle image

Ship Faster, Stay Flexible.

DevCycle is the first feature flag platform with OpenFeature built-in to every open source SDK, designed to help developers ship faster while avoiding vendor-lock in.

Start shipping

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Feature flag article image

Create a feature flag in your IDE in 5 minutes with LaunchDarkly’s MCP server 🏁

How to create, evaluate, and modify flags from within your IDE or AI client using natural language with LaunchDarkly's new MCP server. Follow along with this tutorial for step by step instructions.

Read full post

👋 Kindness is contagious

Explore this practical breakdown on DEV’s open platform, where developers from every background come together to push boundaries. No matter your experience, your viewpoint enriches the conversation.

Dropping a simple “thank you” or question in the comments goes a long way in supporting authors—your feedback helps ideas evolve.

At DEV, shared discovery drives progress and builds lasting bonds. If this post resonated, a quick nod of appreciation can make all the difference.

Okay