Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Beginner Javascript Coding Mistakes To Avoid
JavaScript is an easy language to get started with, but to achieve mastery takes a lot of effort. Beginners often make a few well-known mistakes that come back and bite them when they least expect. To find which these mistakes are, keep reading!

1. Missing curly braces
One practice, which JavaScript beginners are often guilty of, is omitting curly braces after statements like if, else, while and for. Although it is allowed, you should be extra careful, because this practice can often conceal problems and be the source of bugs.

Although the fail() call is indented and looks as if it belongs to the if statement, it does not. It is always called. So it is a good practice to always surround blocks of code with curly braces, even if there is only one statement involved.

2. Missing semicolons
When JavaScript is parsed, there is a process known as automatic semicolon insertion. As the name suggests, the parser is happy to insert missing semicolons for you. The purpose of this feature is to make JavaScript more approachable and easier to write by beginners.

However, you should always include semicolons, because there are
dangers in omitting them. Here is an example:
Because there is a semicolon missing on line 3, the parser assumes that the opening bracket on line 5 is an attempt to access a property using the array accessor syntax (see mistake #8), and not a separate array, which is not what was intended and results in a type error. The fix is simple – always write semicolons.
Some experienced JavaScript developers
prefer to leave out semicolons , but they are perfectly aware of the bugs that this might cause and know how to prevent them.

3. Not understanding type coercion
JavaScript is dynamically typed. This means that you don’t need to specify a type when declaring a new variable, and you can freely reassign or convert its value. This makes JavaScript much easier to write than something like C# or Java, but you open the doors for potential bugs that in other languages are caught during the compilation step. Here is an example:

The problem can be easily fixed by using
parseInt(textBox.value, 10) to turn the string into a number before adding 10 to it. Depending on how you use a variable, the runtime might decide that it should be converted in one type or another. This is known as type coercion . To prevent types from being implicitly converted when comparing variables in if statements, you can use strict equality checks (===).

4. Forgetting var
Another practice that beginners are guilty of, is forgetting to use the var keyword when declaring variables. JavaScript is very permissive, and the first time it sees that you’ve used a variable without the
var statement, it will silently declare it for you globally. This can be the source of subtle bugs. Here is an example, which also shows a different bug – missing a comma when declaring multiple variables at once:
When the parser reaches line 4, it will insert a semicolon automatically, and then interpret the c and d declarations on line 5 as global. This will cause the value of the outer c variable to change. Read about more JavaScript gotchas here.

5. Arithmetic operations with floats
This mistake is true for nearly every programming language out there, including JavaScript. Due to the way
floating point numbers are represented in memory
, arithmetic operations are not as precise as you’d think. Here is an example:
To work around this problem, you should not use use decimals if you need absolute correctness – use whole numbers, or if you need to work with money, use a library like bignumber.js .

6. Using constructors over literals
When Java and C# programmers start writing JavaScript, they often prefer to create objects using constructors: new Array(), new Object(), new String(). Although they are perfectly supported, it is recommended to use the literal notations: [], {}, "", because the constructor functions have subtle peculiarities:
The solution is simple: try to always use the literal notation. Besides, JS arrays don’t need to know their length in advance

7. Not understanding how scopes work
A difficult concept for beginners to understand is JavaScript’s scoping rules and closures. And rightfully so:
Functions retain visibility to variables in their parent scopes. But because we are delaying the execution with a
setTimeout, when the time comes for the functions to actually run, the loop has already finished and the i variable is incremented to 11.
The self executing function in the comment works, because it copies the i variable by value and keeps a private copy for each timeout function. Read more about scopes here and here.

8. Using eval
Eval is evil . It is considered a bad practice, and most of the times when you use it, there is a better and faster approach.
Code inside eval is a string. Debug messages arising from eval blocks are incomprehensible and you have to juggle with escaping single and double quotes. Not to mention that it is slower than regular JavaScript. Don’t use eval unless you know what you are doing.

9. Not understanding asynchronous code
Something that is unique to JavaScript is that nearly everything is asynchronous, and you need to pass callback functions in order to get notified of events. This doesn’t come intuitively to beginners, and they quickly find themselves scratching their heads on a bug that is difficult to understand. Here is an example, in which I use the FreeGeoIP service to fetch your location by IP:
Even though the console.log comes after the load() function call, it is actually executed before the data is fetched.

10. Misusing event listeners
Let’s say that you want to listen for clicks on a button, but only while a checkbox is checked. Here is how a beginner might do it (using jQuery):
This is obviously wrong. Ideally, you should listen for an event only once, like we did with the checkbox’s change event. Repeatedly calling button.on('click' ..) results in multiple event listeners that are never removed. I will leave it as an exercise for the reader to make this example work Smile

The best way to prevent mistakes like these from happening is to use JSHint . Some IDEs offer built-in integration with the tool, so your code is checked while you write. I hope that you found this list interesting. If you have any suggestions, bring them to the comment section!
I am a proud member of NIgerian Coders Team
that number 1 is it curly braces or curly breaks?
I am a proud member of NIgerian Coders Team
(01-13-2017, 11:43 AM)Voski Wrote:
that number 1 is it curly braces or curly breaks?

Curly Braces {}
I am a proud member of NIgerian Coders Team

Possibly Related Threads...
Thread Author Replies Views Last Post
  HELP: Pls What Are The Major Uses Of Javascript Broomboss 18 330 03-17-2018, 10:17 PM
Last Post: Broomboss
  TUTORIAL: Take A Selfie With Javascript SamBlingxZ 1 162 01-23-2018, 08:46 PM
Last Post: Broomboss
  SHARED: Introducing Hbot.js Javascript Ai Library Horlahcoded 3 225 11-08-2017, 10:13 AM
Last Post: Horlahcoded
  SHARED: Introducing Hrouter.js Javascript Routing Library Horlahcoded 7 167 10-16-2017, 10:13 PM
Last Post: iamdannyfc
  SHARED: Introducing Hkwest.js Javascript Ajax Library Horlahcoded 0 96 10-15-2017, 09:46 AM
Last Post: Horlahcoded
  HELP: Javascript Vs Jquery. beme 10 398 08-21-2017, 07:20 AM
Last Post: beme
  Test Your Javascript Knowledge dealwap 10 631 08-16-2017, 07:41 PM
Last Post: Thepreditor
  Advice To All Beginner And Upcoming Programmers Aphatheology 8 461 07-04-2017, 03:47 PM
Last Post: Samuel04
  How Can I Submit A Form Using Javascript iamdannyfc 11 311 06-22-2017, 10:13 PM
Last Post: bfaschat
  3 Types Of Javascript Animations That I So Much Admire! Laive 5 273 05-20-2017, 09:40 AM
Last Post: Laive

Users browsing this thread: 1 Guest(s)

About Nigeria's Creative Talents

Nigeria's Creative Talents is an online community where every creative Nigerians can share ideas with themselves.

For any more information, please use our contact form.

              User Links