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

Last updated