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

Liam Maclachlan
Liam Maclachlan
22,805 Points
Posted by Liam Maclachlan
Liam Maclachlan
22,805 Points

Review my JavaScript code

Hi all :)

I have just spent a few hours playing around with a basic JavaScript (not my language of choice) app and wondered if any of you out there could critique it.

I'm looking for ways to:

1- DRY out my code

2- Improve the reuse value of my code

3- Find ways to improve on best practices.

Any info would be great. I have a code pen set up here ->> http://codepen.io/Limey_88/pen/WbmzLe

I'm not interested in adding extra features (coding is kind of like Lego that way) I just want to improve on what I already have :)

Be gentle but be honest. Would really love some feed back :)

Michael Fish
Michael Fish
7,804 Points
Michael Fish
Michael Fish
7,804 Points

I can't help you DRY it but I will give you props it's a good idea for a project and it functions well.

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Hey. Thanks Michael.

I feel if I stare at it for a few more hours, there may be a few more things I could do to fine tune it... I may just come back to it at a later date.

This is phase 1 of the project at the moment. I'm going to turn it in to a turnbased RPG fighter (Think back to the days of the Pokemon battle system) with health gauge etc. There are other language I want to introduce in the future but right now Javascript works nicely.

If you do notice anything, let me know and I'll glad heed others warning :)

Cheers Liam

1 Answer

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Liam,

I only saw one thing in your code that could DRY it out just a tad more. You have 3 references to the element with the id of "output". It would save some physical memory to cache the reference to the output in a variable, and then just reference that variable each time you are setting the innerHTML. 

var output = document.getElementById('output');
//And in references:
output.innerHTML += "...";

It is just a tad strange to me that you went with function expressions at first and then randomly switched over to function declarations. I haven't yet had any use for function expressions, and I've made some large projects: SketchMeh, Weather App, Calculator, and To-Do List.

Function declarations are faster (and easier to read in my opinion) as you can see here, and as such, I've used function declarations (like your play() and fight() functions) in my projects. I'd recommend switching those first 3 functions over to declarations instead of expressions.

Marcus Parsons
Marcus Parsons
15,719 Points

I did forget to mention that this is a great little program, and you did a great job! :)

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

I'm glad you said that, actually!

Wow. I see what you mean in relation to the speed. I'll definitely keep that in mind.

The reason I switched them is because I wanted it to store a variable (this was my thinking) after running it, so I used the 'var' keyword/expressive function. Will the declarative function do the same job as far as this in concerned?

And my second question, what is the real difference between the two? What can one do that the other can't?

Thanks for the compliment, too. Was quite a fun little project to start :)

Cheers Liam

Marcus Parsons
Marcus Parsons
15,719 Points

You're welcome for the compliment! A compliment deserved is a compliment earned or something like that haha

There are a couple differences between function expressions and function declarations. Expressions are only loaded whenever the compiler reaches that line of code, whereas declarations are loaded before any other code is loaded. Preloading your functions makes the application runtime much faster. Another neat feature of using declarations is that since those function declarations are loaded before any other code, you can call them at any point in the script, including at the very top. You cannot do that with function expressions i.e.

//the sayhey function will execute despite the function being lower down on the page
//than the function call
sayhey();
function sayhey() {
alert("Hey!");
}
//This sayhi call will throw an error because the compiler doesn't know there is a sayhi function yet
//because it hasn't gotten to that line yet
sayhi();
var sayhi = function () {
alert("Hi!");
}

Also, expressions are actually anonymous functions until you put the 2nd name into the function whereas declarations are named functions. Here's what I mean:

//This is an anonymous function expression
//yohomie just contains a reference to the anonymous function
var yohomie = function () {
alert("Yo homie!");
}
//This is a named function expression
var yohomie = function yohomie() {
alert("Yo homie!");
}
Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Brilliant. Thank you man :)

That explains the issues I was having before in regards to nesting and accessing expressions.

Thanks again, man. Really great feedback!

Marcus Parsons
Marcus Parsons
15,719 Points

Haha no problem, man! If you ever have trouble and aren't getting help, you can tag me on here man. Just do @ and start typing my name out! Good luck brother!