DEV Community

Cover image for JavaScript Basics
Kesavarthini
Kesavarthini

Posted on

JavaScript Basics

๐ŸŒ What is JavaScript and How It Works?
JavaScript is a high-level scripting language used to add functionality to web pages.

๐Ÿ‘‰ It controls how a website behaves.

๐Ÿ”น Example:

  • Button click actions
  • Form validations
  • Showing alerts
  • Animations
  • Dynamic content updates

๐Ÿง  Where JavaScript is Used?

  • ๐ŸŒ Websites (Frontend)
  • โš™๏ธ Server-side apps (Node.js)
  • ๐Ÿ“ฑ Mobile apps (React Native)
  • ๐ŸŽฎ Games and interactive apps

โš™๏ธ How JavaScript Works?

JavaScript runs inside a web browser.

๐Ÿ”น Step-by-step working:

  1. You write JavaScript code

Example:

console.log("Hello World");
Enter fullscreen mode Exit fullscreen mode

2. Browser receives the code

When you open a webpage, the browser loads HTML, CSS, and JavaScript.

3. JavaScript engine executes it

Every browser has a JavaScript Engine:

Chrome โ†’ V8 engine
Firefox โ†’ SpiderMonkey
Safari โ†’ JavaScriptCore

4. Code is executed line by line

JavaScript is interpreted, so it runs step by step.

5. Output is shown

Example output:
Hello World

Simple Real-Life Example

๐Ÿ‘‰ Think of a website like a car:

  • HTML โ†’ Structure (body of car)
  • CSS โ†’ Design (paint & look)
  • JavaScript โ†’ Engine (makes it move)

โšก Important Features of JavaScript

  • Runs in browser
  • Easy to learn
  • Lightweight language
  • Supports dynamic behavior
  • Works with HTML & CSS

๐ŸŽฏ Example Program

let name = "Akalya";

console.log("Welcome " + name);
Enter fullscreen mode Exit fullscreen mode

Output:

Welcome Akalya

Enter fullscreen mode Exit fullscreen mode

๐Ÿง  Data Types in JavaScript

JavaScript has two main types of data:

๐Ÿ”น 1. Primitive Data Types

  • Number โ†’ 10, 20
  • String โ†’ "Hello"
  • Boolean โ†’ true, false
  • Undefined โ†’ variable declared but not assigned
  • Null โ†’ empty value

Example:

let age = 20;
let name = "JS";
let isStudent = true;
Enter fullscreen mode Exit fullscreen mode

๐Ÿ”น 2. Non-Primitive Data Types

  • Array โ†’ list of values
  • Object โ†’ collection of key-value pairs

Example:

let numbers = [1, 2, 3];

let person = {
  name: "John",
  age: 25
};
Enter fullscreen mode Exit fullscreen mode

โœ๏ธ Variables in JavaScript

Variables are used to store data.

We can declare variables using:

๐Ÿ”น var

var x = 10;
Enter fullscreen mode Exit fullscreen mode

๐Ÿ”น let

let y = 20;
Enter fullscreen mode Exit fullscreen mode

๐Ÿ”น const

const z = 30;
Enter fullscreen mode Exit fullscreen mode

Difference Between var, let, const
var

  • Old method
  • Can redeclare
  • Can change value

let

  • Modern
  • Cannot redeclare
  • Can change value

const

  • Constant
  • Cannot redeclare
  • Cannot change value

๐ŸŽฏ Simple Example

let name = "JavaScript";
const version = 2024;

console.log(name);
console.log(version);
Enter fullscreen mode Exit fullscreen mode

Top comments (0)