Basic Javascript You Must Know
i am learner whatever i will learn i will write here
basic things you must know !!!
What is JavaScript?
A high-level, interpreted, multi-paradigm language (supports object-oriented & functional styles).
It runs in the browser (client-side) but also on the server using Node.js.
Conforms to the ECMAScript standard.
Why Learn JavaScript?
Powers all interactive web experiences.
Foundation for frameworks like React, Angular, Vue.
Can build full-stack apps (Node.js), mobile (React Native), and desktop apps (Electron).
Setup:
Use VS Code with the Live Server extension for instant reload.
Write code in separate .js files linked via <script src="main.js"></script>.
Output Basics:
alert("Hello") → not recommended for debugging.
Use console.log(), console.warn(), console.error().
Open browser Developer Tools → Console.
Variables:
Use let and const (avoid var).
let allows reassignment; const doesn’t.
Example:
js
const name = "John";
let score = 10;
score = 20;
Data Types:
Primitive: String, Number, Boolean, Null, Undefined, Symbol.
Objects: Arrays, Object Literals, Functions.
Check type: typeof variable.
🚀 Part 2: Core Syntax & Logic Essentials
Strings:
Use Backticks ` (template literals):
js
console.log(`My name is ${name}`);
- Methods: .length, .toUpperCase(), .split(', ').
Arrays:
Create: const fruits = ['apple', 'orange'];
Add/Remove: .push(), .unshift(), .pop()
Check: Array.isArray(fruits)
Find index: .indexOf('orange').
Objects:
Key-value pairs:
js
const person = {
name: 'John',
age: 30,
hobbies: ['music', 'sports'],
address: { city: 'Boston' }
};
Access: person.address.city
Destructure:
js
const { name, age } = person;
JSON:
Convert:
js
JSON.stringify(object)
JSON.parse(jsonString)
Loops:
For loop:
js
for (let i = 0; i < 10; i++) console.log(i);
For...of loop: for (let item of items).
Higher-order methods:
.forEach() → iterate.
.map() → transform.
.filter() → filter results.
Conditionals:
if, else if, else
Equality: === (strict), == (loose).
Logical operators: && (and), || (or).
Ternary:
js
const color = x > 10 ? 'red' : 'blue';
🧩 Functions
Functions are reusable blocks of code that perform specific tasks.
Declared using the function keyword:
js
function greet(name) {
console.log(`Hello ${name}`);
}
greet('John');
Can return values using return.
Functions may have default parameters:
js
function add(a = 1, b = 1) {
return a + b;
}
🌀 Arrow Functions (ES6)
Introduced in ES6 for shorter syntax and lexical this.
Example comparison:
js
// Regular
function add(x, y) { return x + y; }
// Arrow
const add = (x, y) => x + y;
If only one statement → implicit return; no curly braces or return.
For a single parameter, parentheses are optional.
Arrow functions don’t rebind their own this — they borrow it lexically (from their defining scope).
🏗️ Constructor Functions & Prototypes (ES5‑style OOP)
Before classes, JavaScript used constructor functions with this and prototype.
js
function Person(firstName, lastName, dob) {
this.firstName = firstName;
this.lastName = lastName;
this.dob = new Date(dob);
}
Add shared methods to the prototype — more memory efficient than defining them inside each instance:
js
Person.prototype.getFullName = function () {
return ${this.firstName} ${this.lastName};
};
Create an object:
js
const person1 = new Person('John', 'Doe', '4‑03‑1990');
console.log(person1.getFullName());
🧱 ES6 Classes
ES6 introduced class syntax for cleaner OOP structure (built on prototypes).
js
class Person {
constructor(firstName, lastName, dob) {
this.firstName = firstName;
this.lastName = lastName;
this.dob = new Date(dob);
}
getFullName() {
return ${this.firstName} ${this.lastName};
}
}
Create instances with new Person().
You can extend classes to inherit behavior:
js
class Employee extends Person {
constructor(firstName, lastName, job) {
super(firstName, lastName);
this.job = job;
}
}
🪟 Window Object & DOM
The window object represents the browser environment.
Access global functions, alerts, timers:
js
window.alert('Hi');
console.log(window.innerWidth);
- The document object represents the HTML loaded in the browser.
🌳 DOM Selection
Selecting HTML elements via JavaScript methods:
js
document.getElementById('my-id');
document.querySelector('.class-name');
document.querySelectorAll('p');
document.getElementsByClassName('demo');
querySelector → first match.
querySelectorAll → NodeList (similar to array).
🎨 Manipulating the DOM
Change content/styles:
js
const title = document.querySelector('h1');
title.textContent = 'Hello JS';
title.style.color = 'blue';
Add or remove elements:
js
const ul = document.querySelector('.items');
ul.remove();
ul.lastElementChild.textContent = 'Updated Item';
⚙️ Events
Listen and handle user actions:
js
const btn = document.querySelector('.btn');
btn.addEventListener('click', (e) => {
e.preventDefault();
console.log('Button Clicked');
});
Event types include click, mouseover, submit, keydown.
- e.preventDefault() stops default browser behavior.
🧾 Form Script
Handle form submission and validation:
js
const form = document.querySelector('#my-form');
const nameInput = document.querySelector('#name');
form.addEventListener('submit', (e) => {
e.preventDefault();
if (nameInput.value === '') {
alert('Please fill the field');
} else {
console.log('Success:', nameInput.value);
}
});
