JavaScript pro programmer vs newbie programmer

Adnan Babakan (he/him) - May 27 '20 - - Dev Community

Hey there DEV.to community!

Although this article is titled as a JavaScript article some of the tips and points in this article can be also applicable for other programming languages as well.

I'm not considering myself as a pro programmer and these are only some stuff I learnt during my career mostly as a JavaScript developer so I beg your pardon since I'm a newbie programmer amongst you.

Cover image credit goes to this video on YouTube: https://www.youtube.com/watch?v=Cn1BqQ7VXc0, I love Minecraft and watch a lot of these Noob vs Pro videos about Minecraft. xD

Bracket-less

When using conditional statements or loops in your code you most likely put brackets to define the code to be executed respectively:

if(condition) {
    console.log('Yes')
} else {
    console.log('No')
}
Enter fullscreen mode Exit fullscreen mode

or like:

for(let i = 0; i < 10; i++) {
    console.log(i)
}
Enter fullscreen mode Exit fullscreen mode

In case you only have one statement to be executed you can drop the brackets, but be sure you only have one statement:

if (condition) console.log('Yes')
else  console.log('No')
Enter fullscreen mode Exit fullscreen mode

and:

for (let i = 0; i < 10; i++) console.log(i)
Enter fullscreen mode Exit fullscreen mode

Return statement

If you are writing a function that checks many conditions and returns a value based on that you probably do something like this as a new programmer:

function numberKind(n) {
    if (n > 0) {
        return 'positive'
    } else {
        if(n < 0) {
            return 'negative'
        } else {
            return 'zero'
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

As a somewhat experienced programmer, you'll use else if instead of nested conditions:

function numberKind(n) {
    if (n > 0) {
        return 'positive'
    } else if (n < 0) {
        return 'negative'
    } else {
        return 'zero'
    }
}
Enter fullscreen mode Exit fullscreen mode

Here is the next tip, remember the code after a return statement is unreachable meaning that it won't be executed so we can use this and the previous tip to clean up our code:

function numberKind(n) {
    if(n > 0) return 'positive'
    else if (n < 0) return 'negative'
    return 'zero'
}
Enter fullscreen mode Exit fullscreen mode

Consider the probable errors

Junior developers mostly forget about errors than can be fixed easily, in case of JavaScript this usually involves type errors since JavaScript is one of the most easy-going languages when it comes to data types.

Having the function below which sums up two numbers, pretty simple yes?

function sum(x, y) {
    return x + y
}
Enter fullscreen mode Exit fullscreen mode

Works perfectly fine when we pass two numbers as our arguments:

console.log(sum(5, 9)) // 14
Enter fullscreen mode Exit fullscreen mode

But what if we pass one (or both) of arguments as a string?

console.log(sum("5", 9)) // 59
Enter fullscreen mode Exit fullscreen mode

Since JavaScript uses + operator both in a mathematical way (arithmetic) and as a concatenation operator it will concatenate two arguments instead of summing them up.

What to do is simple, to check if both of our arguments are numbers for sure:

function sum(x, y) {
    if(!(typeof x === 'number' && typeof y === 'number')) return
    return x + y
}
Enter fullscreen mode Exit fullscreen mode

Combining with the previous tip I returned nothing which means returning undefined and the rest of the code won't be reachable.

Working with arrays

Working with arrays is one of the most common things you are going to do as a developer and iterating through them is the most common of it.

Programmers usually iterate through an array using a for loop like this:

let fruits = ['orange', 'apple', 'banana']

for(let i = 0; i < fruits.length; i++) console.log(fruits[i])
Enter fullscreen mode Exit fullscreen mode

But JavaScript has a simpler way which is a prototype method for arrays. You can use the forEach method to iterate through an array:

fruits.forEach(item => console.log(item))
Enter fullscreen mode Exit fullscreen mode

You want to access your index, just like i, you can pass a second argument to your callback which will be your index:

fruits.forEach((item, index) => console.log(index))
Enter fullscreen mode Exit fullscreen mode

Given that you need to get the average of all the numbers in an array, you can either loop through it and sum all of the values up and then divide it by the count of the elements in the array (pretty normal way) or you can choose a more simple way by using the reduce method to accumulate your numbers:

let numbers = [100, 250, 300, 500]

let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue) // 1150
Enter fullscreen mode Exit fullscreen mode

Pretty simple and neat. Now you can divide it by the count:

let avg = numbers.reduce((a, c) => a + c) / numbers.length
Enter fullscreen mode Exit fullscreen mode

There are more tips and tricks in the article below:

Tell me if I missed something that you want me to add to the article or if I did something wrong.

I hope you enjoyed!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player