BASIC JAVASCRIPT GOTCHAS FOR BEGINNERS

This article was initially published on hashnode

JavaScript is a programming language designed to add interactivity to websites. HTML and CSS could be enough to make a website, but to go far in web development and make websites interact with users, JavaScript is necessary. JavaScript is a programming language is so versatile and complicated to the extent that it could be very intimidating to learn. I struggled a lot while starting out, abandoned it twice, and once swore to never learn it again. But the pain became a painful pleasure that I enjoy today. I decided to compile a list of five “have-to-knows” for beginners in JavaScript. Enjoy!

1. Declare Variables the Right Way

Everyone is free to use const, let, and even var as long as none of the keywords are deprecated. For example, var MY_NAME is a constant just as const MY_NAME is, the only difference is that JavaScript does the tracking for you behind the scene by making the latter read-only [meaning it cannot be changed or reassigned] and you have to do the tracking yourself with the former. So take note: if you would reassign your variables, use var, if you don't want your variables to have the same name, use let, if you don't want clashes of any other kind and your program is large, use const, which is more than just a var and let in one package.
The snippet of code below demonstrates var and const in action.

const MY_NAME = "Kolade";
console.log(MY_NAME); //Kolade

const MY_NAME = "Kolade";
console.log(MY_NAME); //Uncaught SyntaxError: Identifier 'MY_NAME' has already been declared

2. You have to Store Data with Variables

Variables are the basic building blocks in JavaScript. It is important to declare variables to keep track of values as they change in the program. That is, if they are declared with the var or let keyword. In addition, to select elements effectively for example during DOM Manipulation, there is no way to walk around declaring variables.

3. Differentiating Between Operators is Important

A lot of programmers have problems differentiating between different JavaScript operators such as "=", "==", "===", >, <, and some more. No one is ever alone, Mathematical operators confused me from primary to tertiary education level. Up till now, I still curve my shoulders to get the difference between less than and greater than operators.

Just take note:

= is the assignment operator. That is, the one used to assign values to the variables.

== is the loose-equality operator and does type coercion, that is "7", a string, will be treated the same as 7, a number.

=== is the strict-equality operator and does not do type coercion, so "7" is not the same as 7.

Right angle bracket (>) is the greater-than operator. Demonstrated with the right shoulder.

Left angle bracket (<) is the less-than operator. Demonstrated with the left shoulder.

Other operators include !==, !=, >=, <=.

The snippets of code below are an example of type coercion.

const numOne = 7;
const numTwo = "7";

if (numOne == numTwo) {
  console.log("Type coercion occured");
} else {
  console.log("No type coercion"); // Type coercion occured
}

if (numOne === numTwo) {
  console.log("Type coercion occured");
} else {
  console.log("No type coercion"); // No type coercion
}

4. Conditionals and Ternaries Are Needed in Order to Make Decisions

As the name implies, a conditional is a piece of code that performs a task as long as something returns true. The most common conditional in JavaScript is the if statement. There are also if…else, if...else...if and an upgrade on if statements called switch. We looked at if statements in point three above. Ternaries on the other hand make you write an if statement in one line and is fun to work with while wanting to implement short-circuit operators for example, though it is advisable not to nest them. Refactoring the first if statement in point three to a ternary looks like the snippet of code below.

const numOne = 7;
const numTwo = "7";
numOne == numTwo ? console.log("Type coercion occured ") : console.log("No Type coercion ");   
//No Type coercion

5. No Walk Around Functions

To make your code readable and make your own life easy, you have to keep it DRY (Don't Repeat Yourself). In addition, there is the need to write reusable codes that can be executed anywhere in a program, this is where functions come in handy.
Functions are declared with the function keyword, assigned an identifier, and must be called with it, in order to execute it. For example, in the code below, the simple function with the identifier myName is declared to output John Doe to the console, to make it work, it is called by that identifier, myName(). You can call it at any other point within the program.
Things could get more complex when functions are assigned parameters, default parameters, and arguments.

function myName() {
  console.log("John Doe");
}
myName();

Thanks a lot for reading!

If you find this article helpful, share it with your friends and followers and follow me on my Twitter accounts @koladechris (my personal account) and @chriskaydevs (my brand account), where I spend most of my time tweeting and engaging on programming and web development tips.