Javascript Coding Structure

Coding in any programming language can feel hard in the beginning. Honing a skill is a process. Let's proceed to learn the basics of writing code in Javascript.
File and folders
In most of the javascript projects, you should see a src folder in the root. The source could have any number of folders and structures as required by the project.
The files in javascript, end with a ".js" extension. This denotes that the file is a javascript file. ( Note that similar is with HTML and CSS too, the files in HTML end with a '.html' extension, and CSS files end with a '.css' extension )
Naming conventions
- Variables are to be named in camel case. example: "camelCase", "addNumbers", etc.
- Folders are to be named in kebab case. Example: "kebab-case", "folder-name"
- Files and Classes should be named in Pascal case. example: "FileName", "PascalCase"
We will get more into naming conventions in the "Variables" section.
Syntax
Syntax in programming refers to the set of rules that defines the structure of statements and expressions in a programming language. It dictates how various elements of the language—such as keywords, operators, and symbols—should be arranged to form valid code. Proper syntax ensures that the code can be correctly parsed and understood by the compiler or interpreter, which in turn affects how the program executes. For instance, in JavaScript, syntax rules determine how functions are declared, how variables are assigned values, and how control flow statements like loops and conditionals are structured. Adhering to these rules is crucial for preventing syntax errors that can lead to compilation failures or runtime issues.
Understanding syntax is essential for writing clear and effective code. Each programming language has its own syntax, which can vary significantly from one language to another. This means that a construct valid in one language might be invalid or completely different in another. For example, the way functions are defined and invoked differs between JavaScript and Python. A clear understanding of syntax not only helps in avoiding errors but also in writing code that is readable and maintainable. By following the conventions and standards of a given language, developers can ensure their code is both functional and understandable to others who may work on or review it.
Indentations
Consistent indentation improves code readability. Stick to 2 spaces for indentation and maintain it throughout the project. Example with 2 spaces:
function foo() {
if (condition) {
// code
}
}
Let's compare to if there were no indentation for the same code.
function foo() {
if (condition) {
// code
}
}
Clearly, the first chunk of code is more readable, right? Hence it is important to follow indentation, and also, ensure to use of the "Prettier - Code formatter" extension in VS Code to help with code formatting. This is explained in more detail in this section.
Indentation is like the neat arrangement of clothes in a closet. Now, if you ask me, Do I need to do that to ensure clothes are put in the closet? No, clothes could very well be un-orderly and be left unfolded, but it does make it harder to find that tie when you need it, no? The same is true with code as well. For the execution of the code, rather, than to achieve something or to solve a problem, it is not important to properly indent the code, the computer would not care about indentation, to the computer, it is the same, but for your colleague who works on your code, or vice-versa, it might not be the same. With 10s of thousands of lines of code, it quickly becomes almost impossible to maintain unindented code.
In Python ( a programming language ) though, indentation is mandatory, the code itself needs to be indented for it to work!
Meaningful names
Providing meaningful names to folders, files and variables is crucial to writing readable code - again, readable to your work buddy, not to the computer.
Say you are writing a function to add two numbers as below:
function addNumbers(num1, num2) {
return num1 + num2;
}
Now, we could name this function pikachu or subtract but, does it make sense to do so? Names should suggest the underlying functionality, while the computer does not care, it is important for code readability, hence in the above code the function says addNumbers, we don't even need to see the code to understand that the function is used to add two numbers!
Also, observe how the inputs are named as num1 and num2. If you had named them say, Tom and Jerry, they would still work, but that makes no sense to the user.
The other way would be using characters, like a and b. While that is not bad, it's not great either. Hence let's pledge to name variables, functions, folders, and files meaningfully.
Semicolons
Burgers or Semicolons? Developers love semicolons! While writing code, the rule of thumb is to add semicolons at the end of the statement.
function addNumbers(num1, num2) {
return num1 + num2;
}
In the above code as you can see, the return statement ends with a semicolon.
Would the code run without it? In Javascript, the answer to the question is Yes and No!
In most of cases, a semicolon can be omitted, i.e. in the above code to add the two numbers, the code would work just fine without a semicolon. But then, let's consider the below example:
console.log("Hey")
[1].forEach(()=> console.log("hello"))
Don't worry about the 1 inside of the square brackets for now, if you are interested, that is what an Array is! In the above code, if we execute it, we get an error as below

The reason is, the Javascript engine reads it something like this:
console.log("Hey")[1].forEach(()=> console.log("hello"))
That is not what we meant for it to be, right? We were "expecting" to see a console log that prints "Hey" and then another console that prints "Hello".Hence in this case it is important to add a (life-saving) semicolon after the first statement.
Code without any errors would look like the below:
console.log("Hey");
[1].forEach(()=> console.log("hello"));
This was a small chunk of code, in applications with 1000s of lines of code, which is mostly the case when you work in Tech companies, these kinds of bugs become hard to debug, hence like the proverb goes "Prevention is better than a cure", it is a good practice to end a statement with a semicolon - always! This is a widely adopted rule and a very common industry practice in tech companies.
Note: In languages like C and C++, semicolons are mandatory to end a statement.
Comments
A wise man once said - Never comment about a person but always add comments above the code! 😉 Other than writing indented code, the other best practice is to add comments above your code! Comments are like salt in a curry! Too much is too bad, too little is too bad too! Just the right amount of comments in a code helps other developers, and even yourself when you visit the code after some time to help understand it quickly.
Rules to adding comments:
- For comments that span multiple lines, please use multiline comments.
- Comments should ALWAYS BE ABOVE the code, instructions are read before the tasks are done, not after, right?
- Leverage typescript documentation to add beautiful documentation (More on this later in the typescript section ).
Function with the right amount of "Salt" (Comments)
/*
* A function to add two numbers.
* Accepts two parameters
* num1 - The first number to be added.
* num2 - The second number to be added.
* returns the sum.
*/
function addNumbers(num1, num2) {
return num1 + num2;
}
It is a bit of an overkill for this small function but this is how a comment should be added for functionalities.
Now the wrong way to add comments:
function addNumbers(num1, num2) { // Takes numbers
return num1 + num2;
// returns output
}
This is not how comments should be added and I urge you as a fellow developer to avoid the same!
Great! Now that we understand what the Javascript code structure looks like, let's move on.