JS Syntax

JavaScript is a versatile and powerful programming language used for creating interactive websites, web applications, and even mobile apps. It’s often described as “the language of the web,” and its ease of use and broad applicability make it a popular choice for beginners. This tutorial will cover the fundamental building blocks of JavaScript syntax, providing a solid foundation for your coding journey.

1. Variables

Variables are like containers that hold data. You use them to store values that can change during your program's execution. In JavaScript, you declare variables using the var, let, or const keywords.

• var: Historically used, var is still supported but is generally discouraged in modern JavaScript due to its function scope issues.
• let: let is preferred over var because it has block scope. This means the variable is only accessible within the block of code where it's defined.
• const: const declares a constant variable. This means the variable’s value cannot be reassigned after its initial assignment. However, if a constant is reassigned, the value will be overwritten.

// Using var (discouraged)
var age = 25;
console.log(age); // Output: 25

// Using let
let name = "Alice";
console.log(name); // Output: Alice

// Using const
const PI = 3.14159;
console.log(PI); // Output: 3.14159

// Attempting to reassign const will result in an error
// const PI = 3.14; // This will cause an error

2. Data Types

JavaScript has several fundamental data types:

• Number: Represents numerical values (e.g., 10, 3.14, -5).
• String: Represents text enclosed in single quotes ('...') or double quotes ("...").
• Boolean: Represents a logical value, either true or false.
• Null: Represents the intentional absence of a value.
• Undefined: Represents a variable that has been declared but has not been assigned a value.
• Object: Represents a collection of key-value pairs.

let age = 30;
let name = "Bob";
let price = 99.99;
let isStudent = true;

console.log(typeof age); // Output: number
console.log(typeof name); // Output: string
console.log(typeof price); // Output: number
console.log(typeof isStudent); // Output: boolean
console.log(typeof null); // Output: null
console.log(typeof undefined); // Output: undefined
console.log(typeof {})); // Output: object

3. Operators

JavaScript supports various operators to perform operations on data.

• Arithmetic Operators: + (addition), - (subtraction), * (multiplication), / (division), % (modulo – remainder).
• Comparison Operators: == (equal to), === (strictly equal to – checks for both value and type), != (not equal to), !== (not strictly equal to), > (greater than), < (less than), >= (greater than or equal to), <= (less than or equal to).
• Logical Operators: && (AND), || (OR), ! (NOT).

let x = 10;
let y = 5;

console.log(x + y); // Output: 15
console.log(x > y); // Output: true
console.log(x === y); // Output: false

4. Control Flow

Control flow statements allow you to execute code in a specific order.

• if statement: Executes code only if a condition is true.

  let age = 18;
  
  if (age >= 18) {
    console.log("You are an adult.");
  } else {
    console.log("You are a minor.");
  }
  

• else statement: Executes code if the if condition is false.

• for loop: Repeats a block of code a specific number of times.

  for (let i = 0; i < 5; i++) {
    console.log(i);
  }
  

• while loop: Repeats a block of code as long as a condition is true.

  let i = 0;
  while (i < 5) {
    console.log(i);
    i++;
  }
  

5. Functions

Functions are reusable blocks of code that perform a specific task.

function greet(name) {
  return "Hello, " + name + "!";
}

let message = greet("Charlie");
console.log(message); // Output: Hello, Charlie!

6. Arrays

Arrays are ordered collections of data. They are defined using square brackets [].

let colors = ["red", "green", "blue"];

console.log(colors[0]); // Output: red
console.log(colors.length); // Output: 3

💡 Tip: Use map() to transform arrays.

let numbers = [1, 2, 3, 4, 5];

let squaredNumbers = numbers.map(function(number) {
  return number * number;
});

console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]

This tutorial provides a basic introduction to JavaScript syntax. There's much more to learn, but this should give you a strong foundation to start exploring the world of web development!