The Front-End
JavaScript
JavaScript Basics

Variables, Data Types, and Operators in JavaScript

  1. Variables
  2. Data Types
  3. Operators
  4. Writing and Executing Basic Scripts

Variables

Variables are used to store and manipulate data in a program. In JavaScript, you declare variables using the var, let, or const keyword. The let and const keywords were introduced in ECMAScript 6 (ES6) and are preferred over var due to their block-scoping behavior.

Example:

// Declaring variables
let age = 25;
const name = "John";
var count = 0; // Avoid using var for better scoping

Data Types

JavaScript has several primitive data types and objects. Primitive data types include:

  • Number: Represents numeric values.
  • String: Represents sequences of characters.
  • Boolean: Represents true or false values.
  • Undefined: Represents an uninitialized variable.
  • Null: Represents the absence of a value.
  • Symbol: Introduced in ES6, represents unique identifiers.

Example:

let num = 42; // Number
let text = "Hello, World!"; // String
let isTrue = true; // Boolean
let notDefined; // Undefined
let noValue = null; // Null
let uniqueSymbol = Symbol("unique"); // Symbol

Operators

Operators are symbols used to perform operations on variables and values. They include arithmetic, assignment, comparison, logical, and other types of operators.

Example:

let a = 5;
let b = 10;
 
// Arithmetic operators
let sum = a + b; // 15
let difference = a - b; // -5
let product = a * b; // 50
let quotient = a / b; // 0.5
let remainder = a % b; // 5
 
// Comparison operators
let isEqual = a === b; // false
let isNotEqual = a !== b; // true
let isGreaterThan = a > b; // false
let isLessThan = a < b; // true
 
// Logical operators
let andResult = (a < 10) && (b > 5); // true
let orResult = (a < 10) || (b < 5); // true
let notResult = !(a === b); // true

Writing and Executing Basic Scripts

You can write JavaScript scripts directly within HTML files or in separate .js files. To execute scripts in an HTML file, use the <script> tag.

Example (Inline Script):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic Script Example</title>
</head>
<body>
  <script>
    // Inline script
    let message = "Hello, JavaScript!";
    console.log(message);
  </script>
</body>
</html>

Example (External Script):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>External Script Example</title>
  <script src="myscript.js" defer></script>
</head>
<body>
  <!-- HTML content -->
</body>
</html>

External Script File (myscript.js):

// myscript.js
let message = "Hello, JavaScript!";
console.log(message);

These examples cover the basics of variables, data types, operators, and how to write and execute basic scripts in JavaScript. As you explore further, you'll encounter more advanced concepts and features that contribute to the flexibility and power of the language.