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
Calculator program
To-do list
Temperature converter
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
Variable manipulation exercises
Control flow challenges
Function writing practice
Array dan object manipulation
String processing tasks
Last updated
Was this helpful?