How do you practice Javascript?

Hey guys i’m still very new to Javascript but i’ve been reading Sitepoint book on JavaScript: Novice to Ninja, which by the way i enjoy tremendously. As well as Eloquent Javascript but i only read certain chapters when i need a different perspective on a specific topic such as Objects and Functions.

Anyways, i want to know how you guys practice javascript? I’m a normal C/C++ programmer but upon javascripting, i realize the difference in syntax structure which i find a bit weird. What are good javascript tactics i should approach and avoid. I learned that using new instances of Object is a bad idea because it takes more memory if im correct.

AVOID using this: var monkey = new String();
I apologies if this is wrong syntax, still learning.

Anyways, any helpful tips or places i should go too, like specific documentation i should pay attention too?

Thanks Again!

I was recently turned onto codewars.com. They have challenges (they call them katas) for a number of different activities, in a number of different languages.

I’ve gotten as much out of reading others approaches as I have out of figuring out how to solve the challenges.

3 Likes

Cool, never heard of that site! I hope its free! Any other ways to learn? You only really learn good methods of programming from daily practicing huh!

I’m trying to sign up but when i try it sends me to a console which i can’t solve. Does that mean that the site will only allow those who have a moderate understanding of a language?

I have been playing Screeps recently. It’s a MMORTS game where you build your player’s AI in JavaScript.

It’s not specifically geared towards teaching you JavaScript though.

I try to think of new scripts that I can write to add to the collection of scripts I make available for others to use on their sites. Every so often I also revisit some of the scripts I have written previously to see how I might improve them.

I don’t need to be taught javascript, its more of practicing the syntax an applying what i learn in real world scenerios! This will be very cool way of practicing!

1 Like

Thats a great idea, but for me to be able to write scripts, i need to feel comfortable writing javascript code in which case i dont just yet! Hopefully i can become more comfortable using javascript syntax in the near future!

Sounds like a catch 22. The best way to learn is to just do.

I’ve historically been a JavaScript guy but been doing C++ for a year or so now. If you have any specific questions, I may be able to help bridge the gap.

Well right now i’m having issues understanding the purpose of so many functions styles.

In C++ if i want a function i simply do this:

void funcName(paramOne, paramTwo){/*code here*/}

That function can be called in a cpp file and using prototyping to call it whenever necessary as long as it is within a scope.

However there is so many ways of doing a function in javascript!
Here i’ll link that way i dont rewrite the whole thing!

It might help to keep in mind that in JavaScript, every function is actually a function object (a functor). So var funcStyleOne = function(){}; is essentially the same as:

class Func_style_one
{
    public:
        void operator()()
        {
            // ...
        }
};

Func_style_one f;
f();

Which, of course, is also the same as C++'s newer lambda syntax:

auto f = []() {
    // ...
};

f();

Style two is nearly identical to style one, but it addresses the issue of how does a lambda refer to itself, such as for recursive calls? At first blush, it might seem easy:

var funcStyleOne = function () {
    // recursive
    funcStyleOne();
};

But since these functions are actually objects that can be assigned and re-assigned, you can never be sure if the same name will always be available. For example:

var funcStyleOne = function () {
    // recursive
    funcStyleOne();
};

// re-assign
var aNewName = funcStyleOne;
funcStyleOne = null;

// oops! recursive call fails because funcStyleOne isn't a name for this function anymore
aNewName();

Style two lets you give a name to the function that is only in scope within the function’s own body and will always work regardless of what other names the function is assigned or re-assigned to.

var funcStyleTwo = function nameLocalToFuncBody() {
    // recursive
    nameLocalToFuncBody();
};

// re-assign
var aNewName = funcStyleTwo;
funcStyleTwo = null;

// still works
aNewName();

You probably meant something else with this one, but as it’s currently written, this is just a syntax error, not a new function style.


This, which I’ll call style three to keep with your numbering, is also nearly identical to style one. :smile: In fact function funcStyleThree() {} is (almost) exactly the same as var funcStyleThree = function () {};. The only difference is the order of evaluation. Style three functions are always evaluated before any other statements, which means we can invoke them before they’ve been defined. For example:

// this works; invoke function before it's defined
funcStyleThree();

// this doesn't work; function needs to be defined before it's used
funcStyleOne();

var funcStyleOne = function () {};

function funcStyleThree() {}

JavaScripters informally refer to this behavior as “hoisting”, since style three functions behave as if they were defined at the very top of their scope.


This one is the only style that’s significantly different from the rest. In this one, you give the function’s body as a string, which is parsed and interpreted on the fly. It’s extremely rare that anyone uses this style, and it’s typically considered a code smell when they do.


To sum up – and to switch to official terminology:

// an anonymous function expression (a functor / lambda)
var funcStyleOne = function () {};

// a named function expression (good for recursive calls)
var funcStyleTwo = function localFuncName() {};

// a function declaration (no relation to the C++ notion of a declaration)
// same as named function expression except it's "hoisted" and can be invoked before it's defined
function funcStyleThree() {}

Is it right to say that the function declaration is the normal sort of function we should use by default, while the other function expressions have special situations in which they are otherwise used?

“Should” is a bit of a gray area. But I’d say it’s certainly typical for the declaration style to be used by default. It’s often the first style we’re taught, I suspect because it looks the most like an ordinary function from other languages. And being able to invoke a function before it’s define was of course intended as a convenience.

But now that we’re writing larger programs, hoisting has actually become a source of obscure bugs, and linters will often warn us if we rely on hoisting behavior. And without hoisting… I honestly can’t think of any benefit function declarations have over function expressions.

That being said, I admit that function declarations are often my default style. I just don’t have a good reason for it. :slight_smile:

I agree. I use function expressions as my default style which means I don’t need to make an exception for when declarations don’t work.For most cases there isn’t any real difference between the two though apart from the hoisting.

I find that the clarity of the code is much clearer when function declarations are being used. Because we should have only one var statement in each scope, when using function expressions it can become get unwieldy to define functions at the same time as your variables too.

I know that it only saves a few seconds whenever looking at function declaration code versus function expressions, but the big benefit of using function declarations is that my attention isn’t diverted by questions about the expression version instead.

1 Like

I agree. Probably why I still use it as my default style.

Though… I don’t actually follow that rule. :wink: I think code looks cleaner when variables are declared at their point of first use. The one-var rule protects us from var-hoisting mistakes, but fortunately I’m still protected from that sort of mistake because JSHint will warn me if I use a variable before it was declared.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.