What syntax does JavaScript use?

In this article, we are going to see all about JavaScript syntax, what syntax JavaScript use, and why the syntax is so important to know, stay till the end of this article, and you will understand everything from this article. JavaScript is a favorite language of web developers and any other developer who uses its several libraries to work or do projects, they know why JavaScript is so famous because its uses in industries are imaginable.

Introduction

Explanation of JavaScript and its role in web development

JavaScript is a web programming language developed only to work on the web, but after some time, developers now use it for every purpose, it now works on servers, mobile applications, desktop applications, and so on. Learning JavaScript will open so many opportunities for a developer in this generation.

The role of JavaScript becomes crucial because every web application nowadays is built using JavaScript because it is a web language that also runs on servers, it helps every individual who wants to make a fully-fledged application, with frontend and backend.

Overview of the topic: the syntax used in JavaScript

The code which we write in a specific order is known as the syntax of the code, A good example will be such as declaring a variable, defining a function, writing a control flow statement and many more. Let’s see this with an example of syntax by creating a variable in JavaScript.

In the following example I used the var keyword to create a myName variable which holds a value of “Amol Shelke”, the way of making the myName variable here is a syntax.

var myName = "Amol Shelke";Code language: JavaScript (javascript)

Understanding Syntax in JavaScript

We will now be going to see some basics of syntax in JavaScript, how we can define variables, how we can print them and so on.

Definition and explanation of syntax in programming languages

The syntax is a building block of any programming language as we write sentences in English we have to follow a specific order that goes for programming too, if we start a sentence with a capital letter we can’t add another capital letter in a sentence until it gets completed right. That’s a rule we have to follow when we write sentences. The same in programming we have to follow the rules for creating something in any programming language, this is not only for JavaScript it applies to every programming language.

How syntax is used in JavaScript

Syntax in any programming language is a set of rules a developer must follow when he/she writes the code in that programming language. JavaScript also follows the rules and the developer writes code in JavaScript with the syntax that JavaScript follows. Let’s see this with an example of creating a variable and assigning it a value.

For creating a variable the syntax used in JavaScript is as follows:

var synExample = "I'm a demo variable";
console.log(synExample);Code language: JavaScript (javascript)

Let’s now understand what the code is doing and how the syntax is used in the above example. The first thing that I did is I created a synExample variable and assign it a value of a string, A string in JavaScript is used in single or double quotes. After that, I used the console.log() to print the synExample to the console.

Common syntax rules and structures in JavaScript

The common syntax rules to follow while writing code in JavaScript is as follows:

• JavaScript variables can be created using var, let, and const keywords.
• Variables names in JavaScript are case-sensitive and we cannot use the reserved keywords.
• The if-else or loops statements in JavaScript are written inside curly braces blocks.
• To assign a value to a variable in JavaScript we can use the equal to operator.
• To create a function in JavaScript there are different ways such as a function keyword, arrow function, function expression, and callback function.
• The semicolon is not necessary for JavaScript at the end of the statement as in other languages.
• A String in JavaScript can be written in single quotes or double quotes.

Basic Syntax Elements in JavaScript

Let’s now see some basic syntax elements in JavaScript with examples and how to create them in JavaScript.

Declaring and initializing variables

A variable is a way of storing some information inside a memory, variables in JavaScript can be declared with the help of var, let and const keyword they both works differently based on the conditions. Let’s now see how we can say a variable using both of them them.

var keyword.

var demoName = "Amol Shelke";
console.log(demoName);Code language: JavaScript (javascript)

This is how a variable can be declared in JavaScript using the var keyword. There are two more keywords present in JavaScript for declaring variables.

let keyword.

let demoName = "Amol Shelke";
console.log(demoName);Code language: JavaScript (javascript)

const keyword.

const demoName = "Amol Shelke";
console.log(demoName);Code language: JavaScript (javascript)

This is how we can declare and initialize variables in JavaScript.

Using operators and expressions

We can use different operators in JavaScript to perform various operations in JavaScript.

There are different types of operators in JavaScript such as mathematical, logical and comparison.

Mathematical operator

let num1 = 12;
let num2 = 18;
console.log(num1 + num2) // 30
console.log(num2 - num1) // 6
console.log(num * 2) // 24
console.log(num / 2) // 6
console.log(num % 2) // 0Code language: JavaScript (javascript)

Comparison operator

let str1 = 'Amol';
let str2 = 'Amol';
console.log(str1 === str2); // true
console.log(str1 !== str2); // false
console.log(str1 > str2); // false
console.log(str2 < str1); // false
console.log(str1 >= str2); // trueCode language: JavaScript (javascript)

logical operator

let demoNum = 12;
let demoNum2 = 12;
console.log(demoNum && demoNum2 === 12) // true
console.log(demoNum || demoNum2 === 12) // trueCode language: JavaScript (javascript)

Control structures (if/else, for loops, etc.)

Control structures in JavaScript help us to perform programming logic in a structured way, it decreases the number of repetitive lines of code, which eventually make code more readable. There are some control structures in JavaScript let’s look at them one by one.

The if/else structure helps us to write conditional statements in our program, if one of the conditions mentioned in the if/else-if block turns to true, the code inside that block will execute. Otherwise, the else block of code will execute.

const age = 18;
if(age < 18) {
 console.log('You cannot get into the club');
} else if(age >= 50) {
 console.log('You should go to visit some other place');
} else {
  console.log('you are allowed to get into the club');
}Code language: JavaScript (javascript)

Loops in JavaScript are used to reduce the number of repetitive tasks we can write the same code over 100 lines with the help of loops in just a few seconds in JavaScript. Below shown in the example, the loop will log the message 19 times because that’s what I have written in the loop condition.

const countNum = 20;
for(let i = 0; i < countNum; i++) {
 console.log("I'm a for loop");
}Code language: JavaScript (javascript)

Defining and calling functions

Most of the time, you will be working with functions in JavaScript Because the programmer in JavaScript chooses functions over classes or OOPS. A function takes some inputs, does operations with them, and returns the result. A function in JavaScript can be defined and called as shown in the example below.

function printMyAge(birthYear, currentYear) {
  console.log(currentYear - birthYear);
} // defining the function

printMyAge(2004, 2023); // calling the function
Code language: JavaScript (javascript)

Advanced Syntax Elements in JavaScript

As we just now saw some essential syntax elements in JavaScript, let’s move on to some advanced syntax elements that we use while writing JavaScript many times.

Creating classes and prototypes

Classes in JavaScript are an essential part of Object-oriented programming, class in JavaScript can be created with the class keyword and then on the class, we can call the constructor method for creating new objects from that class. As shown in the example below.

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const user1 = new User("Amol", 19);
console.log(user1);
Code language: JavaScript (javascript)

Asynchronous programming techniques

JavaScript works synchronously which means it handles one task at a time, if the first task does not complete then the second won’t execute too. There are some concepts in JavaScript which make working in JavaScript asynchronously, such as fetch, setTimeOut, setTimeIntveral and many more. Let’s see an example of fetch in JavaScript.

What I’m doing in the example is, I use the function fetch to fetch some data from an API, and this is an Asynchronous task in JavaScript. Which returns a promise and using .then I converted that promise into the JSON.

var api_url = "https://api.catboys.com/img";

function getImage() {
  fetch(api_url)
    .then((res) => res.json())
    .then((data) => console.log(data));
}

getImage();
Code language: JavaScript (javascript)

The output will be like this.

Error handling and debugging tools

JavaScript uses Error handling and debugging tools, The JavaScript is mostly used in web browsers so every browser has a developer tool in which most of the developers debug the programmes.

In JavaScript there is try and catch block where one can catch errors while writing the code, if the code inside the try block throws some errors the catch block willcatch that error and print the message which you want to print. you can look at the example below to see the error handling in practice.

const number = 2;
try {
  // the errror occurs here
  console.log(!number2); 
} catch {
  // this block will catch that error.
  console.error("Error catched here");
}Code language: JavaScript (javascript)

There is a developer tool in every browser in which we can stop the execution of a program with the help of debugger breakpoints and so on. As shown in the image below.

Modern syntax features (ES6 and beyond)

Over the period JavaScript has gotten updated, which means there are so many new things introduced after the version updates of it. such as let and const, arrow functions, new array methods filter, reduce, and map, etc. These are some new features introduced in the ES6 update of JavaScript, Let’s see some of them in an example.

Arrow functions:

// Arrow function with parameter
const getAge = (age) => {
 console.log(`I'm ${age} years old`);
}
getAge(18);Code language: JavaScript (javascript)

Let and Const variables

const nameConst = "Amol shelke";
let nameLet = "Amol";
console.log(nameConst, nameLet);Code language: JavaScript (javascript)

Conclusion

Summary of key takeaways

That’s it for this article I hope you found it helpful, and In this article, we looked into JavaScript syntax. Essential elements of JavaScript syntax and advanced aspects of JavaScript syntax with examples. As you can see, a simple article cannot define how big the language is and the syntax that JavaScript follows to learn the full syntax of JavaScript, you first have to learn the language.

Additional resources for learning more about JavaScript syntax

Learning JavaScript will be the best decision you can take in your developer life, and to learn it, you must follow a structured course where that course teaches you from syntax to a high level of JavaScript.

Try codedamn frontend learning path that teaches you JavaScript from scratch with hands-on projects.

FAQs

What is the difference between syntax and semantics in programming?

Syntax in programming rules that every developer needs to follow to write a specific program in any language. On the other hand, semantics refers to the meaning of the written syntax.

Can I use different syntax in JavaScript?

You can use the JavaScript older and newer syntax i.e before the ES6 version update and after the ES6 update, other than you cannot use any different syntax in JavaScript.

How do I know if my JavaScript code has syntax errors?

If your JavaScript code has syntax errors and in case you are using the VS Code editor, that will show the warning in red color. Or the browser will show the syntax error in the console.

Can I use JavaScript syntax in other programming languages?

Every programming language follows different syntax, and JavaScript language syntax cannot be used in any other programming language. A variable declaration, function declaration, and calling a function in JavaScript are different than in other languages, and that’s why we cannot use JavaScript syntax in any other language.