Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Code Structure
2.1.
Statements
2.2.
Curly Braces
2.3.
Indentation
2.4.
Semicolon
2.5.
Length of Line
2.6.
Whitespace
2.7.
Reserved Keywords
3.
Frequently Asked Questions
3.1.
Is it necessary to add curly braces after the if or else condition?
3.2.
Is it necessary to use semicolons in JS?
3.3.
In how many ways can we write comments in JS?
3.4.
Will the program show any error if the indentation is not followed?
3.5.
What is the reason behind leaving a character space after every operator?
4.
Conclusion
Last Updated: Mar 27, 2024
Easy

Code Structure

Author Sagar Mishra
2 upvotes
Roadmap to SDE career at Amazon
Speaker
Anubhav Sinha
SDE-2 @
25 Jun, 2024 @ 01:30 PM

Introduction

Hey Ninjas! Welcome to the blog. You must have faced difficulties while reading a few programmers' codes, as they don't follow the proper code structure. Beginners often make these silly mistakes that make their code less readable for others. Don't worry; Coding Ninjas will help you to improve your code structure.

Code structure

Let's take a language in which we will discuss common mistakes that coders often make while writing codes. In this blog, we will discuss the Code Structure in Javascript.

Also See, Javascript hasOwnProperty

Code Structure

Before proceeding with the topic, we should know exactly what code structure is. There is a set of rules that make your code more readable and should be followed by every coder throughout the code. For example, curly braces, indentations, semicolons, whitespaces and many more. Let's discuss them all one by one.

Read More About, Basics of Javascript

Statements

A statement is an important part of a code that performs actions. Let's take an example that will help you to know the correct code structure for statements.

Wrong Way:

alert(Hey); alert(Ninja);

 

Correct Way:

alert(Hey);
alert(Ninja);

 

Explanation:

Writing each statement in a separate line is suggested for better readability.

Curly Braces

Curly braces are used to hold the content of loops or conditional statements.

Wrong Way:

if(a == 0)
{
    console.log("Hey Ninjas");
}

 

Correct Way:

if(a == 0) {
    console.log("Hey Ninjas");
}

 

Explanation:

The preferred curly braces style is with the opening brace on the same line as the previous statement rather than on a new line. Before the opening bracket, there should be a space.

Indentation

We can write a complete javascript program in just a single line. But it would become very tough for readers or even us to understand. So, to avoid this, we use newlines and indentation instead.

Wrong Way:

if (a == 1) { console.log("Hey Ninjas");} else {console.log("How are you?");}

 

Correct Way:

if (a == 1) { 
    console.log("Hey Ninjas");
} else {
    console.log("How are you?");
}

 

Explanation:

It is clearly visible that the second example is far better than the first one. You can use two spaces, four spaces, or a tab for indentation. In this example, we have used the four-spaces indentation.

Semicolon

A semicolon is optional in some languages like Javascript. It is preferred to use a semicolon after each statement, although we can skip semicolons in a few languages. The vast majority of coders use semicolons.

Wrong Way:

alert(Hey)
alert(Ninja)

 

Correct Way:

alert(Hey);
alert(Ninja);

 

Explanation:

Although the first example will also be correct in Javascript, including a semicolon is a good practice to reduce the chances of errors.

Length of Line

Maintaining the length of lines makes the code more reader-friendly. Let's take an example for better understanding.

Wrong Way:

function lineLength() {
    if ( a === 1 && coding === "Advanced" && course === "Software Engineer" && branch === "CSE"
    ) {
        console.log("Selected");
    }
}

 

Correct Way:

function lineLength() {
    if (
        a === 1 &&
        coding === "Advanced" &&
        course === "Software Engineer" &&
        branch === "CSE"
    ) {
        console.log("Selected");
    }
}

 

Explanation:

In the first example, all the conditions are written in a single line which is ofcourse not looking reader-friendly as compared to the second one. 

We must keep the length of lines at most 80 characters. Otherwise, the reader may get tired just by looking at the length. If Javascript statements don't fit on a single line, the best practice is to use the break to move to the next line.

Moreover, we can move to the next line only after a comma or operator.

Whitespace

Whitespace is the space between operators, two lines, etc. We can also count the tabs or indentations in Whitespace.

Wrong Way:

const ninjas=" Web Dev "    +     "  Code  ";


Correct Way:

const ninjas = "Web Dev" + "Code";

 

Explanation:

Although Javascript ignores the extra whitespaces outside of strings and spaces between operators and other symbols, we must follow the rule of whitespace irrespective of language.

The whitespace rule says there must be a one-character space after each operator.

Reserved Keywords

Reserved keywords are words that can't be used as a variable name, function, or label. We are not allowed to change the reserved keyword. Let's take an example for better understanding.

Wrong Way:

Var a = "Ninjas";

 

Correct Way:

var a = "Ninjas";

 

Explanation:

In the first example, the 'V' of var is capital which is the wrong keyword. We must use a small 'v' in var to assign the value in a variable.
Check out this problem - Redundant Braces

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Frequently Asked Questions

Is it necessary to add curly braces after the if or else condition?

No, adding curly braces is unnecessary if a single line code is inside the if-else block. But adding curly braces increase the readability of the code.

Is it necessary to use semicolons in JS?

No, it is not mandatory to use semicolons in JS. But it is preferred to use a semicolon to increase readability.

In how many ways can we write comments in JS?

There are two standard ways. One is inline comments (//), and the other is multi-line comments (/*  */).

Will the program show any error if the indentation is not followed?

This depends on the language in which you are writing your code. Javascript does not show any error if you miss any indentations.

What is the reason behind leaving a character space after every operator?

The only reason behind leaving a character space after every operator is to make the code more readable and clean.

Conclusion

This article discusses the topic of Code Structure. In detail, we have seen the definition of the code structure and types of code structure like statements, curly braces, indentation, semicolons, and many more.

We hope this blog has helped you enhance your knowledge of Code Structure. If you want to learn more, then check out our articles.

And many more on our platform Coding Ninjas Studio.

 

Refer to our Guided Path to upskill yourself in DSACompetitive ProgrammingJavaScriptSystem Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio!

You can also consider our Online Coding Courses such as the DSA in PythonC++ DSA CourseDSA in Java Course to give your career an edge over others.

Happy Learning!

Previous article
Introduction to Javascript
Next article
Top Features of JavaScript
Live masterclass