JavaScript syntax is the set of rules that define a correctly structured JavaScript program. Understanding these rules is essential for writing clear and effective JavaScript code. Here’s a comprehensive overview of the key elements of JavaScript syntax:
1. Statements
A statement is an instruction that performs an action. JavaScript statements are usually written one per line and can end with a semicolon (;), though it’s not strictly required.
let x = 5; // Variable declaration console.log(x); // Function call
2. Comments
Comments are used to explain code and are ignored by the JavaScript engine.
- Single-line comment:
// This is a single-line comment let x = 5; // This is an inline comment
- Multi-line comment:
/* This is a multi-line comment */ let y = 10;
3. Variables
Variables are used to store data. You can declare variables using var, let, or const.
- var: Function-scoped or globally scoped.
var x = 5;
- let: Block-scoped.
let y = 10;
- const: Block-scoped and cannot be reassigned.
const z = 15;
4. Data Types
JavaScript supports several data types:
- Primitive types: Number, String, Boolean, Null, Undefined, Symbol, BigInt.
let num = 42; // Number
let str = “Hello”; // String
let bool = true; // Boolean
let n = null; // Null let u; // Undefined
let sym = Symbol(); // Symbol
let big = 123n; // BigInt
- Object types: Objects, Arrays, Functions, etc.
let obj = {name: “Alice”, age: 25}; // Object let arr = [1, 2, 3]; // Array function greet() { return “Hello”; } // Function
5. Operators
Operators are used to perform operations on variables and values.
- Arithmetic operators: +, –, *, /, %, **
let sum = 5 + 2; // Addition let diff = 5 – 2; // Subtraction let prod = 5 * 2; // Multiplication let quot = 5 / 2; // Division let mod = 5 % 2; // Modulus (remainder) let exp = 5 ** 2; // Exponentiation
- Assignment operators: =, +=, -=, *=, /=, %=, **=
let x = 10; x += 5; // x = x + 5
- Comparison operators: ==, ===, !=, !==, <, >, <=, >=
let isEqual = (5 == ‘5’); // true (loose equality) let isStrictEqual = (5 === ‘5’); // false (strict equality)
- Logical operators: &&, ||, !
let and = true && false; // false let or = true || false; // true let not = !true; // false
6. Control Structures
Control structures dictate the flow of execution in a program.
- Conditional Statements:
- if…else:
if (x > 10) { console.log(“x is greater than 10”); } else { console.log(“x is 10 or less”); }
- switch:
switch (x) { case 5: console.log(“x is 5”); break; case 10: console.log(“x is 10”); break; default: console.log(“x is neither 5 nor 10”); }
- Loops:
- for:
for (let i = 0; i < 5; i++) { console.log(i); }
- while:
let i = 0; while (i < 5) { console.log(i); i++; }
- do…while:
let i = 0; do { console.log(i); i++; } while (i < 5);
7. Functions
Functions are reusable blocks of code that perform a specific task.
- Function Declaration:
function greet(name) { return “Hello, ” + name; }
- Function Expression:
const greet = function(name) { return “Hello, ” + name; };
- Arrow Function:
const greet = (name) => “Hello, ” + name;
8. Objects
Objects are collections of key-value pairs.
- Object Literal:
let person = { firstName: “John”, lastName: “Doe”, age: 30, greet: function() { return “Hello, ” + this.firstName; } };
- Accessing Properties:
console.log(person.firstName); // Dot notation console.log(person[‘lastName’]); // Bracket notation
9. Arrays
Arrays are ordered collections of values.
- Array Literal:
let colors = [“red”, “green”, “blue”];
- Accessing Elements:
console.log(colors[0]); // Outputs: red
- Array Methods:
colors.push(“yellow”); // Adds an element to the end colors.pop(); // Removes the last element colors.shift(); // Removes the first element colors.unshift(“purple”); // Adds an element to the beginning
10. Error Handling
JavaScript provides a way to handle errors gracefully using try…catch statements.
try { let result = riskyFunction(); console.log(result); } catch (error) { console.error(“An error occurred:”, error); } finally { console.log(“This code runs regardless of whether an error occurred.”); }
Summary
JavaScript syntax includes a variety of elements such as statements, comments, variables, data types, operators, control structures, functions, objects, arrays, and error handling mechanisms. Understanding these components and how to use them effectively is crucial for writing robust and maintainable JavaScript code.