100 Days of JavaScript🔥 – Day 2️⃣: Understanding Data Types & Joining Text (Concatenation)

Yesterday, we learned about variables – our "boxes" for holding information. Today, we'll look inside those boxes to understand the types of information they hold, and then we'll learn a super useful way to combine text: concatenation.

1. Understanding Data Types: The Kind of Information in Your Box Think of it like this: different boxes hold different kinds of items. A box for toys is different from a box for fruit. In JavaScript, your variables also hold different types of data, and knowing the type helps you know what you can do with it.

• Number: This is for any kind of number. It could be a whole number (like 7, 100), or a number with a decimal point (like 3.14, 2.5).
• Example: let quantity = 50; let temperature = 28.5;
• String: This is for text. Whenever you want to store words, sentences, or even just a single letter, you'll use a String. You create strings by putting the text inside single quotes ('...'), double quotes ("..."), or special backticks (...).
• Example: let movieTitle = "Inception"; let city = 'Kuala Lumpur';
• Boolean: This is a simple type that holds only one of two values: true or false. Booleans are essential for making decisions in your code (like "Is it raining?" - true or false).
• Example: let isRaining = false; let userLoggedIn = true;
• Undefined: This means a variable has been created (a box exists), but no value has been placed inside it yet. JavaScript automatically gives it the undefined value.
• Example: let myAge; // myAge is undefined because nothing is assigned yet
• Null: This is similar to undefined, but it means you've intentionally said "there is no value here." You actively assign null when you want to show that something is purposely empty or unknown.
• Example: let selectedItem = null; // We explicitly say no item is chosen

How to Check the Type:
You can use the typeof keyword to ask JavaScript what type of data is in a variable:

let myFavNumber = 7;
let myHobby = "coding";
console.log(typeof myFavNumber); // Output: number
console.log(typeof myHobby);    // Output: string

2. Concatenation: Joining Your Text Together!
Concatenation is just a fancy word for joining two or more strings (pieces of text) into one longer string. It's like sticking different words or phrases together to form a complete sentence.

There are a few main ways to concatenate strings in JavaScript:
A. Using the + Operator (The "Add" sign for Text)
You know + for adding numbers. But for strings, it works like a "glue" to stick them together!

// Sticking two strings together
let part1 = "Hello";
let part2 = "World";
let fullMessage = part1 + part2;
console.log(fullMessage); // Output: HelloWorld (Notice, no space!)

// Adding a space manually
let greet = "Good";
let timeOfDay = "Morning";
let politeGreeting = greet + " " + timeOfDay + "!"; // We add " " for a space
console.log(politeGreeting); // Output: Good Morning!

// Combining strings with numbers (JavaScript is smart!)
let productName = "Laptop";
let productPrice = 1200;
let productInfo = "The " + productName + " costs $" + productPrice + ".";
console.log(productInfo); // Output: The Laptop costs $1200.
// JavaScript automatically turns the number into a string here.
</script>

B. Using Template Literals (The Cool New Way with Backticks )

This is a more modern and often cleaner way to concatenate strings, especially when you have variables mixed in. Template literals use backticks instead of single or double quotes, and they let you put variables directly inside your string using ${variableName}.

• Easy Variable Inclusion: You don't need + signs to join variables!
• Multi-line Strings: You can write strings that span multiple lines naturally.

// Using variables directly inside the string
let animal = "cat";
let sound = "meow";
let animalSays = `The ${animal} says ${sound}.`;
console.log(animalSays); // Output: The cat says meow.

// Combining with numbers (still easy!)
let item = "book";
let pages = 350;
let bookDescription = `This ${item} has ${pages} pages.`;
console.log(bookDescription); // Output: This book has 350 pages.

// Creating multi-line messages without special symbols
let poem = `Roses are red,
Violets are blue,
JavaScript is fun,
And so are you!`;
console.log(poem);
/*
Output:
Roses are red,
Violets are blue,
JavaScript is fun,
And so are you!
*/

Why Template Literals are Great:
They make your code much easier to read, especially when you're building complex messages or even parts of web pages. You don't have to constantly open and close quotes or add + signs.