DEV Community

Cover image for JavaScript Basics: Introduction, Syntax, Variables, and Data Types
Sharique Siddiqui
Sharique Siddiqui

Posted on

JavaScript Basics: Introduction, Syntax, Variables, and Data Types

#javascript #webdev #beginners #frontend

When it comes to web development, JavaScript is one of the core technologies you need to master. It adds interactivity, logic, and dynamic behavior to websites. In this blog, we’ll walk through the fundamentals of JavaScript—its purpose, syntax, variables, and data types—to build a strong foundation for your coding journey.

What is JavaScript?

JavaScript is a high-level, interpreted programming language primarily used to make web pages interactive. While HTML provides the structure and CSS handles styling, JavaScript enables features like image sliders, dynamic form validation, and even complex single-page applications.

  • Client-side: Runs directly in the user’s browser.
  • Server-side: With environments like Node.js, JavaScript runs on servers too.
  • Importance: Almost every modern website uses JavaScript, making it essential for front-end and full-stack development.

JavaScript Syntax Basics

Like every programming language, JavaScript has a defined syntax (rules on how code should be written). Some key points are:

1.Case Sensitivity: JavaScript is case-sensitive. For example, MyVar and myvar are different identifiers.
2.Statements: End with a semicolon (;). While not always mandatory, using them helps avoid errors.

3.Comments:

  • Single-line: // your comment
  • Multi-line: /* your comment block */
Example: 
javascript
// This is a single-line comment
let message = "Hello, world!"; // Statement
Enter fullscreen mode Exit fullscreen mode

Variables in JavaScript

Variables store data that can be used and manipulated in your program.

Declaration Keywords:
  • var – the older way, function-scoped.
  • let – block-scoped, preferred for variables that may change.
  • const – block-scoped, used for constants (values that never change).
Example: 
javascript
var name = "Alice";   // function-scoped
let age = 25;         // block-scoped
const country = "India"; // cannot be reassigned
Enter fullscreen mode Exit fullscreen mode

Variable Naming Rules

  • Names can contain letters, digits, underscores, and $.
  • Must start with a letter, _, or $.
  • Cannot use JavaScript reserved words (e.g., let, class).

Data Types in JavaScript

JavaScript is a dynamically typed language—meaning you don’t need to declare the type of a variable beforehand; it is determined at runtime.

There are two categories of data types:

1. Primitive Data Types

  • String – "Hello"
  • Number – 42 or 3.14
  • Boolean – true or false
  • Undefined – a declared variable with no assigned value
  • Null – represents intentional "no value"
  • BigInt – for very large integers
  • Symbol – a unique value, often used as object keys

2. Non-Primitive (Reference) Data Types

  • Objects – collections of key-value pairs
  • Arrays – ordered lists of values
  • Functions – reusable blocks of code
Examples: 
javascript
let str = "JavaScript";     // String
let num = 123;              // Number
let isActive = true;        // Boolean
let notAssigned;            // Undefined
let emptyValue = null;      // Null
let bigNumber = 12345678901234567890n; // BigInt

let person = { name: "Alice", age: 25 }; // Object
let colors = ["red", "blue", "green"];   // Array
Enter fullscreen mode Exit fullscreen mode

Final Thoughts

JavaScript forms the backbone of interactive web development. Understanding its syntax, variables, and data types gives you the confidence to start writing scripts that bring your web pages to life.

Stay tuned for more insights as you continue your journey into the world of web development!

Check out theYouTubePlaylist for great JavaScript content for basic to advanced topics.

Please Do Subscribe Our YouTube Channel for clearing programming concept and much more ...CodenCloud

Top comments (0)