What does this object[name] means in this function

JavaScript
1

I’ve picked a function from the web and want to modify it to do a different job, my job.
However, I don’t really understand what does this object[name] mean in this function:

function dosomething(object){

    var name,
        method;

    for (name in object){
        method = object[name];
        if (typeof method == "function"){
 
        }
    }
}

Where should I learn more or what “keyword” should I search to learn more about this.

Thanks

2

that’s bracket notation for object property access.

e.g.

// dot notation
object.property

// bracket notation
object['property']
3

Yeah, I’m guessing that since ‘object’ is an argument of the function that an object is being passed to it. “object[name]” is the name of the object passed. Looks like the code you supplied is incomplete (since there is nothing inside the if conditional), so this is totally a guess.

4

nope, name is the variable that holds the object’s properties’/keys’ names (including any non-native properties from the prototype chain) while iterating over them.

5

Ah! I don’t work with objects, too often, thanks for the heads-up.

6

hm, in JS you hardly have anything else (notably null and undefined) besides control structures.

7

Elements as objects, yeah… but I have never used a for…each loop to iterate through all the attributes of an input or select or div. I’ve done some work with arrays, usually using for(var x=0; x<obj.length; x++), although I am trying to get more into the habit of for…each.

8

Thanks guys,

I figure out how to get it worked with something like this:

function dosomething(object){

    var name,
        method;

    for (name in object){
		// console.log(name);
        method = object[name];
        if (typeof method == "function"){
			console.log(method);
			method();
        }
    }
}

var aaa = {
	bbb: function() {
		alert('Hello World!');
	}
};

dosomething(aaa);

But I do not understand what is it. It’s kind of cool stuff and I want to learn more about it, to get to know more what I’m trying to do

9

All you’re doing is looping through the properties of the object and calling each property as a function that is a function. Actually looking at it that is a terrible way to call the function because the object binding is being lost.

Ex.


function dosomething(object){

    var name,
        method;

    for (name in object){
		// console.log(name);
        method = object[name];
        if (typeof method == "function"){
			console.log(method);
			method();
        }
    }
}

var aaa = {
        foo: 'Hiho',
	bbb: function() {
                alert(this.foo); // When aaa.bbb is called in the above function this will be the window object instead of "this" object literal.
		alert('Hello World!');
	}
};

dosomething(aaa);

A method around that is using apply or call so the function doesn’t loose its object binding.


function dosomething(object){

    var name,
        method;

    for (name in object){
		// console.log(name);
        method = object[name];
        if (typeof method == "function"){
			console.log(method);
			method.call(object);
        }
    }
}

var aaa = {
        foo: 'Hiho',
	bbb: function() {
                alert(this.foo); // this.foo will not actually be the string Hiho when called from the above function."
		alert('Hello World!');
	}
};

dosomething(aaa);

Probably a more recent article out there but below is the most recent one I recall reading about this topic.

10

Thanks,

That is what I need. I really want to go deep into this.

11

Also, be aware that when you iterate over an object using a for…in loop, you’ll also get the properties/methods from the objects further up the prototype chain (i.e the objects that the current object ‘inherits’ from) and this might not be what you want. To avoid this, you need to add a check using the object’s hasOwnProperty method:

for (name in object) {
    if (object.hasOwnProperty(name)) {
        // name is a direct property of object
    }
}
12

An even more compact way to do this (assuming you don’t care about IE8):

Object.keys(obj).forEach(function (fn) {
    if (typeof obj[fn] === 'function') {
        fn.call(obj);
    }
}

Then you don’t have to do hasOwnProperty checks and you only get enumerable properties returned from Object.keys so no more filtering is necessary.

Extra credit: using Array.prototype.filter to return only the keys that are functions:

var funcs = Object.keys(obj).filter(function (key) {
    return (typeof obj[key] === 'function');
});
var results = funcs.map(function (fn) { return fn.call(obj); }); 
//now results is an array with all your return values
1 Like
13

Thanks for additional info vgarcia,

I always want to learn more about these advanced functions.
I write a Chrome app for Android devices. So I don’t really care about IE8.
They said it boosts JavaScript performance.