Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I have a question about function literals??

    Hello

    I have joined this forum in the hope I can get help with learning JS and programming

    I am trying to learn JS (and other computer stuff) and as always the books/videos always miss stuff out - I understand the basics of JS ie variables , loops , functions etc.. I was then getting into the advanced stuff and alot of it is confusing.

    I found out that you can assign a function to a variable:

    var foo = function () { alert("foo"); };
    foo();
    foo();

    The above works and I get TWO alert boxes with the message "foo".. so far I get it. Oh the other thing is I have read you can give the function literal a name (for recursion) but it is optional , correct?

    I also read you can immediately invoke the function literal when you add () at the end.. so I tried it:

    var foo = function () { alert("foo"); } ();
    foo();
    foo();

    When I run the above code.. I get a single alert box saying "foo" and that's it.. so I'm think why are the line 2 and 3 not working??

    I modified the code to see what the variable is holding and I did this:

    var foo = function () { alert("foo"); return 4; }();
    alert(foo);

    When I run the above I get a single alert box with "foo" and then I a second alert box with message "4".

    I am thinking when you immediately invoke the function literal.. JS turns it into a value (if it returns any) and then assigns that value as opposed to the function object (?) to variable foo.

    Is this correct.. can someone explain this to me please?

    Thanks in advance.

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,474
    Thanks
    13
    Thanked 361 Times in 357 Posts
    note: the name is "function expression" not "function literal"

    I am thinking when you immediately invoke the function literal.. JS turns it into a value (if it returns any) and then assigns that value as opposed to the function object (?) to variable foo.
    nope. it becomes more clear when you use the correct name (see above). an expression is something that you can evaluate. so a function expression evaluates to what is defined in the functions return value. that there is executable code before that return statement does not matter for the return value itself.

    another way to look at it is the name: IIFE (immediately invoked function expression) it means that you execute the function at once, so the function body of the IIFE won’t be called ever again.

    an alternate way of (logically) writing
    Code:
    var foo = function () { alert("foo"); } ();
    is
    Code:
    var temp = function () { alert("foo"); };
    var foo = temp();
    temp = undefined;
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,648 Times in 4,610 Posts
    I think it would be clearer to say that after
    Code:
    var temp = function () { alert("foo"); };
    var foo = temp();
    that foo is undefined.

    It might be clearer to actually return something from the function:
    Code:
    var bar = function () { alert("bar"); return 888; } ( );
    alert(bar);
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,474
    Thanks
    13
    Thanked 361 Times in 357 Posts
    Quote Originally Posted by Old Pedant View Post
    It might be clearer to actually return something from the function
    that’s what the question was about. the OP wondered, why foo contained 4 instead of a function.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    The following is a version of the self executing function that is equivalent to the original non-self executing one other than for executing an extra alert in the self executing call.

    Code:
    var foo = function () { alert("foo"); return function () { alert("foo"); } } ();
     foo(); 
     foo();
    foo gets assigned whatever is on the right of the equals whether that is a function or not
    also when a function is executed the value returned from the function gets substituted into the original expression before it is evaluated

    therefore when you made the function execute itself and return 4 the function ran once and set foo to 4

    with the version I have posted the function runs the alert and then returns a function so that foo is set to the function that is returned.

    You might also think about what the following variant does:

    Code:
    var foo = function () { alert("foo"); return function () { alert("foo"); } };
     foo()(); 
     foo()();
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello

    Thanks for the responses - there is a lot for me to understand and digest.. I have read it a few times to try to comprehend everything.

    @Dormilich

    I find that's another confusing issue - people use different terminology , I've seen a lot of people refer to it as a function literal or other things. For example the Immediately-Invoked Function Expression (IIFE) at this site:

    Ben Alman » Immediately-Invoked Function Expression (IIFE)

    He does a good job of explaining it etc but I have seen other people call it a self-executing as opposed to immediately invoked.. and then on sites people have said that term (i.e. self executing) is inaccurate etc.. anyway back to this topic.

    @felgall @Dormilich @Old Pedant

    Let me see if I understand what you guys are saying.. if I have:

    var foo = function () { alert("foo") };
    foo();

    as it is a function EXPRESSION it evaluates to SOMETHING.. it could be a string or an integer or even a function (which is an Object , yes?).. so the above variable foo would hold/have a value and it would the function.. which is why the foo() will you get an alert box as the variable foo holds/points to a function.. correct?

    If I do this:

    var foo = function () { alert("foo") } (); // we invoke the function immediately
    alert (foo) ;
    foo(); // would not work as foo does not hold a function , yes?

    then the function is ran and returns something - it could undefined or whatever and that is what the variable foo holds.. it is NOT a function it is whatever the function returned.. yes?

    @fellgal

    var foo = function () { alert("foo"); return function () { alert("foo"); } } ();
    foo();
    foo();


    I get the above as the function EXPRESSION returned a function and that was what is held in foo.. so we are able to run the function again when we type foo();

    var foo = function () { alert("foo"); return function () { alert("foo"); } };
    foo()();
    foo()();

    The above was VERY difficult for me to understand.. but as you took the time to reply etc I gave it a go... I ran it in JSFiddle and I got (if I can count lol) FOUR alert boxes... trying to work out what is going on.. I've never come across foo() (); so that is WEIRD.. Ohhhhhhhhhhhh hold on I think I get it.. let me see.

    line 1: we assign a function expression to foo , that is the clear bit.
    line 2: we run the function with foo().. and it RETURNS a value which happens to be a function EXPRESSION and that is why the SECOND () caused another alert box??

    line 3: same as above

    I've just got a question about syntax etc.. I've some people use this:

    (function () {

    // Do fun stuff

    }
    )();

    but some people use this:

    (function () {

    // Do fun stuff

    }
    ());

    in other words does it make a difference??

    Thanks for your help.. I think the majority of people can grasp the basics like variables , loops , functions etc.. it's difficult stuff like this that people struggle with.

  • #7
    New Coder
    Join Date
    Aug 2014
    Posts
    27
    Thanks
    0
    Thanked 1 Time in 1 Post
    The function keyword can be used to define a function inside an expression.

    var x = function(y) {
    return y * y;
    };

    function expressions loads only when the interpreter reaches that line of code.

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    632
    Thanks
    1
    Thanked 21 Times in 21 Posts

    Exclamation

    Quote Originally Posted by Dormilich View Post
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    I've been programming for over thirty-five years and twice I found that the computer was wrong. One time, a chip malfunctioned and started producing invalid results. The other time, a memory chip croaked and produced nothing, but the machine continued without noticing that the recalled value was undefined.

  • #9
    New Coder
    Join Date
    Aug 2014
    Posts
    27
    Thanks
    0
    Thanked 1 Time in 1 Post
    You do want to learn JavaScript, then find out some references, which helps you to learn more about JS. I think there are so many tutorials for to study about it.

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,314
    Thanks
    203
    Thanked 2,565 Times in 2,543 Posts
    Quote Originally Posted by janisspiker12 View Post
    You do want to learn JavaScript, then find out some references, which helps you to learn more about JS. I think there are so many tutorials for to study about it.
    That does not seem to be a very helpful reply. Almost as unhelpful as RTFM. The OP says "I have joined this forum in the hope I can get help with learning JS and programming". This forum is one of the resources he can turn to.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #11
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry I didn't reply earlier , I thought the thread was dead.

    Thanks everyone who has responded.. there are a lot of web development forums out there and maybe I should try them out.. anyway I think I have worked it out anyway.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •