Javascript Variables | asadmukhtar.info

Step-by-Step Guide to Setting Up Authentication in Laravel 12 with Breeze | Manual Authentication in Laravel 12: Step-by-Step Guide | How to Build a REST API in Laravel 12 with Sanctum | Laravel 12 CRUD Application with Image Upload | Laravel 12 Multi-Auth System: Admin & User Login | How to Integrate Stripe Payment Gateway in Laravel 12 | Building a Role-Based Access Control (RBAC) in Laravel 12 | How to Use Laravel 12 Queues and Jobs for Background Tasks | Laravel 12 Livewire CRUD Example with Validation | Email Verification and Password Reset in Laravel 12 | How to Use Laravel 12 API with Vue.js 3 | Laravel 12 AJAX CRUD with jQuery and Bootstrap | Laravel 12 Multi-Language Website Setup | React Best Practices for 2025: Performance, SEO, and Scalability | How to Build a Full-Stack MERN App: A Step-by-Step Guide | React State Management: Redux vs. Context API vs. Recoil | Server-Side Rendering (SSR) in React with Next.js for SEO | How to Optimize React Apps for Faster Load Times | Building a REST API with Node.js and Express for a React App | Integrating JWT Authentication in React and Node.js (MERN Stack) | Real-time Chat App with React, Node.js, and Socket.io | How to Deploy a MERN Stack Application on AWS or Vercel | Connecting React Frontend to a Node.js Backend with Axios | Laravel Implement Flash Messages Example | How to integrate Angular 19 with Node.js and Express for full-stack development | Best practices for connecting Angular 19 frontend with Laravel API | Step-by-step guide to upgrading an existing project to Angular 19 | How to implement authentication in Angular 19 using JWT and Firebase | Optimizing server-side rendering in Angular 19 with route-level render modes | Using Angular 19 signals for state management in large applications | How to create standalone components in Angular 19 for modular architecture | Building a CRUD application in Angular 19 with MongoDB and Express | Implementing lazy loading in Angular 19 to improve performance | How to integrate Angular 19 with GraphQL for efficient data fetching | Vue 3 Composition API vs Options API: A Comprehensive Comparison | Fetching and Displaying Data from APIs in Vue.js with Axios | Building a Todo App in Vue.js with Local Storage Integration | Handling Forms and Validation in Vue.js Using VeeValidate | State Management in Vue.js Applications Using Vuex | 10 Most Important Tasks Every MERN Stack Developer Should Master | How to Build a Full-Stack CRUD App with MERN Stack | Best Practices for Authentication & Authorization in MERN Stack | 1. MEAN Stack vs. MERN Stack: Which One Should You Choose in 2025 | Top 10 Node.js Best Practices for Scalable and Secure Applications | How to Build a REST API with Laravel and Node.js (Step-by-Step Guide) | Mastering Angular and Express.js for Full-Stack Web Development | Top 10 Daily Tasks Every Frontend Developer Should Practice | Essential Backend Development Tasks to Boost Your Coding Skills | Real-World Mini Projects for Practicing React.js Daily | Laravel Developer Task List: Beginner to Advanced Challenges | How to Assign Effective Tasks to Your Intern Developers | 10 Must-Try Tasks to Master JavaScript Fundamentals | Practical CSS Challenges That Improve Your UI Design Skills | Top Tasks to Learn API Integration in React and Angular | Best Task Ideas for a 30-Day Web Development Challenge | Top Git and GitHub Tasks Every Developer Should Know | 30-Day Task Plan for Web Development Interns | Weekly Task Schedule for Junior Developers in a Startup | How to Track Progress with Development Tasks for Interns | What Tasks Should You Give to Interns in a MERN Stack Project | Build These 5 Projects to Master React Routing | Task-Based Learning: Become a Full-Stack Developer in 90 Days | Daily Coding Tasks That Will Sharpen Your Logical Thinking | Top 7 Backend Task Ideas to Practice With Node.js and MongoDB |

JavaScript Variables

JavaScript variables are used to store and manage data in a program. They act as containers that hold values, which can be changed or reused throughout the script.

1️⃣ Declaring JavaScript Variables

In JavaScript, variables are declared using var, let, or const.

🔹 Using `var` (Old Way, Avoid if Possible)

Used in older JavaScript versions.
Function-scoped (not block-scoped).
Can be redeclared and updated within its scope.

Example:

var name = "John";
console.log(name); // Output: John

🔹 Using `let` (Recommended)

Introduced in ES6 (modern JavaScript).
Block-scoped (only accessible inside {}).
Can be updated but not redeclared within the same scope.

Example:

let age = 25;
age = 26; // Allowed (Updating)
console.log(age); // Output: 26

🔹 Using `const` (For Fixed Values)

Block-scoped, like let.
Cannot be updated or redeclared.
Must be initialized when declared.

Example:

const PI = 3.1416;
// PI = 3.14; // ❌ Error! Cannot change a const value
console.log(PI); // Output: 3.1416

2️⃣ Variable Naming Rules

✔ Can contain letters, numbers, underscores (_), and dollar signs ($).
✔ Must not start with a number.
✔ Case-sensitive (myVar and myvar are different).
✔ Cannot use JavaScript reserved words (like let, function, return).

Valid Examples:

let userName = "Alice";
let $price = 100;
let _totalAmount = 500;

Invalid Examples:

let 1name = "John"; // ❌ Cannot start with a number
let let = 10;       // ❌ Cannot use reserved words

3️⃣ Variable Scope

Global Scope → Accessible anywhere in the program.
Local Scope → Accessible only inside a function or block.

Example:

let globalVar = "I'm global"; // Global variable

function test() {
    let localVar = "I'm local"; // Local variable
    console.log(localVar);
}

console.log(globalVar); // ✅ Works
// console.log(localVar); // ❌ Error! Not accessible outside the function

Conclusion

✔ Use let for variables that change.
✔ Use const for fixed values.
✔ Avoid var unless necessary for legacy code.
✔ Follow proper naming rules and scope management for clean coding.