DEV Community

Cover image for JavaScript Basics: Understanding Syntax and Structure
Pachi ๐Ÿฅ‘ for Webcrumbs

Posted on

JavaScript Basics: Understanding Syntax and Structure

JavaScript Basics: Understanding Syntax and Structure

Welcome back to our "JavaScript: From Novice to Expert" series!
Today, weโ€™re diving into the core of JavaScriptโ€”its syntax and structure. Understanding these basics is super important for any developer starting out.
By the end of this article, you'll be familiar with how to write basic JavaScript code, including defining variables, using data types, creating functions, and controlling the flow of your program.


What is JavaScript Syntax?

Syntax refers to the set of rules that define how code is written and interpreted. In JavaScript, as in any language, following these rules ensures that your programs run correctly. We will explore how to write statements, use operators, and organize your code effectively.

1. Writing Your First JavaScript Statement

Letโ€™s start with a simple statement in JavaScript:

console.log('Hello, world!');
Enter fullscreen mode Exit fullscreen mode

This line of code outputs 'Hello, world!' to the console, a basic yet powerful way to begin our JavaScript journey.

2. Variables and Data Types

Variables are fundamental to any programming language. They allow you to store information. In JavaScript, you can declare a variable using let, const, or var:

let message = 'Hello, world!';
const PI = 3.14;
Enter fullscreen mode Exit fullscreen mode

JavaScript is dynamically typed, but it supports several data types:
- String: Textual data enclosed in quotes. Example: 'Hello, world!'
- Number: Numeric data, without distinction between integers and floats. Example: 42, 3.14
- BigInt: An integer with arbitrary precision. Useful for very large numbers. Example: 9007199254740991n
- Boolean: Represents a logical entity and can have two values: true and false.
- Null and Undefined: null represents a deliberate absence of any object value; undefined represents a variable that has not been assigned a value.
- Symbol: A unique and immutable primitive value, often used for object properties to provide a unique identifier for property keys.

3. Creating Functions

Functions are blocks of code designed to perform particular tasks, reusable throughout your scripts:

function greet(name) {
    console.log('Hello, ' + name);
}
greet('Alice');
Enter fullscreen mode Exit fullscreen mode

This function greet takes a parameter name and prints a greeting message to the console.

4. Control Structures

Control structures manage the flow of your code. Here are basic examples:

  • If statement:
  if (message === 'Hello, world!') {
      console.log('Thatโ€™s the basic greeting.');
  }
Enter fullscreen mode Exit fullscreen mode
  • For loop:
  for (let i = 0; i < 5; i++) {
      console.log(i);
  }
Enter fullscreen mode Exit fullscreen mode

Baby steps โญ

Congratulations!
You now understand the basic syntax and structure of JavaScript.
These elements are the building blocks from which all JavaScript applications are built. Keep practicing these concepts, and you will become more comfortable with more complex scripts and applications.

Continue to explore and experiment with what you have learned today.
Donโ€™t forget to check back for our next article, where we will learn about debugging tools and techniques.


If you enjoyed this series, show your support by giving a star to our GitHub repository. We are building the modern web, together.

Thanks for reading!

Pachi ๐Ÿฅ‘

Top comments (2)

Collapse
 
jonrandy profile image
Jon Randy ๐ŸŽ–๏ธ

You've missed BigInt and Symbol in the data types.

Collapse
 
pachicodes profile image
Pachi ๐Ÿฅ‘

Thanks for the reminder! Updated