Skip to content

Latest commit

 

History

History
1303 lines (898 loc) · 34.2 KB

Basic.md

File metadata and controls

1303 lines (898 loc) · 34.2 KB

Back to Javascript Home Page

✅ Basic Topics

These are fundamentals every JavaScript developer must know:

What is JavaScript?

JavaScript is a high-level, interpreted, lightweight, and multi-paradigm programming language that is one of the core technologies of the web, alongside HTML and CSS.

It allows developers to build interactive, dynamic, and responsive user experiences in the browser, and also power server-side applications using environments like Node.js. 🚀🖥️💡

📌 Key Characteristics:

  • Interpreted: Runs directly in the browser (or in Node.js) without the need for compilation.
  • Dynamically typed: You don’t need to define variable types explicitly.
  • Single-threaded: Uses one call stack, but handles async tasks via the event loop.
  • Prototype-based: Inheritance is done using prototypes instead of classical classes (though class syntax exists now).
  • Multi-paradigm: Supports functional, procedural, and object-oriented programming styles.

📜 A Brief History:

  • Created in 1995 by Brendan Eich in just 10 days at Netscape.
  • Originally called Mocha, then LiveScript, and finally JavaScript (for marketing reasons, not related to Java).
  • Standardized as ECMAScript (ES), with ES6 (2015) being the most influential modern update. 📅📘📈

🌐 Where is JavaScript Used?

  • Client-side (Browser): DOM manipulation, form validation, UI interactivity.
  • Server-side: Backend APIs with Node.js, Express.js, etc.
  • Mobile Apps: Frameworks like React Native, Ionic.
  • Desktop Apps: Electron-based apps like VSCode, Slack.
  • Game Development: 2D/3D games using libraries like Phaser or Three.js.
  • IoT & Robotics: With platforms like Johnny-Five.

💬 Why Learn JavaScript?

  • It’s the only programming language that natively runs in browsers.
  • Massive community, endless job opportunities, and powerful ecosystem.
  • Acts as a gateway to learning frontend frameworks (React, Vue, Angular) and full-stack development.

🧪 Simple Example:

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Vishnu")); // Output: Hello, Vishnu!

Back to Top

JavaScript Engine & How It Runs in the Browser

JavaScript doesn’t work on its own — it needs a JavaScript engine to interpret and execute the code. Every modern browser comes with its own JS engine that runs your code behind the scenes.

Let’s break down how it works, from engine to execution. 🛠️🧩🔍

🧠 What is a JavaScript Engine?

A JavaScript Engine is a program that takes your JS code, parses it, optimizes it, and finally executes it line by line.

Modern JS engines do much more than just interpretation — they compile, optimize, and recompile code to make it fast.

📌 Popular JS Engines:

  • V8 – Chrome, Edge, Node.js
  • SpiderMonkey – Firefox
  • JavaScriptCore – Safari
  • Chakra – (Old) Microsoft Edge

🧩 Main Components of a JS Engine

  1. Parser: Breaks down your code into a syntax tree (AST – Abstract Syntax Tree).
  2. Interpreter: Quickly converts AST to bytecode and starts executing it.
  3. Compiler (JIT): Just-In-Time compiler that takes frequently used code and compiles it into optimized machine code for faster execution.
  4. Garbage Collector: Automatically frees memory that's no longer needed.

🧪 Example Flow:
Your Code → Parser → AST → Bytecode → Optimized Machine Code

🌀 How JavaScript Runs in the Browser

JavaScript code runs inside a browser’s environment, where the JS engine is part of a bigger system including:

📦 Web APIs
🧵 Call Stack
📤 Callback Queue
⏳ Event Loop

📑 Execution Steps in the Browser:

  1. Load HTML → CSS → JS

    • The browser loads and parses the HTML.
    • If it hits a <script> tag, it pauses rendering and sends JS to the engine.

  2. Parsing & Compilation

    • JS engine parses the code into tokens and builds an AST.
    • Bytecode is generated and compiled by the JIT compiler if needed.

  3. Execution via Call Stack

    • Synchronous code runs immediately via the call stack.
    • Asynchronous operations (setTimeout, fetch) are sent to Web APIs.

  4. Asynchronous Handling

    • After completing, async tasks move to the callback queue.
    • The event loop checks if the call stack is empty, and then pushes callback tasks to be executed.

🔁 Visual Simplification:

JavaScript Code
   ↓
JavaScript Engine (V8)
   ↓
Parse → AST → Bytecode → Optimized Code
   ↓
Execution in Browser (Call Stack + Web APIs + Event Loop)

💥 Key Takeaways:

  • JS Engine handles execution, but the browser provides the environment (DOM, timers, fetch).
  • Modern engines are blazing fast thanks to JIT compilation and smart memory management.
  • The event loop enables JavaScript to be asynchronous even though it's single-threaded.

Back to Top

Code Editors & Setup

While JavaScript can be written in any plain text editor, using a modern code editor improves your speed, efficiency, and debugging skills. 💡

🔧 Recommended Code Editors:

  • Visual Studio Code (VS Code) – Most popular, rich extensions, built-in terminal, Git support.
  • Sublime Text – Lightweight and fast.
  • WebStorm – Full-featured but paid.

⚙️ Suggested Setup (for Beginners):

  1. Install VS Code
  2. Add Extensions:
    • ESLint 🧹
    • Prettier 🎨
    • JavaScript Snippets ⚡
  3. Enable autosave and format-on-save for better consistency.

🔥 Bonus:

You can also try out JavaScript instantly in the browser using tools like:

Back to Top

Variables

Variables are containers that store data. In JavaScript, you can declare variables using var, let, or const. Choosing the right one affects the behavior, scope, and mutability of your code. 📌📚⚙️

🔹 var, let, and const

Keyword Scope Reassignable Redeclarable Hoisted Use Case
var Function ✅ ✅ ✅ (undefined) Legacy code
let Block ✅ ❌ ✅ (TDZ*) Preferred for mutable values
const Block ❌ ❌ ✅ (TDZ*) Preferred for constants

*TDZ = Temporal Dead Zone: Variable exists but can't be accessed before declaration 🧟‍♂️⚠️🧊

🔸 Examples:

var name = "Alice";
let age = 25;
const country = "India";

🟢 var is function-scoped, allows redeclaration, and hoists with undefined.

🟡 let is block-scoped, doesn't allow redeclaration in the same scope, and hoists with TDZ.

🔴 const is block-scoped and must be initialized. It doesn’t allow reassignment.

🔍 Scope Behavior Example:

if (true) {
  var a = 10;
  let b = 20;
  const c = 30;
}

console.log(a); // ✅ 10
console.log(b); // ❌ ReferenceError
console.log(c); // ❌ ReferenceError

📎 var leaks out of the block — not recommended for block-scoped code! 🔓🚨📛

🔒 const and Mutability

Using const doesn’t make the value immutable — only the binding.

const arr = [1, 2, 3];
arr.push(4);     // ✅ Works
arr = [5, 6];    // ❌ Error: assignment to constant variable

So, use const by default, and only switch to let if reassignment is needed. ✅🔁🛡️

✅ Best Practices

  • Prefer const unless you know the variable will change.
  • Use let when mutation is required.
  • Avoid var in modern code unless working with legacy systems.

Back to Top

Data Types

JavaScript is a dynamically typed language, meaning you don’t have to declare variable types — the type is determined at runtime. 🎯💡🕒

It has two major categories of data types:

🧱 1. Primitive Data Types (Immutable, stored by value)

  • Number → 123, 3.14, -42
  • String → "Hello", 'World', `Template`
  • Boolean → true, false
  • null → Intentional absence of value
  • undefined → Declared but not assigned
  • Symbol → Unique and immutable identifier (ES6)
  • BigInt → For arbitrarily large integers (ES2020)
let name = "Alice";
let age = 30;
let isLoggedIn = true;
let id = Symbol("id");
let big = 1234567890123456789012345678901234567890n;

📌 Primitives are compared by value and are immutable. That means once created, their value can’t be changed (though variables can point to a new one). 🔐🎈🔁

🗃️ 2. Reference Data Types (Mutable, stored by reference)

  • Object → { name: "John" }
  • Array → [1, 2, 3]
  • Function → function() {} or arrow functions
  • Date, RegExp, etc.
let user = { name: "John", age: 25 };
let colors = ["red", "green", "blue"];

📎 These are stored by reference and are mutable — modifying them affects the original. ⚠️

🧪 Checking Data Types

Use typeof:

typeof "hello"       // "string"
typeof 123           // "number"
typeof null          // "object" 😱 (quirk!)
typeof undefined     // "undefined"
typeof {}            // "object"
typeof []            // "object"
typeof (() => {})    // "function"

🔍 Note: typeof null returns "object" — this is a long-standing bug in JavaScript. 🐞📎🧱

📏 Type Conversion

JavaScript does implicit and explicit type conversion (type coercion).

"5" + 1     // "51" → string concatenation
"5" - 1     // 4   → string converted to number
Number("123") // 123
Boolean("")   // false

🔄 This can lead to confusing bugs, so understanding coercion is vital. ⚖️🚨🔧

🔚 Summary

  • JavaScript has 7 primitive types and multiple reference types.
  • Always be cautious with comparisons and coercion.
  • Use typeof, Array.isArray(), and strict equality === for clarity.

🧠 Knowing your data types makes debugging and designing logic much easier! 🎯🔍📘

Back to Top

Operators

Operators are special symbols used to perform operations on operands (variables and values). They are the building blocks of logic in any JavaScript program. 🧱⚒️🚀

➗ Arithmetic Operators ➕➖✖️

Used to perform mathematical operations.

  • + Addition
  • - Subtraction
  • * Multiplication
  • / Division
  • % Modulus (remainder)
  • ** Exponentiation (ES6)
  • ++ Increment
  • -- Decrement
let x = 10, y = 3;
x + y      // 13
x % y      // 1
x ** y     // 1000

📌 Arithmetic operators work on numbers and sometimes strings (like with +). 🎲📐🧮

🔍 Comparison Operators 🧪⚖️📊

Used to compare two values. Returns a Boolean.

  • == Equal to (with coercion)
  • === Strictly equal (no coercion)
  • != Not equal
  • !== Strictly not equal
  • > Greater than
  • < Less than
  • >= Greater than or equal
  • <= Less than or equal
5 == "5"      // true
5 === "5"     // false
10 > 3        // true

✅ Prefer === and !== for accurate comparisons. 🚫💡📏

🧠 Logical Operators 🧩🔗🎯

Used to combine logical expressions.

  • && AND
  • || OR
  • ! NOT
true && false   // false
true || false   // true
!true           // false

💡 Logical operators are essential for control flow and conditionals. 🔍🧲🔓

📝 Assignment Operators 🪄🧾🎁

Used to assign values to variables.

  • =
  • +=, -=, *=, /=, %=, **=
let a = 5;
a += 3;    // a = a + 3 → 8

📌 These help write cleaner, more concise code. 🧼🔡🧾

🔢 Bitwise Operators ⚙️🔠🧩

Used for binary operations on 32-bit integers.

  • & AND
  • | OR
  • ^ XOR
  • ~ NOT
  • << Left shift
  • >> Right shift
  • >>> Zero-fill right shift
5 & 1      // 1
5 | 1      // 5
5 ^ 1      // 4

⚠️ Rarely used in regular web dev, but powerful for low-level ops. 🧬🔌🧠

❔ Ternary Operator (Conditional) 🔀🧭🎭

A shorthand for if...else:

let age = 20;
let status = (age >= 18) ? "Adult" : "Minor";  // "Adult"

Clean and expressive for simple conditional assignments! ✍️

🧠 Summary

  • Know the differences between == and ===
  • Use logical operators for conditions and flow
  • Ternary is your best friend for quick decisions
  • Understand bitwise, even if you rarely use it

📚 Mastering operators improves your coding fluency drastically! 🎯🧠💪

Back to Top

Type Conversion & Coercion

JavaScript is a dynamically typed language, which means variables can hold any type of data, and the engine automatically converts types when necessary. This behavior is called type coercion, and you can also convert types manually using type conversion. 🧠⚒️🧪

🧙‍♂️ Type Conversion (Explicit) ✍️📐🛠️

You explicitly convert data from one type to another using built-in functions.

  • To String: String(value) or value.toString()
  • To Number: Number(value), parseInt(), parseFloat()
  • To Boolean: Boolean(value)
String(123);      // "123"
Number("456");    // 456
Boolean(0);       // false

📌 Always use explicit conversion when you want full control over the type. 🎛️🧼📏

🎩 Type Coercion (Implicit) ✨🔮🔀

JavaScript automatically converts types behind the scenes in certain operations.

'5' + 1     // "51" (number 1 is coerced to string)
'5' - 1     // 4   (string '5' is coerced to number)
true + 1    // 2   (true is coerced to 1)
false + '2' // "false2"

📌 Coercion can lead to unexpected bugs if not well understood. 🔍🐞😅

📊 Truthy & Falsy Values ⚖️🧪💭

When converting to Boolean, JavaScript treats some values as falsy, and everything else as truthy.

Falsy Values:

  • false
  • 0
  • "" (empty string)
  • null
  • undefined
  • NaN

Everything else is truthy, including:

  • '0'
  • 'false'
  • []
  • {}
Boolean("")     // false
Boolean([])     // true
Boolean(0)      // false
Boolean("0")    // true

🧠 This plays a huge role in conditionals (if, while, etc.). 🛡️🔗🧭

⚠️ Common Gotchas 😬🧨🧩

null == undefined   // true
null === undefined  // false

[] == false         // true
[] === false        // false

'5' == 5            // true
'5' === 5           // false

✅ Use strict equality (===) to avoid bugs due to coercion. 🔍🧯📌

💡 Summary

  • Explicit Conversion = You choose the type.
  • Implicit Coercion = JavaScript chooses the type (sometimes weirdly).
  • Know your truthy/falsy values.
  • Avoid confusion: prefer === over ==.

🎯 Understanding this is crucial to becoming a confident JS developer! 🧠🚀✅

Back to Top

Conditionals

Conditionals let your program make decisions based on certain conditions. You use them to control the flow of execution. 📈⚙️🛣️

✅ if, else if, and else 📏🔍📦

The most basic and widely used control structure.

let age = 20;

if (age >= 18) {
  console.log("You're an adult.");
} else if (age > 12) {
  console.log("You're a teenager.");
} else {
  console.log("You're a child.");
}

🧠 You can have multiple else if blocks, but only one else. 🧱🧭⚙️

🔄 switch Statement 🔘🎚️🎯

Used for multiple possible values of a single expression. It's more elegant than long if-else chains when checking equality.

const fruit = "apple";

switch (fruit) {
  case "apple":
    console.log("It's red.");
    break;
  case "banana":
    console.log("It's yellow.");
    break;
  default:
    console.log("Unknown fruit.");
}

📌 Don't forget to use break to avoid fall-through behavior. 🚫⛓️⏬

⚡ Ternary Operator ❓⏳⚙️

A shorthand if-else, useful for short conditional logic.

let age = 16;
let access = age >= 18 ? "Granted" : "Denied";
console.log(access); // "Denied"

✅ Use ternary for simple conditions only. Avoid nesting for readability. 🪄🌟📉

🧪 Logical Operators in Conditionals 🔗🧠📚

  • && (AND): All conditions must be true
  • || (OR): At least one must be true
  • ! (NOT): Inverts a condition
if (isLoggedIn && userRole === "admin") {
  // do something
}

if (!isEmailVerified) {
  // ask to verify
}

📌 Combine logical operators with conditionals for powerful decision-making logic. 🔌🎯🧰

🧠 Best Practices

  • Use === instead of == to avoid unexpected coercion.
  • Keep ternary usage minimal and readable.
  • Don't over-nest conditionals — extract logic into functions if needed.

🎯 In summary, conditionals are the brain of your logic in JavaScript. Mastering them helps you write dynamic, decision-based programs! 🧠📊🚀

Back to Top

Loops

Loops allow you to repeat a block of code multiple times, either for a fixed number of times or until a condition is met. They're essential for working with arrays, objects, or performing repetitive tasks. 🔧🔁📦

🔄 for Loop 🧮📍📘

Most commonly used loop when the number of iterations is known.

for (let i = 0; i < 5; i++) {
  console.log("Number:", i);
}
  • Initialization: let i = 0
  • Condition: i < 5
  • Increment: i++

📌 Best for fixed-length iteration, like looping over indices. 🧾🎯📅

🔁 while Loop ⏳🔃👣

Runs as long as the condition is true.

let i = 0;
while (i < 5) {
  console.log("While Loop:", i);
  i++;
}

Useful when the number of iterations isn’t known beforehand. 🕵️‍♂️📈🌀

🔂 do...while Loop 🚪🔁🧩

Executes the loop at least once, even if the condition is false initially.

let i = 0;
do {
  console.log("Do While:", i);
  i++;
} while (i < 5);

🛑 Use only when you must run the block at least once. 📍🔄🎬

📦 for...of Loop (ES6) 🧰📬🧭

Used to loop over iterables (arrays, strings, etc.).

const fruits = ["apple", "banana", "mango"];

for (const fruit of fruits) {
  console.log(fruit);
}

✔️ Cleaner and more readable when working with values. 🍎🧼📦

🧱 for...in Loop 🗂️🧾🔍

Used to loop over enumerable properties of objects.

const user = { name: "Alice", age: 25 };

for (const key in user) {
  console.log(key, user[key]);
}

⚠️ Avoid for arrays – use for...of or for instead. 📛🛑📉

🛑 break and continue 🔚🎯🔀

  • break: Exits the loop entirely.
  • continue: Skips the current iteration and moves to the next.
for (let i = 0; i < 5; i++) {
  if (i === 3) break;
  console.log(i); // 0, 1, 2
}

⚙️ Use wisely to control loop flow effectively. 🧠🚧🕹️

✅ Best Practices 📌📘🧠

  • Use for...of for clean iteration over arrays and strings.
  • Avoid infinite loops: always ensure your condition changes.
  • Prefer functional methods (map, filter, reduce) for array processing when possible.

🎯 Loops are a backbone of repetitive logic — mastering all types gives you the flexibility to tackle any logic scenario with elegance! 🛠️🔂🌈

Back to Top

Functions

Functions are reusable blocks of code designed to perform a particular task. They help keep your code modular, readable, and maintainable. You can define a function once and use it multiple times. 💡🔂📚

🔹 Function Declaration vs Function Expression 📝🆚🧾

Function Declaration:

function greet(name) {
  return `Hello, ${name}!`;
}
  • Hoisted (can be called before declaration)
  • Has a name

Function Expression:

const greet = function(name) {
  return `Hello, ${name}!`;
};
  • Not hoisted
  • Often used for anonymous functions

📌 Use expressions for inline logic and declarations for reusable named logic. 🧠📦🔧

🔹 Arrow Functions (ES6) ➡️🏹🚀

A shorter syntax for writing functions. Useful for small, concise functions.

const add = (a, b) => a + b;
  • No this, arguments, or super binding
  • Cannot be used as constructors
  • Great for callbacks and one-liners

⚠️ Avoid arrow functions when you need access to this in objects. ❗🧭🔄

🔹 Parameters and Arguments 🧮📬🧾

  • Parameters are variables listed in the function definition.
  • Arguments are actual values passed to the function.
function greet(name = "Guest") {
  console.log(`Hello, ${name}`);
}

✅ Use default parameters to make functions flexible. 🌈🧠🎯

🔹 Rest & Spread in Functions 🌪️📦👐

Rest Parameter: Collects multiple arguments into an array.

function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}

Spread Operator: Expands arrays into individual elements.

const nums = [1, 2, 3];
console.log(Math.max(...nums));

📌 These are great for variadic functions and working with arrays/objects. 🛠️🎉🧃

🔹 Returning Values 🏁🎁🔄

Functions can return a value using the return keyword.

function multiply(x, y) {
  return x * y;
}

If no return is provided, the function returns undefined by default. ⚠️📭🔍

🔹 Callback Functions 🔄📬🧠

A callback is a function passed as an argument to another function to be executed later.

function greet(name, callback) {
  callback(`Hello, ${name}`);
}

Essential for asynchronous operations (e.g., setTimeout, event handlers). ⏱️🎯🎛️

✅ Best Practices 🧽📌🧠

  • Use meaningful function names.
  • Keep functions focused on one task.
  • Prefer arrow functions for short, non-method functions.
  • Document input/output behavior for clarity.

🧩 Mastering functions sets the foundation for asynchronous programming, event-driven architecture, and clean, modular code! 🧱🎯🧪

Back to Top

Arrays

Arrays are ordered collections used to store multiple values in a single variable. They can hold elements of any data type, including other arrays or objects. Arrays are zero-indexed — meaning the first element is at index 0. 🔢📦💡

🔹 Declaration, Access, and Iteration 🏁🔍🔁

Declaration:

const fruits = ["apple", "banana", "mango"];

Access:

console.log(fruits[1]); // "banana"

Update:

fruits[0] = "grape";

Iteration (Looping through arrays):

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

✅ You can also use for...of, forEach(), or map() for iteration. 📌🔄🔍

🔹 Basic Array Methods 🛠️📦🔧

These methods let you manipulate the contents of an array easily:

  • push(item) – Add to the end
  • pop() – Remove from the end
  • shift() – Remove from the start
  • unshift(item) – Add to the start
  • indexOf(item) – Get index of a specific element
const nums = [10, 20, 30];
nums.push(40);      // [10, 20, 30, 40]
nums.pop();         // [10, 20, 30]
nums.shift();       // [20, 30]
nums.unshift(5);    // [5, 20, 30]
nums.indexOf(20);   // 1

🧪 These methods are commonly used for stack, queue, and search operations. 🔁🧠📍

👉 Arrays are fundamental in JavaScript. They’re everywhere — from handling lists of data to manipulating DOM elements, responses from APIs, or storing form inputs! 🌍📥🧱

Next: Let’s look into Array Methods (map, filter, reduce, etc.) — the real power tools of JavaScript! ⚒️🚀🧩

⚙️ Array Methods (map, filter, reduce, etc.) — The Real Power Tools of JavaScript 🛠️🚀🧩

Once you master the basics of arrays, it's time to unlock their full potential using high-order methods. These built-in methods make array manipulation clean, readable, and expressive. 🔥💡🧠

🔹 map() – Transform Each Element 📌🔄🎨

Creates a new array by applying a function to every element.

const nums = [1, 2, 3];
const squares = nums.map(n => n * n); // [1, 4, 9]

Useful when you want to transform or format data.

🔹 filter() – Keep What Passes the Test 🧪✅🚿

Creates a new array with elements that pass a condition.

const scores = [45, 78, 88, 32];
const passed = scores.filter(score => score >= 50); // [78, 88]

Use it to extract matching or valid items.

🔹 reduce() – Boil It Down to a Single Value 🧮⚖️🥄

Reduces the array to a single value (number, string, object, etc.).

const prices = [10, 20, 30];
const total = prices.reduce((sum, val) => sum + val, 0); // 60

Perfect for totals, averages, or even object construction.

🔹 find() – Get the First Match 🧲🔍🛑

Returns the first element that satisfies the condition.

const users = [{id: 1}, {id: 2}];
const user = users.find(u => u.id === 2); // {id: 2}

Stops as soon as it finds a match — faster than filter() in such use-cases.

🔹 some() and every() – Boolean Checks 🔎✅🚫

  • some() checks if at least one element matches
  • every() checks if all elements match
const nums = [1, 3, 5];
nums.some(n => n > 4); // true
nums.every(n => n > 0); // true

Great for quick yes/no conditions on arrays.

🔹 sort() – Reorder the Array 🔢🔄📊

Sorts the array in-place. Be cautious: it modifies the original array!

const points = [40, 100, 1, 5];
points.sort((a, b) => a - b); // [1, 5, 40, 100]

Use a compare function for accurate sorting (especially for numbers).

🔹 flat() and flatMap() – Flatten Nested Arrays 📐📉📦

  • flat() flattens an array
  • flatMap() maps and flattens in one go
const arr = [1, [2, 3], [4, [5]]];
arr.flat(2); // [1, 2, 3, 4, 5]

Ideal for dealing with nested structures or returned arrays from mapping.

🔹 forEach() – Loop Without Return 📘🔁📭

Performs an action on each item, but does not return anything.

[1, 2, 3].forEach(n => console.log(n * 2));

Useful for logging, side effects, or calling external functions.

💡 These methods don’t mutate the original array (except sort()), making them perfect for pure functional programming and cleaner, safer code. 🧼📈🧘

Back to Top

Objects

Objects are one of the core building blocks in JavaScript, used to store related data and functionality together.

They consist of key-value pairs, where the key (property name) is always a string (or symbol), and the value can be anything — string, number, array, object, function, etc.

🔹 Declaring an Object

const user = {
  name: "Alice",
  age: 30,
  isAdmin: true
};

Each entry in the object is a property with a key (name, age, isAdmin) and a value ("Alice", 30, true).

🔹 Accessing Properties – Dot Notation vs Bracket Notation 🔍

Dot Notation (most common):

console.log(user.name); // "Alice"

Bracket Notation (for dynamic or invalid identifiers):

console.log(user["age"]); // 30

Use bracket notation when:

  • The property name is stored in a variable: 
    const key = "isAdmin";
console.log(user[key]); // true
  • The property name contains special characters or spaces: 
    const obj = { "first-name": "Bob" };
console.log(obj["first-name"]); // "Bob"

🔹 Modifying & Adding Properties ✍️➕

You can easily change or add new properties:

user.age = 31;
user.city = "New York";

🔹 Deleting Properties 🧹

Remove a property using the delete operator:

delete user.isAdmin;

🔹 Nesting Objects 🪆

Objects can contain other objects, enabling complex data structures:

const person = {
  name: "John",
  address: {
    city: "Paris",
    zip: "75001"
  }
};

console.log(person.address.city); // "Paris"

🔹 Checking for Property Existence ✅

Use the in operator or hasOwnProperty():

"age" in user;               // true
user.hasOwnProperty("age"); // true

Here you go! Here's the next section covering Advanced Object Techniques with clean structure and subtle emoji decoration:

🧠 Advanced Object Techniques — Destructuring, Built-in Methods & More 🧰🧪🔧

JavaScript objects come packed with powerful features that make data handling more elegant and readable. These advanced techniques are must-haves in your JS toolkit.

🔹 Object Destructuring 🧬

Object destructuring allows you to extract multiple properties into variables in a single statement.

const user = { name: "Alice", age: 30 };

const { name, age } = user;
console.log(name); // "Alice"

You can also rename variables during destructuring:

const { name: userName } = user;
console.log(userName); // "Alice"

🔹 Nested Destructuring 🕳️

Works perfectly with nested objects too:

const person = {
  name: "John",
  address: {
    city: "Paris",
    zip: "75001"
  }
};

const { address: { city } } = person;
console.log(city); // "Paris"

🔹 Default Values in Destructuring 🧷

Assign defaults for missing properties:

const { role = "guest" } = user;
console.log(role); // "guest"

🔹 Object Methods — Object.keys, Object.values, Object.entries 🔍

These built-in methods are perfect for looping over objects or converting them to arrays.

const user = { name: "Alice", age: 30 };

Object.keys(user);   // ["name", "age"]
Object.values(user); // ["Alice", 30]
Object.entries(user); // [["name", "Alice"], ["age", 30]]

Looping with Object.entries():

for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}

🔹 Spread & Rest with Objects 🌪️

Spread operator creates shallow copies:

const updatedUser = { ...user, city: "Berlin" };

Rest operator gathers the remaining properties:

const { name, ...rest } = user;
console.log(rest); // { age: 30 }

🔹 Object.freeze & Object.seal 🧊🔒

Prevent modifications:

Object.freeze(user); // Can't change or add/remove properties
Object.seal(user);   // Can change, but not add/remove properties

🔹 Optional Chaining (?.) & Nullish Coalescing (??) 🛡️

Safely access deeply nested properties:

const city = user?.address?.city ?? "Unknown";

Back to Top

Debugging using console

Debugging is a core skill for any developer. Fortunately, JavaScript offers the console object, which is a handy toolbox to inspect, trace, and troubleshoot your code with ease. Let’s explore how to use it from simple logs to advanced tactics.

🔹 Basic Console Methods 🎯

  • console.log(): Outputs general information.
  • console.error(): Displays error messages (in red).
  • console.warn(): Shows warnings (often in yellow).
  • console.info(): Gives informational messages (not widely different from log() in most browsers).
console.log("Hello world!");
console.error("Something went wrong!");
console.warn("This is a warning!");
console.info("Fetching data...");

🔹 Logging Variables & Expressions 📦

You can log anything — strings, numbers, objects, arrays, functions, etc.

const user = { name: "Alice", age: 30 };
console.log(user);
console.log("User age is:", user.age);

🔹 console.table() 🧮

Perfect for visualizing objects or arrays in a table format.

const users = [
  { name: "Alice", age: 30 },
  { name: "Bob", age: 25 }
];

console.table(users);

🔹 console.group() & console.groupEnd() 🗂️

Helps you organize logs into collapsible groups.

console.group("User Info");
console.log("Name: Alice");
console.log("Age: 30");
console.groupEnd();

🔹 console.time() and console.timeEnd() ⏱️

Measure how long a block of code takes to execute.

console.time("loop");
for (let i = 0; i < 1000000; i++) {}
console.timeEnd("loop"); // loop: 1.234ms

🔹 console.assert() ✅❌

Only logs if a condition fails — great for inline checks.

const age = 15;
console.assert(age >= 18, "Age is below 18");

🔹 Styled Console Logs 🎨

Make your logs visually stand out.

console.log("%cHello styled log", "color: blue; font-weight: bold;");

🔹 Debugging in DevTools 🧪

Use browser developer tools:

  • Set breakpoints in Sources tab.
  • Inspect variables in Scope panel.
  • Watch expressions.
  • Step through your code line by line.

Tip: Use debugger; in your code to automatically trigger a breakpoint.

function checkAge(age) {
  debugger;
  return age >= 18;
}

🔹 Real-World Tips 🛠️

  • Keep logs consistent. Use log levels (log, warn, error) smartly.
  • Remove/disable excessive logging in production.
  • Label your logs clearly when debugging complex apps.

Back to Top