Code Structure

Juhi Sinha
Last Updated: May 13, 2022

Introduction

The beauty of programming lies in making our code easily readable and clean. Our code should be as simple as possible. A good coding style can help a lot with that, and for that, all programming languages must follow a set of rules.

So, without any further ado, let's get started!

Curly Braces

The most preferred curly braces style is with the opening brace on the same line as the corresponding keyword rather than on a new line. Before the opening bracket, there should be a space. Let us understand this with an example given below:

if (n==1) {
console.log("Hello, Ninjas!!");
}

Indentation

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

A conditional if/else statement written on one line or with newlines and indentation is shown below.

// Conditional statement written on one line
if (x === 11) { console.log("Hello, Ninjas!!");
} else {console.log("How are you?");
}
// Conditional statement with indentation
if (x === 11) {
   console.log("Hello, Ninjas!!");
} else {
   console.log("How are you?");
}

 Two spaces, four spaces, or the tab character can all be used to indent the text. Whether you use tabs or spaces is a matter of personal preference.

The traditional way to structure JavaScript block statements and objects is to include the opening brace at the end of the first line, as in the above example. Block statements can also be written with their braces on their own lines.

// Conditional statement with braces on newlines
if (x === 11)
{
 console.log("Hello, Ninjas!!");
}
else
{
 console.log("How are you?");
}

 This is a less common style in JavaScript than in other languages, but it can be used.

Any nested block statement will have its increased indentation.

function newFunction(x) {
     if (x === 11) {
       console.log("Hello, Ninjas!!");
   } else {
     console.log("How are you?");    }
}

 For readability and to avoid confusion, the proper indentation of our code is significant. 

Semicolon

A semicolon is optional in some languages, and it is rarely used. Although we can skip semicolons, it is preferred to use them after each statement. The vast majority of programmers use semicolons.

We can use a no-semicolon code style like StandardJS when we are experienced, JavaScript programmers. It is generally considered good practice to include them in order to reduce the chances of errors.

const ninja = func();
console.log(ninja);
// separated by semicolons and new line

Length of a line

We must try to 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. Let us understand it with an example:

function lineLength() {
if (
 a === 11 &&
 coding=== 'Ninjas' &&
 course === 'Web_dev'
) {
 console.log("Selected");
}
 }

Reserved Keywords

There must be no reserved keywords in identifiers. Keywords, such as if, var, for, etc., are words in the JavaScript language that have built-in functionality. Let’s understand it with an example:

var const = "Ninjas";

The table given below is the list of reserved words of javascript. 

abstractdoubleinsuper
argumentselseinstanceofswitch
awaitenumintsynchronized
booleanevalinterfacethis
breakexportletthrow
byteextendslongthrows
casefalsenativetransient
catchfinalnewtrue
charfinallynulltry
classfloatpackagetypeof
constforprivatevar
continuefunctionprotectedvoid
debuggergotopublicvolatile
defaultifreturnwhile
deleteimplementsshortwith
doimportstaticyield

Words that are colored green are new in ECMAScript 5 and 6. The ECMAScript 5/6 standard no longer includes the following reserved words that are colored with blue.

Whitespace

Spaces, tabs, and newlines are all examples of whitespace in JavaScript. JavaScript ignores whitespace outside of strings, as well as spaces between operators and other symbols. JavaScript also ignores excess newlines.

// same output for all three
const ninjas      =    "Web Dev"     +  "Code";
const ninjas="Web Dev"+"Code";
const ninjas = "Web Dev" + "Code";

Automated Linters

Linting is useful in decreasing errors and improving overall code quality. Lint tools can help us to save time by detecting mistakes earlier in the development process.

Some of the linting tools are as follows:

  • One of the first linters was JSLint.
  • JSHint has a lot more options than JSLint.
  • ESLint is probably the most recent.

 

Points to remember:

  • We should add spaces around operators.
  • We should add curly braces on the same line after a space.
  • A semicolon is essential for increasing readability.
  • We should ideally use two spaces for indentation.
  • We should keep spaces around a nested call.
  • We should keep an empty line between logical blocks.
  • We should not keep the length of the lines too long.
  • We should add spaces around operators.

 

Frequently Asked Question

 

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

Answer: No, it’s unnecessary to add curly braces if a single line code is inside the if-else block. But adding curly braces increase the readability of the code.

 

Q2) Is it necessary to use semi-colons?

Answer: No, it is not mandatory to use semicolons. But it is preferred to use a semicolon to increase the readability.

 

Key Takeaways

In this article, we've learned about javascript code structure, which helps us make our code look neat and clean.

If you want to learn advanced front-end web development, Coding Ninjas has one of the best courses available, which you can find here

Thank you for reading!

 

Was this article helpful ?
2 upvotes

Comments

No comments yet

Be the first to share what you think