What does `+ ','` mean?

What is the meaning of + ‘,’

23 Likes

Hi there! Can you please explain the role of + ‘,’ after every step in making sandwich?

7 Likes

That is the concatenation operator for joining strings and variables to form a single string. This is the old form of string interpolation.

50 Likes

what is the meaning of +’,’ . Also the repetition of “topping1 and topping2” can not be repeated thus the function can not call duplicated layers; why?

4 Likes

This is meant to be an extremely simple example of the usefulness of functions in coding. Without the
+ ',' the return value of sandwich would be breadhamcheesebread instead of bread,ham,cheese,bread. It would be even more readable if we added a space in addition to the comma by changing it to + ', '.
The return value of sandwich would then be bread, ham, cheese, bread.

This function can be customized in any way the programmer wishes. If we wanted to repeat the layers to make a double-decker sandwich (i.e. “bread,ham,cheese,ham,cheese,bread”) we could re-write it like this:

function makeSandwich(topping1, topping2) {
  sandwich = 'bread' + ','
  sandwich += topping1 + ','
  sandwich += topping2 + ','
  sandwich += topping1 + ','
  sandwich += topping2 + ','
  sandwich += 'bread'
  return sandwich
}

The “Learn How to Code” course is a beginning course. There are many ways this example function could be refactored to be more concise and more useful. As you progress through learning to code you’ll see what I mean. Happy coding!

82 Likes

// Define the ‘makeSandwich()’ function
function makeSandwich(topping1, topping2, topping3) {
sandwich = ‘bread’ + ‘,’
sandwich += topping1 + ‘,’
sandwich += topping2 + ‘,’
sandwich += topping3 + ‘,’
sandwich += ‘bread’
return sandwich
}

// Call the function and store the returned value in ‘result’
result = makeSandwich(‘jelly’, ‘cheese’, ‘ham’)

I can’t solve the problem, what I did wrong ?

It could be just a matter of missing white space after the comma so the toppings are separated as in a sentence.

1 Like

I think it’s just a comma, so it doesn’t read it as breadhamcheesebread, for example. Instead it reads it as bread, ham, cheese, bread. I don’t think it really matters because you’re not printing the strings anyways.

1 Like

I just have one simple question, so why is the first line sandwich= ‘bread’ + ','
but at the end it it’s sandwich += 'bread’

Why use = at the start and use += at the end.

5 Likes

The whole process is that of building a single string from all the aggregate components.

We start with the top slice, so it is a direct assignment…

sandwich = 'bread, '

It was/is unnecessary to concatenate with another literal character so above we have it included in the initial string value.

Given that we want to continue this string (as in grow it) we use the augmentation operator to preserve whatever value to we add to.

sandwich += 'ham, '
sandwich += 'cheese, '

The final augmentation will be the other slice of bread.

sandwich += 'bread'

Notice how we only use direct assignment when we are initializing the string? That should answer your question as to why. Assignment replaces whereas augmentation, well, augments. It adds to or continues.

9 Likes

function makeSandwich(topping1, topping2,topping3) {
sandwich = ‘bread’ + ‘,’
sandwich += ‘peanut butter’ + ‘,’
sandwich += ‘jelly’ + ‘,’
sandwish += ‘pickles’ + ‘,’
sandwich += ‘bread’ + ‘,’
return sandwich
}

result = makeSandwich('peanut butter ', ‘jelly’, ‘pickles’)
where is the fault plz help me !!

Hello, @zinoubghbenz78810214.

Welcome to the forums.

Look closely at your spelling of sandwich on every line. :wink:

Also, you should be using topping1, topping2 & topping3 in your code in place of peanut butter, jelly & pickles
For example:

sandwich += topping1 + ','
2 Likes

thank u very much i see now the difference

1 Like

Very helpful answer. Thanks!

1 Like

We can also view the change in the string due to the value of result because of the commas, commas with space and even no commas

Run the original code along with this additional line at the bottom

window.alert(result)

The three possible cases could be -

  1. With Commas -
Click to view code

// Define the ‘makeSandwich()’ function
function makeSandwich(topping1, topping2) {
sandwich = ‘bread’ + ‘,’
sandwich += topping1 + ‘,’
sandwich += topping2 + ‘,’
sandwich += ‘bread’
return sandwich
}

// Call the function and store the returned value in ‘result’
result = makeSandwich(‘burger patty’, ‘pickles’)

window.alert(result)

The above code will show the message box as -

bread,burger patty,pickles,bread

  1. With Commas and space
Click to view code

// Define the ‘makeSandwich()’ function
function makeSandwich(topping1, topping2) {
sandwich = ‘bread’ + ', ’
sandwich += topping1 + ', ’
sandwich += topping2 + ', ’
sandwich += ‘bread’
return sandwich
}

// Call the function and store the returned value in ‘result’
result = makeSandwich(‘burger patty’, ‘pickles’)

window.alert(result)

The above code will show the message box as -

bread, burger patty, pickles, bread

  1. Without Commas
Click to view code

// Define the ‘makeSandwich()’ function
function makeSandwich(topping1, topping2) {
sandwich = ‘bread’
sandwich += topping1
sandwich += topping2
sandwich += ‘bread’
return sandwich
}

// Call the function and store the returned value in ‘result’
result = makeSandwich(‘burger patty’, ‘pickles’)

window.alert(result)

The above code will show the message box as -

breadburger pattypicklesbread

You can see that in the second and third cases, the burger would not be prepared because we altered the way the result string is represented.

1 Like

your parentheses should be an apostrophe. This sign ‘,’

Such a useful post, thanks, Roy!

This lead me down a bit of a rabbit hole, being as new as I am and coming from a UX background I just can’t help but apply some in information architecture to my learning. I NEEDED to understand functions more! :joy:

So I checked out the below:

// Assuming the following variables
//  foo = 'foo'
//  bar = 5
//  baz = true

// Number + Number -> addition
bar += 2 // 7

// Boolean + Number -> addition
baz += 1 // 2

// Boolean + Boolean -> addition
baz += false // 1

// Number + String -> concatenation
bar += 'foo' // "5foo"

// String + Boolean -> concatenation
foo += false // "foofalse"

// String + String -> concatenation
foo += 'bar' // "foobar"

With your explanation of concatenation operators (joining strings and variables together to form larger strings) and the above description of addition assignment operators, I think I get the super simple anatomy of the function in this exercise - along with the function name, declaring functions, arguments, result and instructions -. (And definitely, the point of the exercise also, that functions are super useful for organisation, repeatability and modularity :slight_smile:)

If I got anything wrong, do let me know.

Basically what I’m saying is, I’m already super excited with what I’m learning. :grin:

1 Like

Why redefine a variable every time?
You can immediately describe it:
sandwich = ‘bread’ + ‘,’ + topping1 + ‘,’ + topping2 + ‘,’ + ‘bread’

1 Like

HI. I’m just starting this course but I have a friendly observation. I noticed you defined the function directly with what should be the arguments of the function. Maybe it is something normal but from what the course establishes before the practice exercises, you should define the function with your parameters, i.e.

sandwich = 'bread' + ','
sandwich += 'topping1' + ','
sandwich += 'topping2' + ','
etc.

Then you would pass the arguments to the parameters in the result variable;


result = makeSandwich(‘peanut butter’, ‘jelly’, ‘pickles’)

Maybe I’m wrong, but can someone confirm if this observation is accurate?

I was curious if the syntax you provided in your post would work in the workspace given, and it seems that it doesn’t. I’ve tired including the comma and space in the values like “sandwich += 'ham, '”, but it also doesn’t work. I know this post is 5 years old, but I’m wondering why it doesn’t work as such:

// Define the ‘makeSandwich()’ function
function makeSandwich() {
sandwich = ‘bread’
sandwich += ‘ham’
sandwich += ‘cheese’
sandwich += ‘bread’
return sandwich
}

// Call the function and store the returned value in ‘result’
result = makeSandwich()

This gives the error: “One or more ingredients are not valid!”.
Is this because the workspace itself is set up to require parameters in the function? Or does the syntax not work?