Bab 2: Dasar-Dasar JavaScript

Bab 2: Dasar-Dasar JavaScript

2.1 Sintaks Dasar

2.1.1 Penulisan Kode JavaScript

• Case sensitivity

• Whitespace dan line breaks

• Semicolons

• Comments

  • Single-line comments (//)

  • Multi-line comments (/* */)

• Code blocks dengan curly braces {}

2.1.2 Best Practices Penulisan Kode

• Indentasi

• Naming conventions

  • camelCase untuk variabel dan fungsi

  • PascalCase untuk class

  • UPPERCASE untuk konstanta

• Code organization

• Clean code principles

2.2 Variabel dan Tipe Data

2.2.1 Deklarasi Variabel

// var (pre-ES6)
var oldVariable = "old way";

// let (ES6+)
let modernVariable = "modern way";

// const (ES6+)
const CONSTANT_VALUE = "cannot be changed";

2.2.2 Tipe Data Primitif

// Number
let integer = 42;
let float = 3.14;
let infinity = Infinity;
let notANumber = NaN;

// String
let singleQuotes = 'Hello';
let doubleQuotes = "World";
let backticks = `Template literal`;

// Boolean
let isTrue = true;
let isFalse = false;

// Undefined
let undefinedVariable;

// Null
let nullValue = null;

// Symbol (ES6+)
let symbol = Symbol('description');

2.2.3 Type Coercion dan Conversion

• Implicit coercion

• Explicit conversion

• Type checking dengan typeof

• Common pitfalls dalam type coercion

2.3 Operator

2.3.1 Arithmetic Operators

let sum = 5 + 3;        // Addition
let difference = 10 - 4; // Subtraction
let product = 6 * 2;    // Multiplication
let quotient = 15 / 3;  // Division
let remainder = 17 % 5; // Modulus
let power = 2 ** 3;     // Exponentiation

// Increment & Decrement
let count = 0;
count++;  // Postfix increment
++count;  // Prefix increment
count--;  // Postfix decrement
--count;  // Prefix decrement

2.3.2 Comparison Operators

// Equality
console.log(5 == "5");   // true (loose equality)
console.log(5 === "5");  // false (strict equality)
console.log(5 != "6");   // true
console.log(5 !== "5");  // true

// Relational
console.log(5 > 3);      // true
console.log(5 >= 5);     // true
console.log(3 < 5);      // true
console.log(3 <= 3);     // true

2.3.3 Logical Operators

// AND, OR, NOT
let result1 = true && false;  // false
let result2 = true || false;  // true
let result3 = !true;         // false

// Short-circuit evaluation
let a = null;
let b = a || "default";  // "default"

2.3.4 Assignment Operators

let x = 5;
x += 3;  // x = x + 3
x -= 2;  // x = x - 2
x *= 4;  // x = x * 4
x /= 2;  // x = x / 2
x %= 3;  // x = x % 3

2.4 Struktur Kontrol

2.4.1 If Statement

let age = 18;

if (age >= 18) {
    console.log("Anda sudah dewasa");
} else if (age >= 13) {
    console.log("Anda remaja");
} else {
    console.log("Anda masih anak-anak");
}

// Ternary operator
let status = age >= 18 ? "dewasa" : "belum dewasa";

2.4.2 Switch Statement

let day = "Monday";

switch (day) {
    case "Monday":
        console.log("Hari kerja");
        break;
    case "Saturday":
    case "Sunday":
        console.log("Akhir pekan");
        break;
    default:
        console.log("Hari kerja biasa");
}

2.5 Loop

2.5.1 For Loop

// Standard for loop
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// For...of (untuk iterables)
let array = [1, 2, 3];
for (let item of array) {
    console.log(item);
}

// For...in (untuk object properties)
let object = { a: 1, b: 2 };
for (let key in object) {
    console.log(key, object[key]);
}

2.5.2 While dan Do-While Loop

// While loop
let count = 0;
while (count < 5) {
    console.log(count);
    count++;
}

// Do-while loop
let x = 0;
do {
    console.log(x);
    x++;
} while (x < 3);

2.6 Function

2.6.1 Function Declaration

// Basic function
function greet(name) {
    return `Hello, ${name}!`;
}

// Function with default parameters
function multiply(a, b = 1) {
    return a * b;
}

// Arrow function (ES6+)
const add = (a, b) => a + b;

// Function expression
const subtract = function(a, b) {
    return a - b;
};

2.6.2 Function Parameters dan Return

// Rest parameters
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

// Return multiple values
function getCoordinates() {
    return {x: 10, y: 20};
}

2.7 Array

2.7.1 Array Operations

// Creating arrays
let fruits = ['apple', 'banana', 'orange'];

// Array methods
fruits.push('grape');        // Add to end
fruits.pop();               // Remove from end
fruits.unshift('mango');    // Add to beginning
fruits.shift();             // Remove from beginning
fruits.splice(1, 1);        // Remove at position

// Array iteration
fruits.forEach(fruit => console.log(fruit));
let mappedFruits = fruits.map(fruit => fruit.toUpperCase());
let filteredFruits = fruits.filter(fruit => fruit.length > 5);

2.8 Object

2.8.1 Object Creation dan Properties

// Object literal
let person = {
    name: "John",
    age: 30,
    greet: function() {
        return `Hello, I'm ${this.name}`;
    }
};

// Accessing properties
console.log(person.name);      // Dot notation
console.log(person["age"]);    // Bracket notation

// Adding/modifying properties
person.location = "New York";
person.age = 31;

2.9 String Manipulation

2.9.1 String Methods

let text = "Hello, World!";

// Common string methods
console.log(text.length);           // 13
console.log(text.toUpperCase());    // HELLO, WORLD!
console.log(text.toLowerCase());    // hello, world!
console.log(text.split(", "));      // ["Hello", "World!"]
console.log(text.includes("World")); // true
console.log(text.replace("World", "JavaScript")); // Hello, JavaScript!

2.10 Praktik dan Latihan

2.10.1 Mini Projects

1. Calculator program

2. To-do list

3. Temperature converter

4. Simple quiz game

2.10.2 Debugging Exercises

• Common errors dan solusinya

• Debugging dengan console.log

• Using browser developer tools

2.11 Ringkasan

• Fundamental JavaScript concepts

• Best practices dalam penulisan kode

• Common patterns dan use cases

2.12 Latihan Akhir Bab

1. Variable manipulation exercises

2. Control flow challenges

3. Function writing practice

4. Array dan object manipulation

5. String processing tasks