JavaScript execution happens in 2 main phases -

1. Creation Phase
2. Execution Phase

1. Creation Phase (Memory setup)

Before executing any code JS engine scans entire code and sets up memory:

Three things happen:

1. Creates the Global Execution Context — This is the environment where code runs
2. Sets up memory for variable and functions — This is where hoisting happens
3. Creates scope chain — Determines what variables are accessible where

During this phase:

• Function declarations are stored completely in memory with their entire code
• Variables declared with var are stored but set to undefined
• Variables declared with let and const are stored but marked as uninitialized (Temporal Dead Zone)

This is why hoisting works. JavaScript knows all about your declarations before running line one of the code.

2. Execution Phase

Now JavaScript goes line by line through the code and actually executes:

What happens:

1. Assigns values to variables
2. Executes function calls
3. Creates new execution contexts for each function call

The call stack: JavaScript uses call stack to manage execution contexts.

• When you call a function, a new execution context is pushed onto the stack
• When function finishes, its context is popped off the stack
• JavaScript can only execute what’s on the top of the stack

The Event Loop

JavaScript is single-threaded but can handle async operations using the Event Loop. The event loop constantly checks if the call stack is empty, then moves tasks from queues to the stack for execution.

Core Components (The Players)

1. Call Stack — Where code executes (LIFO — Last In First Out)
2. Web APIs — Browser APIs (setTimeout, fetch, DOM events)
3. Callback Queue (Task Queue) — Holds callbacks from Web APIs
4. Microtask Queue — High priority queue (Promises, queueMicrotask)
5. Event Loop — Monitors and moves tasks to call stack

How It Works (5 Steps)

1. Execute sync code on call stack
2. Offload async operations to Web APIs
3. Callback ready? Web API puts callback in queue
4. Stack empty? Event loop checks
5. Move to stack — Event loop pushes callback from queue to stack

Visual Flow

Code → Call Stack → Web APIs → Queues → Event Loop → Back to Call Stack

[Call Stack]
     ↓
[Web APIs] (setTimeout, fetch, etc.)
     ↓
[Microtask Queue] ← Promises (HIGH PRIORITY)
[Callback Queue]  ← setTimeout, events (LOW PRIORITY)
     ↓
[Event Loop] → Checks if stack empty → Moves tasks to stack

Priority Order (CRITICAL)

Event Loop checks in this order:

1. Call Stack — Execute current code
2. Microtask Queue — Process ALL microtasks (Promises)
3. Callback Queue — Process ONE task (setTimeout, events)
4. Repeat

Example Walkthrough

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

console.log('4');

// Output: 1, 4, 3, 2

Step by step:

Step 1: console.log('1') → Stack → Execute → "1"
Step 2: setTimeout → Web API (timer starts)
Step 3: Promise.resolve().then → Microtask Queue
Step 4: console.log('4') → Stack → Execute → "4"
Step 5: Stack empty! Event loop checks...
Step 6: Microtask Queue has Promise → Execute → "3"
Step 7: Callback Queue has setTimeout → Execute → "2"

Queue Types Comparison

╔══════════════════╤══════════════════════════════╤══════════╤════════════════════════════════════════╗
║ Queue            │ Examples                     │ Priority │ When Executed                          ║
╠══════════════════╪══════════════════════════════╪══════════╪════════════════════════════════════════╣
║ Microtask        │ Promises, queueMicrotask     │ HIGH     │ After current script, before rendering ║
╟──────────────────┼──────────────────────────────┼──────────┼────────────────────────────────────────╢
║ Callback (Macro) │ setTimeout, setInterval, I/O │ LOW      │ After microtasks                       ║
╚══════════════════╧══════════════════════════════╧══════════╧════════════════════════════════════════╝

Common Scenarios

Scenario 1: setTimeout vs Promise

setTimeout(() => console.log('timeout'), 0);
Promise.resolve().then(() => console.log('promise'));

// Output: promise, timeout
// Why? Microtasks (Promise) run before macrotasks (setTimeout)`

Scenario 2: Nested Promises

Promise.resolve()
  .then(() => {
    console.log('1');
    Promise.resolve().then(() => console.log('2'));
  })
  .then(() => console.log('3'));

// Output: 1, 2, 3
// Why? Nested promise added to microtask queue immediately

Scenario 3: Multiple setTimeouts

setTimeout(() => console.log('A'), 0);
setTimeout(() => console.log('B'), 0);

// Output: A, B
// Why? Event loop processes callback queue one at a time, in order

Scenario 4: The Classic Interview Question

console.log('Start');

setTimeout(() => console.log('Timeout 1'), 0);

Promise.resolve()
  .then(() => console.log('Promise 1'))
  .then(() => console.log('Promise 2'));

setTimeout(() => console.log('Timeout 2'), 0);

console.log('End');

// Output: Start, End, Promise 1, Promise 2, Timeout 1, Timeout 2

Why?

1. Sync: Start, End
2. Microtasks: Promise 1, Promise 2 (ALL microtasks)
3. Macrotasks: Timeout 1, Timeout 2 (ONE at a time)

Key Rules (Memorize These)

1. Synchronous code runs first — always
2. Microtasks run before macrotasks — always
3. ALL microtasks run before ANY macrotask — critical
4. Event loop processes ONE macrotask at a time
5. Stack must be empty before event loop moves tasks

If you found this blog post helpful, please give it a 👏. Your support and time mean a lot to me. Thanks for tuning in and reading!

How a JavaScript program executes was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

What is React Reconciliation?

React Reconciliation is a process where react effectively updates the actual DOM to match the latest UI state defined by react components.

Why should anyone care about these implementation details?

Understanding how react updates the DOM improves developer’s understanding of react in day to day work. It improves -

1. System design and architecture considerations,
2. State management strategy
3. Debugging process and
4. Testing accuracy

React Reconciliation Triggers

This process is triggered when:

1. state changes (own state)
2. context changes (subscribed context)
3. parent re-renders (which may include prop changes for children)

React Reconciliation Process Steps

1. Render (Diffing) Phase
2. Commit Phase

1. Render (Diffing) Phase

When data changes, react generates the new VDOM representing the updated UI.

It compares then this new tree with previous one to identify the differences (diffing process).

React uses 2 heuristics to perform this comparison in linear O(n) time complexity, rather than a more complex O(n³) algorithm.

1. Two elements of different types will produce different trees
2. The developer can hint at which child elements may be stable across different renders with a key prop.

The Diffing Algorithm

Behavior:

1. Elements of different types: The old element is destroyed along with its children tree. The new element creates new tree from scratch.
2. DOM Elements of same types: React keeps the underlying same DOM element, updated its changed attributes.
3. Component Elements of same types: When a component updates, the instance stays the same, so state is maintained across renders but updates the props.
4. Children comparison (Keys): When reconciling children in a list, React iterates over both lists simultaneously. To efficiently track which item have been added, removed, or reordered, developers must provide a unique, stable key prop for each element.

React Fiber

Introduced in React 16, Fiber allows React to break down rendering work into smaller “units of work” that can be paused and resumed.

This enables:

1. Prioritization — Urgent updates interrupt slow ones
2. Time slicing — Work in small chunks keeps UI responsive
3. Better UX — Features like concurrent rendering, Suspense, Transitions improve UX

This makes the UI more responsive by preventing large updates from blocking the main thread and user interactions.

Fiber Priority Levels

Priority Queue:
┌────────────────────────────────────┐
│ ImmediatePriority                  │  User typing in input
│ (Sync, must happen now)            │
├────────────────────────────────────┤
│ UserBlockingPriority               │  Click, hover, scroll
│ (250ms timeout)                    │
├────────────────────────────────────┤
│ NormalPriority                     │  Data fetching
│ (5s timeout)                       │  Network responses
├────────────────────────────────────┤
│ LowPriority                        │  Transitions 
| (10s timeout)                      |  Analytics
│                                    │  Logging
├────────────────────────────────────┤
│ IdlePriority                       │  Prefetching
│ (No timeout, runs when idle)       │
└────────────────────────────────────┘

2. Commit Phase

Once the differences are determined, React applies the minimal set of changes to actual DOM.

This phase is synchronous and ensures visual UI is in sync with the current state.

Optimization opportunities

With continuous improvements in react performance out of the box, developers can focus more and more on business requirements. But to improve further developers need to keep following things in mind:

1. Use stable, predictable and unique keys in list components
2. Measure the performance and use targeted memoization
3. Isolate state where is it used and avoid its exposure to other component trees that do not use it
4. Avoid inline object and callback assignments in JSX such as styles, event handlers
5. Create smaller components

Example in action

function SearchPage() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();
  
  const handleChange = (e) => {
    // High priority - update immediately
    setQuery(e.target.value);
    
    // Low priority - can be interrupted
    startTransition(() => {
      setResults(expensiveSearch(e.target.value));
    });
  };
  
  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending && <Spinner />}
      <Results data={results} />
    </>
  );
}

What Happens

User types "a"
  ↓
setQuery("a") - HIGH priority
  ↓
Input updates immediately (Fiber prioritizes this)
  ↓
startTransition(() => setResults(...)) - LOW priority
  ↓
Fiber starts rendering Results
  ↓
User types "b" (while Results still rendering)
  ↓
Fiber PAUSES low-priority work
  ↓
Processes setQuery("b") immediately
  ↓
Input stays responsive
  ↓
Resumes Results rendering with "b"

Without Fiber: Can’t pause, user sees janky typing

With Fiber: Can interrupt low-priority work for high-priority updates

Features Enabled by Fiber

All rely on Fiber’s ability to pause/resume work.

Thanks for reading!

Happy learning!

React Reconciliation Process was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

I have compiled these notes/highlights from one of the YouTube videos by a channel called “Veritasium” titled — The 4 things it takes to be an expert.

At its core, expertise is about recognition. And recognition leads directly to intuition.

To develop the long term memory of an expert takes a long time. 10,000 hours of practice by itself is not sufficient.

There are 4 additional criteria that must be met. And, in areas where these criteria are not met, it is impossible to become an expert.

1️⃣Valid environment:

The environment must be predictable and have regularities that can be learned.

1. It is important to choose an environment where you can get the feedback and support you need to succeed.
2. It is also important to make sure that the environment is not too challenging or too easy.
3. If the environment is too challenging, you will be overwhelmed and will not be able to learn.
4. If the environment is too easy, you will not be challenged and will not be able to improve.

2️⃣Many repetitions:

You must have many opportunities to practice the skill.

1. The more you practice, the better you will become at the skill.
2. It is important to practice in a variety of different ways.
3. For example, you can practice by yourself, with a partner, or in a group.
4. You can also practice in different settings, such as at home, at school, or at work.

3️⃣Timely feedback:

You must receive feedback on your performance so that you can learn from your mistakes.

1. Feedback can come from a variety of sources, such as a teacher, a coach, a mentor, or even yourself.
2. It is important to be receptive to feedback and to use it to improve your performance.
3. It is also important to be patient and to not get discouraged if you make mistakes.

4️⃣Deliberate practice:

You must practice in a way that pushes you to your limits and helps you to improve.

1. Deliberate practice is not just about doing the same thing over and over again.
2. It is about practicing in a way that challenges you and helps you to learn new things.
3. For example, you can try to practice at a faster pace, with more accuracy, or with more complexity.
4. You can also try to practice in different conditions, such as under pressure or with distractions.

Remember, mastery is a journey. Stay persistent and keep evolving.​

How to get better at anything and move towards expertise! was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

Introduction to React Testing with Jest/Vitest and RTL

This comprehensive guide is designed for beginner to intermediate React developers who want to establish robust testing practices in their projects. By the end of this guide, you’ll understand the different types of tests, how to set up a testing environment with Jest/Vitest and React Testing Library (RTL), and write effective tests for React components.

Testing is a fundamental part of professional software development, and React applications are no exception. A well-tested codebase ensures reliability, facilitates refactoring, serves as documentation, prevents regressions, improves code quality, and ultimately leads to a better user experience. This guide will introduce you to the basics of testing React components using both Jest and Vitest with simple examples and explanations.

Types of Testing

1. Unit Testing: Testing individual components or functions in isolation.

• Focuses on one “unit” of code at a time
• Fast to execute and easy to debug
• Example: Testing a button component to ensure it renders correctly and handles clicks

// Example: Testing a Button component in isolation
test('Button renders correctly', () => {
  render(<Button label="Click me" />);
  expect(screen.getByText('Click me')).toBeInTheDocument();
});

2. Integration Testing: Testing how multiple components or functions work together.

• Verifies that different parts of your application integrate properly
• More complex than unit tests but offers more confidence
• Example: Testing a login or contact form that includes input fields, validation, and submission logic

// Example: Testing a form submission with multiple components
test('Form submits data correctly', async () => {
  render(<ContactForm />);
  await userEvent.type(screen.getByLabelText('Email'), 'test@example.com');
  await userEvent.click(screen.getByRole('button', { name: /submit/i }));
  expect(screen.getByText('Form submitted')).toBeInTheDocument();
});

3. End-to-End (E2E) Testing: Testing the entire application as a user would experience it.

• Tests the complete flow of an application
• Closest to real user experience
• Slower and more complex to set up
• Example: Testing the entire user registration and login flow using tools like Cypress or Playwright

💡Key Takeaways:

- Unit tests focus on isolated components and are fast to run

- Integration tests verify interactions between components

- E2E tests validate complete user flows but are more complex to maintain

- A balanced testing strategy includes all three types

Why Test Your React Code?

• Catch bugs early: Find issues before your users do
• Refactoring Confidence: Good test coverage allows you to refactor code without fear of breaking functionality.
• Documentation: Tests serve as living documentation, showing how components are supposed to work.
• Better Design: Writing testable code often leads to better component design and separation of concerns.
• Regression Prevention: Tests catch regressions before they reach production.
• Developer Confidence: A solid test suite gives developers confidence in their code and reduces stress during deployments.

💡Key Takeaways:

- Tests are an investment that pays off by reducing bugs and maintenance costs

- Writing tests often improves your component design

- Tests serve as documentation for how components should behave

Testing Tools Overview

Jest

Jest is a popular JavaScript testing framework maintained by Facebook. It’s widely used in the React ecosystem and comes with:

• A test runner
• Built-in assertion library
• Mocking capabilities
• Parallel test execution for faster results
• Built-in snapshot testing capability

Vitest

Vitest is a newer, Vite-based test runner that’s:

• Designed to be faster than Jest, especially for large projects
• Compatible with Jest’s API
• Better integration with TypeScript and modern JS features
• Particularly well-suited for Vite-based projects

React Testing Library

React Testing Library is a library for testing React components that encourages testing from a user’s perspective rather than implementation details. It works with both Jest and Vitest to:

• Render React components for testing
• Simulate user interactions
• Focuses on accessibility and how users interact with your app
• Works with Jest, Vitest, or any other test runner
• Query elements as a user would

Jest vs Vitest: Key Differences

While Vitest aims to be compatible with Jest, there are some differences to be aware of:

Choose Jest if:

• You’re working with Create React App or a similar setup where Jest is pre-configured
• You need maximum compatibility with existing codebases and libraries
• You prefer a more mature ecosystem with extensive documentation and community support

Choose Vitest if:

• You’re using Vite as your build tool
• You want faster test execution, especially for larger projects
• You’re working with ESM modules and modern JavaScript features
• You value a more modern, streamlined API
• You need better HMR (Hot Module Replacement) support during testing

💡Key Takeaways:

- Jest and Vitest have similar APIs but different performance characteristics

- React Testing Library works with either test runner

- Choose your testing framework based on your project’s build system and performance needs

Setting Up Your Testing Environment

Setting up Jest with RTL in a TypeScript React Project

1. Install dependencies:

yarn add -D jest @types/jest @testing-library/react @testing-library/jest-dom @testing-library/user-event jest-environment-jsdom ts-jest

2. Create jest.config.js in your project root:

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    // Handle module aliases (if you're using them)
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
};

3. Create jest.setup.ts:

import '@testing-library/jest-dom';

4. Add to package.json:

"scripts": {
  "test": "jest",
  "test:watch": "jest --watch"
}

Setting up Vitest with RTL in a TypeScript React Project

1. Install dependencies:

yarn add -D vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom

2. Create or update vitest.config.ts:

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './vitest.setup.ts',
  },
});

3. Create vitest.setup.ts:

import '@testing-library/jest-dom';

4. Add to package.json:

"scripts": {
  "test": "vitest run",
  "test:watch": "vitest"
}

Running Tests

# With Vitest (used in this project)
yarn test                # Run all tests
yarn test:watch          # Run tests in watch mode
yarn test:coverage       # Run tests with coverage report

# With Jest (if using in other projects)
yarn test                # Run all tests
yarn test -- --watch     # Run tests in watch mode
yarn test -- --coverage  # Run tests with coverage report

💡Key Takeaways:

- Both Jest and Vitest require specific setup for TypeScript and React

- The setup process is straightforward and similar for both tools

- Running tests with coverage reports helps identify untested code

Your First Test

Basic test for a simple component

Let’s understand a basic test for a simple component:

// Example test file that works with both Jest and Vitest
import { render, screen } from '@testing-library/react';
import HelloWorld from './HelloWorld';

// With Jest
// import '@testing-library/jest-dom';
// test('displays the greeting message', () => { ... });

// With Vitest
import { describe, it, expect } from 'vitest';

describe('HelloWorld', () => {
  it('displays the greeting message', () => {
    // Render the component
    render(<HelloWorld />);

    // Check if "Hello, World!" appears on screen
    const message = screen.getByText('Hello, World!');

    // Verify it exists
    expect(message).toBeInTheDocument();
  });
});

Basic Jest/RTL Test for a React Component

Let’s create a simple Button component and test it:

// Button.tsx
import React from 'react';

interface ButtonProps {
  onClick?: () => void;
  children: React.ReactNode;
  disabled?: boolean;
}

function Button({ onClick, children, disabled }: ButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`btn ${disabled ? 'btn-disabled' : 'btn-active'}`}
    >
      {children}
    </button>
  );
}

export default Button;

Now let’s write a test for it:

// Button.test.tsx (works with both Jest and Vitest)
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

// Test suite for the Button component
describe('Button component', () => {
  // Test case: Button renders with correct text
  test('renders with the correct text', () => {
    // Arrange: Render the component with specific props
    render(<Button>Click me</Button>);

    // Act: No action needed for this test

    // Assert: Check if the button with the text exists
    expect(screen.getByRole('button', { name: /Click me/i })).toBeInTheDocument();
  });

  // Test case: Button calls onClick handler when clicked
  test('calls onClick handler when clicked', () => {
    // Arrange: Create a mock function and render the component
    const handleClick = jest.fn();
    render(<Button onClick={handleClick}>Click me</Button>);

    // Act: Simulate a user clicking the button
    fireEvent.click(screen.getByRole('button', { name: /Click me/i }));

    // Assert: Verify the mock function was called
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  // Test case: Button is disabled when disabled prop is true
  test('is disabled when disabled prop is true', () => {
    // Arrange: Render the component with disabled prop
    render(<Button disabled={true}>Click me</Button>);

    // Act: No action needed for this test

    // Assert: Check if the button is disabled
    expect(screen.getByRole('button', { name: /Click me/i })).toBeDisabled();
    expect(screen.getByRole('button', { name: /Click me/i })).toHaveClass('btn-disabled');
  });
});

Basic Vitest Example

The syntax is nearly identical to Jest, but there are some subtle differences:

// Button.test.tsx (specifically for Vitest)
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import Button from './Button';

describe('Button component', () => {
  it('renders with the correct text', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByRole('button', { name: /Click me/i })).toBeInTheDocument();
  });

  it('calls onClick handler when clicked', () => {
    // Note: Using vi.fn() instead of jest.fn()
    const handleClick = vi.fn();
    render(<Button onClick={handleClick}>Click me</Button>);

    fireEvent.click(screen.getByRole('button', { name: /Click me/i }));

    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  it('is disabled when disabled prop is true', () => {
    render(<Button disabled={true}>Click me</Button>);
    expect(screen.getByRole('button', { name: /Click me/i })).toBeDisabled();
    expect(screen.getByRole('button', { name: /Click me/i })).toHaveClass('btn-disabled');
  });
});

Test Structure Explained

1. Import necessary tools:

• render: Puts your component on a virtual screen
• screen: Helps you find elements on that screen
• With Jest: test, it, expect are globally available
• With Vitest: describe, test, it, expect need to be imported

2. Test Suite:

• describe('ComponentName', () => { ... }): Groups related tests together

3. Test Case:

• Jest: test('describes what should happen', () => { ... })
• Vitest: it('describes what should happen', () => { ... })
• Both work in either framework!

4. The 3 A’s pattern:

• Arrange: Set up your test (render the component)
• Act: Perform actions (click buttons, type text)
• Assert: Check if the result matches expectations

Best Practices

1. Test Behavior, Not Implementation: Focus on what the component does, not how it’s built.
2. Use Semantic/Accessible Queries: Prefer queries like getByRole, getByLabelText, and getByText over getByTestId to ensure your tests resemble how users interact with your app.
3. Test User Interactions: Verify that components respond correctly to user actions like clicks, typing, etc.
4. Keep Tests Independent: Each test should be able to run independently of others.
5. Mock External Dependencies: Use mocks for API calls, browser APIs, and other external services.
6. Keep Tests Simple: Each test should verify one specific behavior.
7. Follow the AAA Pattern: Arrange (set up), Act (perform the action), Assert (verify the result).
8. Test Edge Cases: Don’t just test the happy path; test loading states, error states, empty states, etc.
9. Run Tests Frequently: Make testing part of your development workflow, not an afterthought.

Common Mistakes

1. Testing Implementation Details: Avoid testing props, state, or other internal mechanisms directly.
2. Overusing snapshot tests: Snapshots can be helpful but shouldn’t be your primary testing strategy.
3. Ignoring Accessibility: Using queries like getByLabelText ensures your components are accessible.
4. Writing Brittle Tests: Tests that fail when implementation changes (but behavior doesn’t) are fragile.
5. Not Testing Error Cases: Many developers focus only on the happy path.
6. Testing Library Code: Focus on testing your code, not third-party libraries.
7. Using Unnecessary Test IDs: Adding test IDs to every element can clutter your code.

💡Key Takeaways:

- The AAA pattern (Arrange-Act-Assert) provides a clear structure for tests

- Focus on testing behavior over implementation details

- Both Jest and Vitest share similar syntax with minor differences

- Good tests are readable, maintainable, and focus on user interactions

Query Methods and Element Selection

Query Methods Reference Table

React Testing Library provides different query methods to find elements. Here’s when to use each:

When to use each query type:

• getBy...: Use when element should be in the DOM
• queryBy...: Use when testing that element is NOT in the DOM
• findBy...: Use when element will appear asynchronously
• ...All...: Use when multiple elements match the query

Available query variants:

Query priority (recommended order):

1. ByRole - Most accessible and recommended
2. ByLabelText - Good for form fields
3. ByPlaceholderText - Less ideal but useful for inputs
4. ByText - Good for non-interactive elements
5. ByDisplayValue - For form elements with values
6. ByAltText - For images
7. ByTitle - For elements with title attributes
8. ByTestId - Last resort when no other queries work

Finding and Asserting Elements

Finding Elements

React Testing Library provides several ways to find elements, similar to how users would find them:

• getByText('Click me'): Find by visible text
• getByRole('button'): Find by accessibility role
• getByLabelText('Username'): Find form fields by their labels
• getByPlaceholder('Enter email'): Find inputs by placeholder text

💡Key Takeaways:

- Choose query methods based on how users would interact with your UI

- Prefer getBy for elements that should exist, queryBy for elements that shouldn't

- Use findBy for elements that appear asynchronously

- The query priority hierarchy promotes accessible components

Common Assertions

What Are Assertions?

Assertions are statements that verify if your code is behaving as expected. They form the foundation of any testing framework by declaring what you expect to happen and failing the test if those expectations aren’t met. In essence, assertions answer the question: “How do I know my code is working correctly?”

Each assertion performs a check against specific conditions and reports test failures when expectations aren’t met. An assertion typically follows this pattern:

expect(actualValue).matcher(expectedValue);

Where:

• actualValue is what your code produces (the "reality")
• matcher is the type of comparison (like equals, contains, etc.)
• expectedValue is what you want your code to produce (the "expectation")

When an assertion fails, the testing framework provides detailed error messages showing:

• What was expected
• What was actually received
• Where the failure occurred

Types of Assertions in React Testing

Basic Assertions

// Element existence
expect(screen.getByText('Submit')).toBeInTheDocument();
expect(screen.queryByText('Error')).not.toBeInTheDocument();

// Text content
expect(screen.getByRole('heading')).toHaveTextContent('Welcome');
expect(element).toHaveTextContent(/regular expression/i);

// Properties and attributes
expect(inputElement).toHaveValue('test@example.com');
expect(checkboxElement).toBeChecked();
expect(element).toHaveAttribute('href', 'https://example.com');
expect(element).toHaveAttribute('aria-label');

// Class and style assertions
expect(element).toHaveClass('active');
expect(element).toHaveClass('btn btn-primary');
expect(element).not.toHaveClass('disabled');
expect(element).toHaveStyle('color: red');

Form Element Assertions

// Input values
expect(inputElement).toHaveValue('test value');
expect(selectElement).toHaveValue('option2');
expect(textareaElement).toHaveValue('text content');

// Form states
expect(inputElement).toBeDisabled();
expect(inputElement).toBeEnabled();
expect(inputElement).toBeRequired();
expect(inputElement).toBeValid();
expect(inputElement).toBeInvalid();

Accessibility Assertions

// Focus state
expect(element).toHaveFocus();
expect(document.body).toHaveFocus(); // Nothing focused

// Role and ARIA assertions
expect(element).toHaveRole('button');
expect(element).toHaveAccessibleName('Submit form');
expect(element).toHaveAccessibleDescription('Contains user profile information');

Custom Assertions

For more specific needs, you can create custom assertions:

// Custom matcher
expect.extend({
  toBeWithinRange(received, floor, ceiling) {
    const pass = received >= floor && received <= ceiling;
    if (pass) {
      return {
        message: () => `expected ${received} not to be within range ${floor} - ${ceiling}`,
        pass: true,
      };
    } else {
      return {
        message: () => `expected ${received} to be within range ${floor} - ${ceiling}`,
        pass: false,
      };
    }
  },
});

// Usage
expect(count).toBeWithinRange(1, 10);

Error Handling Assertions

// Testing that function throws expected error
expect(() => {
  validateEmail('invalid-email');
}).toThrow('Invalid email format');

// Using async/await with rejections
await expect(fetchUserData(invalidId)).rejects.toThrow('User not found');

Common Testing Patterns

Testing state changes

const button = screen.getByRole('button', { name: 'Increment' });
expect(screen.getByText('Count: 0')).toBeInTheDocument();

userEvent.click(button);
expect(screen.getByText('Count: 1')).toBeInTheDocument();

Testing conditional rendering

// Initially hidden
expect(screen.queryByText('Detailed info')).not.toBeInTheDocument();

// Show details
userEvent.click(screen.getByRole('button', { name: 'Show details' }));
expect(screen.getByText('Detailed info')).toBeInTheDocument();

Understanding Assertion Results

When an assertion passes, the test continues running. When it fails, the test framework reports:

Expected: element to have text content "Welcome"
Received: element with text content "Hello"

  13 |   render(<Header />);
  14 |   const heading = screen.getByRole('heading');
> 15 |   expect(heading).toHaveTextContent('Welcome');
     |                   ^
  16 | });

This detailed output helps you quickly identify and fix issues in your components.

Best Practices for Assertions

1. Test behavior, not implementation — Focus on what users would see/interact with rather than internal component state

2. Write multiple specific assertions — Instead of one complex assertion, write several simple ones

3. Use descriptive assertion messages — Add custom failure messages for clarity:

expect(count).toBe(1, ‘Counter should increment by one when button is clicked’);

4. Test both positive and negative cases — Verify both what should happen and what shouldn’t

5. Prefer toBeInTheDocument() over existence checks — Use the appropriate DOM testing library matchers

6. Use .toMatchSnapshot() sparingly — Prefer explicit assertions over snapshots when possible

💡Key Takeaways:

- Assertions express expectations about how your components should behave

- RTL provides many built-in assertions for DOM and accessibility testing

- Focus on testing behavior rather than implementation details

- Clear assertion messages make test failures easier to understand

Thank you for being a part of the community

Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Newsletter | Podcast | Differ | Twitch
• Check out CoFeed, the smart way to stay up-to-date with the latest in tech 🧪
• Start your own free AI-powered blog on Differ 🚀
• Join our content creators community on Discord 🧑🏻‍💻
• For more content, visit plainenglish.io + stackademic.com

React Testing Essentials: A Practical Guide to Jest and Vitest with RTL was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Perils of Mutability: A Simple Example

Consider a simple scenario where we have a person object:

const person = {
    name: 'Alice',
    age: 30
};

Now, let’s say we want to create a new person object with an updated age:

const newPerson = person;
newPerson.age = 31;

While it might seem like we’ve created a new person, in reality, we’ve just modified the original person object. This can lead to unexpected behavior in larger applications, especially when multiple parts of the code rely on the same mutable object.

Enter Object Immutability

Object immutability is a crucial concept in JavaScript that refers to the inability to modify an object after it’s created. This concept is important for writing predictable and maintainable code, especially in functional programming paradigms.

Key Concepts of Immutability

• Definition: An immutable object is one whose state cannot be modified after it is created.
• Benefits: Immutability leads to more predictable code, easier debugging, and better performance in certain scenarios.
• Challenge: JavaScript objects are mutable by default, so achieving immutability requires specific techniques.

The principle of object immutability

The principle of object immutability in programming refers to the concept that once an object is created, its state cannot be modified. This means that the object’s properties and values are read-only after its initial creation. Immutability is a key concept in functional programming and is used to promote purity, predictability, and simplicity in code. Here’s a breakdown of the core aspects of object immutability:

Core Aspects of Object Immutability

1. Predictability: Immutable objects lead to more predictable code since their state cannot change unexpectedly. This predictability facilitates easier debugging and understanding of the code, as the flow of data is more straightforward.
2. Thread Safety: In concurrent programming, immutable objects are inherently thread-safe since they cannot be modified after creation. This eliminates the need for synchronization when accessing objects across different threads, reducing the risk of concurrency-related issues like race conditions.
3. Simpler State Management: Immutability simplifies state management, especially in complex applications. Since state changes are explicit and involve creating new objects rather than mutating existing ones, it becomes easier to track changes over time and manage application state.
4. Facilitates Functional Programming: Immutability is a cornerstone of functional programming. It encourages the use of pure functions — functions where the return value is only determined by its input values, without observable side effects. This leads to more reliable and maintainable code.

Achieving Immutability in JavaScript

While JavaScript doesn’t enforce immutability by default, you can achieve it through careful programming practices and the use of appropriate techniques:

1. Primitive Data Types:

• Primitive data types (numbers, strings, booleans, null, undefined, and symbols) are inherently immutable. Assigning a new value to a variable simply creates a new reference to a different value.

2. Object Immutability:

• Creating New Objects: To modify an object, create a new object with the desired changes.
• Spread Operator: Use the spread operator to create a shallow copy of an object and then modify the copy.
• Object.assign(): This method can be used to create a new object by copying properties from one or more source objects.
• Libraries like Immer: Immer is a popular library that simplifies the process of creating immutable objects. It allows you to work with draft objects as if they were mutable, and then generates a new immutable object with the changes.

Convenient Ways to Implement Object Immutability in JavaScript

The most convenient way to implement object immutability in JavaScript, especially for complex objects, is to use a combination of programming practices and libraries designed for immutability. Here’s a concise overview:

Using ES6 Features

• const Keyword:

Using const prevents reassignment of the variable, but doesn't make the object itself immutable.

const obj = { prop: 42 };
obj.prop = 33; // This works
obj = {}; // This throws an error

• Spread Operator for Arrays and Objects: Use the spread operator (...) to create copies of arrays and objects with modified values to avoid modifying the original.

const originalArray = [1, 2, 3];
const newArray = [...originalArray, 4]; // Immutable push

const originalObject = { a: 1, b: 2 };
const newObject = { ...originalObject, c: 3 }; // Immutable add property

Object.assign()

Similar to the spread operator, Object.assign() can create a new object:

const originalObj = { prop: 42 };
const newObj = Object.assign({}, originalObj, { newProp: 33 });

Libraries for Deep Immutability

• Immer: Allows you to work with immutable state in a more natural way, using a draft state and producing the next immutable state without mutating the original state.

Example Using Immer:

import produce from "immer";

const originalState = {
  data: {
    user: {
      profile: {
        address: {
          city: 'New York'
        }
      }
    }
  }
};

// without immer
const newState = {
  ...originalState,
  data: {
    ...originalState.data,
    user: {
      ...originalState.data.user,
      profile: {
        ...originalState.data.user.profile,
        address: {
          ...originalState.data.user.profile.address,
          city: 'Los Angeles'
        }
      }
    }
  }
};

// with immer
const newState = produce(originalState, draft => {
  draft.data.user.profile.address.city = 'Los Angeles';
});

• Immutable.js: Provides persistent immutable data structures that are easy to use.

import { Map, fromJS } from 'immutable';

const originalState = {
  data: {
    user: {
      profile: {
        address: {
          city: 'New York'
        }
      }
    }
  }
};

// without immutable
const newState = {
  ...originalState,
  data: {
    ...originalState.data,
    user: {
      ...originalState.data.user,
      profile: {
        ...originalState.data.user.profile,
        address: {
          ...originalState.data.user.profile.address,
          city: 'Los Angeles'
        }
      }
    }
  }
};

// with immutable
const originalState = fromJS(originalState);

const newState = originalState.updateIn(['data', 'user', 'profile', 'address', 'city'], () => 'Los Angeles');

Benefits of Immutability

Immutability is a programming concept where objects cannot be changed after they are created. Instead of modifying existing objects, you create new objects with the desired changes. This approach has several benefits, including:

• Predictable State: Immutable objects make it easier to reason about the state of your application, as you can be certain that a particular object won’t change unexpectedly.
• Easier Debugging: By tracking changes to immutable objects, you can more easily identify the source of bugs.
• Improved Performance: In some cases, immutable data structures can be optimized for performance, especially in functional programming contexts.
• Enhanced Concurrency: Immutable objects are inherently thread-safe, making them suitable for concurrent programming.

Immutability in Practice

1. Redux and State Management

Immutability is a core principle in Redux and other state management libraries, ensuring predictable state updates.

2. React and Performance

React relies on immutability for efficient change detection and rendering optimizations.

3. Functional Programming

Immutable data structures are fundamental to functional programming paradigms in JavaScript.

Challenges and Considerations

• Deep Immutability: Achieving deep immutability for nested objects requires recursively creating new objects for each nested level that can be tedious and error-prone for complex structures, or use of libraries.
• Performance: Creating new objects instead of mutating can impact performance in high-frequency operations.
• Compatibility: Some older JavaScript environments might not support modern immutability techniques.

Updating and Removing Properties in Immutable Objects in JavaScript

Updating or removing properties from an immutable object in JavaScript can be achieved through various methods. Here’s a list sorted by convenience and robustness:

1. Using the Spread Operator for Updating

Most Convenient for Simple Updates

To update a specific property of an immutable object in JavaScript, you can use the spread operator (...) to create a new object with the updated property value. This approach maintains the immutability of the original object by not modifying it directly but instead creating a new object with the desired changes.

Example

const originalObject = { a: 1, b: 2, c: 3 };

// Update property 'b'
const updatedObject = { ...originalObject, b: 20 };
console.log(originalObject); // { a: 1, b: 2, c: 3 }
console.log(updatedObject); // { a: 1, b: 20, c: 3 }

This method is convenient for shallow updates. For nested objects, you would need to apply the spread operator at each level of nesting where updates are required, which can become verbose. For deep updates, consider using libraries like Immutable.js or Immer for more concise and readable code.

2. Using Destructuring and Rest Operator for Removal

Convenient for Single or Few Properties

const { b, ...newObjectWithoutB } = originalObject; // Removes 'b'

3. Using a Utility Function for Multiple Updates or Removals

Full Proof for Complex Operations

• Update Function

function updateObject(obj, updates) {
  return { ...obj, ...updates };
}

const updatedObject = updateObject(originalObject, { b: 20, c: 30 });

• Remove Function

function removeObjectProperties(obj, ...propsToRemove) {
  let result = { ...obj };
  propsToRemove.forEach(prop => delete result[prop]);
  return result;
}

const newObject = removeObjectProperties(originalObject, 'b', 'c');

4. Using Libraries like Immer or Immutable.js

Most Robust for Deeply Nested Structures

• Immer for Immutable Updates

import produce from 'immer';

const nextState = produce(originalObject, draftState => {
  draftState.b = 20; // Update
  delete draftState.c; // Remove
});

• Immutable.js for Immutable Data Structures

import { Map } from 'immutable';

let map1 = Map({ a: 1, b: 2, c: 3 });
map1 = map1.set('b', 20).delete('c');

The choice of method depends on the complexity of the operation and the structure of the object. For simple updates or removals, native JavaScript features like the spread operator and destructuring are most convenient. For more complex or deeply nested updates, utility functions or libraries like Immer and Immutable.js provide robust solutions.

Best Practices for Immutability:

• Avoid Mutating Objects Directly: Always create new objects to represent changes.
• Use Functional Programming Techniques: Functional programming emphasizes immutability and pure functions, which can help you write more predictable and maintainable code.
• Leverage Libraries: Libraries like Immer can simplify the process of working with immutable data structures.
• Consider Performance Implications: While immutability can bring many benefits, it’s important to be mindful of performance implications, especially for large data structures.

By following these guidelines, you can effectively leverage immutability in your JavaScript applications to write cleaner, more reliable, and more performant code.

Conclusion

Object immutability is a fundamental concept in modern JavaScript development that empowers developers to write cleaner, more predictable, and maintainable code. By preventing direct modification of objects, immutability enhances code reliability, simplifies state management, and facilitates functional programming paradigms.

While JavaScript doesn’t inherently enforce immutability, a combination of language features (like const, spread operator) and libraries (such as Immutable.js or Immer) provide powerful tools to achieve this goal. For most applications, a judicious blend of these techniques is sufficient. However, for complex state management scenarios, specialized libraries can offer significant performance and efficiency benefits.

By embracing immutability, developers can significantly improve the overall quality of their JavaScript applications, leading to more robust, scalable, and future-proof software.

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter | Podcast
• Create a free AI-powered blog on Differ.
• More content at PlainEnglish.io
• Have a story to share? Join our global community of writers today!

Mastering Immutability in JavaScript was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

Merging JavaScript objects is a fundamental technique that involves combining properties from two or more objects into a single object. This operation is essential for various tasks, including:

• Configuration merging: Combining default settings with user-specified overrides.
• Data normalization: Merging data from multiple sources into a unified format.
• State management: Updating state objects with new values.

Understanding Shallow and Deep Merging

Before we dive into the methods, it’s important to understand the difference between shallow and deep merging:

• Shallow Merge: Only top-level properties are merged. Nested objects are copied by reference, meaning changes to one object will affect the other.
• Deep Merge: Nested objects are also merged recursively, ensuring that changes to one object do not affect the other.

Methods for Merging Objects

Here are the primary methods for merging objects in JavaScript:

1. Spread Operator (…)

• Shallow copy: Similar to Object.assign(), it creates a new object and copies properties.
• Concise syntax: More readable and often preferred for simple merges.

const object1 = { a: 1, b: 2 };
const object2 = { c: 3, d: 4 };

const mergedObject = { ...object1, ...object2 };
console.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 41 }

2. Object.assign()

• Shallow copy: Only copies top-level properties.
• Overwrites existing properties: If a property exists in both source objects, the value from the latter object will be used.

const object1 = { a: 1, b: 2 };
const object2 = { c: 3, d: 4 };

const mergedObject = Object.assign({}, object1, object2);
console.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }

3. Deep Merge with Recursion

• Deep copy: Copies nested objects and arrays.
• Customizable merging behavior: You can define how to handle conflicts between properties.

Choosing the Right Method

The best method for merging objects depends on your specific needs:

• Shallow copy: Use Object.assign() or the spread operator for simple merges where you don't need to copy nested objects.
• Deep copy: Use a recursive function like deepMerge or library like deepmerge for complex objects with nested structures.

Performance Considerations for Merging JavaScript Objects

When merging objects in JavaScript, performance can be a significant concern, especially when dealing with large objects or frequent merge operations. Here are some key considerations to optimize performance:

1. Shallow vs. Deep Merging:

• Shallow Merge:
  - Faster as it only copies top-level properties.
  - Suitable for simple objects without nested structures.
  - Use Object.assign() or the spread operator for efficient shallow merging.
• Deep Merge:
  - Slower due to recursive copying of nested objects.
  - Necessary for complex objects with nested structures.
  - Consider using libraries like Lodash or Immutable.js for optimized deep merging.

2. Object Size and Structure:

• Object Size:
  - Larger objects take more time to merge, especially for deep merging.
  - Minimize object size by removing unnecessary properties.
• Object Structure:
  - Complex nested structures can impact performance.
  - Consider flattening or restructuring objects to reduce nesting.

3. Merge Operations Frequency:

• Frequent Merging:
  - If merging is frequent, optimize the merge process to avoid performance bottlenecks.
  - Consider using techniques like memoization or caching to avoid redundant calculations.

4. Library Choice:

• Deepmerge: A specialized library for deep merging, offering efficient and flexible merging operations.
  It’s particularly useful for complex object structures and custom merge strategies.
• Lodash: A powerful library for various utility functions, including merging.
  Can be efficient for deep merging, but may introduce overhead for simple scenarios.
• Immutable.js: A library for immutable data structures, which can optimize performance in certain cases.
  However, it may have a steeper learning curve and increased memory usage.

5. Browser Compatibility:

• Spread Operator:
  - While concise, it may not be supported in older browsers.
  - Consider using Object.assign() for wider compatibility.

Performance Optimization Techniques:

• Profiling: Use browser developer tools to identify performance bottlenecks.
• Minification and Compression: Reduce file size to improve load times.
• Caching: Store frequently used merged objects to avoid redundant calculations.
• Lazy Loading: Load only necessary parts of objects when needed.
• Batching: Merge multiple objects in a single operation to reduce overhead.

By carefully considering these factors and applying appropriate techniques, you can significantly improve the performance of object merging in your JavaScript applications.

Additional Considerations:

1. Immutability:

• Immutability can significantly improve performance and predictability in object merging.
• Libraries like Immutable.js provide efficient ways to work with immutable data structures.
• By using immutable techniques, you can avoid unintended side effects and simplify state management.

2. Functional Programming:

• Functional programming paradigms, such as using higher-order functions and pure functions, can lead to more concise and performant object merging code.
• Consider using functional programming techniques to create reusable and efficient merge functions.

3. Asynchronous Operations:

• If you’re merging objects that involve asynchronous operations (e.g., fetching data from an API), ensure proper handling of asynchronous results to avoid race conditions and performance issues.
• Use techniques like async/await or promises to manage asynchronous operations effectively.

4. Testing:

• Thoroughly test your object merging functions to ensure correctness and performance under various scenarios.
• Write unit tests to cover different input combinations and edge cases.

By considering these additional points, you can further optimize your object merging strategies and write more robust and efficient JavaScript code.

Conclusion

By understanding these methods and their nuances, you can effectively merge objects in JavaScript to build robust and maintainable applications.

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter | Podcast
• Create a free AI-powered blog on Differ.
• More content at PlainEnglish.io

Merging JavaScript Objects: A Deep Dive was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

Understanding Object Cloning in JavaScript

Cloning is the process of creating a copy of an existing object. This is crucial when you want to avoid mutating the original object, preserving its state.

This can be done in two main ways: shallow copy and deep copy.

Object cloning is a crucial concept in JavaScript, particularly important in scenarios where data integrity and immutability are essential. Here's why it matters:

• Preserving Original Data: When working with complex objects, cloning allows you to create a copy without altering the original, which is crucial for maintaining data consistency.
• Avoiding Unintended Side Effects: In JavaScript, objects are passed by reference. Without proper cloning, changes to a copied object can unexpectedly modify the original, leading to bugs.
• Functional Programming Paradigms: Cloning supports immutability, a key principle in functional programming, enabling safer and more predictable code.
• State Management: In frameworks like React, cloning is often necessary to properly update state without directly mutating it.

Object cloning becomes necessary in various situations, such as:

• Creating independent copies of configuration objects
• Safely manipulating data structures without affecting the original
• Implementing undo/redo functionality in applications
• Caching or memoization of object states

Understanding different cloning techniques allows developers to choose the most appropriate method based on their specific use case and performance requirements.

Shallow Copy

Shallow cloning copies the top-level properties of an object but not nested objects. Changes to nested objects in the clone will affect the original object.

Here are some common methods to create a shallow copy:

1. Using Object Spread Operator (...)

• Creates a new object by spreading the properties of the original object into the new object.
• A more concise alternative to Object.assign().
• Example:

const original = { name: "John", age: 30 };
const copy = { ...original };
console.log(copy); // { name: 'John', age: 30 }

2. Using Object.assign(target, ...sources)

• Creates a new object by copying the enumerable own properties from one or more source objects to a target object.
• Shallow copies are created, meaning nested objects are not cloned recursively.
• Example:

const original = { name: "John", age: 30 };
const copy = Object.assign({}, original);
console.log(copy); // { name: 'John', age: 30 }

Here's an example demonstrating how changes to nested objects in a shallow copy affect the original object:

const original = { name: "John", details: { age: 30 } };
const shallowCopyUsingRest = { ...original };
const shallowCopyUsingAssign = Object.assign({}, original);

shallowCopy.details.age = 31;

console.log(original.details.age); // Output: 31
console.log(shallowCopyUsingRest.details.age); // Output: 31
console.log(shallowCopyUsingAssign.details.age); // Output: 31

In this example, modifying the nested age properties in the shallow copies also changes it in the original object, as both reference the same nested object.

Deep Copy

Deep cloning creates a copy of an object and all objects nested within it, ensuring complete independence from the original.

Here are some methods to create a deep copy:

1. Using a Library like Lodash

• Lodash is a popular JavaScript utility library that offers the cloneDeep function.
• Example:

const _ = require("lodash");
let original = { a: 1, b: { c: 2 } };
let deepClone = _.cloneDeep(original);
console.log(deepClone); // { a: 1, b: { c: 2 } }

• If foolproof cloning is your goal, Lodash’s cloneDeep is the top choice with extensive support and flexibility.

Using libraries like lodash for deep cloning is often the smarter choice. They’ve already accounted for numerous edge cases, saving you from reinventing the wheel.

Lodash's cloneDeep method, for example, handles a variety of complex structures and scenarios that would be tedious to cover manually. It’s thoroughly tested and optimized, which means it’s likely more reliable and efficient than a custom solution you'd write yourself.

While custom functions can be fun and educational to write, and they allow for specific tailoring to your needs, the complexity of JavaScript objects means that edge cases will always be a concern. You end up with code that’s harder to maintain and more prone to bugs.

So, unless you have highly specific requirements that an existing library doesn’t meet, libraries are usually the way to go. Plus, you'll have more time to focus on the fun parts of coding! 😄

2. Using JSON Methods

• JSON.parse(JSON.stringify(obj)) coverts the original object to a JSON string and then parses it back into a new object.
• Creates a deep copy, including nested objects.
• However, it can be less efficient for large objects and may not preserve certain object types or properties.
• Example:

const original = { name: "John", age: 30, address: { city: "New York" } };
const copy = JSON.parse(JSON.stringify(original));
console.log(copy); // { name: 'John', age: 30, address: { city: 'New York' } }

• Use JSON Methods for a quick, straightforward clone of simple structures without functions or special objects.

Note: This method does not copy functions, Dates, RegExps, Maps, Sets, Blobs, FileLists, ImageDatas, sparse Arrays, Typed Arrays, or other complex types.

3. Custom Deep Cloning

• For those who love DIY, you can create a custom deep clone function. This gives you the flexibility to handle specific cases.
• Example:

// Recursive function
function deepClone(obj) {
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }
  
  const clone = Array.isArray(obj) ? [] : {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key]);
    }
  }
  return clone;
}

4. Using structuredClone()

• Creates a deep copy of an object, including all nested objects and properties, ensuring no references to the original object.
• It can handle objects with circular references, unlike methods such as JSON.stringify().
• It supports a wide range of data types, including Date, Map, Set, ArrayBuffer, and more.
• Example:

const original = { name: "Alice", age: 25, address: { city: "New York" } };
const copy = structuredClone(original);

console.log(copy); // { name: 'Alice', age: 25, address: { city: 'New York' } }
console.log(copy === original); // false
console.log(copy.address === original.address); // false

• Use structuredClone for a native deep clone for supported types.
• Browser Support: structuredClone is a relatively new feature and may not be supported in all browsers. Always check compatibility if you're targeting older browsers.

Comparison of Deep Cloning Methods

When to Use Each Method

• Shallow Copy: Use when you only need to copy the top-level properties and are okay with nested objects being referenced.
• Deep Copy: Use when you need a complete, independent copy of the object, including all nested objects.

Performance Considerations

When choosing a cloning method, it's crucial to consider performance implications:

• Object.assign() and the spread operator (...) are highly efficient for shallow cloning, with minimal performance overhead. They're ideal for simple objects or when you only need to clone top-level properties.
• Lodash’s cloneDeep() is optimized for performance but can still be slower than native methods for simple objects. However, it outperforms JSON methods for complex structures.
• JSON.parse(JSON.stringify()) can be significantly slower for large or deeply nested objects. While suitable for simple deep cloning, it may cause performance bottlenecks when dealing with substantial data structures.
• Custom cloning functions can be tailored for performance, but require careful implementation to avoid inefficiencies, especially with recursive approaches.
• structuredClone() offers worst performance for deep cloning, but support almost all of the complex data types.

Example: Performance Comparison

function testPerformance(methodName = "clone", cloneFunction, size = 10000) {
  const largeObject = Array.from({ length: size }, (_, i) => ({
    id: i,
    data: `data${i}`,
  }));

  console.time(methodName);
  const clone = cloneFunction(largeObject);
  console.timeEnd(methodName);
}

const jsonClone = (obj) => {
  return JSON.parse(JSON.stringify(obj));
};

const jsAssign = (obj) => Object.assign({}, obj);

testPerformance("structuredClone", window.structuredClone);
testPerformance("JSON Methods", jsonClone);
testPerformance("Oobject.assign", jsAssign);

// Note: Actual timings will vary based on object complexity and environment

By understanding these performance implications, you can choose the most efficient cloning method for your specific use case, balancing between simplicity, depth of cloning, and execution speed to maintain optimal application performance.

Run results for: Lodash cloneDeep vs structuredClone vs recursiveDeepCopy vs JSON clone - MeasureThat.net

Examples and Use Cases

1. Updating State in React: Often, you need to create a copy of the state object to update it without mutating the original state.
2. Immutable Data Structures: When working with immutable data patterns, cloning objects is necessary to create new versions of data without modifying the original.
3. Form Handling: When dealing with complex forms, cloning the initial form state allows for easy reset functionality without affecting the current input values.
4. API Response Manipulation: When you need to modify API responses for different use cases without altering the original data received from the server.
5. Game State Management: In game development, cloning game state objects is crucial for saving game progress or implementing replay features.
6. Caching Data: When implementing caching mechanisms, you might need to clone objects before storing them to prevent modifications to the cached data.
7. Undo/Redo Functionality: In applications with undo/redo features, object cloning is essential to maintain the state history without affecting the current state.

Common Pitfalls and Solutions

• Circular References: Use libraries like Lodash, custom functions that handle circular structures, or structuredClone().
• Performance Issues: Implement lazy cloning for large objects, use shallow copying when appropriate, or leverage optimized library functions.
• Special Object Types: Opt for libraries with comprehensive type support, tailored functions to preserve complex data types, or structuredClone().
• Unintended Shared References: Always use deep cloning for nested objects to maintain data independence.
• Complexity and Maintenance: Consider using well-established libraries like Lodash for reliable and efficient cloning, especially in larger projects.

Using Libraries: Libraries such as Lodash offer robust, well-tested solutions for object cloning. The _.cloneDeep() method from Lodash, for instance, handles most edge cases effectively, including circular references and special object types.

While using a library adds to your project's bundle size, it often provides better reliability, performance, and easier maintenance compared to custom solutions.

However, always evaluate the trade-offs based on your project's specific needs, such as size constraints or unique cloning requirements.

Summary

• Object cloning in JavaScript involves creating copies of objects, either shallow or deep.
• Shallow cloning methods include Object.assign() and the spread operator, suitable for top-level property copying.
• Deep cloning methods include Lodash’s cloneDeep(), custom functions, JSON.parse(JSON.stringify()), and structuredClone().
• Lodash’s cloneDeep() is the most reliable for complex objects, while structuredClone() offers a native solution for supported types.
• Custom functions provide flexibility for specific needs but require careful implementation.
• JSON methods are simple but have limitations with certain data types and performance for large objects.
• Choose the appropriate method based on object complexity, performance requirements, and specific use cases.
• Be aware of pitfalls such as circular references and performance implications when deep cloning.

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: CoFeed | Differ
• More content at PlainEnglish.io

The Ultimate Guide to Object Cloning in JavaScript was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

Table of Contents

· 1. Object.hasOwn()
· 2. hasOwnProperty() Method
· 3. in Operator
· 4. Optional Chaining (?.)
· 5. Comparing with undefined
· 6. The double exclamation mark (!!)
· Practical Example
· Recommendation

In JavaScript, determining whether an object has a specific property is a common task that can be approached in several ways. Each method has its own advantages and limitations, making it crucial to choose the right one based on your specific needs.

From traditional methods like hasOwnProperty() and the in operator to modern techniques such as Object.hasOwn() and optional chaining (?.), understanding these methods can help you write more robust and error-free code. Additionally, simple checks like comparing with undefined and using the double exclamation mark (!!) for truthiness can be handy in certain scenarios.

This guide will explore various methods to check if a property exists in a JavaScript object, providing insights into their best use cases, pros, and cons. Whether you’re dealing with deeply nested properties or ensuring properties are not inherited, you’ll find the right approach to suit your coding needs.

Let’s dive into the different techniques and see how they can be applied effectively in your JavaScript projects! 😊

1. Object.hasOwn()

The hasOwn() method is a newer (ES6) and more concise way to check if an object has a specific property as its own (not inherited) property.

Unlike hasOwnProperty(), hasOwn() is a static method on the Object constructor, so it avoids issues with objects that have a property named hasOwnProperty. Hence, it is recommended over hasOwnProperty() in environments where it is supported.

let obj = { name: "Alice", age: 25 };
console.log(Object.hasOwn(obj, "name")); // Output: true
console.log(Object.hasOwn(obj, "gender")); // Output: false

Limitation:
Requires modern browser support.

2. hasOwnProperty() Method

This method checks if the object has the specified property as its own (not inherited) property.

It is widely supported and reliable.

let obj = { name: "Alice", age: 25 };
console.log(obj.hasOwnProperty("name")); // Output: true
console.log(obj.hasOwnProperty("gender")); // Output: false

Limitation:
Can be overridden by properties with the same name.
Use Object.prototype.hasOwnProperty.call(obj, 'property') to avoid this issue.

// Here, the hasOwnProperty is overridden with property with the same name.
let obj = { name: "Alice", age: 25, hasOwnProperty: () => 123 };

console.log(obj.hasOwnProperty("name")); // Output: 123
console.log(obj.hasOwnProperty("gender")); // Output: 123
console.log(Object.prototype.hasOwnProperty.call(obj, 'name')); // Output: true

3. in Operator

The in operator checks if the property exists in the object or its prototype chain.

let user = {
  username: "john_doe",
  email: "john@example.com",
};

console.log("email" in user); // Output: true

Limitation:
May return true for inherited properties, which might not be desirable.

console.log("toString" in user); // Output: true (inherited from Object.prototype)

4. Optional Chaining (?.)

Optional chaining allows you to safely access deeply nested properties. If the property does not exist, it returns undefined instead of throwing an error.

const obj = { name: "Alice" };

console.log(obj?.name !== undefined); // true
console.log(obj?.age !== undefined); // false

Limitation:
Undeclared Root Object: Optional chaining cannot be used on an undeclared root object. Always ensure the root object is declared before using optional chaining, possibly with default value.

console.log(undeclaredVar?.prop); // ReferenceError: undeclaredVar is not defined

// Solution:
const undeclaredVar = {}
console.log(undeclaredVar?.prop); // undefined

5. Comparing with undefined

You can check if accessing the property returns undefined. This method can be less reliable if the property exists but its value is undefined.

let obj = { name: "Alice", age: 25, email: undefined };

console.log(obj.name !== undefined); // Output: true
console.log(obj.gender !== undefined); // Output: false

Limitation:
Simple but can be less reliable if the property value is explicitly set to undefined.

// Here, even though property exists with value explicitly set to undefined comparison with undefined returns false.
let obj = { name: "Alice", age: 25, email: undefined };

console.log(obj.email !== undefined); // Output: false (even though it exists)

6. The double exclamation mark (!!)

The double exclamation mark in JavaScript applies the logical NOT operator twice. The first ! converts the value to its boolean opposite, and the second ! converts it back to its original boolean value.

So, the double exclamation mark (!!) is used to convert a value to a boolean.

While it’s not specifically designed to check if a property exists, it can be used to check the truthiness of a property, which indirectly tells you if the property exists and has a truthy value.

Here’s how you can use the double exclamation mark to check if a property exists and is truthy:

let obj = {
  name: "Alice",
  age: 25,
};

console.log(!!obj.name); // Output: true (property exists and is truthy)
console.log(!!obj.gender); // Output: false (property does not exist or is falsy)

Explanation

• Truthy Values: Values like non-empty strings, non-zero numbers, objects (even empty objects), and arrays (even empty arrays).
• Falsy Values: Values like null, undefined, 0, NaN, "" (empty string), and false.

You can use this approach to conditionally execute code based on the existence and truthiness of a property:

let user = {
  username: "john_doe",
  email: "john@example.com",
};

if (!!user.email) {
  console.log("Email exists and is truthy");
} else {
  console.log("Email does not exist or is falsy");
}

This method is useful for quick checks, but keep in mind that it only checks for truthiness. If you need to check for the existence of a property regardless of its value, you might want to use other methods.

Limitation:
This method only checks for truthiness. If the property exists but has a falsy value (like 0 or ""), it will return false.

let user = {
  username: "john_doe",
  email: "john@example.com",
  marks: 0
};

console.log(!!user.marks); // false (but here 0 is valid value, even though it is falsy)

Practical Example

Here’s a practical example using all methods:

let car = {
  brand: "Toyota",
  model: "Camry",
  year: 2020,
  fuelUsed: "",
};

// Using Object.hasOwn()
console.log(Object.hasOwn(car, "color")); // false

// Using hasOwnProperty()
console.log(car.hasOwnProperty("brand")); // true

// Using in operator
console.log("model" in car); // true

// Using optional chaining
console.log(car?.price, car?.brand); // undefined "Toyota"

// Comparing with undefined
console.log(car.year !== undefined); // true

// Using double exclamation mark
console.log(!!car.fuelUsed); // false

Recommendation

• Top Choice: Object.hasOwn() for modern, concise checks.
• Reliable Alternative: hasOwnProperty() for wide support.
• Broad Check: in operator for checking both own and inherited properties.
• Safe Nested Access: Optional Chaining (?.) for deeply nested properties.
• Simple Check: Comparing with undefined for straightforward checks.
• Quick Truthiness Check: Double Exclamation Mark (!!) for quick boolean conversion.

These methods help ensure that you can accurately determine whether a property exists in an object, which is useful for various programming.

Each method has its use cases and limitations. Choose the one that best fits your specific needs. If you have any more questions or need further clarification, feel free to ask!

6 Ways to Check if JavaScript Object Property Exists was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

A Deep Dive into JavaScript Objects: The Backbone of Modern Web Development — Part 3

Table of Contents

· Destructuring Assignment Syntax
· Destructuring with Default Values
· Renaming Variables (Aliases)
· Rest Properties
· Combining with Arrays
· Nested Objects
· How deep should you destructure objects in practice? And how to handle deeply nested objects?
· Alternative Approaches to Destructuring Deeply Nested Objects
∘ 1. Optional Chaining
∘ 2. Custom Utility Functions
∘ 3. Object Flattening
· How Does Object Destructuring Make Code Clean and Readable?
∘ 1. Conciseness
∘ 2. Clarity
∘ 3. Avoiding Repetition
· Error Handling in Object Destructuring
∘ 1. Nullish Coalescing Operator
∘ 2. Optional Chaining
∘ 3. Default Values
· Practical Examples
· Benefits of Object Destructuring
· Use Cases
· Summary

Object destructuring is a powerful feature in JavaScript that allows you to extract multiple properties from an object and bind them to variables in a single statement. This technique can make your code more concise and readable.

Destructuring Assignment Syntax

const { property1, property2 } = object;

This extracts property1 and property2 from object and creates variables with the same names.

Example

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
};

const { firstName, lastName } = person;
console.log(firstName); // "John"
console.log(lastName); // "Doe"

Destructuring with Default Values

You can set default values for properties that might be undefined directly in the destructuring assignment, making the code more robust:

const { firstName, lastName, country = "Unknown" } = person;
console.log(country); // "Unknown"

This ensures that your code handles missing properties gracefully.

Renaming Variables (Aliases)

Destructuring allows you to rename variables on the fly, which can be useful for avoiding naming conflicts or improving readability:

const { firstName: fName, lastName: lName } = person;
console.log(fName); // "John"
console.log(lName); // "Doe"

This makes it clear what the variables represent without changing the original object structure.

Rest Properties

You can use the rest syntax to collect the remaining properties into a new object, keeping your code clean and focused:

const { firstName, ...rest } = person;
console.log(rest); // { lastName: "Doe", age: 30 }

This is particularly useful when you need to work with a subset of an object’s properties.

Combining with Arrays

Object destructuring can be combined with array destructuring for more complex data structures:

const data = {
  title: "Developer",
  skills: ["JavaScript", "React", "Node.js"]
};

const { title, skills: [primarySkill, ...otherSkills] } = data;
console.log(title);       // "Developer"
console.log(primarySkill); // "JavaScript"
console.log(otherSkills);  // ["React", "Node.js"]

Nested Objects

Destructuring can also be used to extract properties from nested objects:

const person = {
  name: "John",
  address: {
    city: "New York",
    zip: "10001"
  }
};

const { address: { city, zip } } = person;
console.log(city); // "New York"
console.log(zip);  // "10001"

How deep should you destructure objects in practice? And how to handle deeply nested objects?

The depth of object destructuring in practice depends on several factors:

• Readability: Destructure only as deep as it maintains or improves code readability. If destructuring makes the code harder to understand, it’s better to use dot notation.
• Code maintainability: Consider how changes to the object structure might affect your destructuring. Shallow destructuring is often more resilient to changes.

For handling deeply nested objects, consider these approaches:

1. Staged destructuring: Break down complex objects in multiple steps to maintain clarity.

const { level1 } = complexObject;
const { level2 } = level1;
const { level3 } = level2;

2. Combine destructuring with optional chaining: Find more about it here.

Remember, the goal is to write clear, maintainable code. If deep destructuring makes your code harder to understand or more brittle, it’s often better to use alternative approaches.

Usually, it is better to destructure not more that level 2 depths of nested objects. Beyond that, mix of destructuring and dot/square bracket notation is more readable and maintainable.

Alternative Approaches to Destructuring Deeply Nested Objects

While object destructuring is powerful, there are alternative approaches for handling deeply nested objects that can be more suitable in certain situations:

1. Optional Chaining

Optional chaining (?.) provides a safe way to access nested properties without causing errors if a property is undefined. For more details, see the MDN documentation on Optional Chaining.

const deepValue = object?.level1?.level2?.level3?.value;

2. Custom Utility Functions

Creating your own utility function can provide a reusable solution:

/**
 * Retrieves the value at a given path within an object.
 *
 * @param {Object} obj - The object to traverse.
 * @param {string} path - The path to the desired value, represented as a dot-separated string.
 * @param {*} [defaultValue=undefined] - The default value to return if the path does not exist.
 * @returns {*} - The value at the specified path or the default value if the path is not found.
 */
function getNestedValue(obj, path, defaultValue = undefined) {
  // Split the path into an array of keys
  return path.split(".").reduce(
    (current, key) =>
      // Check if the current object and the key exist
      current && current[key] !== undefined ? current[key] : defaultValue,
    obj // Initial value for the reduce function
  );
}

// Example usage:
const object = {
  level1: {
    level2: {
      level3: {
        value: "found me!",
      },
    },
  },
};

// Retrieve the nested value using the function
const deepValue = getNestedValue(
  object,
  "level1.level2.level3.value",
  "default"
);
console.log(deepValue); // Output: "found me!"

3. Object Flattening

For very complex nested structures, flattening the object can simplify access:

/**
 * Flattens a nested object into a single-level object with dot-separated keys.
 *
 * @param {Object} obj - The object to flatten.
 * @param {string} [prefix=''] - The prefix for the keys (used for recursion).
 * @returns {Object} - The flattened object.
 */
function flattenObject(obj, prefix = "") {
  // Use Object.keys to iterate over the keys of the object
  return Object.keys(obj).reduce((accumulator, key) => {
    // Create the new key prefix
    const newPrefix = prefix.length ? prefix + "." : "";

    // Check if the current property is an object
    if (typeof obj[key] === "object" && obj[key] !== null) {
      // Recursively flatten the nested object and merge it into the accumulator
      Object.assign(accumulator, flattenObject(obj[key], newPrefix + key));
    } else {
      // If it's not an object, add the key-value pair to the accumulator
      accumulator[newPrefix + key] = obj[key];
    }
    // Return the accumulator for the next iteration
    return accumulator;
  }, {});
}

// Example usage:
const deeplyNestedObject = {
  level1: {
    level2: {
      level3: {
        value: "found me!",
      },
    },
  },
};

// Flatten the deeply nested object
const flatObject = flattenObject(deeplyNestedObject);
console.log(flatObject); // { 'level1.level2.level3.value': 'found me!' }

// Access the flattened value using the dot-separated key
const value = flatObject["level1.level2.level3.value"];
console.log(value); // "found me!"

Each of these approaches has its own advantages and use cases. The choice depends on factors such as the complexity of your data structure, performance requirements, and the specific needs of your application.

How Does Object Destructuring Make Code Clean and Readable?

Object destructuring enhances code cleanliness and readability in several ways:

1. Conciseness

Instead of writing multiple lines to extract properties from an object, destructuring allows you to do it in a single line:

// Without destructuring
const firstName = person.firstName;
const lastName = person.lastName;

// With destructuring
const { firstName, lastName } = person;

This reduces the amount of code and makes it easier to read.

2. Clarity

Destructuring makes it clear which properties are being extracted and used, improving code clarity:

// Without destructuring
function displayPerson(person) {
  const firstName = person.firstName;
  const lastName = person.lastName;
  console.log(`Name: ${firstName} ${lastName}`);
}

// With destructuring
function displayPerson({ firstName, lastName }) {
  console.log(`Name: ${firstName} ${lastName}`);
}

The function signature itself tells you what properties are needed.

3. Avoiding Repetition

Destructuring helps avoid repetitive code, especially when dealing with nested objects:

// Without destructuring
const city = person.address.city;
const zip = person.address.zip;

// With destructuring
const { address: { city, zip } } = person;

This reduces redundancy and potential errors.

Error Handling in Object Destructuring

Object destructuring in JavaScript is a powerful feature, but it’s important to handle potential errors and edge cases. Here are some strategies for error handling in object destructuring:

1. Nullish Coalescing Operator

Use the nullish coalescing operator (??) to provide fallbacks:

const { name, age } = person ?? {};
console.log(name ?? 'Unknown', age ?? 'N/A');

2. Optional Chaining

Combine destructuring with optional chaining to safely access nested properties:

const { address } = person ?? {};
const city = address?.city;
console.log(city); // Undefined if person or address doesn't exist, no error thrown

3. Default Values

Use default values to handle cases where a property might be undefined:

const { name = 'Unknown', age = 0 } = person;
console.log(name, age); // Will use defaults if properties don't exist

By implementing these error handling strategies, you can make your code more robust and prevent common issues related to object destructuring.

Try-catch blocks are not ideal for object destructuring error handling due to:
1. Unnecessary performance overhead
2. Increased code complexity and reduced readability
3. Scope limitations for declared variables
4. Overkill for most destructuring scenarios, where simpler methods like default values or optional chaining are more appropriate

Practical Examples

Example 1: Simple Example

Here’s a practical example of using object destructuring in a function:

function displayPerson({ firstName, lastName, age }) {
  console.log(`Name: ${firstName} ${lastName}, Age: ${age}`);
}

displayPerson(person); // "Name: John Doe, Age: 30"

Example 2: Nested Objects with Renaming and Default Values

const person = {
  firstName: "Charlie",
  lastName: "Brown",
  address: {
    city: "Peanuts",
    zip: "12345",
  },
};

const {
  firstName: fName = "DefaultFirstName",
  lastName: lName = "DefaultLastName",
  address: { 
    city: hometown = "Unknown", 
    zip: postalCode = "00000" 
  } = {},
} = person;

console.log(fName); // "Charlie"
console.log(lName); // "Brown"
console.log(hometown); // "Peanuts"
console.log(postalCode); // "12345"

In this example,

1. fName and lName are renamed from firstName and lastName resp. as well as nested properties city and zip are renamed to hometown and postalCode resp..
2. fname is given default value as DefaultFirstName along with other variables.
3. Properties city and zip are extracted from nested object address.

Here are some practical examples involving API responses and React props to demonstrate how object destructuring is commonly used in modern web development:

Example 3: Handling API Responses

When working with API responses, object destructuring can simplify the extraction of data from the response object.

Fetching Data from an API

async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();

    // Destructure the response data
    const {
      name,
      email,
      address: { city, zip },
    } = data;

    console.log(`Name: ${name}, Email: ${email}, City: ${city}, Zip: ${zip}`);
  } catch (error) {
    console.error("Error fetching user data:", error);
  }
}

// Example usage
fetchUserData(1);

In this example, the API response is destructured to extract name, email, city, and zip directly from the response object, making the code cleaner and more readable.

Example 4: Using Destructuring with React Props

In React, destructuring props can make component code more concise and easier to understand.

Functional Component with Destructuring

import React from "react";

function UserProfile({ name, email, address: { city, zip } }) {
  return (
    <div>
      <h1>{name}</h1>
      <p>Email: {email}</p>
      <p>City: {city}</p>
      <p>Zip: {zip}</p>
    </div>
  );
}

// Example usage
const user = {
  name: "Alice",
  email: "alice@example.com",
  address: {
    city: "Wonderland",
    zip: "12345",
  },
};

function App() {
  return <UserProfile {...user} />;
}

export default App;

In this example, the UserProfile component destructures the name, email, city, and zip props directly in the function parameters, making the component code more concise and easier to read.

Example 5: Destructuring in State Management

When using state management libraries like Redux, destructuring can simplify the extraction of state properties.

Redux Reducer with Destructuring

const initialState = {
  user: {
    name: "",
    email: "",
    address: {
      city: "",
      zip: "",
    },
  },
  isAuthenticated: false,
}

function userReducer(state = initialState, action) {
  switch (action.type) {
    case "SET_USER":
      return {
        ...state,
        user: {
          ...state.user,
          ...action.payload,
        },
      };
    case "LOGOUT":
      return {
        ...state,
        user: initialState.user,
        isAuthenticated: false,
      };
    default:
      return state;
  }
}

// Example action
const setUserAction = {
  type: "SET_USER",
  payload: {
    name: "Bob",
    email: "bob@example.com",
    address: {
      city: "Metropolis",
      zip: "54321",
    },
  },
};

// Example usage
const newState = userReducer(initialState, setUserAction);
console.log(newState);

In this example, the userReducer function uses destructuring to merge the action.payload into the existing user state, making the reducer logic more concise and readable.

These examples show how object destructuring can be effectively used in real-world scenarios involving API responses, React props, and state management, making your code cleaner and more maintainable.

Benefits of Object Destructuring

• Cleaner and more concise code
• Easier extraction of multiple properties
• Ability to provide default values
• Useful for working with complex data structures

Use Cases

• Function parameters: Destructure objects passed as arguments
• API responses: Easily extract relevant data from JSON responses
• Configuration objects: Extract specific settings from larger config objects
• Module imports: Selectively import specific functions or values from modules

Object destructuring can significantly improve the readability and maintainability of your JavaScript code when working with complex objects and data structures.

Summary

• Object destructuring allows extracting multiple properties from an object into variables in a single statement, enhancing code conciseness and readability.
• Basic syntax: const { property1, property2 } = object; extracts properties and creates variables with the same names.
• It allows for renaming variables, setting default values, and handling nested objects efficiently directly in the destructuring assignment.
• Rest properties collect remaining properties into a new object, and nested objects can be destructured for deeper extraction.
• Destructuring can be combined with array destructuring for complex data structures.
• Handling deeply nested objects can be done using staged destructuring, optional chaining, custom utility functions, or object flattening.
• Alternative approaches like optional chaining, custom utility functions, and object flattening can be used for deeply nested objects.
• Proper error handling strategies, such as nullish coalescence, optional chaining and default values, are crucial when using object destructuring.

The combination of these techniques and approaches makes object destructuring a versatile and powerful tool in JavaScript programming. By leveraging destructuring effectively, developers can write more elegant, maintainable, and error-resistant code, ultimately improving the overall quality of their JavaScript applications.

Show Your Support!

If you found this article helpful, please give it a clap 👏 and share it with others who might benefit from it. Your support helps me continue to create valuable content.

Don’t forget to follow me on Medium for more articles on JavaScript, personal finance, and more. Let’s stay connected and keep learning together!

Check Out My Previous Article!

If you found this article on alternative approaches to destructuring deeply nested objects helpful, don’t miss my previous article:

Navigating Complex Data Structures with Nested JavaScript Objects

Make sure to give it a read to build a solid foundation before diving into more advanced techniques!

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: CoFeed | Differ
• More content at PlainEnglish.io

Mastering JavaScript Object Destructuring: Simplify Your Code with Ease was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

Table of Contents:

· Why Nested Objects are Essential for Managing Complex Data in JavaScript?
· Creating Nested Objects
· Accessing Nested Properties
· Modifying Nested Properties
· Deleting Nested Properties
· Traversing Nested Objects
· Summary

Nested Objects

Nested objects in JavaScript are objects that contain other objects or arrays as their properties. This structure allows you to organize and manage complex data more efficiently. Here’s a comprehensive guide:

Why Nested Objects are Essential for Managing Complex Data in JavaScript?

Using nested JavaScript objects is useful if not essential for several reasons, especially when dealing with complex data structures. Here are some key benefits:

1. Organizing Complex Data

Nested objects allow you to structure and organize complex data hierarchically. This makes it easier to manage and understand the relationships between different pieces of data.

Example:

let company = {
  name: "TechCorp",
  address: {
    street: "123 Main St",
    city: "Techville",
    country: "Techland",
  },
  employees: [
    { name: "Alice", role: "Developer" },
    { name: "Bob", role: "Designer" },
  ],
};

2. Encapsulation

Nested objects help encapsulate related data, keeping it together in a logical and cohesive manner. This improves code readability and maintainability.

Example:

let user = {
  id: 1,
  profile: {
    username: "john_doe",
    email: "john@example.com",
  },
  settings: {
    theme: "dark",
    notifications: true,
  },
};

3. Modularity

By using nested objects, you can break down large data structures into smaller, more manageable pieces. This modularity makes it easier to work with and update specific parts of the data without affecting the entire structure.

Example:

let blogPost = {
  title: "Understanding JavaScript",
  author: {
    name: "Jane Smith",
    bio: "JavaScript enthusiast and blogger.",
  },
  content: {
    introduction: "JavaScript is a versatile language...",
    body: "In this post, we will explore...",
    conclusion: "To sum up, JavaScript offers...",
  },
};

4. Improved Data Access

Nested objects allow for more intuitive and direct access to related data. This can simplify data retrieval and manipulation.

Example:

let product = {
  id: 101,
  name: "Laptop",
  specs: {
    processor: "Intel i7",
    memory: "16GB",
    storage: "512GB SSD",
  },
};
console.log(product.specs.processor); // Output: Intel i7

5. Flexibility

Nested objects provide flexibility in representing various types of data structures, such as trees, graphs, and other hierarchical models. This is particularly useful in applications like DOM manipulation, data visualization, and more.

Example:

let fileSystem = {
  root: {
    type: "folder",
    contents: {
      documents: {
        type: "folder",
        contents: {
          resume: { type: "file", size: "2MB" },
          coverLetter: { type: "file", size: "1MB" },
        },
      },
      photos: {
        type: "folder",
        contents: {
          vacation: { type: "file", size: "5MB" },
          family: { type: "file", size: "3MB" },
        },
      },
    },
  },
};

Creating Nested Objects

1. Using Object Literals:

let person = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "New York",
    country: "USA",
  },
  hobbies: ["reading", "traveling"],
};
console.log(person);

2. Using Dynamic Property Assignment:

// using dot notation:

let car = {};
car.brand = "Toyota";
car.model = "Camry";
car.specs = {};
car.specs.engine = "2.5L";
car.specs.transmission = "Automatic";
console.log(car);

// using bracket notation:

let car = {};
car["brand"] = "Toyota";
car["model"] = "Camry";
car["specs"] = {};
car["specs"]["engine"] = "2.5L";
car["specs"]["transmission"] = "Automatic";
console.log(car);

Accessing Nested Properties

1. Dot Notation:

console.log(person.address.city); // Output: New York

2. Bracket Notation:

console.log(person['address']['country']); // Output: USA

3. Using Computed Property Names:
Computed property names allow you to define object properties dynamically when creating or updating objects.

Example:

let key1 = "language";
let key2 = "isStudent";

let obj = {
  name: "John",
  age: 30,
  [key1]: "JavaScript",
  [key2]: true,
};

console.log(obj.language); // Output: JavaScript
console.log(obj.isStudent); // Output: true

For a deeper dive into Computed Property Names, check out my article on Computed Property Names:

JavaScript Objects: Dynamically Computed Property Names

Modifying Nested Properties

1. Direct Assignment:

person.address.street = "456 Elm St";
console.log(person.address.street); // Output: 456 Elm St

2. Using Object.assign():

Object.assign(person.address, { city: "Los Angeles", zip: "90001" });
console.log(person.address); // Output: { street: '456 Elm St', city: 'Los Angeles', country: 'USA', zip: '90001' }

Here is the useful code reference to access and modify deeply nested objects.

Deleting Nested Properties

1. Using Destructuring and Rest Syntax
If you want to avoid mutating the original object, you can use destructuring and the rest syntax to create a new object without the specified property.

Example:

let obj = {
  user: {
    name: "Alice",
    contact: {
      email: "alice@example.com",
      phone: "123-456-7890",
    },
  },
};

let { phone, ...contactWithoutPhone } = obj.user.contact;
let newObj = {
  ...obj,
  user: {
    ...obj.user,
    contact: contactWithoutPhone,
  },
};

console.log(newObj.user.contact.phone); // Output: undefined
console.log(obj.user.contact.phone); // Output: 123-456-7890 (original object remains unchanged)

2. Using delete Operator:

delete person.address.zip;
console.log(person.address.zip); // Output: undefined

Traversing Nested Objects

1. Using Loops:

let person = {
  name: "John",
  contact: {
    phone: "987–654–3210",
    email: "john123@xyz.com",
    address: {
      city: "Berlin",
      country: "Germany",
    },
  },
};

for (let key in person) {
  if (typeof person[key] === "object") {
    for (let nestedKey in person[key]) {
      console.log(nestedKey, person[key][nestedKey]);
    }
  } else {
    console.log(key, person[key]);
  }
}

2. Recursive Functions:

function traverse(obj) {
  for (let key in obj) {
    if (typeof obj[key] === "object" && obj[key] !== null) {
      traverse(obj[key]);
    } else {
      console.log(key, obj[key]);
    }
  }
}
traverse(person);

Useful code reference to traverse the deeply nested array of objects:

Get the sum of property of nested array of objects with infinite depth

Best Practices

1. Destructuring:

let {
  name,
  address: { city, country },
} = person;
console.log(name, city, country); // Output: John Los Angeles USA

2. Handling Undefined Properties using Optional Chaining:
When accessing nested properties, it’s important to handle cases where properties might be undefined to avoid errors.

let zipCode = person?.address?.zip || "Not Available";
console.log(zipCode); // Output: 90001

Common Use Cases

1. API Responses:
When working with APIs, the responses often contain nested objects and arrays. Parsing and manipulating this data is a common task.

let apiResponse = {
  status: "success",
  data: {
    user: {
      id: 1,
      name: "Alice",
      roles: ["admin", "editor"],
    },
  },
};

2. Configuration Objects:
Configuration settings for applications are often stored in nested objects, especially when dealing with complex settings.

let config = {
  server: {
    host: "localhost",
    port: 8080,
  },
  database: {
    user: "admin",
    password: "password",
  },
};

Handling Nested Objects in Real-World Applications

1. Data Visualizations:
   Nested objects are particularly useful in data visualization, where they can help manage and display intricate relationships within the data. Nested objects are ideal for visualizing hierarchical data structures, such as organizational charts, family trees, nested categories, graphs, nested tables.
2. Database Models:
   Nested objects can map to database models, representing relationships between entities (e.g., a user with multiple addresses).
3. Form Data:
   Nested objects are often used to represent form data, especially in complex forms with multiple sections and fields.
4. State Management in React:
   When managing state in React, nested objects can represent complex state structures. Use state management libraries like Redux or Context API to handle nested state updates efficiently.

By understanding and effectively using nested objects, you can manage complex data structures more efficiently in your JavaScript applications.

Real-World Data Representation

Many real-world data structures naturally fit into a nested format. Using nested objects allows you to model these structures more accurately and intuitively.

1. User Profiles

Managing user profiles with multiple attributes and nested data structures is a common use case.

Example:

const userProfile = {
  id: 1,
  name: "John Doe",
  contact: {
    email: "john.doe@example.com",
    phone: "123-456-7890",
  },
  preferences: {
    notifications: {
      email: true,
      sms: false,
    },
    theme: "dark",
  },
};
console.log(userProfile.contact.email); // Output: john.doe@example.com
console.log(userProfile.preferences.notifications.email); // Output: true

2. E-commerce Data

E-commerce platforms often use nested objects to represent products, categories, and user orders.

Example:

const order = {
  orderId: 12345,
  customer: {
    name: "Jane Smith",
    address: {
      street: "456 Elm St",
      city: "Springfield",
      zip: "12345",
    },
  },
  items: [
    {
      productId: 1,
      name: "Laptop",
      price: 999.99,
      quantity: 1,
    },
    {
      productId: 2,
      name: "Mouse",
      price: 19.99,
      quantity: 2,
    },
  ],
  total: 1039.97,
};
console.log(order.customer.address.city); // Output: Springfield
console.log(order.items[0].name); // Output: Laptop

3. Content Management Systems (CMS)

CMS platforms use nested objects to manage content hierarchies, such as pages, sections, and articles.

Example:

const cmsData = {
  site: {
    name: "My Blog",
    pages: [
      {
        title: "Home",
        sections: [
          {
            heading: "Welcome",
            content: "Welcome to my blog!",
          },
          {
            heading: "Latest Posts",
            content: "Check out my latest posts below.",
          },
        ],
      },
      {
        title: "About",
        sections: [
          {
            heading: "About Me",
            content: "I am a web developer and blogger.",
          },
        ],
      },
    ],
  },
};
console.log(cmsData.site.pages[0].sections[1].heading); // Output: Latest Posts

4. Game Development

In game development, nested objects can represent complex game states, player profiles, and game settings.

Example:

const gameState = {
  player: {
    name: "Player1",
    stats: {
      health: 100,
      mana: 50,
      inventory: [
        { item: "Sword", damage: 10 },
        { item: "Potion", heal: 20 },
      ],
    },
  },
  level: {
    number: 1,
    enemies: [
      { type: "Goblin", health: 30 },
      { type: "Orc", health: 50 },
    ],
  },
};
console.log(gameState.player.stats.inventory[0].item); // Output: Sword
console.log(gameState.level.enemies[1].type); // Output: Orc

5. Financial Applications

Financial applications use nested objects to manage transactions, accounts, and user data.

Example:

const account = {
  accountId: "123456789",
  user: {
    name: "Alice Johnson",
    email: "alice.johnson@example.com",
  },
  transactions: [
    {
      id: "txn1",
      date: "2024-08-15",
      amount: 100.0,
      type: "deposit",
    },
    {
      id: "txn2",
      date: "2024-08-16",
      amount: -50.0,
      type: "withdrawal",
    },
  ],
};
console.log(account.transactions[1].amount); // Output: -50.00

Summary

Nested objects are a powerful tool in JavaScript for organizing, encapsulating, and managing complex data structures. They enhance code readability, maintainability, and flexibility, making them essential for many real-world applications.

Enjoying my content? ☕️
If you find my articles helpful and would like to support my work, consider buying me a coffee! Your support helps me keep creating valuable content for the developer community.

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: CoFeed | Differ
• More content at PlainEnglish.io

Navigating Complex Data Structures with Nested JavaScript Objects was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.