DEV Community: Arvin Jafari

Primitive vs Non-Primitive Data Types in JavaScript

Arvin Jafari — Tue, 25 Aug 2026 13:22:33 +0000

One of the most interesting and important concepts in JavaScript is the difference between Primitive and Non-Primitive data types.

At first, it may look like a simple topic. But if you don't understand how these values behave, you can run into some surprisingly strange bugs.

So, what actually happens when we assign, copy, or modify these values?

Let's break it down.

🟠 Primitive Types

JavaScript has 7 Primitive data types:

String
Number
BigInt
Boolean
Undefined
Null
Symbol

Primitive values represent simple, basic values.

One of the most important characteristics of Primitive values is that they are immutable.

What does immutable mean?

It means that the value itself cannot be changed after it has been created.

For example:

let name = "Arvin";

name = "Ali";

This doesn't modify the original "Arvin" value.

Instead, name is now associated with a different value.

📦 Primitive Values Are Assigned by Value

Another important behavior is how Primitive values are assigned to variables.

When you assign a Primitive value to another variable, the new variable receives the value itself.

let a = 10;
let b = a;

b = 20;

console.log(a); // 10
console.log(b); // 20

What happened here?

Initially:

a → 10
b → 10

After:

b = 20;

we have:

a → 10
b → 20

The two variables have independent values.

Changing b doesn't affect a.

This is the important idea:

Primitive assignment gives the other variable its value.

🟡 Non-Primitive Types

The main Non-Primitive types discussed here are:

Object
Array
Function

These values are more complex than Primitive values and can contain multiple values and properties.

They are also commonly called Reference Types.

Unlike Primitive values, Objects, Arrays, and Functions are mutable.

That means their contents can be changed.

🔗 Non-Primitive Values and References

This is where things become interesting.

Consider this example:

const user1 = {
  name: "Arvin"
};

const user2 = user1;

user2.name = "Ali";

console.log(user1.name); // Ali
console.log(user2.name); // Ali

You might initially expect user1 to remain unchanged.

But it doesn't.

Why?

Because user2 is not an independent copy of user1.

Both variables can access the same Object.

A simplified mental model looks like this:

user1 ──┐
        ├──→ { name: "Arvin" }
user2 ──┘

After:

user2.name = "Ali";

the same Object has changed:

user1 ──┐
        ├──→ { name: "Ali" }
user2 ──┘

That's why:

console.log(user1.name);

returns:

Ali

🧠 But What About Stack and Heap?

To understand these behaviors more easily, you will often hear about two concepts:

Stack
Heap

These concepts are commonly used as a mental model for understanding memory management.

🔵 Stack

A Stack is a LIFO data structure.

LIFO means:

Last In, First Out

In a simplified model, the Stack is commonly associated with managing:

Function calls
Execution contexts
Data related to function execution

You can think of it as an area that helps JavaScript keep track of what is currently being executed.

🟣 Heap

The Heap is commonly described as an area used for dynamic memory allocation.

It's often used as a mental model for understanding where more complex data such as:

Objects
Arrays
Functions

can be managed.

For example:

const user = {
  name: "Arvin",
  age: 23
};

The Object is conceptually associated with dynamically allocated memory.

⚠️ An Important Note About Stack and Heap

There is an important detail that is easy to miss.

Stack and Heap should not be treated as a literal specification of how JavaScript stores every value in memory.

They are better understood as a mental model that helps us reason about JavaScript's memory behavior.

The actual implementation depends on the:

JavaScript Engine
Runtime
Memory management system
Engine optimizations

So saying:

"All Primitive values are always stored on the Stack and all Objects are always stored on the Heap."

is an oversimplification.

The reality is more complicated.

For learning purposes, however, the Stack/Heap model can be very useful for building intuition.

🔄 Primitive vs Non-Primitive

Let's put the important differences together.

Primitive	Non-Primitive
`String`	`Object`
`Number`	`Array`
`BigInt`	`Function`
`Boolean`	Mutable
`Undefined`	Reference-based behavior
`Null`	Can contain multiple values/properties
`Symbol`	More complex data structures
Immutable	Mutable

🧩 The Most Important Difference

The easiest way to remember the concept is to focus on assignment behavior.

Primitive

let a = 10;
let b = a;

b = 20;

a remains:

because b received the value.

Non-Primitive

const user1 = {
  name: "Arvin"
};

const user2 = user1;

user2.name = "Ali";

Now:

console.log(user1.name); // Ali

because both variables can access the same Object.

🚨 Why Does This Matter?

This difference becomes especially important when working with:

Objects
Arrays
Function parameters
State management
API data
React applications
Copying data
Updating nested objects
Debugging unexpected changes

For example, imagine you think you've created a copy:

const original = {
  name: "Arvin"
};

const copy = original;

copy.name = "Ali";

You might expect:

original.name === "Arvin"

But the result is:

original.name === "Ali"

Understanding how Non-Primitive values behave makes this kind of JavaScript behavior much easier to understand.

🎯 A Simple Mental Model

You can remember it like this:

Primitive

Variable
   ↓
 Value

Assign it:

A → 10

B = A

A → 10
B → 10

They have independent values.

Non-Primitive

Variable
   ↓
Reference
   ↓
Object

Assign it:

A ──┐
    ├──→ Object
B ──┘

Both variables can access the same Object.

💡 Final Takeaway

Primitive and Non-Primitive values may look like a basic JavaScript topic, but understanding their behavior is extremely useful.

The key ideas are:

Primitive types represent simple values.
Primitive values are immutable.
Primitive assignment gives another variable the value.
Objects, Arrays, and Functions are mutable.
Assigning a Non-Primitive value can make multiple variables refer to the same Object.
Stack and Heap are useful mental models for understanding memory, not a complete description of how every JavaScript engine works.

Once you understand these concepts, many of JavaScript's "weird" behaviors start to make much more sense.

📌 Quick Reference

The next time an Object unexpectedly changes somewhere else in your code, one of the first things to ask yourself is:

"Are these two variables accessing the same Object?"

✨ Building a Cosmic Note-Taking App: A Journey Through Space and Code

Arvin Jafari — Sat, 07 Jun 2025 16:41:26 +0000

Have you ever wanted to take your note-taking experience to the next level? 🌌 What if I told you we could create a beautiful, interactive note-taking application that feels like you're writing in the cosmos? In this article, I'll walk you through the creation of "Cosmic Notes" - a space-themed note-taking application built with vanilla JavaScript and CSS. Let's embark on this cosmic coding adventure! 🛸

🌟 Features That Will Blow Your Mind

✨ Beautiful cosmic-themed UI with animated stars and particles
📝 Create, read, update, and delete notes with ease
🎨 Color-coded notes with different themes
🏷️ Tag system for better organization
🔍 Real-time search functionality
📱 Responsive design for both desktop and mobile
🌈 Smooth animations and transitions
🪟 Interactive modal system

🚀 Getting Started with the Cosmos

The project structure is as clean as a starry night:

🟩 Cosmic Notes/
│
├── 📁 design/                   # Visual design references
│   ├── 📱 mobile-design.jpg     # Mobile viewport designs
│   └── 🖥️ desktop-design.jpg    # Desktop viewport designs
│
├── 📁 src/                      # Source code organization
│   ├── 📁 styles/               # CSS architecture
│   │   ├── 📄 main.css          # Primary stylesheet
│   │   ├── 📄 reset.css         # CSS normalization
│   │   ├── 📄 typography.css    # Text styling presets
│   │   ├── 📄 variables.css     # Design tokens & fonts
│   │   └── 📄 ...
│   │
│   ├── 📁 scripts/              # JavaScript modules
│   │   └── 📄 app.js            # Main application logic
│   │
│   └── 📁 assets/               # All project assets
│        ├── 📁 fonts/           # fonts assets
│        │   ├── 🗛 Inter.ttf
│        │   └── 🗛 Orbitron.ttf
│        │
│        └── 📁 images/          # Images and icons
│            └── 🖼️ preview.gif
│
├── 📄 index.html                # Main entry point with semantic HTML
├── 📄 README.md                 # Project documentation & deployment guide
├── 📄 style-guide.md            # Design system specifications
├── 📄 .gitignore                # Version control exclusions
└── 📄 DEVELOPMENT.md            # Learning notes & challenges faced

💫 Creating the Cosmic Background

One of the most eye-catching features of our app is the animated starry background. Here's how we bring the cosmos to life:

function generateStarField() {
  const starField = document.getElementById("stars");
  if (!starField) return;

  Array.from({ length: 100 }).forEach(() => {
    const star = document.createElement("div");
    star.className = "star";
    star.style.left = `${Math.random() * 100}%`;
    star.style.top = `${Math.random() * 100}%`;
    star.style.animationDelay = `${Math.random() * 3}s`;
    starField.appendChild(star);
  });
}

We also add some magical particle effects to make the background more dynamic:

function startParticleEffects() {
  setInterval(() => {
    if (Math.random() < 0.1) createParticle();
  }, 200);
}

function createParticle() {
  const particle = document.createElement("div");
  particle.className = "particle";
  particle.style.left = `${Math.random() * 100}%`;
  particle.style.background = `hsl(${Math.random() * 360}, 70%, 70%)`;
  document.body.appendChild(particle);
  setTimeout(() => particle.remove(), 4000);
}

📝 Managing Your Cosmic Notes

The core functionality of our app revolves around managing notes. Each note is like a star in our cosmic collection:

{
  title: "Note Title", // 🌟
  content: "Note content", // 📄
  date: "Creation date", // 📅
  color: "theme color", // 🎨
  tag: "category", // 🏷️
  completed: false // ✅
}

✨ Creating New Notes

The note creation process is handled through a magical modal interface:

function handleNoteCreation() {
  const addNoteBtn = document.querySelector(".actio-btn__add");

  addNoteBtn.addEventListener("click", (e) => {
    e.preventDefault();

    const title = document.querySelector("#form__name").value.trim();
    const content = document.querySelector("#form__textarea").value.trim();
    const color = document.querySelector(".colorpictext").value || "blue";
    const tag = document.querySelector("#note-tag").value.trim() || "General";

    if (!title || !content) {
      alert(
        "🌟 Please fill out both title and content to create your cosmic note!"
      );
      return;
    }

    const newNote = {
      title,
      content,
      date: new Date().toLocaleDateString(),
      color,
      tag,
      completed: false,
    };

    notes.push(newNote);
    renderNotes(notes);
  });
}

🔍 Searching Through the Cosmos

The app includes a powerful real-time search feature that helps you find your notes across the universe:

function bindSearch() {
  const input = document.querySelector(".input__search");

  input.addEventListener("input", () => {
    const query = input.value.toLowerCase().trim();

    if (query === "") {
      renderNotes(notes);
    } else {
      const filtered = notes.filter(
        (note) =>
          note.title.toLowerCase().includes(query) ||
          note.content.toLowerCase().includes(query) ||
          note.tag.toLowerCase().includes(query)
      );
      renderNotes(filtered);
    }
  });
}

🎨 Painting the Cosmos with Colors

Users can choose from different color themes for their notes, each representing a different cosmic energy:

🌸 Pink - The energy of creativity
💠 Cyan - The power of wisdom
💜 Purple - The mystery of the cosmos
🍊 Orange - The warmth of inspiration
💙 Blue - The calm of the universe

The color picker is implemented with a simple click handler:

function initColorPicker() {
  const colorPickText = document.querySelector(".colorpictext");

  document.querySelectorAll(".option").forEach((option) => {
    option.addEventListener("click", () => {
      document
        .querySelectorAll(".option")
        .forEach((el) => el.classList.remove("active"));
      option.classList.add("active");

      if (colorPickText) {
        colorPickText.value = option.classList[1];
      }
    });
  });
}

🌈 Magical UI/UX Features

The app includes several user experience enhancements that make it feel like magic:

✨ Smooth animations for note transitions
🎯 Toast notifications for user actions
⚠️ Confirmation dialogs for destructive actions
📱 Responsive design that works on both desktop and mobile
🪟 Interactive modal system for note creation and editing

🎯 Future Cosmic Improvements

Some potential improvements to make our app even more stellar:

💾 Add local storage to persist notes
🎮 Implement drag-and-drop functionality
🎨 Add more color themes
📝 Include markdown support
📤 Add export/import functionality
🔐 Implement user authentication
☁️ Add cloud sync capabilities

🚀 Conclusion: To Infinity and Beyond!

Building Cosmic Notes was a fun project that demonstrates how vanilla JavaScript and CSS can create beautiful, interactive web applications. The space theme adds a unique touch to the traditional note-taking experience, making it more engaging and enjoyable to use.

You can find the complete source code on GitHub. Feel free to fork it, modify it, and make it your own! 🌟

🔗 Resources to Launch Your Journey

Made with ❤️ by Arvin Jafary 👨‍💻

I Built a Git Tutorial That Uses Branches as Learning Modules (And It's Going Viral) 🔥

Arvin Jafari — Tue, 03 Jun 2025 06:09:49 +0000

"Why didn't anyone teach Git like this before?" - That's the comment I keep seeing on my latest project. After watching countless developers struggle with Git commands, I built something different: a tutorial repository where each branch IS the lesson.

The "Aha!" Moment That Started Everything 💡

Picture this: You're in a code review, and someone mentions "just rebase that branch." Your heart sinks. You know Git basics, but anything beyond git add and git commit feels like dark magic.

Sound familiar? This was me 5 years ago, and it's what I hear from developers every single day.

Traditional Git tutorials show you commands in isolation. My approach? Every branch teaches a complete concept through hands-on practice.

Why Developers Are Calling This "Genius" 🧠

Instead of boring documentation, I created 4 specialized branches:

Branch	What You'll Master	Why It Matters
`basics`	Repo setup, staging, committing	Foundation every dev needs
`branching`	Creating, merging, rebasing	Where most people get stuck
`collaboration`	Remote repos, team workflows	Real-world professional skills
`advanced`	Stashing, resetting, cherry-picking	Pro-level techniques

Each branch contains working examples, common mistakes, and pro tips you can't find anywhere else.

The Secret Sauce: Learn → Practice → Master 🎯

Each branch follows the same proven formula:

Concept Introduction - Why this matters in real development
Hands-on Examples - Working code you can touch and modify
Practice Exercises - Build muscle memory with repetition
Pro Tips - Insights that take years to discover on your own

Plus, there's a comprehensive cheatsheet that covers everything from basic workflows to advanced techniques.

The 5-Minute Quick Start That Changes Everything ⚡

# Get the magic started
git clone https://github.com/arwinux/git-tutorial
cd git-tutorial

# See your learning path
git branch -a

# Jump into your first "classroom"
git checkout basics

That's it. You're now in a branch designed specifically to teach Git basics. No overwhelming theory - just hands-on learning.

The Learning Flow

Each branch contains:

Practical examples with real code
Step-by-step exercises
Common gotchas and how to avoid them
Pro tips from years of experience

My Favorite Learning Exercise 💡

Want a taste of what's inside? Try this workflow that simulates a real development scenario:

# Create your experimental branch
git checkout -b feature/my-awesome-feature

# Make some changes (edit files, add features)
echo "console.log('Hello, Git!');" > app.js

# Stage and commit your work
git add .
git commit -m "Add awesome feature"

# Switch back and merge (like a real project)
git checkout main
git merge feature/my-awesome-feature

This simple exercise teaches repository management, branching, and merging - core skills every developer needs.

What Happens When You Actually "Get" Git 🚀

Developers who've used this tutorial report:

✅ Confidence in code reviews - No more anxiety about Git commands
✅ Faster development workflows - Branching becomes second nature
✅ Better collaboration - Understanding team Git workflows
✅ Problem-solving skills - Knowing how to fix Git mistakes

The best part? You can contribute back! Fork the repo, add your improvements, and submit a pull request. It's the perfect way to practice real-world Git collaboration.

Ready to Stop Fearing Git?

The tutorial that's changing how developers learn Git is one click away.

🚀 Start Learning: Git Tutorial Repository

Quick Access:

📖 Complete Git Cheatsheet
🚀 Full Repository

Join the Movement 🤝

Follow me for more developer tools, tutorials, and insights that actually help:

💻 GitHub: github.com/arwinux
🔷 LinkedIn : linkedin.com/arwinux
🔗 DevTo : dev.to/arwinux

❓ What's the Git command that still confuses you the most? Comment below - I read every single one and often turn the best questions into new tutorial content!

If this helped you finally understand Git, smash that ❤️ button and share it with a fellow developer who's still copy-pasting Git commands from Stack Overflow! 🙌

Tags: #git #github #versioncontrol #programming #tutorial #webdev #beginners #productivity #opensource #devtools

Hello DEV! I'm Arvin and This Is My First Step into Frontend Dev 🚀

Arvin Jafari — Mon, 02 Jun 2025 15:17:59 +0000

Hey DEV Community! 👋

I'm Arvin, a computer engineering student from Iran and this is my very first post on DEV! I’ve recently started focusing on frontend development, and I’m super excited to share my journey with you all.

🌱 Who am I?

I'm a curious learner with a strong passion for building interactive and beautiful web interfaces. I've always enjoyed both creativity and logic — and frontend development feels like the perfect mix of both.

💻 What I'm learning

Right now, I’m working on building a solid foundation in:

HTML & CSS (not just the basics, but best practices too)
JavaScript (especially Fetch API, DOM, and Promises)
Git & GitHub for version control
VS Code + Extensions
React (just starting with it!)

My learning is project-based, and I try to build small things as I go. I believe that building beats watching tutorials every time.

🎯 My short-term goals

Build a portfolio with real-world mini projects
Improve my problem-solving skills with JavaScript
Become more confident with React
Stay consistent with learning and content creation
Share my journey on X/Twitter and here on DEV

🤝 Let’s connect!

If you're also learning frontend or want to share advice, I'd love to hear from you! I'm always open to collaboration, feedback, or just a good tech convo.

💻 GitHub: github.com/arwinux
🔷 LinkedIn : linkedin.com/arwinux
🔗 DevTo : dev.to/arwinux

Thanks for reading! 🙏

This is just the beginning of my frontend journey. Feel free to drop a comment, share your story, or ask me anything. I’ll be posting more about what I learn, what I build, and the cool stuff I discover along the way.

Let’s grow together 💪🌐