🧾 Description:

This guide book is perfect for beginners who want to explore JavaScript and build proficiency. It covers essential JavaScript methods that will strengthen your base and set you on the path to becoming a skilled JavaScript developer.

Buckle up for a wild JavaScript ride! 🎢 This guide makes learning methods fun and easy, helping you build a strong foundation while keeping things exciting. Let’s get started!

1. 🔤 String Methods

Method Description Example Use Case
length Returns length of string "hello".length → 5 Validate input length
toUpperCase() Converts string to uppercase "abc".toUpperCase() → "ABC" Case-insensitive comparison
toLowerCase() Converts string to lowercase "ABC".toLowerCase() → "abc" Normalize string
trim() Removes whitespace from both ends " hi ".trim() → "hi" Clean user input
includes() Checks if string contains substring "hello".includes("ll") → true Search text
startsWith() Checks if string starts with given substring "hello".startsWith("he") → true Input format validation
endsWith() Checks if string ends with given substring "hello".endsWith("lo") → true File extension validation
slice(start, end) Extracts part of string "hello".slice(1,4) → "ell" Substring manipulation
split() Splits string into an array "a,b,c".split(",") → ["a", "b", "c"] CSV parsing
replace() Replaces substring in string "hello".replace("l", "x") → "hexlo" Text formatting
match() Matches string with regex "abc123".match(/\d+/) → ["123"] Pattern matching

2. 📦 Array Methods

Method Description Example Use Case
length Array length [1,2,3].length → 3 Limit pagination
push() Add element to the end [1,2].push(3) → [1,2,3] Add elements dynamically
pop() Remove element from the end [1,2,3].pop() → 3 Stack behavior
unshift() Add element to the beginning [2,3].unshift(1) → [1,2,3] Queue behavior
shift() Remove element from the beginning [1,2,3].shift() → 1 Queue behavior
map() Transform array [1,2,3].map(x => x*2) → [2,4,6] UI rendering
filter() Filter array [1,2,3].filter(x => x > 1) → [2,3] Search result
reduce() Reduce array to a single value [1,2,3].reduce((a,b) => a + b) → 6 Calculate total
find() Find first match [1,2,3].find(x => x === 2) → 2 Find user
findIndex() Find index of first match [1,2,3].findIndex(x => x === 2) → 1 Locate position
forEach() Loop through array [1,2].forEach(x => console.log(x)) Side effects
some() Check if at least one match exists [1,2].some(x => x > 1) → true Validation
every() Check if all items match [1,2].every(x => x > 0) → true Input checks
sort() Sort array elements [3,1,2].sort() → [1,2,3] Alphabetical or numeric sort
concat() Merge arrays [1,2].concat([3,4]) → [1,2,3,4] Pagination merge
flat() Flatten nested arrays [1,[2,3]].flat() → [1,2,3] Clean structure
includes() Check presence of an element [1,2,3].includes(2) → true Item check

3. 🧱 Object Methods

Method Description Example Use Case
Object.keys(obj) Array of keys Object.keys({a:1}) → ["a"] Iterate object
Object.values(obj) Array of values Object.values({a:1}) → [1] Values loop
Object.entries(obj) Array of [key,value] Object.entries({a:1}) → [["a",1]] Convert to array
Object.assign() Merge objects Object.assign({}, a, b) Combine data
hasOwnProperty() Check key exists obj.hasOwnProperty("x") Secure access

4. 🔢 Number Methods

Method Description Example Use Case
parseInt() String to int parseInt("10") → 10 Input conversion
parseFloat() String to float parseFloat("10.5") → 10.5 Price parsing
toFixed() Format decimals (2.345).toFixed(2) → "2.35" Display currency
isNaN() Check if Not a Number isNaN("abc") → true Validate input

5. 📅 Date Methods

Method Description Example Use Case
new Date() Create date new Date() Current timestamp
Date.now() Get timestamp Date.now() Timer/log
getFullYear() Get year new Date().getFullYear() Age calc
getMonth() Get month (0-index) new Date().getMonth() Calendar logic
getDate() Get date new Date().getDate() Billing
toISOString() ISO format new Date().toISOString() Backend format

6. 🌐 DOM Methods

Method Description Example Use Case
getElementById() Get by ID document.getElementById("app") Manipulate DOM
querySelector() Get first match document.querySelector(".btn") Advanced selection
createElement() Create HTML element document.createElement("div") Dynamic UI
appendChild() Add element parent.appendChild(child) Build tree
innerHTML Read/write HTML div.innerHTML = "Hi" Inject content
addEventListener() Add event handler btn.addEventListener("click", fn) UI interactivity

7. 🛠️ Utility Functions

Function Description Example Use Case
setTimeout() Delay function setTimeout(() => console.log("Hi"), 1000) Debounce
setInterval() Repeated function setInterval(fn, 1000) Real-time clock
clearTimeout() Cancel timeout clearTimeout(timer) Stop debounce
JSON.stringify() Object to JSON JSON.stringify({a:1}) → '{"a":1}' API send
JSON.parse() JSON to Object JSON.parse('{"a":1}') → {a:1} API receive

8. ⚙️ Function Helpers

Feature Description Example Use Case
()=>{} Arrow function x => x * 2 Inline logic
function Standard function function test(){} Reuse code
call() Call with context fn.call(obj) Manual bind
apply() Call with array fn.apply(obj, [args]) Spread context
bind() Permanently bind context fn.bind(obj) React events
arguments Access args function fn(){ console.log(arguments) } Dynamic params
rest (...) Collect args function fn(...args){} Variadic functions
spread (...) Expand array/object [...a, ...b] Merge arrays

✅ Wrapping Up

JavaScript can feel like a jungle 🌴 when you're just starting out, but once you know the paths, it becomes an adventure. These methods and functions are like your survival toolkit 🧰 — use them wisely, and you'll be building amazing things in no time! Whether you're debugging code at 2 AM 😅 or crafting the next big app 💡, this cheatsheet’s got your back.

Keep learning, keep experimenting, and most importantly — have fun with it! 🎉
Happy coding! 💻🚀