JavaScript Basics: Introduction and Understanding Data Types

JavaScript Basics: Introduction and Understanding Data Types

Introduction to JavaScript

JavaScript is one of the main technologies of web development, alongside HTML and CSS. It gives interactivity to websites making them more dynamic. The essentials of JavaScript are covered below

What is JavaScript?

JavaScript is a high-level, interpreted programming language. It’s primarily used for:

  • Client-side scripting: Adding dynamic behavior to web pages

  • Server-side scripting: In environments like Node.js.

  • Mobile and desktop app development: With frameworks / library like React Native and Electron etc.

Adding JavaScript to Website

We can include JavaScript in HTML file in three main ways:

  1. Inline JavaScript:

    <button onclick="alert('Hello!')">Click me!</button>

  2. Internal JavaScript (within <script> tags):

    <script> alert('Hello from internal script!'); </script>

  3. External JavaScript (linking other .js file):

    <script src="script.js"></script>

Syntax Basics

  • Case-sensitive: myVariable and myvariable are different.

  • Statements end with a semicolon ;

  • Comments:

    • Single-line: // This is a comment

Multi-line: /* This is a multi-line comment */

Variables in JavaScript

Variables are containers for storing data values. In JavaScript, we declare variables using:

  • var (old, function-scoped)

  • let (modern/ ES 6, block-scoped)

  • const (ES 6/for constants, block-scoped)

      let age = 25;
      const name = "John";
      var isActive = true;
    

Data Types in JavaScript

JavaScript is a dynamically typed language, meaning we don’t need to specify data types when declaring variables. Here are the basic data types:

String: Textual data,

Number: Numerical data

Boolean: Represents logical values: true or false

Null: intentional absence of value.

Undefined: A variable that has been declared but not assigned a value.

Object: Used to store collections of data or more complex entities.

Array (a special type of object): Used to store multiple values.

Below are the examples:

let greeting = "Hello, world!";

let age = 30;
let price = 99.99;

let isLoggedIn = true;

let result = null;

let score;
console.log(score); // undefined

let person = { name: "Alice", age: 25 };

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

Dynamic Typing Example

JavaScript allows variables to change types

let data = 42; // first this is a Number data = "Now a string"; // con to String

Type Checking

To check the type of a variable, we can use the typeof operator

console.log(typeof 42); // number
console.log(typeof "Hello!"); // string
console.log(typeof true); // boolean
console.log(typeof null); // object
console.log(typeof undefined); // undefined

Operators in JavaScript

JavaScript provides a wide range of operators for performing operations on data:

  1. Arithmetic Operators: Perform basic mathematical operations.

  2. Assignment Operators: Used to assign values to variables.

  3.  let sum = 5 + 3; // 8
     let remainder = 10 % 3; // 1
    
     let x = 10;
     x += 5; // x is now 15