Utilize the reduce method instead of map. In this scenario, the root serves as the accumulator:

const buildMenuMap = menu =>
  menu.reduce((root, item) => {
    let parts = item.slice(1).split("/");
    let lastPart = parts.pop();
    let leaf = parts.reduce((acc, part) => acc[part] || (acc[part] = {}), root);
    leaf[lastPart] = null;
    return root;
  }, Object.create(null));

Explanation:

When iterating through each item in the menu array, we extract the parts by removing the leading '/' (using slice(1)) and then splitting by '/'.

The lastPart from this array is removed (the final part is handled separately).

For every remaining part in the parts array, we traverse the root object. At each level of traversal, we either return the existing object at that level acc[part] if it already exists, or we create and return a new one if it doesn't (acc[part] = {}).

Once reaching the final level leaf, the value is set to null using the lastPart.

It's important to note that Object.create(null) is passed to reduce to create a prototypeless object. This makes it safer to access keys in root[someKey] without needing to check if someKey is an owned property.

Example:

const buildMenuMap = menu =>
  menu.reduce((root, item) => {
    let parts = item.slice(1).split("/");
    let lastPart = parts.pop();
    let leaf = parts.reduce((acc, part) => acc[part] || (acc[part] = {}), root);
    leaf[lastPart] = null;
    return root;
  }, Object.create(null));

let arr = ['/social/swipes/women', '/social/swipes/men', '/upgrade/premium'];

let result = buildMenuMap(arr);

console.log(result);

Here's a simple way to achieve this:

 root = root[label];

If you adjust your helper function like so:

 const addLabelToMap = (root, label) => {
    if(!root[label]) root[label] =  {};
 }

This is how I would approach it:

 const buildMenuMap = menus => {
   const root = {};

   for(const menu of menus) {
     const keys = menu.split("/").slice(1);
     const prop = keys.pop();
     const obj = keys.reduce((curr, key) => curr[key] || (curr[key] = {}), root);
     obj[prop] = null;
  }

  return root;
}

I recently analyzed your code to identify the issues and I recommend you do the same. There are two glaring mistakes:

Firstly, in the initial iteration, the value of map is simply an empty object {}, while the values of root and label are initialized as "" and swipes respectively.

.forEach((element) => {
  let root = map[element[0]] || "";
  ...
  root = root[label];
}

This results in root[label] being undefined, leading to the new root also being undefined.

Secondly, you are using map in its original form throughout.

const addLabelToMap = (root, label) => {
  if(!map[root]) map[root] = {};
  if(!map[root][label]) map[root][label] = {};
}

Instead, it should be passed as a parameter for recursive purposes.

const addLabelToMap = (root, label) => {
  if(!root[label]) root[label] = {};
}

To debug your code, create a basic HTML file with the JavaScript enclosed in script tags and then host it locally using python -m http.server. This will allow you to set up breakpoints and analyze your code step by step.

Here's a comprehensive approach to tackle this:

const menuItems = ['/social/swipes/women', '/social/swipes/men', '/upgrade/premium'];

const mergeObjects = (target, source) => {
  // Traverse through `source` properties and if an `Object`, combine properties of `target` and `source`
  for (let key of Object.keys(source)) {
    if (source[key] instanceof Object && key in target) Object.assign(source[key], mergeObjects(target[key], source[key]))
  }

  // Combine `target` and modified `source`
  Object.assign(target || {}, source)
  return target
};

const createMenuMap = menuItems => {
  return menuItems
    .map(item => item.split('/').splice(1))

    // The `root` value is the object where all directories will be merged into
    .reduce((root, directory) => {

      // Iterates backwards through each directory array, stacking the previous accumulated object into the current one
      const branch = directory.slice().reverse().reduce((acc, cur) => { const obj = {}; obj[cur] = acc; return obj;},null);

      // Utilizes the `mergeObjects()` method to combine the accumulated `root` object with the newly created `branch` object.
      return mergeObjects(root, branch);
    }, {});
};

createMenuMap(menuItems);

Note: The deep merge concept was sourced from @ahtcx on GitHubGist

To streamline your code, consider utilizing Array.reduce, Object.keys & String.substring

Create Menu Map

This function takes an array as input and reduces it into an object where each entry in the array updates the object with the corresponding hierarchy using the addLabelToMap function. Each entry is converted into an array of levels (c.substring(1).split("/")).

Add Label to Map

This function has 2 inputs:

• obj - represents the current root object / node
• ar - an array of child hierarchy

The function then returns the updated object.

Process Logic

• The function extracts the first value using let key = ar.shift() as the key and adds/updates it in the object (obj[key] = obj[key] || {};).
• If there is a child hierarchy present (if(ar.length)), the function recursively calls itself to update the object until the end (addLabelToMap(obj[key], ar)).
• If there is no further child hierarchy, check if the object has additional entries (

  else if(!Object.keys(obj[key]).length

  ). If there are no more levels, indicating a leaf node, set the value to null (obj[key] = null). Note: if there will never be a scenario like /social/swipes/men/young alongside existing entries in the array, the else if block can be simplified to just an else block.
• Once the object is updated, return the final updated object.

let arr = ['/social/swipes/women', '/social/swipes/men', '/upgrade/premium'];

function addLabelToMap(obj, ar) {
  let key = ar.shift();
  obj[key] = obj[key] || {}; 
  if(ar.length) addLabelToMap(obj[key], ar);
  else if(!Object.keys(obj[key]).length) obj[key] = null;
  return obj;
}

function buildMenuMap(ar) {
  return ar.reduce((a,c) => addLabelToMap(a,c.substring(1).split("/")), {});
}

console.log(buildMenuMap(arr));

If you want to tackle this problem in a more succinct manner, consider using a recursive function like the one shown below:

let obj={}, input = ['/social/swipes/women', '/social/swipes/men', '/upgrade/premium'];

const makeObj = (arr, obj={}) => {
  let prop = arr.shift()
  prop in obj ? null : Object.assign(obj, {[prop]: {}})
  arr.length ? makeObj(arr, obj[prop]) : obj[prop] = null
  return obj
}

input.forEach(x => makeObj(x.split('/').filter(Boolean), obj))

console.log(obj)

The concept involves sending each path to the makeObj function, which recursively adds the paths to an object until it reaches the end of the path array. This approach provides an alternative to using the commonly used Array.reduce method.

A quote taken from the bounty description:
The existing answers lack sufficient detail.

It appears that you might be struggling to grasp the concepts presented in the current answers. To assist you, I will offer two solutions: an alternative approach and a more detailed solution involving the use of Array.reduce() function.

Alternative method using for loops

Please refer to the code comments for an explanation of the code.

var arr = ['/social/swipes/women', '/social/swipes/men', '/upgrade/premium'],
    result = {};

for(var i = 0; i < arr.length; i++)
{
    var parts = arr[i].slice(1).split('/'),
        curObj = result[parts[0]] = result[parts[0]] || {};

    for(var k = 1; k < parts.length; k++)
    {
        if(parts[k+1])
            curObj[parts[k]] = curObj[parts[k]] || {};
        else curObj[parts[k]] = null;

        curObj = curObj[parts[k]];
    }
}

console.log(JSON.stringify(result, null, 4));

If you find the above code confusing, please take a look at this simplified version:

var arr = ['/social/swipes/women', '/social/swipes/men', '/upgrade/premium'],
    result = {},
    parts = arr[2].slice(1).split('/'),
    curObj = result[parts[0]] = {};

curObj[parts[1]] = parts[1+1] ? {} : null;
console.log(JSON.stringify(result, null, 4));

Detailed solution utilizing Array.reduce()

In this enhanced solution, I have elaborated on the code provided by user Nitish Narang, including explanations in the comments and console output. If you struggle with understanding arrow functions, feel free to expand them into normal functions with descriptive variable names. Visualization aids in comprehension. Below is a slightly condensed version of their code.

var arr = ['/social/swipes/women', '/social/swipes/men', '/upgrade/premium'];
var result = arr.reduce(function(acc0, curVal, curIdx)
{
    console.log('\n' + curIdx + ': ------------\n'
                + JSON.stringify(acc0, null, 4));

    var keys = curVal.slice(1).split('/');
    keys.reduce(function(acc1, currentValue, currentIndex)
    {
        acc1[currentValue] = keys[currentIndex+1]
                                ? acc1[currentValue] || {}
                                : null;

        return acc1[currentValue]
    }, acc0); 

    return acc0
}, {}); 

console.log('\n------result------\n'
            + JSON.stringify(result, null, 4));