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

Critique for my javascript

Hi all,

I'm finally in a position where I'm able to write some javascript without reference. The "application" is silly and very simple, how ever I'm quite proud of my achievement :)

I'd be very thankful if more advanced people at the Treehouse forums could give some critique on my code. I'm sure there is always better ways to write code, be more efficient and follow the best practises.

Thank you for your time.

Tuukka

// Add numbers
var num1 = prompt("give a number?");
var num2 = prompt("give another number?");

// Compare function
function compare () {
    if  (num1 > num2)  
        console.log("num 1 wins");
    else if (num1 < num2)
        console.log("Num 2 wins");
    else (num1 === num2)
        console.log("It's a tie");
}
// Call compare function to make it run
compare();

Link to: https://jsfiddle.net/hno5mn32/3/

Since it's a small program, I can't think of much else except that when declaring the functions you can remove the second var.

var num1 = prompt("give a number?"), num2 = prompt("give another number?");

More of just a preference/readability thing.

2 Answers

A couple things are missing from your current code that are causing problems with the console.logs no matter which one is correct, the last console log will run. This is because you have some syntax errors. View Below

// Add numbers
var num1 = prompt("give a number?");
var num2 = prompt("give another number?");

// Compare function
function compare () {
    if  (num1 > num2)  { //Missing Curly Braces on each of your if/else if statements
        console.log("num 1 wins");
    } else if (num1 < num2) {
        console.log("Num 2 wins");
    } else if (num1 === num2) { // Else statements can not hold conditions. only if/else if
        console.log("It's a tie");
    }
}
// Call compare function to make it run
compare();

As for making it better. This is how i would code it to make it reusable. I created a getNums function which collects the users input from the prompts. Then it calls the compare function with two arguments since my updated compare function calls for two parameters. It then compares the two values. View Below

function getNums(){
    // Add numbers
    var num1 = prompt("give a number?");
    var num2 = prompt("give another number?");
    compare(num1, num2);
}
// Compare function
function compare (num1, num2) {
    if  (num1 > num2)  {
        console.log("num 1 wins");
    }
    else if (num1 < num2) {
        console.log("Num 2 wins");
    }
    else if (num1 === num2) {
        console.log("It's a tie");
    }
}
// Call compare function to make it run  
getNums();

My code can be advanced even more I you would like to try and challenge yourself. What I would do is create a conditional if statement to make sure what the user puts in is in fact a number. if not then alert the user and rerun the prompts again. If both inputs are valid, run the compare function.

Hope this helps.

Here are some ideas:

The prompt() method returns a string not a number. Meaning:

//Let's say here you typed in 1 and 2
var num1 = prompt("give a number?");
var num2 = prompt("give another number?");

//Then in this case 
console.log(num1); //this returns "1"
console.log(num2); //this returns "2"

console.log(num1+num2); //this returns "12"

The solution is to convert these variables to numbers with the parseInt() built-in function like this:

var convertedToNumber1 = parseInt(num1);
var convertedToNumber2 = parseInt(num2);

//Or the shorthand method for your initial code would be this:

var num1 = parseInt(prompt("give a number?"));
var num2 = parseInt(prompt("give another number?"));

Now the other thing about your code is that it uses variables that exist outside the function. Here is an example why this is not the best idea.

var a = 4;
var b = 3;
var c = 2;
var d = 5;

function addNumbers(){
    return(a+b);
};

function addNumbers2(){
    return(c+d);
};

Now the problem is that if you are writing a very complex code with a bunch of functions then if anything changes the variables "a", "b", "c" or "d" it also affects the way the functions are supposed to work. This makes debugging really hard. Plus these functions are pretty much stuck to do what they are designed for and are non-reusable. But instead if you do this:

function addNumbers(parameterOne, parameterTwo){
    return(parameterOne + parameterTwo);
};

Then you get a code that's reusable, and if you are passing it the same arguments it always returns the same output (it does whatever it was designed for).

Tried to give the easiest example, might be difficult to grasp the concept, but hope it helps.