26 Miraculous VS Code Tools for JavaScript Developers in 2019

26 Miraculous VS Code Tools for JavaScript Developers in 2019

Visual Studio Code is a lightweight but powerful cross platform source code editor that runs on your desktop. With built in support for development tools like TypeScript and the Chrome Debugger, I quickly fell in love with the editor the more I used it to build my projects.

Visual Studio Code is a lightweight but powerful cross platform source code editor that runs on your desktop. With built in support for development tools like TypeScript and the Chrome Debugger, I quickly fell in love with the editor the more I used it to build my projects.

Who doesn't love the bajillion open source extensions available for the public to use and contribute to?

If you're looking for more tools to add onto your development kit, I hope this article helps you find a new tool to adopt!

Not all of these tools are specifically for the JavaScript language, but tools for JavaScript developers like you and I who share a common interest. *As a *JavaScript developer, I will share what enhances my development flow in several aspects revolving around 3 of 5 of the Five Senses of the human.

Here are 26 Miraculous VS Code Tools for JavaScript Developers in 2019

1. Project Snippets

The first one to top off the list is my all time favorite Project Snippets--derived from the built in original User Snippets in VS Code.

If you're not familiar with User Snippets, basically this feature allows you to create your own code snippets to re-use throughout your projects.

But what exactly does it mean to "re-use" them?

Well, if you find often yourself writing any type of boilerplate like the one below:

import { useReducer } from 'react'

const initialState = {
  //
}

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}

const useSomeHook = () => {
  const [state, dispatch] = useReducer(reducer, initialState)

  return {
    ...state,
  }
}

export default useSomeHook

You can actually just slap that right into your user snippets so that instead of having to write out (or copy and paste) the entire thing, you only need to type in a custom prefix to generate the snippet that you configured it with. If you go to File > Preferences > User Snippets, you can optionally create a new global snippet by clicking New Global Snippets File.

For example, to create your own snippets file for a TypeScript React project, you can click New Global Snippets File, type in typescriptreact.json and it will direct you to a newly created .json file that you can use for react applications built using TypeScript.

For example, to create a user snippet from the code example above, this is how you would do it:

{
  "const initialState = {}; const reducer = (state, action)": {
    "prefix": "rsr",
    "body": [
      "const initialState = {",
      "  //{
  "const initialState = {}; const reducer = (state, action)": {
    "prefix": "rsr",
    "body": [
      "const initialState = {",
      "  //$1",
      "}",
      "",
      "const reducer = (state, action) => {",
      "  switch (action.type) {",
      "    default:",
      "      return state",
      "  }",
      "}"
    ]
  }
}
",
      "}",
      "",
      "const reducer = (state, action) => {",
      "  switch (action.type) {",
      "    default:",
      "      return state",
      "  }",
      "}"
    ]
  }
}

With that in place, you can create a new typescript file ending with .tsx, type in the prefix rsr and a suggestion to generate the snippet will appear. Pressing tab on that popup will generate this snippet:

const initialState = {
  //
}

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}

But the issue with this is that this will persist through all of your projects(which in some cases can be powerful for general snippets). Some projects will be configured a little differently, and a global file to configure snippets begins to become a problem when you need to distinguish between specific use cases. For example, one use case is when project structures are different for each project:

{
  "import Link from components/common/Link": {
    "prefix": "gcl",
    "body": "import Link from 'components/common/Link'"
  },
  "border test": {
    "prefix": "b1",
    "body": "border: '1px solid red',"
  },
  "border test2": {
    "prefix": "b2",
    "body": "border: '1px solid green',"
  },
  "border test3": {
    "prefix": "b3",
    "body": "border: '1px solid magenta',"
  }
}

This might be sufficient for a project with that specific file/folder structure, but what if you were working on another project where a Link component had a path like components/Link?

Notice how the three border tests wrap their values in single quotation marks: border: '1px solid red'. This is perfectly valid in JavaScript, but what if you were using styled-components as your styling solution for a project? The syntax is no longer applicable for that workspace because styled components uses normal CSS syntax!

This is where the Project Snippets begins to shine!

Project Snippets enables you to declare project/workspace level snippets so that your snippets don't collide and pollute other projects. Very useful!

2. Better Comments

If you like writing comments in between code then you sometimes might find it a little frustrating to search for the locations of certain ones you wrote in the past because code can sometimes get a little crowded.

With Better Comments, you can make your comments more obvious by introducting colored comments:

Now you can better alert your team members with an ! or ? to bring something to their attention :)

3. Bracker Pair Colorizer

The first time I saw a screenshot of this extension I just knew I had to adopt and introduce this right into my development toolkit. Coding is my passion and passion should be fun. So with that mindset, this definitely helps me enjoy what I love doing even more.

A quick fun little fact is that sometimes a little more color can help speed up the development flow as it can influence blood flow and arousal. In other words--you're not just getting entertained, you're improving your health as well just by adding colors to your work flow!

4. Material Theme

Material Theme is an epic theme you can install right into VS code to make your code look like this:

That's got to be one of the best themes ever created. I'm not sure how I'd go into detail about how awesome a theme is, but this is just awesome. Install it now and join me in my quest to convert the world into a world of material theme-ists today! (Or don't join me and just use the theme. That's cool too)

5. @typescript-eslint/parser

If you're a TypeScript user: With the backers behind TSLint announcing plans to deprecate TSLint sometime this year, you should probably start looking into moving your tslint configurations to use the ESLint + TypeScript config approach.

Projects have gradually been moving towards adopting @typescript-eslint/parser and related packages to secure a future-proof setup for their projects. You'll still be able to leverage most of the ESLint's rules and compatibility with prettier using the new setups.

6. Stylelint

For me, stylelint is a must in all of my projects for multiple of reasons:

  1. It helps avoid errors.
  2. It enforces styling conventions in css.
  3. It goes hand in hand with prettier support.
  4. It supports css/scss/sass/less.
  5. It supports plugins written by the community.
7. Markdownlint + Docsify

Now i'm not sure how you or other developers like to take notes when brainstorming for their projects, but I like to write down notes in markdownformat.

For one, it's easy for me to understand. There's also an abundance of tools available out there that help facilitate the process of writing markdown text, including markdownlint. Markdownlint is a vs code extension linter that assists in style checking inside your .md files. The cooler part is that it supports prettier formatting!

In addition I personally like to install Docsify on all of my projects as it supports markdown and other enhancements for each project.

8. TODO Highlight

I have a habit of writing todos in my application code, so extensions like TODO Highlight are really useful to highlight the todos I set in place throughout my projects.

9. Import Cost

Import Cost is one of those tools that become very useful the first time you try it. But after awhile you start to realize you don't really need the tool anymore because it tells you what you already know over time. Nonetheless, try this tool out for awhile because you might find it useful.

10. Highlight Matching Tag

Sometimes it can get frustrating trying to match the other end of a tag. That's where Highlight Matching Tag becomes to take your frustrations away:

11. vscode-spotify

And speaking of frustrations, sometimes it can get frustrating having to go back into your music player to switch music and then having to go back to vs code to continue doing what you were doing. That's where vscode-spotify comes in, because it allows you to use spotify right inside vs code!

With this extension you'll be able to see the song that is currently playing in the status bar, switch between songs by pressing hotkeys, clicking buttons to control spotify, and more!

11. GraphQL for VSCode

GraphQL has constantly been growing as we're starting to see it just about every corner in the JavaScript community. And with that said, it's probably a good idea to start thinking about installing GraphQL for VSCode into your vs code if you haven't already so that you benefit from syntax highlighting, linting and auto complete features when dealing with GraphQL syntax.

I personally use GatsbyJS a lot, so my daily coding life involves reading GraphQL syntax somewhat.

12. Indent Rainbow

A similar reason to the Highlight Matching Tag above. If you have trouble finding your way through indentations, then Indent Rainbow can help make those indentations easier to read.

Here's an example:

13. Color Highlight

This is one of those extensions where everybody asks me "Where did you get that?" if they haven't come across this extension yet. Basically Color Highlight helps highlight colors inside your code like this:

14. Color Picker

Color Picker is a vscode extension that gives you a graphical user interface to assist in selecting and generating color codes like CSS color notations.

15. REST Client

The first time I read about REST Client and tried it out for myself, it didn't seem like a very useful tool over an established software like Postman.

But the more I played with the REST Client extension, the more I realized how much it can impact my development tool especially when testing APIs.

You can just create a new file and have this one line:

https://google.com

All you need to do to create an HTTP GET request is to highlight that one line, go to the command palette (CTRL + SHIFT + P), click Rest Client: Send Request and it will go ahead and pop open a new tab with the request response details in the split of a second.

Very useful:

You can even pass in parameters or request body data to a POST request with just a couple of more lines of code underneath:

POST https://test.someapi.com/v1/account/user/login/
Content-Type: application/json

{ "email": "[email protected]", "password": 1 }

And that will make a POST request with body parameters { "email": "[email protected]", "password": 1 }

But that's just scratching the surface of the possibilities of the extension. Read about it to find out more.

16. Settings Sync

I hated having to manually write down a markdown list of notes of extensions that I use in my development tool and saving it in a notes service like Evernote until Settings Sync came to the rescue.

Basically, you just need a gist/github account and everytime you want to save your settings (this includes keybindings, snippets, extensions, etc) you just need to press SHIFT + ALT + U to upload the private settings to your gist account, so that the next time you log in or reformat to another computer, you can immediately just download your settings in an instant by pressing SHIFT + ALT + D.

17. Todo Tree

Todo Tree will help you find all the todos you created throughout your application code into a single tree where you can view them all at once on the left side of your panel:

18. Toggle Quotes

Toggle Quotes is a fun utility extension that lets you toggle between quotes. It comes in handy when you need to switch to backticks when you're about to use string interpolations especially when prettier has a habit of prettifying your strings to single quotes.

19. Better Align

You can align your code without selecting them first with Better Align.

To use: Place your cursor in the code you want to be aligned, then pop open your command palette with CTRL + SHIFT + P (or whatever your customized shortcut is to open the command palette) and invoke the Aligncommand.

20. Auto Close Tag

Auto Close Tag has been useful to me since the day I first started VS code. It allows you to type something like <div, following a slash / and it will complete the last arrow for you. This is something that isn't in vs code by default and is very useful to me :)

21. Sort Lines

I have a frustrating habit of becoming frustrated when my arrays aren't aligned alphabetically. Luckily tools like Sort Lines exist to make my life easier. You might find this very helpful to you as well if you get frustrated in a similar fashion.

22. VScode Google Translate

I might be the only one that finds this useful, but VScode Google Translatehelps me in my projects as I am involved in a project that is multi lingual. Useful if you don't want to leave your editor.

23. Prettier

Prettier is an extension for vs code that automatically formats your JavaScript/TypeScript/etc. code using prettier.

24. Material Icon Theme

I prefer Material Icon Theme over other icon themes because it's a little more obvious to the eye which files types are which, especially when working in a dark theme.

25. IntelliSense for CSS Class Names in HTML

IntelliSense for CSS class names in HTML is a CSS class name completion based on the HTML class attribute based on the definitions found in your workspace.

26. Path IntelliSense

Path Intellisense is a vs code extension that autocompletes file names for you.

Conclusion

And that concludes the end of this post! I hope this helped you find something new to add onto your development kit! Look forward for more posts from me in the future!

11 Awesome JavaScript Extensions for Visual Studio Code

11 Awesome JavaScript Extensions for Visual Studio Code

One of the most impressive parts of Visual Studio Code is customizability, especially via extensions. I won't cover framework specific extensions, but here are some of the best extensions in VS Code for writing JavaScript.

One of the most impressive parts of Visual Studio Code is customizability, especially via extensions. I won't cover framework specific extensions, but here are some of the best extensions in VS Code for writing JavaScript.

Table of Contents

  • JavaScript (ES6 Code Snippets)
  • Quokka
  • Prettier
  • Debugger for Chrome
  • ESLint
  • Import Cost
  • Path Intellisense
  • View Node Package
  • Better Comments
  • NPM Intellisense
  • Wallaby.js
  • Conclusion 
JavaScript (ES6 Code Snippets)

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

Snippet extensions are one of the most popular categories of extensions, and this one follows suit. It includes snippets for modern ES6 JavaScript, which is what you should be writing (or learning if you haven't already). Although this snippet is not specific to any framework, these snippets can be triggered from severl different file types.

  • JavaScript (ES6 Code Snippets)
  • Quokka
  • Prettier
  • Debugger for Chrome
  • ESLint
  • Import Cost
  • Path Intellisense
  • View Node Package
  • Better Comments
  • NPM Intellisense
  • Wallaby.js
  • Conclusion 

Here are a couple of my favorites that you should try out!

  • JavaScript (ES6 Code Snippets)
  • Quokka
  • Prettier
  • Debugger for Chrome
  • ESLint
  • Import Cost
  • Path Intellisense
  • View Node Package
  • Better Comments
  • NPM Intellisense
  • Wallaby.js
  • Conclusion 

There are many others, so go give them a try!

Quokka

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Have you ever wanted to test out a function or play around with some JavaScript code? Sometimes you can test right in the Chrome Dev Tools console, sometimes you'll open up a CodePen. With Quokka.js, you can create a scratchpad right inside VS Code!

Test out your JavaScript quickly and easily with Quokka.js.

Prettier

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

An opinionated code formatter that can format your JavaScript code automatically. By having Prettier installed, you never have to worry about formatting; just let the computer take care of it!

It can be a little hard to get used to having your formatting handled for you as I'm sure a lot of devs have their own style that they like. Having Prettier on a team ensures that everyone follows the same style of coding.

Debugger for Chrome

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Although console.log() has its place, it's not the best way to debug. Chrome has debugging tools built in, but did you know you can also debug directly in VS Code using this extension?

I personally prefer to debug using this extension. This means that I can stay inside of the editor that I'm used to, make changes on the fly, etc. You can do most of the things that you would expect when debugging.

  • JavaScript (ES6 Code Snippets)
  • Quokka
  • Prettier
  • Debugger for Chrome
  • ESLint
  • Import Cost
  • Path Intellisense
  • View Node Package
  • Better Comments
  • NPM Intellisense
  • Wallaby.js
  • Conclusion 
ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

With so many amazing tools out there, you should not be stressing over formatting your code. ESLint is one of many that can auto-format your code (on save if you choose). Additionally, the linting aspect can "yell" at you (for lack of a better word) to encourage or require to follow certain guidelines.

ESLint or TSLint (for TypeScript) are often configured with many starter projects, so you may not even have to configure it yourself. Just by creating a new project and opening it up in VS Code, you'll have all the help you need to write consistent code!

Import Cost

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

If you're worried about the size of the packages and modules that you import into your app, check out this extension! Next to your import statements you will see the size of the package you are importing. This is a great way to ensure the size of your app bundles is as small as possible!

Path Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

When trying to reference a file in your workspace, it can be tough to remember exact file paths and names. I try to keep my menu bar in VS Code closed most of the time (to maximize code real estate), so I hate having to open the file explorer just to double check where a file is located. That's where Path Intellisense comes in!

This extension will provide you intellisense when referencing file paths. All you have to is start typing a path inside of quotes and you'll get intellisense for folder and file names.

View Node Package

https://marketplace.visualstudio.com/items?itemName=dkundel.vscode-npm-source

Click on your require or import lines in your code and click straight to the GitHub repo.

Very helpful when you want to jump to GitHub to view some source code or look through docs/issues.

Better Comments

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

This extension is probably the least popular of the bunch, but I personally find it incredibly useful. So, you know when you have a piece of code you need to implement or finish later? Or you you want to mark a piece of code as deprecated? Or you have a question for another developer about a piece of code?

This extension will provide color coded comments to solve all of the above. Here's a list of the available color codes.

  • JavaScript (ES6 Code Snippets)
  • Quokka
  • Prettier
  • Debugger for Chrome
  • ESLint
  • Import Cost
  • Path Intellisense
  • View Node Package
  • Better Comments
  • NPM Intellisense
  • Wallaby.js
  • Conclusion 
NPM Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

Ever gone to import a package and forgot exactly what the name is? Well, no more! This extension will provide package intellisense when importing based on the NPM packages that you have installed.

Wallaby.js

https://marketplace.visualstudio.com/items?itemName=WallabyJs.wallaby-vscode

Run your tests as you code! From the people that brought us Quokka.js, here's a cool tool to speed up your development.

Conclusion

Got any more awesome JavaScript extensions? Let us know down in the comments and we'll add it to this post as extra mentions.

Thanks for reading!

Visual Studio Code Settings and Extensions for Faster JavaScript Development

Visual Studio Code Settings and Extensions for Faster JavaScript Development

Visual Studio Code Settings and Extensions for Faster JavaScript Development

I have been using Visual Studio Code for more than two years, when I jumped on it from Sublime Text.

I spend about 5–6 hours every day inside VS Code so it’s imperative that it is tailored to my needs to make me as productive as possible. Over the years, I have tried many extensions and settings but now I feel settled with what I have so it’s worth talking about them.

Extensions

Prettier Code Formatter

I use Prettier for code formatting across all of my projects and I’ve set up this extension so that it automatically formats my HTML/CSS/JS when I hit ⌘ + S. This has allowed me to get rid of language-specific code formatters.

npm

I use this extension along with npm intellisense (below) to ensure that my package.json is up to date and not bloated with modules that I am not using.

npm Intellisense

This extension indexes my package.json and allows me to autocomplete my import statements when requiring modules.

Bracket Pair Colorizer

This extension color codes all of my brackets, allowing me to quickly see where each code block starts and ends.

React Refactor

This is the newest extension that I have added to my arsenal and I really like it. It lets you select some JSX and refactor it out into a custom React Class, function, or hook.

Auto Close Tag

Another simple extension that does one thing well: auto-closes my JSX tags.

GitLens

I recently moved from the native Source Control setting that VSCode has to Gitlens. I like this extension because it lets me:

  • Automatically see the git blame for the current line
  • View a more detailed history on hover
  • Reset changes via the gutter

Simple React Snippets

I write so much React code that I needed an extension to help me save some time. I now use this extension to fill in some of the boilerplate that comes along with writing React components.

Markdown All in One

This extension helps me a lot when writing READMEs, or other Markdown documents. I specifically enjoy how it deals with lists, tables, and table of contents.

User Settings

Apart from the extensions, the other aspect of customizing your VS Code experience are your User Settings. I have shared my complete Settings file below, but here are some of the important bits:

Font Settings

I really like fonts with ligatures. If you are unfamiliar with ligatures, they are special characters that parses and joins multiple characters. I primarily use Fira Code as my programming font. Here’s how it renders JavaScript:

My complete font stack is:

"editor.fontFamily": "'Fira Code', 'Operator Mono', 'iA Writer Duospace', 'Source Code Pro', Menlo, Monaco, monospace", "editor.fontLigatures": true,

To detect indentation, I also prefer these settings:

"editor.detectIndentation": true, 
"editor.renderIndentGuides": false,

To help manage my imports, I prefer these:

// Enable auto-updating of import paths when you rename a file. "javascript.updateImportsOnFileMove.enabled": "always",

Emmet

Emmet now comes included with VS Code now, but to make it work well with React, I had to update some of the settings.

"emmet.includeLanguages": { 
  "javascript": "javascriptreact", 
  "jsx-sublime-babel-tags": "javascriptreact"
}, 
"emmet.triggerExpansionOnTab": true, "emmet.showExpandedAbbreviation": "never",

Here’s my complete user-settings.json

{
  "editor.formatOnSave": true,
  // Enable per-language
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.formatOnSave": true
  },
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "xml": {
      "attr_quotes": "single"
    }
  },
  "editor.lineHeight": 22,
  "javascript.validate.enable": false,
  "workbench.editor.enablePreview": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "prettier.trailingComma": "all",
  "bracketPairColorizer.forceIterationColorCycle": true,
  "editor.fontWeight": "500",
  "editor.fontLigatures": true,
  "editor.letterSpacing": 0.5,
  "editor.cursorWidth": 5,
  "editor.renderWhitespace": "all",
  "editor.snippetSuggestions": "top",
  "editor.glyphMargin": true,
  "editor.minimap.enabled": false,
  "terminal.integrated.fontWeight": "400",
  "editor.fontFamily": "Fira Code, iA Writer Duospace, Menlo, Monaco, 'Courier New', monospace",
  "editor.fontSize": 14,
  "window.zoomLevel": -1,
  "files.trimTrailingWhitespace": true,
  "files.trimFinalNewlines": true,
  "workbench.fontAliasing": "auto",
  "terminal.integrated.macOptionIsMeta": true,

  "prettier.bracketSpacing": true,
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.fontWeightBold": "700",
  "terminal.integrated.lineHeight": 1.6,
  "workbench.colorTheme": "Shades of Purple",
  // SOP's Import Cost Extension Settings.
  "importCost.largePackageColor": "#EC3A37F5",
  "importCost.mediumPackageColor": "#B362FF",
  "importCost.smallPackageColor": "#B362FF"
}

For more tips and tricks about Visual Studio Code, I recommend checking out VSCode Can Do That.

*Originally published by Tilo at *tilomitra.com 

======================

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

☞ Learn Visual Studio Code

☞ Visual Studio Code Crash Course 2019

☞ The Complete JavaScript Course 2019: Build Real Projects!

☞ The Complete 2019 Web Development Bootcamp

☞ Svelte.js - The Complete Guide

☞ The Complete JavaScript Course 2019: Build Real Projects!

☞ Become a JavaScript developer - Learn (React, Node,Angular)

☞ JavaScript: Understanding the Weird Parts

☞ Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

☞ The Full JavaScript & ES6 Tutorial - (including ES7 & React)

☞ JavaScript - Step By Step Guide For Beginners

☞ The Web Developer Bootcamp

JavaScript Tutorial: if-else Statement in JavaScript

JavaScript Tutorial: if-else Statement in JavaScript

This JavaScript tutorial is a step by step guide on JavaScript If Else Statements. Learn how to use If Else in javascript and also JavaScript If Else Statements. if-else Statement in JavaScript. JavaScript's conditional statements: if; if-else; nested-if; if-else-if. These statements allow you to control the flow of your program's execution based upon conditions known only during run time.

Decision Making in programming is similar to decision making in real life. In programming also we face some situations where we want a certain block of code to be executed when some condition is fulfilled.
A programming language uses control statements to control the flow of execution of the program based on certain conditions. These are used to cause the flow of execution to advance and branch based on changes to the state of a program.

JavaScript’s conditional statements:

  • if
  • if-else
  • nested-if
  • if-else-if

These statements allow you to control the flow of your program’s execution based upon conditions known only during run time.

  • if: if statement is the most simple decision making statement. It is used to decide whether a certain statement or block of statements will be executed or not i.e if a certain condition is true then a block of statement is executed otherwise not.
    Syntax:
if(condition) 
{
   // Statements to execute if
   // condition is true
}

Here, condition after evaluation will be either true or false. if statement accepts boolean values – if the value is true then it will execute the block of statements under it.
If we do not provide the curly braces ‘{‘ and ‘}’ after if( condition ) then by default if statement will consider the immediate one statement to be inside its block. For example,

if(condition)
   statement1;
   statement2;

// Here if the condition is true, if block 
// will consider only statement1 to be inside 
// its block.

Flow chart:

Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate If statement 

var i = 10; 

if (i > 15) 
document.write("10 is less than 15"); 

// This statement will be executed 
// as if considers one statement by default 
document.write("I am Not in if"); 

< /script> 

Output:

I am Not in if
  • if-else: The if statement alone tells us that if a condition is true it will execute a block of statements and if the condition is false it won’t. But what if we want to do something else if the condition is false. Here comes the else statement. We can use the else statement with if statement to execute a block of code when the condition is false.
    Syntax:
if (condition)
{
    // Executes this block if
    // condition is true
}
else
{
    // Executes this block if
    // condition is false
}


Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate If-else statement 

var i = 10; 

if (i < 15) 
document.write("10 is less than 15"); 
else
document.write("I am Not in if"); 

< /script> 

Output:

i is smaller than 15
  • nested-if A nested if is an if statement that is the target of another if or else. Nested if statements means an if statement inside an if statement. Yes, JavaScript allows us to nest if statements within if statements. i.e, we can place an if statement inside another if statement.
    Syntax:
if (condition1) 
{
   // Executes when condition1 is true
   if (condition2) 
   {
      // Executes when condition2 is true
   }
}

Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate nested-if statement 

var i = 10; 

if (i == 10) { 

// First if statement 
if (i < 15) 
	document.write("i is smaller than 15"); 

// Nested - if statement 
// Will only be executed if statement above 
// it is true 
if (i < 12) 
	document.write("i is smaller than 12 too"); 
else
	document.write("i is greater than 15"); 
} 
< /script> 

Output:

i is smaller than 15
i is smaller than 12 too
  • if-else-if ladder Here, a user can decide among multiple options.The if statements are executed from the top down. As soon as one of the conditions controlling the if is true, the statement associated with that if is executed, and the rest of the ladder is bypassed. If none of the conditions is true, then the final else statement will be executed.
if (condition)
    statement;
else if (condition)
    statement;
.
.
else
    statement;


Example:

<script type = "text/javaScript"> 
// JavaScript program to illustrate nested-if statement 

var i = 20; 

if (i == 10) 
document.wrte("i is 10"); 
else if (i == 15) 
document.wrte("i is 15"); 
else if (i == 20) 
document.wrte("i is 20"); 
else
document.wrte("i is not present"); 
< /script> 

Output:

i is 20