Anik Paul

Posted on Jul 24

[08 | JS 01] JavaScript Fundamentals: A Beginner-Friendly Guide

#javascript #beginners #webdev #programming

JavaScript is the language of the web - powering everything from simple interactions to full-fledged applications. If you're just getting started, this guide will help you understand the core concepts that form the foundation of JavaScript.

We'll walk through each topic with clear explanations and practical examples to help you learn confidently. Let's dive in! 👨‍💻

1. Data Types

In JavaScript, every value is either a primitive or an object. There are 7 primitive data types:

Number: Used for all numeric values (integers or decimals).

  let temperature = 36.5;

String: Used for text.

  let favoriteMovie = "Interstellar";

Boolean: Logical value (true or false).

  let hasTicket = false;

Undefined: A variable declared but not assigned a value.

  let userStatus;

Null: Intentionally empty value.

  let selectedSeat = null;

Symbol (ES6): Unique and immutable value, used for object keys (rarely used by beginners).

  const id = Symbol("userID");

BigInt (ES2020): For very large integers beyond the range of Number.

  const starsInGalaxy = 123456789012345678901234567890n;

👉 JavaScript uses dynamic typing, meaning you don't need to declare the data type explicitly. The value determines the type, not the variable.

🔍 Use the typeof operator to check the type of a value:

console.log(typeof favoriteMovie); // 'string'
console.log(typeof starsInGalaxy); // 'bigint'

2. Let, Const and Var

let: Allows reassigning the variable.

  let unreadMessages = 5;
  unreadMessages = 3;

const: Cannot be reassigned. Must be initialized when declared.

  const PI = 3.14159;

var: Works like let but is function-scoped. It's outdated and should generally be avoided.

  var userName = "Alice";

✅ Use const by default and let only when reassignment is needed.

3. Basic Operators

Arithmetic Operators: +, -, *, /, %, **

  let totalPrice = 250 + 75 - 30 * 2; // 265

** is exponentiation: 2 ** 3 → 8
% is remainder: 10 % 3 → 1

Assignment Operators: =, +=, -=, *=, **=, ++, --

  let steps = 1000;
  steps += 500; // 1500
  steps++;      // 1501

Comparison Operators: <, <=, >, >=

  let isEligible = totalPrice > 200;

📎 Want to learn how JavaScript decides which operator runs first?
Check out this Operator Precedence Table on MDN for a complete reference.

4. Strings and Template Literals

Template literals allow embedding variables and expressions using backticks:

const city = "Tokyo";
const days = 5;
console.log(`I'm visiting ${city} for ${days} days.`); // Output: I'm visiting Tokyo for 5 days.

✏️ This is cleaner than traditional concatenation:

// Traditional way
console.log("I'm visiting " + city + " for " + days + " days."); // Output: I'm visiting Tokyo for 5 days.

Multiline strings are also supported:

console.log(`Packing list:
- Passport
- Tickets
- Charger`);

5. Taking Decisions: if/else

Conditional statements allow your program to make decisions.

const battery = 12;

if (battery >= 20) {
  console.log("You're good to go!");
} else {
  const needed = 20 - battery;
  console.log(`Charge at least ${needed}% more.`);
}

✅ Output:

Charge at least 8% more.

🧠 This is called a control structure because it controls which block of code runs based on conditions.

💡 You can also use else if for multiple conditions.

6. The Conditional (Ternary) Operator

A shorter way to write if/else statements:

const isWeekend = true;
const plan = isWeekend ? "go hiking" : "attend class";
console.log(`Today I will ${plan}.`); // Today I will go hiking.

The syntax: condition ? valueIfTrue : valueIfFalse
It returns a value and can be used inside template literals.

7. Type Conversion vs Type Coercion

Type conversion: Manually converting data types.

  Number("42");   // 42
  String(false);  // 'false'

Type coercion: JavaScript automatically converts types when needed.

  console.log('10' - '3');  // 7
  console.log('5' + 2);     // '52'
  console.log('6' * '3');   // 18

👉 + triggers string coercion. Other operators usually convert strings to numbers.

8. Truthy and Falsy Values

JavaScript treats some values as falsy, meaning they become false in a boolean context:

0, '', undefined, null, NaN

Everything else is truthy:

console.log(Boolean("🎉"));  // true
console.log(Boolean(""));    // false

Used in conditions like:

if (userInput) {
  console.log("Processing input...");
}

🔍 Tip: if (0) → false, if (1) → true

9. Equality Operators (== vs ===)

=== (strict equality): No type coercion.

  18 === '18'; // false

== (loose equality): Allows type coercion.

  18 == '18'; // true

✅ Prefer === to avoid unexpected bugs.

const enteredPIN = "1234";

// strict
console.log(enteredPIN === 1234); // false

// loose
console.log(enteredPIN == 1234);  // true

Also:

!== → strict not equal

10. Boolean Logic

Logical operators combine multiple boolean values:

&& (AND): true if all are true
|| (OR): true if any is true
! (NOT): inverts a boolean

const isLoggedIn = true;
const isAdmin = false;

console.log(isLoggedIn && isAdmin); // false

11. Logical Operators

const hasMic = true;
const hasCamera = true;

if (hasMic && hasCamera) {
  console.log("You're ready for the video call!"); // You're ready for the video call!
}

You can use them in conditionals to make complex decisions.

12. Statements vs Expressions

Expressions produce values:

  8 + 2
  "Hi" + " there"
  5 > 3

Statements perform actions but don't return values:

  if (5 > 3) {
    console.log("Math works!");
  }

🔸 In template literals, you can only embed expressions - not full statements:

`Next year is ${2025 + 1}` // ✅

Final Thoughts

These 12 topics form the foundation of JavaScript. Mastering them gives you a strong start in understanding how the language works.

As you continue learning, try building small projects and solving beginner challenges. Practice will help solidify your skills and grow your confidence.

Thanks for reading - and until next time, happy coding! 🚀👨‍💻

📬 Let’s Connect
🌐 Portfolio: paulanik.com
💼 LinkedIn: Anik Paul
🐙 GitHub: anikpaul99
📩 Email: hello@paulanik.com

DEV Community