Accessing object with dot notation and bracket notation

Question

can someone explain why i get undefined message when i access the objects using dot notation like return contacts[i].prop; ?

But, when i access it using the bracket notation like return contacts[i][prop]; it will return the property of the object.

Btw, the code is from a lessons at freecodecamp.org

Here's the code :

var contacts = [
    {
        "firstName": "Akira",
        "lastName": "Laine",
        "number": "0543236543",
        "likes": ["Pizza", "Coding", "Brownie Points"]
    },
    {
        "firstName": "Harry",
        "lastName": "Potter",
        "number": "0994372684",
        "likes": ["Hogwarts", "Magic", "Hagrid"]
    },
    {
        "firstName": "Sherlock",
        "lastName": "Holmes",
        "number": "0487345643",
        "likes": ["Intriguing Cases", "Violin"]
    },
    {
        "firstName": "Kristian",
        "lastName": "Vos",
        "number": "unknown",
        "likes": ["JavaScript", "Gaming", "Foxes"]
    }
];

function lookUpProfile(name, prop){
    // Only change code below this line    
    for (var i = 0; i < contacts.length; i++){
        if (contacts[i].firstName === name ){
            if (contacts[i].hasOwnProperty(prop)){
                // return contacts[i][prop]; it will return the prop
                return contacts[i].prop; // undefined
            }
            else{
                return "No such property";
            }
        }
    }
    return "No such contact";
    // Only change code above this line
}

console.log(lookUpProfile("Akira", "likes"));
console.log(lookUpProfile("Sherlock", "likes"));
console.log(lookUpProfile("Harry", "likes"));
console.log(lookUpProfile("Bob", "number"));

Answer 1

.prop and [prop] are two different things.

.prop will get the property literally named prop, eg:

const obj = {
    prop: 1,
    foo: 2
};

console.log(obj.prop);

will log 1. Whereas, [prop] will get the property whose name is denoted by the value of the prop variable, eg:

const obj = {
    prop: 1,
    foo: 2
};

const prop = "foo";
console.log(obj[prop]);

Will log 2.

You can learn more in the Property accessors documentation.