How do I switch() on an array in JavaScript?

Question

I have an empty array as follows:

var itemsWithEmptySockets = [];

Which may be populated with one or more of the following values (depending on information pulled via n API):

0, 1, 2, 4, 5, 6, 7, 8, 9, 15, 16

Where:

0 = Head
1 = Neck
2 = Shoulder
4 = Chest
5 = Waist
6 = Legs
7 = Feet
8 = Wrist
9 = Hands
14 = Back
15 = MainHand
16 = SecondaryHand

I'd like to test to see what the array has in it and essentially translate those numbers to strings by storing the string in an array e.g. if 0, then the Head has an empty socket, add "Head" to new array which I'd then like to use to display "Head" as a string within the DOM.

In order to do so I tried a switch statement e.g.

switch(itemsWithEmptySockets){
case 0:
emptyItems.push("Head");
break;

However it appears switch statements don't support the use of arrays in this way i.e. passing the array itemsWithEmptySockets.

Is there a more efficient way to do this than 12 if statements?? e.g.

for(i=0; i < itemsWithEmptySockets.length; i++){
    if(itemsWithEmptySockets[i] == 0){
      emptyItems.push("Head");
    }
if(itemsWithEmptySockets[i] == 1){
      emptyItems.push("Neck");
    }
etc.
}

Many thanks for the help!

Answer 1

You could create an array with the size of the items then you can index the value without a loop or a switch.

Since this is such a small list and the indices are in such a small range, creating a map seems inefficient, but if your range of indices is very large then creating a map would be a wise choice.

/* Redirect console output to HTML. */ document.body.innerHTML='';
console.log=function(){document.body.innerHTML+=[].slice.apply(arguments).join(' ')+'\n';};

const BODY_PARTS = ['Head', 'Neck', 'Shoulder', null, 'Chest', 'Waist', 'Legs', 'Feet',
    'Wrist', 'Hands', null, null, null, null, 'Back', 'MainHand', 'SecondaryHand'];

var itemsWithEmptySockets = [4, 2, 6, 8, 13, 9, 3, 5];
var emptyItems = [];

for (var i = 0; i < itemsWithEmptySockets.length; i++) {
  emptyItems.push(BODY_PARTS[itemsWithEmptySockets[i]]);
}

console.log(JSON.stringify(emptyItems, null, '  '));

body { font-family: monospace; white-space: pre; }

Answer 2

Another option is using Array.prototype.map with a custom lookup method:

function BodyPartLoookup(x){
  switch (x){
    case 0: return 'Head';
    case 1: return 'Neck';
    case 2: return 'Shoulder';
    case 4: return 'Chest';
    case 5: return 'Waist';
    case 6: return 'Legs';
    case 7: return 'Feet';
    case 8: return 'Wrist';
    case 9: return 'Hands';
    case 14: return 'Back';
    case 15: return 'MainHand';
    case 16: return 'SecondaryHand';
    default: return '';
  }
}

var originalArray = [0, 1, 2, 4, 5, 6, 7, 8, 9, 15, 16];
var resolvedArray = originalArray.map(BodyPartLoookup);

document.getElementById('output').innerHTML = resolvedArray.join(', ');

<pre id="output"></pre>

Answer 3

To answer the question in your title, you cannot.

To propose a better solution for your issue. Assuming the values for the various values are always the same, I would store it in an object as so:

var parts = {
    0: 'Head',
    1: 'Neck',
    // ...
    15: 'MainHand',
    16: 'SecondaryHand'
}

And then, when you want to populate based on your api data do as follows:

for(var i = 0; i < itemsWithEmptySockets.length; i++){
   emptyItems.push(parts[itemsWithEmptySockets[i]]);
}

You could also dynamically define the parts object, if that is also retrieved through an api.

Answer 4

I wouldn't use switch for this, I don't think; I'd use a mapping object:

// In one central place
var socketMappings = {
    0: "Head",
    1: "Neck",
    2: "Shoulder",
    4: "Chest",
    5: "Waist",
    6: "Legs",
    7: "Feet",
    8: "Wrist",
    9: "Hands",
    14: "Back",
    15: "MainHand",
    16: "SecondaryHand"
};

// Where you're doing this
var emptyItems = [];
itemsWithEmptySockets.forEach(function(entry) {
    emptyItems.push(socketMappings[entry]);
});

Live Example:

// In one central place
var socketMappings = {
  0: "Head",
  1: "Neck",
  2: "Shoulder",
  4: "Chest",
  5: "Waist",
  6: "Legs",
  7: "Feet",
  8: "Wrist",
  9: "Hands",
  14: "Back",
  15: "MainHand",
  16: "SecondaryHand"
};

// Where you're doing this
itemsWithEmptySockets = [
  0,
  14,
  5
];
var emptyItems = [];
itemsWithEmptySockets.forEach(function(entry) {
  emptyItems.push(socketMappings[entry]);
});

// Show result
snippet.log(itemsWithEmptySockets.join(", "));
snippet.log(emptyItems.join(", "));

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Or if emptyItems won't already have anything else in it, use Array#map:

// In one central place
var socketMappings = {
    0: "Head",
    1: "Neck",
    2: "Shoulder",
    4: "Chest",
    5: "Waist",
    6: "Legs",
    7: "Feet",
    8: "Wrist",
    9: "Hands",
    14: "Back",
    15: "MainHand",
    16: "SecondaryHand"
};

// Where you're doing this
var emptyItems = itemsWithEmptySockets.map(function(entry) {
    return socketMappings[entry];
});

Live Example:

// In one central place
var socketMappings = {
  0: "Head",
  1: "Neck",
  2: "Shoulder",
  4: "Chest",
  5: "Waist",
  6: "Legs",
  7: "Feet",
  8: "Wrist",
  9: "Hands",
  14: "Back",
  15: "MainHand",
  16: "SecondaryHand"
};

// Where you're doing this
itemsWithEmptySockets = [
  0,
  14,
  5
];
// Where you're doing this
var emptyItems = itemsWithEmptySockets.map(function(entry) {
  return socketMappings[entry];
});

// Show result
snippet.log(itemsWithEmptySockets.join(", "));
snippet.log(emptyItems.join(", "));

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>