01 - JavaScript Basic Tutorial: Variables, Data Types, and Functions

Hello my friend! Welcome to the JavaScript tutorial section on dev.rean.me!

JavaScript (JS) is the most popular programming language for web development. Together with HTML and CSS, JavaScript makes your website interactive and dynamic (like button click, form submit, fetching data from server, and modern web apps)!

---

1. Variables in Modern JavaScript (const, let, var)

In JavaScript, we use variables to store data. In modern JavaScript (ES6+), we have 3 keywords to create variables: const, let, and var.

const (Constant — Do Not Change)

Use const for values that stay the same and will NOT be changed later.

const websiteName = "dev.rean.me";
const maxScore = 100;

// ❌ Error if you try to change value!
// websiteName = "other.me";

let (Changeable Variable)

Use let when variable value will change later in your code (like counter, user score, or loop index).

let score = 0;
score = score + 10; // ✅ Works! Score is now 10

var (Old Way — Avoid using!)

var is the old way from old JavaScript. It can cause unexpected bugs because of scope issues.

💡 Tip: Always use const by default! Only use let when you know the value must change later. Avoid using var in modern code!

---

2. JavaScript Data Types

JavaScript has 2 main groups of data types: Primitive Types (Simple values) and Reference Types (Objects and Arrays).

Primitive Data Types

Data Type	Simple Description	Example Code
String	Text inside quotes	"Hello Friend"
Number	Whole numbers or decimals	25 or 9.99
Boolean	True or False	true / false
Undefined	Variable with no value assigned yet	let username;
Null	Empty or intentionally blank value	const data = null;

const name = "Sok Dara";   // String text
const age = 22;            // Number
const isStudent = true;    // Boolean
let userAddress;           // Undefined (no value yet)
const extraInfo = null;    // Null (empty value)

Reference Data Types (Objects & Arrays)

Objects and arrays allow you to store multiple values together in one variable.

// Object (Key-Value pairs)
const user = {
  name: "Dara",
  age: 22,
  skill: "JavaScript"
};

// Array (List of items)
const fruits = ["Apple", "Banana", "Orange"];

---

3. Functions in JavaScript

A Function is a block of code designed to perform a specific task. You can call it anytime to reuse code!

Standard Function Declaration

function sayHello(name) {
  return "Hello " + name + "! Welcome to JavaScript!";
}

// Call function
console.log(sayHello("Dara")); // Output: Hello Dara! Welcome to JavaScript!

Arrow Function (Modern ES6 Way)

Arrow functions are shorter and cleaner to write!

// Arrow function with parameter
const addNumbers = (a, b) => {
  return a + b;
};

// Short arrow function (single line return)
const multiply = (a, b) => a * b;

console.log(addNumbers(10, 20)); // Output: 30
console.log(multiply(5, 4));      // Output: 20

---

4. Easy Code Example: Filtering & Mapping Array

Let's look at a simple real-world example using JavaScript arrays and arrow functions:

const scores = [40, 75, 85, 45, 90];

// 1. Filter passing scores (score >= 50)
const passingScores = scores.filter(score => score >= 50);
console.log(passingScores); // Output: [75, 85, 90]

// 2. Format output text using .map()
const messages = passingScores.map(score => `Passed with score: ${score}`);
console.log(messages);

---

Summary

• Use const first. If you need to reassign value, use let.
• Understand basic data types (String, Number, Boolean, Object, Array).
• Practice writing modern Arrow Functions (() => {}).

Hope this simple guide helps you start learning JavaScript easily! Practice writing code today. Happy coding my friends! Sharing is caring!