DEV Community: Sophie Muchiri

JSP 1 : Variables, Data Types, Operators

Sophie Muchiri — Wed, 05 Mar 2025 17:47:34 +0000

DATA TYPES & OPERATORS

DATA TYPES

A data type is a classification that specifies the type of data a variable can hold in a programming language

Common Data types are:
**

Numbers
Strings
Booleans

Primitive Data types

Primitive data types are data types that represents single values
They are immutable hence values cannot be changed,however, you can reassign a new value to the variable holding the primitive data type

-They are stored by value meaning they are stored directly into a variable memory location

Have a fixed size hence occupy a fixed amount size of memory therefore storage is in stacks

They include :

Numbers
strings
boolean

Examples

Non-Primitive Data types

Non-primitive data types are more complex and can hold multiple values

They store multiple values.
They are modifiable and dynamic.
They use more memory and are slower than primitive types.
They often require additional operations (e.g., accessing elements) They include:

Objects : Collection of keys and value pairs where keys are strings and values can be of any data type

Arrays : Ordered collections of elements that can be of any data type

Functions

Maps

Sets

JSP 1 : Variables, Data Types, Operators

Sophie Muchiri — Tue, 25 Feb 2025 12:35:51 +0000

Introduction
JavaScript (JS) is a high-level, interpreted programming language mostly used as a client-side scripting language

It allows Developers to create interactive and dynamic webpages by manipulating the Document Object Model (DOM)
which we shall discuss later.

VARIABLES

A variable is a container in which we can store values/data.

Terms:

1. Variable declaration
This is the process of defining a new variable using a keyword (var, let)

2. Variable Initialization

This is the process of assigning an initial value to a variable after it has been declared

3. Variable assignment

Is the act of giving a variable a specific value

4. Variable look up expression
The process of accessing a value of a variable by its name within the code
(eg: using a console.log to print the value of the variable within the console)


let greeting = "Hello, World!";
console.log(greeting); 

Hello, World!

KEY WORDS

1. var (Old Way of Declaring Variables)
✅ Can be changed (reassigned)
✅ Can be declared again (redeclared)
❌ Works in function scope (not block scope)
❌ Has hoisting issues (explained below)

NOTE WE'LL COVER SCOPE & HOISTING BETTER LATER ON

var name = "Alice";
var name = "Bob"; // ✅ No error (but can be confusing)
console.log(name); // Output: Bob

Hoisting issues:

console.log(x); // Output: undefined (NOT an error but still 
                                                  confusing!)
var x = 10;

2. let (The Better Way)

✅ Can be changed (reassigned)
✅ Works in block scope (inside {})
✅ Fixes the hoisting issue
❌ Cannot be declared again in the same scope

let age = 25;
age = 30;  // ✅ Allowed (Reassignment)
console.log(age); // Output: 30
let city = "Nairobi"
let city = "Mombasa" // ❌ ERROR: Cannot redeclare 'city'

3. const (The Best Choice for Fixed Values)
✅ Cannot be changed (reassigned)
✅ Cannot be declared again
✅ Works in block scope
❌ Must be initialized when declared


const PI = 3.1415
PI = 3.14 // ❌ ERROR: Cannot reassign a 'const' variable
console.log(PI); // Output: 3.1415

TABULAR SUMMARY

JS Craftsmanship Series Roadmap

Sophie Muchiri — Tue, 25 Feb 2025 12:08:19 +0000

JS Phase(JSP) 1
Beginner (Laying the Foundation)
🔵 JavaScript Basics: Variables, Data Types, Operators
🔵 Writing Clean Code: Formatting, Naming Conventions, Readability
🔵 Scope & Hoisting: Understanding Scope, Hoisting Pitfalls
🔵 Objects & Arrays: Creating, Modifying, Iterating,Methods
🔵 Functions & Reusability: Function Expressions, Arrow Functions, Modular Code

JS Phase(JSP) 2
Intermediate (Code Maintainability)
🟡 Asynchronous JavaScript: Callbacks, Promises, Async/Await
🟡 CRUD Functionalities
🟡 Debugging & Error Handling: Console, Breakpoints, Try-Catch
🟡 Performance Optimization: Memory Management, Event Loop, Best Practices
🟡 Code Organization: Modularization, File Structure, Best Practices
🟡 Git & GitHub: Version Control, Collaboration, Branching Strategies

JS Phase(JSP) 3
Phase 3: Advanced (Scalability & Best Practices)
🔴 Design Patterns: Singleton, Factory, Observer Patterns
🔴 Data Structures and Algorithm
🔴 Refactoring: Improving Code Without Breaking Functionality
🔴 Testing: Unit, Integration, End-to-End Testing
🔴 Managing Dependencies: NPM, Package Management, Dependency Injection
🔴 Scaling JavaScript: Architecture, Microservices, Large Codebase Management

JS Craftsmanship Series: The Path to Pro-Level JavaScript

Sophie Muchiri — Sat, 22 Feb 2025 19:17:16 +0000

My JavaScript Journey From Confusion to Clarity

If there’s one thing I’ve learned about JavaScript, it’s that it can be hellishly confusing.

I remember the frustration, staring at error messages that made no sense, refreshing my browser hoping my code would magically fix itself, and wondering if I’d ever truly understand this language. Tutorials made it look easy, but in reality? JavaScript felt unpredictable, chaotic, and sometimes just plain unfair.

But I refused to quit. Every bug, every broken script, and every long debugging session taught me something. I learned not just to write JavaScript, but to write it in a way that’s clean, scalable, and maintainable the kind of code that future me (or any developer) would actually understand.

That’s why I’m starting this series. Not as an expert, but as someone who has fought through the confusion and wants to help others do the same. If you've ever felt like JavaScript is out to get you, trust me I get it. But together, we’re going to make sense of it, step by step.

So, let’s build better JavaScript, one lesson at a time.