Member Avatar for Rahul47

Hey guys, here I am starting my journey into javascript, when this stupid bug is annoying me. Following is my piece of code:

<html>
    <head>
        <title> Using 'this' in Javascript.</title>
    </head>
    <body>
        <script type="text/javascript">
            var name={
                firstName:"Foo",
                lastName:"Bar",
                showName:function(){
                    console.log(this.firstName +" "+this.lastName);
                }
            };
            name.showName();
            alert(name.lastName);
        </script>
    </body>
</html>

Problems:

1) I am getting following error for name.showName();'Uncaught TypeError: undefined is not a function`

2) Undefined popup for alert(name.lastName)

As far as my knowledge takes me I have already defined object property and method before using.
Where do you guys think is the bug ?

Regards

  • 3 Contributors
  • 7 Replies
  • 210 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by Rahul47
Member Avatar for pritaeas

Not sure. If I put your code in jsFiddle, it runs as expected.

Member Avatar for Rahul47

Not sure. If I put your code in jsFiddle, it runs as expected.

Even I am not able to figure out where it is taking wrong turn.

Member Avatar for Rahul47

Well here is the second method I tried, but it's also failing to deliver.

<html>
    <head>
        <title> Using 'this' in Javascript.</title>
    </head>
    <body>
        <script type="text/javascript">
            var name={
                firstName:"Foo",
                lastName:"Bar",
            }
            function showName(){
                alert(this.firstName+ " "+this.lastName);
            }
            showName(name);
        </script>
    </body>
</html>

I am getting popup with undefined undefined. This implies that object properties firstName and lastName are not getting initialized.
I have checked the sequence again and again, but no use.

Member Avatar for diafol

I think it may be down to your use of 'name' as a variable name. Change it to name1 and see if it works:

<script type="text/javascript">
        var name1 = {"fn":"Foo","ln":"bar"};
        alert(name1.fn);
</script>

That works. Using 'name' didn't.

commented: It was dumb of me to use 'name' as it is a property. +4
Member Avatar for diafol

Examples that work:

//without 'this' without parameter but with global var:

<script type="text/javascript">
    var name1 = {"fn":"Foo","ln":"bar"};
    function showName(){
        alert(name1.fn);
    }
    showName();
</script>

//without 'this', but with named parameter and global var:

<script type="text/javascript">
    var name1 = {"fn":"Foo","ln":"bar"};
    function showName(something){
        alert(something.fn);
    }
    showName(name1);
</script>

Can't work:

    <script type="text/javascript">
        var name1 = {"fn":"Foo","ln":"bar"};
        function showName(){
            alert(this.fn);
        }
      showName(name1);
    </script>

As function has no idea of 'this' in this context. 'this' - and I'm a total noob in js, so please correct me if I'm wrong - will refer to the 'calling object' or the object that contains the method (function), e.g.

var lump = {
    fn : "Foo",
    ln : "bar",

    showName : function(){
        alert(this.fn + ' ' + this.ln);
    }
}

lump.showName();

"lump" - thought this was apt as everything is lumped into the object :)

Maybe useful info here: http://www.htmlgoodies.com/beyond/javascript/calling-object-methods-in-javascript.html

Edited by diafol
Member Avatar for Rahul47

I think it may be down to your use of 'name' as a variable name. Change it to name1 and see if it works:

yay ! It worked. I wasn't aware of keywords in Javascript. I am a noob too. Might be 'name' is a keyword or of special significance to the language.

Member Avatar for Rahul47

I'm a total noob in js, so please correct me if I'm wrong

It's good to use 'this' as it refers to the object being passed to the function incase you want to pass different objects to function.
It's comforatble to use 'this' instead of using 'objectName' everytime.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.