pass argument into a function without adding it to the function call

Question

I tried your solution and it seems to work fine inside the stack overflow "code run environment". I may have to compare it to my original code.

$.getJSON("https://teamtreehouse.com/chalkers.json", function(result){

    var buildHtml = ""; 

    function buildLi(language){
        buildHtml += "<li>" + "<h4> language </h4> | <span>" + result.points[language] + "</span></li>";
    }

    buildHtml += "<ul>";
    buildLi("HTML");
    buildLi("CSS");
    buildLi("JavaScript");
    buildLi("PHP");
    buildHtml += "</ul>";

    $(".skill-ul-container").append(buildHtml);             
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>The Score</h1>
<div class="skill-ul-container"></div>

i am currently looking for a solution to pass an argument into a function without actually adding it to the function call. In this scenario i wanted to build a simple <ul> list with <li> items that get their content from a json file. As you can see, i repeatedly included result and buildHtml into the function call. But i guess i don't have to do that, right ? Is there any way to include them into the function call by default ? (because they're not changed during the function call)

$.getJSON("that/nice/json/file/that/stores/my/score.json", function(result){

    var buildHtml = ""; 

    function buildLi(language, result, buildHtml){
        buildHtml += "<li>" + "<h4> language </h4> | <span>" + result.points[language] + "</span></li>"; //builds <li> that contains the programming language title and a number that is stored in result.points[language]
        return(buildHtml);
    }

    buildHtml += "<ul>";
    buildHtml = buildLi("HTML", result, buildHtml); //i want to get rid of "result and buildHtml" because these values are not supposed to be changed during the function call.
    buildHtml = buildLi("CSS", result, buildHtml);
    buildHtml = buildLi("JavaScript", result, buildHtml);
    buildHtml = buildLi("PHP", result, buildHtml);
    buildHtml += "</ul>";
    $(".skill-ul-container").append(buildHtml);             
});

I'd be thankfull for any tips, solutions or hints about this problem.

score 1 · Answer 1 · edited May 23 '17 at 12:29

1

You do not need to include those two parameters, if you define buildLi within this callbackfunction, as both variables are in the scope of the function, you can use them without problems

edited May 23 '17 at 12:29

Community

1
1

answered Sep 08 '15 at 15:44

Peter Fischaleck

342
1
6

Thanks for the quick answer. – Landocal Sep 08 '15 at 15:51

score 1 · Accepted Answer · answered Sep 08 '15 at 15:46

You can literally just remove them as parameters both in the function declaration and all the calls, because both those variables are in scope for the whole of that piece of code...

$.getJSON("that/nice/json/file/that/stores/my/score.json", function(result){

    var buildHtml = ""; 

    function buildLi(language){
        buildHtml += "<li>" + "<h4> language </h4> | <span>" + result.points[language] + "</span></li>";
    }

    buildHtml += "<ul>";
    buildLi("HTML");
    buildLi("CSS");
    buildLi("JavaScript");
    buildLi("PHP");
    buildHtml += "</ul>";

    $(".skill-ul-container").append(buildHtml);             
});

Thanks for the quick answer. I actually tried this but i always get a "result is undefined error" — Landocal, Sep 08 '15 at 15:50

score 0 · Answer 3 · answered Sep 08 '15 at 15:51

0

Apart from accessing these two parameters as a global variables you can use bind function in order to create the new version of your function and fix the value assigned to this keyword and any number of arguments preceding any provided when the new function is called.

answered Sep 08 '15 at 15:51

Sergey Rybalkin

3,004
22
26

Thanks for the answer i'll look into that aswell :) – Landocal Sep 08 '15 at 16:01

pass argument into a function without adding it to the function call

3 Answers3