Search code examples
javascriptfunctionargumentsdefault

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


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.


Solution

  • 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);             
    });