8/8 How do I Clean up the code output?


#1

At the end of the lesson, Codecademy suggests cleaning up the code like so:

We did some basic logging of your contact list to the console, but we could have made it look even nicer. How might you format the output to look like this?

First Name: Steve
Last Name: Jobs
Number: (408) 555-5555
Address: 1 Infinite Loop
         Cupertino, CA 95014

Can someone pleas show me how can I do this?


#2

We typically see people writing several console.log() statements, which is fine, but I prefer building an output string then logging it all at once in one statement. Let's set out to do that...

var log = "";
var object;
for (var key in friends) {
    object = friends[key];
    log = "\n" +key;
    log += "\nFirst Name: " + object.firstName;
    log += "\nLast Name : " + object.lastName;
    log += "\nNumber    : " + object.number;
    log += "\nAddress   : " + object.address[0];
    log += "\n            " + object.address.splice(1).join(', ');
    console.log(log);
}

Output

steve
First Name: Steve
Last Name : Jobs
Number    : (408) 555-5555
Address   : 1 Infinite Loop
            Cupertino, CA, 95014

This is one way of doing it. There are many ways we can go about it.


#3

Hi @mtf! I was just going over you're code here to clean up the output of the contact list exercise and I don't understand all of it.

Could you explain it further for me?
and what is '\n' and what does it do?

also explain the object.address.splice(1).join(',');


#4

"\n" is a string escape sequence that inserts a line break, or newline into a string. As we can see, the entire output is one single string that has been constructed and logged. The line breaks help to organize the output.

The object.address property is an array of four elements which we print out in two lines, first the street address on its own line, followed by the remaining info on the next. The first element is easy to target, object.address[0], but the remaining are a little trickier if we are to do it with a single statement. That's where array.slice() comes in. Consider,

[ el1, el2, el3, el4 ]

We queried el1 already, so all we are interested in is el2..el4. .slice() lets us make a shallow copy of an array from some starting index through some ending index, or in the case the end of the array.

el1  [ el2, el3, el4 ]
        ^
        |
     index 1

The shallow copy is still an array, just one element shorter. We use the array.join() method to join these elements into a single string with comma separated values.


#5

Hi mtf,

Very clear explanations, thanks a lot.

Newbie question : could you please explain the meaning of the 2 first lines ?

var log = "";
var object;

I don't get what the "" and what the var object; create ...

Thanks


#6

var log = "";
var object;

The first is declared and initialized as the empty string. We can now concatenate to this since it is defined. The second is only declared, not defined. It gets defined inside the loop (which is not the place to declare a variable). It is a re-usable and therefore, volatile variable. Purely utility, and one which only requires a single declaration in the program. It gets a new definition constantly, whereas log never does; it is only added to as the program runs.


#7

Now that I look at it again, log doesn't need to be defined, only declared like object. It gets defined in the first line inside the function...

log = "\n" +key;

#8

To revise, and for simplicity,

var log, object;
for (var key in friends) { ... }

Invariably it comes down to loose data types in JavaScript. A variable can change type in an instant. Not so in many other languages. We could have defined object just as we previously defined log but to what end? Any new definition overwrites the previous, even while the type may change.


#9
I was wandering if this will never work in JS?
     friends[key[0]] 

and why address line prints out in this case
   Address:[object Object]

var search = function (argument) {
    for (var key in friends) {
        if (friends[key].firstName === argument) {
            console.log (
            "\n" + "First name:" + friends[key].firstName,
            "\n" + "Last Name: " + friends[key[1]],
            "\n" + "Number:" + friends[key][2],
            "\n" + "Address:" + friends[key]
             )
            return friends[object];
        }    
    }
};