JavaScript Cheat Sheet

// Output ke console
console.log('Hello World');
 
// Dengan multiple values
console.log('Nilai:', 42);
 
// Untuk debugging
console.error('Error message');
console.warn('Warning message');
console.table([{name: 'John', age: 30}]);

// let - bisa di-reassign
let name = 'John';
name = 'Jane'; // OK
 
// const - gabisa di-reassign
const PI = 3.14159;
// PI = 3.14; // Error!
 
// var - old way (hindari kalo bisa)
var oldSchool = 'avoid this';

// Integer (angka bulat)
let age = 25;
 
// Float (angka desimal)
let price = 99.99;
 
// Operasi matematika
let sum = 10 + 5;    // 15
let difference = 10 - 5; // 5
let product = 10 * 5;  // 50
let quotient = 10 / 5;  // 2
let remainder = 10 % 3; // 1
let power = 2 ** 3;   // 8
 
// Method Math
Math.round(4.7);  // 5
Math.ceil(4.2);   // 5
Math.floor(4.7);  // 4
Math.random();   // 0 sampe 1
Math.max(1, 5, 3); // 5
Math.min(1, 5, 3); // 1

// Bikin string
let single = 'Hello';
let double = "World";
let template = `Hello ${name}`;
 
// Method-method string
let text = "Hello World";
text.length;       // 11
text.toUpperCase();    // "HELLO WORLD"
text.toLowerCase();    // "hello world"
text.includes('World');  // true
text.startsWith('Hello'); // true
text.endsWith('World');  // true
text.split(' ');     // ["Hello", "World"]
text.replace('World', 'JS'); // "Hello JS"
text.trim();       // hapus spasi di pinggir
text.slice(0, 5);     // "Hello"

const name = 'Budi';
const age = 25;
 
// String multi-line
const message = `
 Halo, nama gw ${name}.
 Umur gw ${age} tahun.
 Tahun depan gw ${age + 1} tahun.
`;
 
// Expression dalam template
const total = `Total: ${10 + 20} items`;

if (age >= 18) {
 console.log('Udah dewasa');
}
 
if (score >= 90) {
 console.log('Mantap!');
} else if (score >= 70) {
 console.log('Lumayan!');
} else {
 console.log('Semangat lagi!');
}

// kondisi ? true : false
const status = age >= 18 ? 'Adult' : 'Minor';
 
// Nested ternary (hati-hati, bisa bikin pusing)
const grade = score >= 90 ? 'A' : score >= 80 ? 'B' : 'C';

// Persamaan
5 == '5'  // true (cuma nilai)
5 === '5' // false (nilai + tipe)
5 != '5'  // false
5 !== '5' // true
 
// Perbandingan
5 > 3   // true
5 < 3   // false
5 >= 5   // true
5 <= 5   // true

// AND (&&) - semua harus true
const canDrive = age >= 17 && hasLicense;
 
// OR (||) - salah satu true
const isWeekend = day === 'Saturday' || day === 'Sunday';
 
// NOT (!) - balik nilai boolean
const isNotLoggedIn = !isLoggedIn;
 
// Nullish Coalescing (??)
const name = username ?? 'Guest'; // kalo null/undefined

switch (day) {
 case 'Monday':
  console.log('Mulai kerja');
  break;
 case 'Friday':
  console.log('Weekend soon!');
  break;
 case 'Saturday':
 case 'Sunday':
  console.log('Weekend!');
  break;
 default:
  console.log('Weekday biasa');
}

function greet(name) {
 return `Hello, ${name}!`;
}
 
greet('Budi'); // "Hello, Budi!"

const greet = function(name) {
 return `Hello, ${name}!`;
};

// Arrow function dasar
const greet = (name) => {
 return `Hello, ${name}!`;
};
 
// Versi pendek (return otomatis)
const greet = (name) => `Hello, ${name}!`;
 
// 1 param, gausah pake kurung
const square = x => x * x;
 
// Tanpa param
const hello = () => 'Hello!';
 
// Banyak param
const add = (a, b) => a + b;

function greet(name = 'Guest') {
 return `Hello, ${name}!`;
}
 
greet();    // "Hello, Guest!"
greet('Budi'); // "Hello, Budi!"

function sum(...numbers) {
 return numbers.reduce((total, num) => total + num, 0);
}
 
sum(1, 2, 3, 4); // 10

const fruits = ['Apple', 'Banana', 'Orange'];
const numbers = [1, 2, 3, 4, 5];
const mixed = [1, 'two', true, null];
const empty = [];

const arr = [1, 2, 3, 4, 5];
 
// Tambah/Hapus
arr.push(6);    // Tambah di akhir [1,2,3,4,5,6]
arr.pop();     // Hapus dari akhir [1,2,3,4,5]
arr.unshift(0);   // Tambah di awal [0,1,2,3,4,5]
arr.shift();    // Hapus dari awal [1,2,3,4,5]
 
// Akses
arr[0];       // Elemen pertama: 1
arr[arr.length-1]; // Elemen terakhir: 5
arr.length;     // Length: 5
 
// Gabung array
const arr2 = [6, 7];
const combined = arr.concat(arr2);    // [1,2,3,4,5,6,7]
const spread = [...arr, ...arr2];     // [1,2,3,4,5,6,7]
 
// Slice // Slice & Splice Splice
arr.slice(1, 3);  // [2, 3] (gak ngubah aslinya)
arr.splice(1, 2);  // Remove 2 items at index 1 (ngubah aslinya)

const numbers = [1, 2, 3, 4, 5];
 
numbers.forEach((num) => {
 console.log(num * 2);
});
// Output: 2, 4, 6, 8, 10

// Transform array
const doubled = numbers.map(num => num * 2);
// [2, 4, 6, 8, 10]
 
const names = ['john', 'jane'];
const capitalized = names.map(name =>
 name.charAt(0).toUpperCase() + name.slice(1)
);
// ['John', 'Jane']

// Filter array
const evens = numbers.filter(num => num % 2 === 0);
// [2, 4]
 
const adults = users.filter(user => user.age >= 18);

// Jumlahkan semua angka
const sum = numbers.reduce((total, num) => total + num, 0);
// 15
 
// Hitung jumlah kemunculan
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana'];
const count = fruits.reduce((acc, fruit) => {
 acc[fruit] = (acc[fruit] || 0) + 1;
 return acc;
}, {});
// { apple: 2, banana: 2, orange: 1 }

const users = [
 { id: 1, name: 'John' },
 { id: 2, name: 'Jane' }
];
 
const user = users.find(u => u.id === 2);
// { id: 2, name: 'Jane' }
 
const index = users.findIndex(u => u.id === 2);
// 1

const numbers = [1, 2, 3, 4, 5];
 
// some - ada yang true?
numbers.some(num => num > 4); // true
 
// every - semua true?
numbers.every(num => num > 0); // true

// For loop klasik
for (let i = 0; i < 5; i++) {
 console.log(i); // 0, 1, 2, 3, 4
}
 
// Loop terbalik
for (let i = 5; i > 0; i--) {
 console.log(i); // 5, 4, 3, 2, 1
}

let i = 0;
while (i < 5) {
 console.log(i);
 i++;
}

let i = 0;
do {
 console.log(i);
 i++;
} while (i < 5);

// Loop lewat array values
const fruits = ['Apple', 'Banana', 'Orange'];
for (const fruit of fruits) {
 console.log(fruit);
}

// Loop lewat object keys
const person = { name: 'John', age: 30 };
for (const key in person) {
 console.log(`${key}: ${person[key]}`);
}

// Break - keluar dari loop
for (let i = 0; i < 10; i++) {
 if (i === 5) break;
 console.log(i); // 0, 1, 2, 3, 4
}
 
// Continue - skip iterasi
for (let i = 0; i < 5; i++) {
 if (i === 2) continue;
 console.log(i); // 0, 1, 3, 4
}

// Object literal
const person = {
 name: 'John',
 age: 30,
 city: 'Jakarta'
};
 
// New Object
const obj = new Object();
obj.name = 'John';

// Dot notation
person.name; // 'John'
 
// Bracket notation
person['age']; // 30
 
// Property dinamis
const prop = 'city';
person[prop]; // 'Jakarta'

const person = {
 name: 'John',
 age: 30,
 greet: function() {
  return `Hello, I'm ${this.name}`;
 },
 // Shorthand method
 sayHi() {
  return 'Hi!';
 }
};
 
person.greet(); // "Hello, I'm John"

const person = { name: 'John', age: 30, city: 'Jakarta' };
 
// Destructure
const { name, age } = person;
console.log(name); // 'John'
 
// Ganti nama variabel
const { name: userName, age: userAge } = person;
 
// Nilai default
const { country = 'Indonesia' } = person;

const person = { name: 'John', age: 30 };
 
// Copy object
const copy = { ...person };
 
// Gabung object
const address = { city: 'Jakarta', country: 'Indonesia' };
const fullProfile = { ...person, ...address };
 
// Override property
const updated = { ...person, age: 31 };

const person = { name: 'John', age: 30 };
 
// Ambil key
Object.keys(person);  // ['name', 'age']
 
// Ambil value
Object.values(person); // ['John', 30]
 
// Ambil entries
Object.entries(person); // [['name', 'John'], ['age', 30]]
 
// Cek property
person.hasOwnProperty('name'); // true
'name' in person;       // true

class Person {
 constructor(name, age) {
  this.name = name;
  this.age = age;
 }
 
 greet() {
  return `Hello, I'm ${this.name}`;
 }
}
 
const john = new Person('John', 30);
john.greet(); // "Hello, I'm John"

class Animal {
 constructor(name) {
  this.name = name;
 }
 
 speak() {
  return `${this.name} makes a sound`;
 }
}
 
class Dog extends Animal {
 constructor(name, breed) {
  super(name); // Call parent constructor
  this.breed = breed;
 }
 
 speak() {
  return `${this.name} barks`;
 }
}
 
const dog = new Dog('Buddy', 'Golden Retriever');
dog.speak(); // "Buddy barks"

class MathHelper {
 static add(a, b) {
  return a + b;
 }
 
 static PI = 3.14159;
}
 
MathHelper.add(5, 3); // 8
MathHelper.PI;     // 3.14159

class Circle {
 constructor(radius) {
  this._radius = radius;
 }
 
 get radius() {
  return this._radius;
 }
 
 set radius(value) {
  if (value > 0) {
   this._radius = value;
  }
 }
 
 get area() {
  return Math.PI * this._radius ** 2;
 }
}
 
const circle = new Circle(5);
circle.area;   // 78.54
circle.radius = 10;

const promise = new Promise((resolve, reject) => {
 setTimeout(() => {
  const success = true;
  if (success) {
   resolve('Success!');
  } else {
   reject('Error!');
  }
 }, 1000);
});

promise
 .then(result => {
  console.log(result); // 'Success!'
 })
 .catch(error => {
  console.error(error);
 })
 .finally(() => {
  console.log('Done!');
 });

const promise1 = Promise.resolve(3);
const promise2 = Promise.resolve(42);
const promise3 = Promise.resolve('foo');
 
Promise.all([promise1, promise2, promise3])
 .then(values => {
  console.log(values); // [3, 42, 'foo']
 });

async function fetchData() {
 try {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
 } catch (error) {
  console.error('Error:', error);
 }
}
 
// Usage
fetchData().then(data => console.log(data));

// Array destructuring
const [first, second, ...rest] = [1, 2, 3, 4, 5];
// first: 1, second: 2, rest: [3, 4, 5]
 
// Object destructuring
const { name, age, ...others } = person;

const user = {
 name: 'John',
 address: {
  city: 'Jakarta'
 }
};
 
// Without optional chaining
const city = user.address ? user.address.city : undefined;
 
// With optional chaining
const city = user.address?.city;
const country = user.address?.country; // undefined (no error)

// Old way
const name = username || 'Guest';
 
// Problem: '' and 0 are also replaced
const count = userCount || 10; // if userCount is 0, still returns 10
 
// New way with ??
const count = userCount ?? 10; // only null/undefined

// Export
export const name = 'John';
export function greet() { }
 
// Default export
export default class Person { }
 
// Import
import Person, { name, greet } from './module.js';
 
// Import all
import * as Utils from './utils.js';