CODEWITHSUNDEEP
javascriptclosuresconcatenation
Agustin
Agustin

Reputation: 103

How to Concatenate Variable Strings in Closures

As you will see I have a function where I am practicing closures with a function which returns another function. It works just fine except that when the function interviewQuestion(job) is called in the 5 examples below, the else condition only prints the last of he call fuctions and I want to know how to make them both print. I have the following code:

function interviewQuestion(job) {
  return function(name) {
    if (job === 'painter') {
      return document.getElementById("demo1").innerHTML = name + ' how do you paint images?';
    } else if (job === 'salesman') {
      return document.getElementById("demo2").innerHTML = name + ' how do you sale things?';
    } else if (job === 'singer') {
      return document.getElementById("demo3").innerHTML = name + ' how do you sing?';
    } else {
      var string = '';
      string = document.getElementById("demo0").innerHTML = name + ' what position are you interested in?' + '<br>';
      return string;
    }
  }
}

//Function is called:
interviewQuestion('painter')('Lucy');
interviewQuestion('salesman')('Richard');
interviewQuestion('singer')('Juliana');
/*else*/
interviewQuestion('window washer')('Pepe');
/*else*/
interviewQuestion('bootshiner')('Bob');
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Section 5: Advanced JavaScript: Objects and Functions</title>
</head>

<body>
  <h1>Section 5: Advanced JavaScript: Objects and Functions</h1>

  <h3>Practice on Closures:</h3>

  <p id="demo1"></p>
  <p id="demo2"></p>
  <p id="demo3"></p>
  <p id="demo0"></p>

</body>

</html>

How can I fix my return statement for the else part? I want, if there is more than 1 call for that part of the function to be able to get all results printed one after the other.

As of now with 5 calls to the function I only get 4 results:

Upvotes: 2

Views: 347

Answers (1)

Nina Scholz
Nina Scholz

Reputation: 386550

You overwrite the former value of the element. To get both string, you could just add both new values to it with +=.

I changed all outputs to ones with a line break.

Then I changed the return statement to perfom an early exit, which means you need no else statements, because of the return statement, which exits the function.

function interviewQuestion(job) {
    return function(name) {
        if (job === 'painter') {
            document.getElementById("demo1").innerHTML += name + ' how do you paint images?' + '<br>';
            return;
        }

        if (job === 'salesman') {
            document.getElementById("demo2").innerHTML += name + ' how do you sale things?' + '<br>';
            return;
        }

        if (job === 'singer') {
            document.getElementById("demo3").innerHTML += name + ' how do you sing?' + '<br>';
            return;
        }

        document.getElementById("demo0").innerHTML += name + ' what position are you interested in?' + '<br>';
    };
}

interviewQuestion('painter')('Lucy');
interviewQuestion('salesman')('Richard');
interviewQuestion('singer')('Juliana');
interviewQuestion('window washer')('Pepe');
interviewQuestion('bootshiner')('Bob');
<h1>Section 5: Advanced JavaScript: Objects and Functions</h1>
<h3>Practice on Closures:</h3>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo0"></p>

Just for completenes, you could move all information into an object and define a default function for unknown jobs.

function interviewQuestion(job) {
    var data = {
            painter: name => document.getElementById("demo1").innerHTML += name + ' how do you paint images?' + '<br>',
            painter: name => document.getElementById("demo1").innerHTML += name + ' how do you paint images?' + '<br>',
            salesman: name => document.getElementById("demo2").innerHTML += name + ' how do you sale things?' + '<br>',
            singer: name => document.getElementById("demo3").innerHTML += name + ' how do you sing?' + '<br>',
            default: name => document.getElementById("demo0").innerHTML += name + ' what position are you interested in?' + '<br>'
         };

    return data[job] || data.default;
}

interviewQuestion('painter')('Lucy');
interviewQuestion('salesman')('Richard');
interviewQuestion('singer')('Juliana');
interviewQuestion('window washer')('Pepe');
interviewQuestion('bootshiner')('Bob');
<h1>Section 5: Advanced JavaScript: Objects and Functions</h1>
<h3>Practice on Closures:</h3>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo0"></p>

Upvotes: 3

Related Questions