Published on Aug 27, 2023 14:05

Basic JavaScript Syntax

Javascript statements

JavaScript, the language of the web, operates through a series of instructions known as "statements." These statements act as building blocks, enabling your web pages to respond and interact with users. In this guide, we'll break down JavaScript statements using easy-to-understand language and real-life examples.

What are JavaScript Statements? JavaScript statements are like sentences in a language that your web browser understands. They are the basic commands that tell the browser what to do. Each statement performs a specific action, like showing a message, calculating numbers, or changing content on a webpage.

Examples of JavaScript Statements:

  1. Displaying a Message: Here, the alert statement displays the message "Hello, World!" in a pop-up dialog box on the webpage.


alert("Hello, World!");



  1. Performing Calculations: In this example, three statements are used to define two numbers (num1 and num2) and calculate their sum. The let keyword is used to declare variables.


let num1 = 5;
let num2 = 3;
let sum = num1 + num2;



  1. Changing Webpage Content: This statement changes the content of an HTML element with the id "myElement" to "New Content."
document.getElementById("myElement").innerHTML = "New Content";



Components of a Statement:

  • Keywords: These are reserved words that indicate what action the statement should perform. Examples are below.

Note: Don’t worry about these as we go to learning javascript we will be exposed to some of these keywords.

  1. break: Used to terminate a loop or a switch statement.
  2. case: Used in a switch statement to define different cases for different values.
  3. catch: Catches exceptions (errors) thrown by try statements.
  4. const: Declares a block-scoped variable that cannot be reassigned after initialization.
  5. continue: Used to skip the current iteration of a loop and move to the next.
  6. debugger: Pauses the execution of JavaScript and opens the browser's debugger.
  7. default: Used in a switch statement to specify the default case if no other cases match.
  8. delete: Removes a property from an object.
  9. do: Starts a loop that executes a block of code at least once before checking the loop condition.
  10. else: Used in an if statement to specify an alternative block of code to execute if the condition is false.
  11. export: Used to export functions, objects, or values from a module.
  12. extends: Used to create a class that is a child of another class (class inheritance).
  13. finally: Defines a block of code to be executed after a try or catch block, regardless of whether an exception was thrown.
  14. for: Starts a loop that consists of three optional parts: initialization, condition, and iteration.
  15. function: Declares a function that can be invoked later.
  16. if: Used to create conditional statements that execute code based on a specified condition.
  17. import: Used to import functions, objects, or values from a module.
  18. in: Used to check if a property exists in an object.
  19. instanceof: Used to check if an object is an instance of a specific class or constructor.
  20. let: Declares a block-scoped variable that can be reassigned after initialization.
  21. new: Creates an instance of a constructor function or a class.
  22. return: Specifies the value to be returned from a function.
  23. switch: Creates a multi-case statement that evaluates different cases based on a value.
  24. this: Refers to the current object or context in which the code is executing.
  25. throw: Throws an exception (error) that can be caught and handled using try and catch.
  26. try: Defines a block of code to be tested for exceptions.
  27. typeof: Returns a string indicating the data type of a variable or expression.
  28. var: Declares a variable with function scope or global scope.
  29. void: Discards the return value of an expression.
  30. while: Creates a loop that executes a block of code while a specified condition is true.
  31. with: Deprecated keyword that was used to create a scope for accessing object properties without specifying the object.
  32. yield: Pauses the execution of a generator function and returns a value to the caller.
  • Variables: Statements often involve variables that hold data. Variables are like containers for information, such as numbers or text.
  • Operators: These are symbols that perform operations on variables or values. For instance, + for addition, `` for subtraction, = for assignment, etc.
  • Expressions: Expressions combine variables, values, and operators to create a specific action. For example, num1 + num2 is an expression that calculates the sum.

Putting Statements Together: Statements can be combined to create more complex actions. For instance, using an if statement to perform an action only if a certain condition is met:


let temperature = 25;

if (temperature > 30) {
    alert("It's hot outside!");
} else {
    alert("It's comfortable outside.");
}


Conclusion: JavaScript statements are the heart of web development, enabling your website to come alive with interactivity. By understanding the basics of statements, keywords, variables, and expressions, you're well on your way to creating dynamic and engaging web experiences. Start experimenting with simple statements and build your way up to more complex functionalities!