1

I have a javascript object with a bunch of properties. In this example each property represents a piece of clothing, with a key and then a value that is an array. 

var clothes = {
  CLO1: ["shirt", "cotton", "white"],
  CLO2: ["tie", "silk", "red"],
  CLO3: ["shoes", "leather", "black"]
};

I want to loop through each one and print out the color for each piece of clothing. I'm trying to figure out the most concise way to do this. Something like this--

for (property in object) {
if (property[key]){
    return (property[2])
  } else { return "none";
}

Any thoughts would be really greatly appreciated. I hope this makes sense. Thanks!

Improve this question
2
  • You can return once. So you may want to store the desired data in an object an return that object at the end. Commented Jan 14, 2015 at 2:17
  • @Oriol You can only return once, but you can have multiple return statements. The catch is that, once one of them is hit, none of the others will be. Commented Jan 14, 2015 at 2:22

4 Answers 4

Reset to default
7

Looks fine to me. Are arrays sometimes empty or null? The suggestion in the comments to remove the extra return statement is a good suggestion.

I noticed that each array has a similar structure. The first element is the type of clothing, the second element is the material and the third element is the color. You can use an object instead of an array. The advantage of using an object is that it tells you (and other programmers) more about the structure of your data. Use an array to store a collection of these objects:

var clothes = [
  { type: "shirt",
    material: "cotton",
    color: "white"
  },
  { type: "belt",
    material: "leather",
    color: "none"
];

Also, instead of checking if the property "color" exists, always include "color". Set "color" to "none" if it is not relevant.

Printing out the colors looks like:

clothes.forEach(function(each) {
    console.log(each.color);
});

UPDATE I chose to always include "color" because it simplifies the procedural code. Without the data redundancy I must check to see if particular keys exist when I iterate over the properties. I usually choose to simplify the code, not the data. Philosophically, it is similar the trade-offs between dense and sparse data representations.

There is also a semantic reason always including color. What if some clothes have the property "size", but others don't. What if all the examples I look at do not have "size"? I would not know to include "size" in my procedural code.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Good answer, using objects makes much more sense. I disagree about always including .color though, it creates a lot of unneeded redundancy. The code to display the color could just be changed to console.log(each.color || 'none').
I chose to always include "color" because it simplifies the procedural code. When given the choice between some data redundancy or adding more branching or conditional logic, then I usually choose to simplify the code, not the data. Without the data redundancy I must check to see if particular keys exist when I iterate over the properties. There are also a semantic reason. What if some clothes have the property "size", but others don't. What if all the examples I look at do not have "size"? I would not know to include "size" in my procedural code.
1 
var clothes = {
  CLO1: ["shirt", "cotton", "white"],
  CLO2: ["tie", "silk", "red"],
  CLO3: ["shoes", "leather", "black"]
};

var print = function(obj) {
    for (var property in obj) {
        if (obj.hasOwnProperty(property)) {
            console.log(obj[property][2]);
        }
    }
}   

print(clothes);

On each iteration of the for loop, the property variable holds the name of the property, you then have to have to index into obj to retrieve the value of the property, and then again index the second element of the array to get the colour you asked for.

This works, although I would suggest creating an structure (as suggested by @ahoffer) to hold these items.

Improve this answer

7 Comments

How about using if(window.console){console.log("....")} in case the browser has no console ?
@IstiaqueAhmed it would be just an obfuscation of the example.
@AreWojciechowski, 'just and obfuscation ' - what do you mean ?
why obfuscation ? IE will throw errors with the console code as a blessing of de-obfuscation !.
@IstiaqueAhmed Real production code shouldn't be using console.log to display the results. In example code or while developing it is a safe bet that the developer will be using a browser that contains console. Adding an unnecessary conditional statement to the example makes the code less clear, harder to read and thus harder to understand. It is unneeded clutter.
|
1 
// - Object.keys takes an object and returns an array of keys
// - forEach iterates that array
// - console.log prints it to the console

Object.keys(clothes).forEach(function (type) {
    console.log(clothes[type][2]);
});
Improve this answer

Comments

0

Maybe something like that?

Object.keys(clothes).forEach(function(type) {
   console.log(type + ": " + clothes[type].join(', '));
});

The code above will give you this:

CLO1: shirt, cotton, white
CLO2: tie, silk, red
CLO3: shoes, leather, black
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.