Could you explain me this block of code? (Contact List)

Question

I'm studying JavaScript on my own and I started by reading tutorials and books (like Eloquent) and articles (on Medium for example). I'm also doing some free courses, two in particular: freeCodeCamp and CodeAcademy.

Today I had to face a contact list exercise on CodeAcademy, and I am not sure I understood it properly.

After some hints, this is the final code I came up with:

var friends = {
  bill: {
    firstName: "Bill",
    lastName: "Gates",
    number: "555 555 555",
    address: ["One Miscrosoft Way", "Redmond", "WA", "98052"]
  },
  steve: {
    firstName: "Steve",
    lastName: "Jobs",
    number: "333 333 333",
    address: ["Apple's street", "Silicon Valley", "SV", "87368"]
  }
};

var list = function(friends) {
  for (var firstName in friends) {
    console.log(firstName);
  }
};

var search = function(name) {
  for (var key in friends) {
    if (friends[key].firstName === name) {
      console.log(friends[key]);
      return friends[key];
    }
  }
};

list(friends);
search("Steve");

.as-console-wrapper { max-height: 100% !important; top: 0;  }

I understood the var friends object and the first function. But what about the second function? Why do I need to use "name" and "key" words if they're not in the contact list. Could you explain me what the code really does?

Also, at the end of the exercise, CodeAcademy put this final code to do something I imagine:

list(friends);
search("Steve");

What exactly is it?

Answer 1

Well in this function:

var search = function(name) {
    for (var key in friends) {
        if (friends[key].firstName === name) {
            console.log(friends[key]);
            return friends[key];
        }
    }
};

Variable key refers to each key of object friends in every iteration, which means it's value is 'bill' in first iteration and 'steve' in second iteration.

name is a parameter of this function search, it don't have an actual value until function is executed like search('Steve'), see you assign the value 'Steve' to it.

So, list(friends) print 'bill' and 'steve' in console, and search('Steve') will print this object:

{
    firstName: "Steve",
    lastName: "Jobs",
    number: "333 333 333",
    address: ["Apple's street", "Silicon Valley", "SV", "87368"]
}

and return it.

Answer 2

See: for...in loops

// basically the same thing as doing 
// function search(name){...}
// this just creates a function in this scope
var search = function(name) {

    // for..in loop loops through the property 
    // names in the friends object
    for (var key in friends) {

        // "key" has the value of either "steve" or "bill"
        // if key === steve then friends[key] is the same 
        // thing as doing friends.steve

        // if friends.steve.firstName === name
        if (friends[key].firstName === name) {
            console.log(friends[key]);
            return friends[key];
        }
    }
};

Answer 3

Okay so you have var friends which is an object that contains each 'friend' which are also objects. Each one of those individual friend objects inside of var friends contain properties (first name, lastname, etc.)

var search = function(name) {
    for (var key in friends) {
        if (friends[key].firstName === name) {
            console.log(friends[key]);
            return friends[key];
        }
    }
};

This is where you are getting lost it seems. Okay, so you create search and set it to be a function. Inside of function you pass name, which is referenced here friends[key].firstname === name. the [key] is actually referencing each one of those 'friend' properties in 'friends' so bill is a key for example. So it looks at each one of those keys(bill,steve, etc.) and sets firstname of that to name, which was passed earlier. So when you use that function search("Steve"); it is actually going to go find him in that list of objects and return all the properties that 'steve' has such as firstname address etc.

Basically to sum it up. The 'name' that is passed in the function just allows you to search through 'friends' and [key] is going to allow the for loop to search through all of the keys of friends.