Best way to optimize similar payload (React)

Question

I have to do some optimization on the function presented below.
It makes some data like a payload based on the arguments passed into it.

I am not much sure how to improve the code to look better & less.

Please share some thoughts on this.

//Process data and call track event for product added
export function ProductActionsSegment(data) {
 let cart_item = []
 data.session.cart.items.forEach(function (properties) {
 var items = {};
 items["brand"] = properties.product.display_brand;
 items["category"] = null;
 items["id"]= properties.id;
 items["imageUrl"]=properties.product.image.url;
 items["magento_product_id"]=properties.product.id;
 items["manufacturer"]=null;
 items["microcategory"]=null;
 items["name"]=properties.product.name;
 items["price"]=properties.product.price_range.minimum_price.final_price.value;
 items["product_id"]=properties.product.id;
 items["quantity"]=properties.quantity;
 items["regular_price"]=properties.product.price_range.minimum_price.regular_price.value;
 items["size"]=properties.product.size;
 items["size_type"]=properties.product.size_label;
 items["sku"]=properties.product.sku;
 items["special_category"]=null;
 items["special_price"]=properties.product.special_price;
 items["stock_quantity"]=null;
 items["swatch"]=properties.product.color_label;
 items["trend"]=null;
 items["url"]=properties.url;
 cart_item.push(items)
 });
 if(data.location == 'product_page' || data.location == 'product_list') {
 var product_page = {
 brand: data.product.brandName,
 category: null,
 country: null,
 email: Cookies.get('useremail'),
 imageUrl: null,
 location: data.location,
 magento_product_id: null,
 manufacturer: null,
 microcategory: null,
 name: data.product.name,
 price: data.product.price.price.value,
 product_id: null,
 products:cart_item,
 quantity: 1,
 regular_price: data.product.price.price.value,
 size: null,
 size_type: null,
 sku:data.product.sku,
 special_category: null,
 special_price: data.product.price.specialPrice,
 stock_quantity: null,
 swatch: null,
 trend: null,
 type: data.product.type,
 url: data.product.url
 };
 TrackEvent('Product Added',product_page);
 return;
 }
 if(data.location == 'cart') {
 var eventName;
 var type;
 if(!data.action && data.new_qty > data.product.quantity){
 eventName = 'Product Added';
 type = 'increseQuantity';
 }
 else if(data.action){
 eventName = 'Product Removed';
 type = 'xProduct';
 }
 else{
 eventName = 'Product Removed';
 type = 'decreaseQuantity';
 }
 var product_cart = {
 brand: null,
 category: null,
 country: null,
 email: Cookies.get('useremail'),
 imageUrl: null,
 location: data.location,
 magento_product_id: data.product.id,
 manufacturer: null,
 microcategory: null,
 name: data.product.name,
 price: data.product.price,
 product_id: data.product.id,
 products:cart_item,
 quantity: 1,
 regular_price: data.product.price,
 size: data.product.product.size,
 size_type: null,
 sku:data.product.product.sku,
 special_category: null,
 special_price: data.product.product.special_price,
 stock_quantity: null,
 swatch: data.product.product.color_label,
 trend: null,
 type: type,
 url: data.product.url
 };
 return product_cart
 }
}

• dev php: any thoughts on this ?
• greybeard: Welcome to CodeReview@SE. Helpful. reviews. take. time: expect answers to simple&short code within a couple of hours rather than minutes. While waiting for reviews, (re)visit How do I ask a Good Question? and improve the title of this question.

Answer 1

I think the main issue with this function is that it's very difficult to follow what the function is doing with the giant object-creation stuff in the middle of the function. I would extract each of those large chunks into separate helper functions so that it's easy to see at a glance the general idea of what ProductActionsSegment() does.

Here's an untested example (that also includes a few other minor cleanups):

export function ProductActionsSegment(data) {
 const cartItem = data.session.cart.items.map(formatCartItem);
 switch (data.location) {
 case 'product_page':
 case 'product_list':
 TrackEvent('Product Added', formatProductPage({ data, cartItem }));
 return;
 case 'cart':
 const type = extractCartTypeFromData(data);
 return formatCartPage({ data, cartItem, type });
 }
}
function extractCartTypeFromData(data) {
 if (data.action) {
 return 'xProduct';
 } else {
 return data.new_qty > data.product.quantity
 ? 'increseQuantity'
 : 'decreaseQuantity';
 }
}
const formatCartItem = ({ id, quantity, url, product }) => ({
 id,
 quantity,
 url,
 brand: product.display_brand,
 category: null,
 imageUrl: product.image.url,
 magento_product_id: product.id,
 manufacturer: null,
 microcategory: null,
 name: product.name,
 price: product.price_range.minimum_price.final_price.value,
 product_id: product.id,
 regular_price: product.price_range.minimum_price.regular_price.value,
 size: product.size,
 size_type: product.size_label,
 sku: product.sku,
 special_category: null,
 special_price: product.special_price,
 stock_quantity: null,
 swatch: product.color_label,
 trend: null,
});
const formatProductPage = ({ data: { product, location }, cartItem }) => ({
 brand: product.brandName,
 category: null,
 country: null,
 email: Cookies.get('useremail'),
 imageUrl: null,
 location,
 magento_product_id: null,
 manufacturer: null,
 microcategory: null,
 name: product.name,
 price: product.price.price.value,
 product_id: null,
 products: cartItem,
 quantity: 1,
 regular_price: product.price.price.value,
 size: null,
 size_type: null,
 sku: product.sku,
 special_category: null,
 special_price: product.price.specialPrice,
 stock_quantity: null,
 swatch: null,
 trend: null,
 type: product.type,
 url: product.url,
});
const formatCartPage = ({ data: { product, location }, cartItem, type }) => ({
 brand: null,
 category: null,
 country: null,
 email: Cookies.get('useremail'),
 imageUrl: null,
 location,
 magento_product_id: product.id,
 manufacturer: null,
 microcategory: null,
 name: product.name,
 price: product.price,
 product_id: product.id,
 products: cartItem,
 quantity: 1,
 regular_price: product.price,
 size: product.product.size,
 size_type: null,
 sku: product.product.sku,
 special_category: null,
 special_price: product.product.special_price,
 stock_quantity: null,
 swatch: product.product.color_label,
 trend: null,
 type,
 url: product.url,
});

A few other things:

• Your original version has an unused eventName variable.
• Are objects of these shapes being created in multiple locations? If not, ignore the following advice. If so, you might want a general helpers such as createCartPage({ brand: ..., , category: ..., etc }). This would make it so you don't have to explicitly set "null" to a bunch of different attributes as the helper can take care of that for you. Example helper:

const createBlankCartPage = (attrs = {}) => Object.assign(Object.seal({
 brand: null,
 category: 'some-default-category',
 country: null,
 email: null,
 // ...
}), attrs);