Skip to content

Bits of .NET

Daily micro-tips for C#, SQL, performance, and scalable backend engineering.

  • Asp.Net Core
  • C#
  • SQL
  • JavaScript
  • CSS
  • About
  • ErcanOPAK.com
  • No Access
  • Privacy Policy
JavaScript

JavaScript: Data Transformation with Array Methods

- 17.08.26 - ErcanOPAK

🔄 Data Transformation = Clean Data

Raw data needs processing. JavaScript array methods transform, filter, and aggregate data into usable formats.

📝 Data Processing Patterns

// User Data
const users = [
    { id: 1, name: 'Alice', age: 25, city: 'NYC', active: true },
    { id: 2, name: 'Bob', age: 30, city: 'LA', active: false },
    { id: 3, name: 'Charlie', age: 35, city: 'NYC', active: true },
    { id: 4, name: 'Diana', age: 28, city: 'SF', active: true },
    { id: 5, name: 'Eve', age: 22, city: 'LA', active: false }
];

// 1. Filter Active Users
const activeUsers = users.filter(u => u.active);

// 2. Map to Names and Cities
const userLocations = users.map(u => ({ name: u.name, city: u.city }));

// 3. Group by City
const groupedByCity = users.reduce((acc, user) => {
    acc[user.city] = acc[user.city] || [];
    acc[user.city].push(user);
    return acc;
}, {});

// 4. Age Statistics
const ageStats = users.reduce((acc, user) => {
    acc.sum += user.age;
    acc.count++;
    return acc;
}, { sum: 0, count: 0 });

const averageAge = ageStats.sum / ageStats.count;

// 5. Get Unique Cities
const cities = [...new Set(users.map(u => u.city))];

// 6. Sort by Age
const sortedByAge = [...users].sort((a, b) => a.age - b.age);

// 7. Find Oldest User
const oldest = users.reduce((max, user) => 
    user.age > max.age ? user : max
);

🎯 Advanced Data Processing

// Data Pipeline
const pipeline = (data) => 
    data
        .filter(item => item.active)
        .map(item => ({
            ...item,
            ageGroup: item.age < 30 ? 'Young' : 'Senior'
        }))
        .sort((a, b) => a.age - b.age);

// Chunk Data
const chunk = (array, size) => 
    array.reduce((acc, _, i) => 
        i % size === 0 ? [...acc, array.slice(i, i + size)] : acc
    , []);

// Flatten Nested Arrays
const flatten = (arr) => arr.reduce((acc, val) => 
    acc.concat(Array.isArray(val) ? flatten(val) : val), []
);

// Deep Clone Objects
const deepClone = (obj) => 
    JSON.parse(JSON.stringify(obj));

// Merge Objects
const mergeObjects = (...objs) => 
    objs.reduce((acc, obj) => ({ ...acc, ...obj }), {});

// Performance Optimization
const processData = (data) => {
    // Use single-pass when possible
    let activeCount = 0;
    let totalAge = 0;
    
    for (const user of data) {
        if (user.active) {
            activeCount++;
            totalAge += user.age;
        }
    }
    
    return {
        activeCount,
        averageAge: totalAge / activeCount
    };
};

💡 Data Processing Tips

  • Use immutable operations
  • Consider performance for large datasets
  • Use meaningful variable names
  • Document complex transformations
  • Test edge cases

Array methods make data transformation elegant and readable. They’re essential for modern JavaScript development.

— Data Engineer

Related posts:

JavaScript: Why localStorage Silently Throws in Private Browsing Mode

How to use client-side function on checkbox or any asp.net component

JavaScript: Use AbortController to Cancel Fetch Requests

Post Views: 3

Post navigation

HTML: Semantic Elements for SEO and Accessibility
AJAX: REST API Security Best Practices

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

October 2026
M T W T F S S
 1234
567891011
12131415161718
19202122232425
262728293031  
« Sep    

Most Viewed Posts

  • Get the User Name and Domain Name from an Email Address in SQL (973)
  • How to make theater mode the default for Youtube (952)
  • How to add default value for Entity Framework migrations for DateTime and Bool (939)
  • Get the First and Last Word from a String or Sentence in SQL (847)
  • How to select distinct rows in a datatable in C# (837)
  • How to enable, disable and check if Service Broker is enabled on a database in SQL Server (624)
  • Add Constraint to SQL Table to ensure email contains @ (590)
  • Average of all values in a column that are not zero in SQL (553)
  • How to use Map Mode for Vertical Scroll Mode in Visual Studio (526)
  • Find numbers with more than two decimal places in SQL (468)

Recent Posts

  • CSS: Fix a prefers-color-scheme Media Query That Gets Silently Overridden by a Browser Extension’s Forced Dark Mode
  • Git: Fix a Merge Commit That Silently Drops a File Because Both Branches Deleted It Differently
  • HTML5: Fix a Native Lazy-Loading Image That Never Loads Because It Sits Inside a Hidden Tab Until the User Clicks It
  • The AI Prompt That Traces a Null Reference Exception Back to the Exact Line That First Produced the Null
  • The AI Prompt That Turns a Gym Membership Contract’s Fine Print Into a Plain-English List of Cancellation Steps
  • Photoshop: Fix a Color Profile Mismatch That Makes Printed Output Look Nothing Like What You Saw On Screen
  • WordPress: Fix Search Results That Return Pages From a Theme You Deactivated Months Ago
  • Visual Studio: Fix a Test Project That Builds Fine Alone but Fails to Discover Any Tests After a NuGet Restore
  • ASP.NET Core: Fix a File Upload That Times Out on Slow Connections Only Because Kestrel’s Minimum Data Rate Feature Kicked In
  • JavaScript: Fix an Array Destructuring Default Value That Silently Never Applies Because null Was Passed Instead of Undefined

Most Viewed Posts

  • Get the User Name and Domain Name from an Email Address in SQL (973)
  • How to make theater mode the default for Youtube (952)
  • How to add default value for Entity Framework migrations for DateTime and Bool (939)
  • Get the First and Last Word from a String or Sentence in SQL (847)
  • How to select distinct rows in a datatable in C# (837)

Recent Posts

  • CSS: Fix a prefers-color-scheme Media Query That Gets Silently Overridden by a Browser Extension’s Forced Dark Mode
  • Git: Fix a Merge Commit That Silently Drops a File Because Both Branches Deleted It Differently
  • HTML5: Fix a Native Lazy-Loading Image That Never Loads Because It Sits Inside a Hidden Tab Until the User Clicks It
  • The AI Prompt That Traces a Null Reference Exception Back to the Exact Line That First Produced the Null
  • The AI Prompt That Turns a Gym Membership Contract’s Fine Print Into a Plain-English List of Cancellation Steps

Social

  • ErcanOPAK.com
  • GoodReads
  • LetterBoxD
  • Linkedin
  • The Blog
  • Twitter
© 2026 Bits of .NET | Built with Xblog Plus free WordPress theme by wpthemespace.com