JavaScript is a popular programming language for the web. It is used to make websites interactive, dynamic, and user‑friendly.
This guide explains all JavaScript concepts in very simple words, perfect for beginners, students, and interview preparation.
1. What is JavaScript?
JavaScript is a client‑side scripting language that runs in the browser.
Uses of JavaScript
- Form validation
- Button click actions
- Dynamic content update
- Games & animations
- Web apps (React, Angular, Node.js)
2. How JavaScript Works
JavaScript runs inside the browser (Chrome, Edge, Firefox).
<script>
alert("Hello JavaScript");
</script>
3. Variables
Variables store data.
let name = "Krishna";
const age = 25;
var city = "Chennai";
Variable Types
- let – changeable value (recommended)
- const – fixed value
- var – old method (avoid)
4. Data Types
JavaScript has dynamic data types.
| Type | Example |
|---|---|
| Number | 10, 3.5 |
| String | “Hello” |
| Boolean | true / false |
| Undefined | let x; |
| Null | null |
| Object | {} |
| Array | [] |
let price = 100;
let name = "JS";
let isActive = true;
5. Operators
Arithmetic Operators
let a = 10 + 5;
Comparison Operators
10 == "10" // true
10 === "10" // false
Logical Operators
&& || !
6. Conditional Statements
if else
let age = 18;
if (age >= 18) {
console.log("Eligible");
} else {
console.log("Not Eligible");
}
switch
let day = 1;
switch(day) {
case 1: console.log("Monday"); break;
default: console.log("Invalid");
}
7. Loops
Loops repeat code.
for loop
for (let i = 1; i <= 5; i++) {
console.log(i);
}
while loop
let i = 1;
while (i <= 5) {
console.log(i);
i++;
}
8. Functions
Functions perform tasks.
function greet(name) {
return "Hello " + name;
}
Arrow Function
const add = (a, b) => a + b;
9. Arrays
Arrays store multiple values.
let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits[0]);
Array Methods
- push()
- pop()
- map()
- filter()
10. Objects
Objects store data in key‑value form.
let user = {
name: "Krishna",
age: 25
};
11. JavaScript OOP Concepts
Class & Object
class Person {
constructor(name) {
this.name = name;
}
}
let p1 = new Person("Raj");
Inheritance
class Student extends Person {
study() {
console.log("Studying");
}
}
Encapsulation
Data hiding using methods.
Polymorphism
Same method, different behavior.
12. DOM (Document Object Model)
DOM allows JavaScript to control HTML.
document.getElementById("title").innerHTML = "Hello";
Common DOM Methods
- getElementById()
- querySelector()
- addEventListener()
13. Events
Events happen on user actions.
document.getElementById("btn")
.addEventListener("click", function() {
alert("Button Clicked");
});
14. Error Handling
try {
x = y + 1;
} catch (e) {
console.log("Error occurred");
}
15. Asynchronous JavaScript
setTimeout
Explanation:setTimeout is used to run code after a fixed delay. It does not stop the program; it waits in the background and executes later.
Why we use it?
- Delays messages
- Simulate loading
- Run code after some time
setTimeout(() => {
console.log("Hello");
}, 2000);
```js
setTimeout(() => {
console.log("Hello");
}, 2000);
Promise
Explanation:
A Promise represents a value that will be available in the future.
It has 3 states:
- Pending
- Fulfilled (success)
- Rejected (error)
Why we use it?
- Handle async tasks (API, file load)
- Avoid callback problems
let promise = new Promise((resolve, reject) => {
resolve("Success");
});
```js
let promise = new Promise((resolve, reject) => {
resolve("Success");
});
async / await
Explanation:async and await make asynchronous code look simple like normal code.await waits for the promise to finish before moving to the next line.
Why we use it?
- Clean code
- Easy to understand
- Less errors
async function fetchData() {
let data = await promise;
console.log(data);
}
```js
async function fetchData() {
let data = await promise;
console.log(data);
}
16. JSON
JSON is used to exchange data.
let obj = JSON.parse('{"name":"JS"}');
17. JavaScript File Handling (Browser)
<input type="file" onchange="readFile(this)">
<script>
function readFile(input) {
let file = input.files[0];
let reader = new FileReader();
reader.onload = () => console.log(reader.result);
reader.readAsText(file);
}
</script>
18. Why JavaScript is Important
- Used in all websites
- Required for Frontend & Full‑Stack jobs
- Works with React, Node, Angular
Final Summary
If you know:
- Variables & Functions
- Arrays & Objects
- DOM & Events
- OOP Concepts
- Async JavaScript
👉 You are JavaScript ready 🚀
