JavaScript methods cheatsheet
can you give cheatsheet of string method arr method
object method event listern dom maniplition
Yes 🔥 here is a full cheat-sheet for String Methods, Array Methods, Object
Methods, Events & DOM Manipulation in JavaScript — super useful for interviews &
projects.
🟢 STRING METHODS
Method Example Output
length "hello".length 5
toUpperCase() "hi".toUpperCase "HI"
()
toLowerCase() "HI".toLowerCase "hi"
()
trim() " hi ".trim() "hi"
includes() "hello".includes true
("he")
startsWith() "hello".startsWi true
th("h")
endsWith() "hello".endsWith true
("o")
indexOf() "hello".indexOf( 2
"l")
slice() "hello".slice(1, "el"
3)
substring() "hello".substrin "el"
g(1, 3)
1/13
Method Example Output
replace() "hello".replace( "yello"
"h", "y")
split() "a,b,c".split(", ["a","b","c"]
")
repeat() "hi".repeat(3) "hihihi"
🔵 ARRAY METHODS
Method Example Purpose
push() [Link](4) Add end
pop() [Link]() Remove end
unshift() [Link](0) Add start
shift() [Link]() Remove start
map() [Link](x => Return new modified
x*2) array
filter() [Link](x => Filter items
x > 5)
reduce() [Link]((a,b) Sum / accumulate
=>a+b,0)
forEach() [Link](x=>c Loop
[Link](x))
find() [Link](x=>x>5) First matching value
some() [Link](x=>x>5) True if any matches
every() [Link](x=>x>0 True if all match
)
2/13
Method Example Purpose
sort() [Link]((a,b)=> Sorting
a-b)
concat() [Link](arr2 Merge arrays
)
includes() [Link](3) Check element present
join() [Link]("-") Convert array → string
🟡 OBJECT METHODS
js
const obj = { name: "Alpesh", age: 22 };
Method Example Output
[Link]() [Link](obj) ["name","age"]
[Link]() [Link](ob ["Alpesh",22]
j)
[Link]() [Link](o [["name","Alpesh"],
bj) ["age",22]]
hasOwnProperty() [Link] true
ty("name")
[Link]() [Link]({} Clone
, obj)
Spread operator {...obj} Clone
Delete property delete [Link] remove key
🟠 EVENT LISTENERS
3/13
js
[Link]("event", callback)
Event Example
Click [Link]
("click", fn)
Input [Link]
er("input", fn)
Change [Link]
ner("change", fn)
Submit [Link]
r("submit", fn)
Mouseover [Link]
("mouseover", fn)
Keydown [Link]
tener("keydown", fn)
Example:
js
[Link]("click", () => {
[Link]("Button clicked");
});
🟤 DOM MANIPULATION
Target elements:
js
[Link]("id")
[Link](".class")
[Link]("div")
4/13
Changing HTML:
js
[Link] = "Hello";
[Link] = "Hello";
Changing style:
js
[Link] = "red";
[Link] = "yellow";
Create + Append:
js
const p = [Link]("p");
[Link] = "New Text";
[Link](p);
Remove:
js
[Link]();
Add / Remove classes:
js
[Link]("active");
[Link]("active");
🔥 SUPER BASIC EVENT + DOM EXAMPLE
js
const btn = [Link]("btn");
const box = [Link]("box");
5/13
[Link]("click", () => {
[Link] = "Button clicked!";
[Link] = "blue";
});
If you want, I can provide:
✔ printable PDF version
✔ interview questions based on these topics
✔ small practice exercises & solutions
Just tell me 😎 💪
json parse stringify
Sure 👍 here is the simple explanation + examples of
[Link]() and [Link]()
🔥 What is JSON?
JSON = JavaScript Object Notation
Used to store & transfer data (API response, LocalStorage, DB etc.).
Example JSON string:
json
"{ "name": "Alpesh", "age": 23 }"
🟢 [Link]()
Converts JavaScript object → JSON string
Example:
js
6/13
const obj = { name: "Alpesh", age: 23 };
const json = [Link](obj);
[Link](json);
Output:
json
{"name":"Alpesh","age":23}
📌 Use stringify when:
Saving in localStorage
Sending data to API
Converting object → string
🔵 [Link]()
Converts JSON string → JavaScript object
Example:
js
const json = '{"name":"Alpesh","age":23}';
const obj = [Link](json);
[Link]([Link]);
Output:
nginx
Alpesh
📌 Use parse when:
Receiving API response
Getting data from localStorage
String → object conversion
7/13
🔥 Practical Example with LocalStorage
js
const user = { name: "Alpesh", age: 23 };
// Save
[Link]("user", [Link](user));
// Get back
const data = [Link]([Link]("user"));
[Link]([Link]);
⚠️ Common Interview Doubt
Case Input Output
[Link]() Object → String
[Link]() String → Object
❌ Error Case
If string is not valid JSON:
js
[Link]("hello"); // ❌ error
Correct:
js
[Link]('{"msg":"hello"}'); // ✔
If you want, I can also give:
✔ 5 interview questions
8/13
✔ practice problems with solutions
✔ memory trick to remember parse vs stringify
Want? 😎
this keyword in object, array? and event handle and tell
me call bind aplly method of ????
Great question 🔥 let’s break it step-by-step in simple interview style.
🔥 this keyword in JavaScript
1️⃣ this inside an object
this refers to the same object where the function is written.
js
const user = {
name: "Harsh",
greet() {
[Link]([Link]);
}
};
[Link](); // Harsh
📌 this → user object
If you copy the function separately you lose this :
js
const fn = [Link];
fn(); // undefined (because `this` no longer refers to user)
2️⃣ this inside an array
9/13
this doesn’t refer to array unless a function is directly inside array.
js
const arr = [
10,
20,
function () {
[Link](this); // refers to array
}
];
arr[2](); // logs full array
📌 this → array
3️⃣ this inside event handler
In event listener, this refers to the element that received the event.
js
[Link]("click", function () {
[Link](this); // button element
});
⚠ With arrow function, this does NOT refer to element:
js
[Link]("click", () => {
[Link](this); // window (not button)
});
🔥 call() apply() bind() — MOST IMPORTANT for
interviews
WHY used?
To change this value manually.
10/13
🟢 call() — call function immediately + pass arguments individually
js
function greet(city) {
[Link]([Link], city);
}
const user = { name: "Harsh" };
[Link](user, "Mumbai"); // Harsh Mumbai
🔵 apply() — same as call, but arguments in array
js
[Link](user, ["Mumbai"]);
🟣 bind() — returns new function (does NOT call immediately)
js
const newFn = [Link](user, "Mumbai");
newFn(); // Harsh Mumbai
📌 Summary Table
Calls
Method Immediately? Pass Args Purpose
call() ✔ Yes arg1, arg2 Invoke with custom
this
apply() ✔ Yes [arg1, arg2] Invoke with custom
this + array
11/13
Calls
Method Immediately? Pass Args Purpose
bind() ❌ No arg1, arg2 Return new function
with custom this
🎯 Interview Example
js
const obj = {
name: "Harsh",
};
function show(a, b) {
[Link]([Link], a, b);
}
[Link](obj, 1, 2); // Harsh 1 2
[Link](obj, [1, 2]); // Harsh 1 2
const fn = [Link](obj, 1, 2);
fn(); // Harsh 1 2
🚀 Bonus: Arrow function vs Normal function ( this )
Type this
Normal function depends on caller (object /
element)
Arrow function takes this from outside
scope (does NOT change)
If you want next, I can send:
✔ tricky interview questions and answers
12/13
✔ small exercises to practice this , call , bind , apply
✔ cheat sheet PDF version
Just say "questions" or "exercise" 💪😎
13/13
