Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Robert Ellefson
Robert Ellefson
5,672 Points

Is there a reason why one is better than the other? (2 examples)

I'm working on the basics of JavaScript. I usually try to listen to what is about to be demonstrated and pause the videos to try and come up with a solution myself before watching what's demonstrated. During a recent tutorial the following problem was stated to be solved:

Gather a string from the user through a prompt, then return the string back to the user in all caps, as a "shout".

Here's what I came up with:

var shout = prompt("What word would you like me to scream?");
alert(shout.toUpperCase() + "!");

Here's what was presented in the tutorial:

var stringToShout = prompt("What should I shout?");
var shout = stringToShout.toUpperCase();
shout+= "!!!";
alert(shout);

What are the benefits to doing this one way or the other?

2 Answers

Chyno Deluxe
Chyno Deluxe
16,936 Points

The easiest way to think of it is. If you will need the users input in another part of your code, make a variable to hold that data. if not, the first solution is sufficient. Below is an example of a situation where you would need to create additional variables.

Example: jsFiddle Demo

Here you can see that I create a variable of user_input that prompts for user input.

var user_input = prompt("What should I say/shout?");

I then create two other variables that use the same input data. say and shout. notice how they both use the user input value. This creates two separate instances using a single value.

var say = user_input;
var shout = user_input.toUpperCase() + "!!!";

Next, I target two buttons by ID. The say button alerts the original user input when clicked and the shout button "shouts" it.

var sayBtn = document.getElementById("say");
var shoutBtn = document.getElementById("shout");

sayBtn.onclick = function() {
  alert(say);
}
shoutBtn.onclick = function() {
  alert(shout);
}

I hope this helps.

Robert Ellefson
Robert Ellefson
5,672 Points

Awesome, Thanks Chyno!

Sergio Alen
Sergio Alen
26,726 Points
Sergio Alen
Sergio Alen
26,726 Points

Your way is shorter and takes less space. I think the intention of the teacher is to demonstrate a basic syntax and the usage of +=

Robert Ellefson
Robert Ellefson
5,672 Points

Well he also creates a second variable "shout", which is an all caps version of the previous variable "stringToShout" I've seen this before where it seems like it's considered better to create new variables when possible, but I don't know in what way. Is it better to make a new variable and (possibly) have longer code, or to have less variables and just make modifications to variables you already have in place? I've only written these little snippets so I don't know if there's some reason that might make it more practical to do one over the other.

Sergio Alen
Sergio Alen
26,726 Points

Unless you'll re-use variables I dont think it's necessary to create one for something like that, it's mainly up to yourself, how you feel more comfortable, it affects little to nothing, as long as you keep your code clean and documented.