DEV Community

Code WithDhanian
Code WithDhanian

Posted on

3 1 1 1 1

200 JavaScript Shortcuts Every Developer Should Know in 2025 By DHANIAN @e_opore

JavaScript continues to evolve, and staying updated with the latest shortcuts and techniques is essential for writing clean, efficient, and modern code. Whether you're a beginner or an experienced developer, these 200 JavaScript shortcuts will help you streamline your workflow and write better code in 2025. Let’s dive in!


1. Basic and ES6+ Shortcuts

These shortcuts cover fundamental JavaScript syntax and ES6+ features like destructuring, arrow functions, and template literals.

// Javascript shortcuts by DHANIAN @e_opore

1. const x = 10; // Use const for constants
2. let y = 20; // Use let for variables
3. const arr = [1, 2, 3];
4. const obj = { a: 1, b: 2 };
5. const { a, b } = obj; // Destructuring
6. const [first, second] = arr; // Array destructuring
7. const name = obj.name || 'Default'; // Default value
8. const name = obj.name ?? 'Default'; // Nullish coalescing
9. const func = () => {}; // Arrow function
10. const add = (a, b) => a + b; // Arrow function with return
11. const square = x => x * x; // Single param arrow function
12. const greet = name => `Hello, ${name}`; // Template literals
13. const arr2 = [...arr]; // Spread operator
14. const obj2 = { ...obj, c: 3 }; // Spread in objects
15. const sum = (...args) => args.reduce((a, b) => a + b); // Rest operator
16. const isTrue = true;
17. const result = isTrue && 'Yes'; // Short-circuit evaluation
18. const result2 = isTrue || 'No'; // Short-circuit evaluation
19. const value = obj?.a?.b; // Optional chaining
20. const func2 = (a = 10) => a; // Default parameter
21. const arr3 = Array(5).fill(0); // Fill array
22. const arr4 = Array.from({ length: 5 }, (_, i) => i); // Array from
23. const arr5 = [...new Set(arr)]; // Remove duplicates
24. const arr6 = arr.map(x => x * 2); // Map
25. const arr7 = arr.filter(x => x > 1); // Filter
26. const arr8 = arr.reduce((acc, x) => acc + x, 0); // Reduce
27. const arr9 = arr.flat(); // Flatten array
28. const arr10 = arr.flatMap(x => [x, x * 2]); // FlatMap
29. const str = 'Hello';
30. const str2 = str.includes('ell'); // String includes
31. const str3 = str.startsWith('He'); // String startsWith
32. const str4 = str.endsWith('lo'); // String endsWith
33. const str5 = str.repeat(2); // Repeat string
34. const str6 = str.padStart(10, '-'); // Pad start
35. const str7 = str.padEnd(10, '-'); // Pad end
36. const num = 10;
37. const num2 = num.toString(2); // Binary string
38. const num3 = Number.isInteger(num); // Check integer
39. const num4 = Math.floor(num); // Floor
40. const num5 = Math.ceil(num); // Ceil
41. const num6 = Math.round(num); // Round
42. const num7 = Math.trunc(num); // Truncate
43. const num8 = Math.sign(num); // Sign
44. const num9 = Math.pow(2, 3); // Power
45. const num10 = 2 ** 3; // Exponentiation operator
46. const bigInt = 123n; // BigInt
47. const isNaN = Number.isNaN(num); // Check NaN
48. const isFinite = Number.isFinite(num); // Check finite
49. const isSafe = Number.isSafeInteger(num); // Check safe integer
50. const random = Math.random(); // Random number
Enter fullscreen mode Exit fullscreen mode

2. Advanced ES6+ and Modern JavaScript

These shortcuts dive into advanced features like Promises, async/await, classes, modules, and modern APIs.

// Javascript shortcuts by DHANIAN @e_opore

51. const promise = new Promise((resolve, reject) => {});
52. const asyncFunc = async () => await promise; // Async/await
53. const fetchData = async () => { const res = await fetch(url); };
54. const json = await res.json(); // Parse JSON
55. const json2 = JSON.stringify(obj); // Stringify JSON
56. const map = new Map(); // Map
57. map.set('key', 'value'); // Set map value
58. const value = map.get('key'); // Get map value
59. const set = new Set([1, 2, 3]); // Set
60. set.add(4); // Add to set
61. set.has(2); // Check set
62. const weakMap = new WeakMap(); // WeakMap
63. const weakSet = new WeakSet(); // WeakSet
64. const symbol = Symbol('key'); // Symbol
65. const iterator = arr[Symbol.iterator](); // Iterator
66. const generator = function* () { yield 1; }; // Generator
67. const proxy = new Proxy(obj, handler); // Proxy
68. const reflect = Reflect.get(obj, 'a'); // Reflect
69. const classExample = class {}; // Class
70. class Example { constructor() {} } // Class constructor
71. class Example2 extends Example {} // Class inheritance
72. static method() {} // Static method
73. get prop() {} // Getter
74. set prop(value) {} // Setter
75. const module = import('./module.js'); // Dynamic import
76. export default func; // Export default
77. export { func }; // Named export
78. import func from './module.js'; // Import default
79. import { func } from './module.js'; // Named import
80. import * as module from './module.js'; // Import all
81. const worker = new Worker('worker.js'); // Web Worker
82. const sharedBuffer = new SharedArrayBuffer(10); // SharedArrayBuffer
83. const atomics = Atomics.add(sharedBuffer, 0, 1); // Atomics
84. const typedArray = new Int32Array(10); // TypedArray
85. const dataView = new DataView(typedArray.buffer); // DataView
86. const blob = new Blob([data]); // Blob
87. const file = new File([data], 'file.txt'); // File
88. const url = URL.createObjectURL(blob); // Object URL
89. const formData = new FormData(); // FormData
90. formData.append('key', 'value'); // Append to FormData
91. const headers = new Headers(); // Headers
92. headers.append('Content-Type', 'application/json'); // Add header
93. const request = new Request(url, { method: 'GET' }); // Request
94. const response = new Response(data); // Response
95. const event = new Event('click'); // Event
96. const customEvent = new CustomEvent('custom', { detail: {} }); // CustomEvent
97. const abortController = new AbortController(); // AbortController
98. const signal = abortController.signal; // AbortSignal
99. const observer = new MutationObserver(callback); // MutationObserver
100. const intersectionObserver = new IntersectionObserver(callback); // IntersectionObserver
Enter fullscreen mode Exit fullscreen mode

3. DOM and Browser APIs

These shortcuts focus on interacting with the DOM and using browser APIs like LocalStorage, Fetch, and more.

// Javascript shortcuts by DHANIAN @e_opore

101. document.querySelector('.class'); // Query selector
102. document.querySelectorAll('.class'); // Query all
103. document.getElementById('id'); // Get element by ID
104. document.getElementsByClassName('class'); // Get by class
105. document.getElementsByTagName('div'); // Get by tag
106. element.innerHTML = '<p>Hello</p>'; // Inner HTML
107. element.textContent = 'Hello'; // Text content
108. element.classList.add('class'); // Add class
109. element.classList.remove('class'); // Remove class
110. element.classList.toggle('class'); // Toggle class
111. element.setAttribute('key', 'value'); // Set attribute
112. element.getAttribute('key'); // Get attribute
113. element.removeAttribute('key'); // Remove attribute
114. element.style.color = 'red'; // Style
115. element.addEventListener('click', callback); // Event listener
116. element.removeEventListener('click', callback); // Remove listener
117. window.localStorage.setItem('key', 'value'); // LocalStorage
118. window.localStorage.getItem('key'); // Get LocalStorage
119. window.sessionStorage.setItem('key', 'value'); // SessionStorage
120. window.sessionStorage.getItem('key'); // Get SessionStorage
121. window.location.href = 'https://example.com'; // Redirect
122. window.location.reload(); // Reload page
123. window.history.back(); // Go back
124. window.history.forward(); // Go forward
125. window.scrollTo(0, 100); // Scroll to
126. window.scrollBy(0, 100); // Scroll by
127. window.innerWidth; // Window width
128. window.innerHeight; // Window height
129. window.open('https://example.com'); // Open new window
130. window.close(); // Close window
131. window.alert('Hello'); // Alert
132. window.confirm('Are you sure?'); // Confirm
133. window.prompt('Enter your name'); // Prompt
134. navigator.clipboard.writeText('Hello'); // Copy to clipboard
135. navigator.clipboard.readText(); // Read clipboard
136. navigator.geolocation.getCurrentPosition(callback); // Geolocation
137. navigator.userAgent; // User agent
138. navigator.onLine; // Check online
139. document.cookie = 'key=value'; // Set cookie
140. document.cookie; // Get cookie
141. document.title = 'New Title'; // Set title
142. document.head; // Access head
143. document.body; // Access body
144. document.createElement('div'); // Create element
145. document.createTextNode('Hello'); // Create text node
146. document.createDocumentFragment(); // Create fragment
147. document.appendChild(element); // Append child
148. document.removeChild(element); // Remove child
149. document.replaceChild(newElement, oldElement); // Replace child
150. document.cloneNode(true); // Clone node
Enter fullscreen mode Exit fullscreen mode

4. Performance, Debugging, and Utilities

These shortcuts focus on debugging, performance optimization, and utility functions.

// Javascript shortcuts by DHANIAN @e_opore

151. console.log('Hello'); // Log
152. console.error('Error'); // Error
153. console.warn('Warning'); // Warn
154. console.info('Info'); // Info
155. console.table(arr); // Table
156. console.time('timer'); // Start timer
157. console.timeEnd('timer'); // End timer
158. console.group('Group'); // Group
159. console.groupEnd(); // End group
160. console.clear(); // Clear console
161. console.assert(isTrue, 'Not true'); // Assert
162. console.trace('Trace'); // Trace
163. console.dir(obj); // Dir
164. console.count('Counter'); // Count
165. console.countReset('Counter'); // Reset count
166. performance.now(); // Performance timing
167. performance.mark('start'); // Mark
168. performance.measure('measure', 'start', 'end'); // Measure
169. performance.getEntries(); // Get entries
170. performance.clearMarks(); // Clear marks
171. performance.clearMeasures(); // Clear measures
172. new Intl.DateTimeFormat('en-US').format(date); // Date format
173. new Intl.NumberFormat('en-US').format(num); // Number format
174. new Intl.Collator('en-US').compare('a', 'b'); // Collator
175. new Intl.ListFormat('en-US').format(['a', 'b']); // List format
176. new Intl.PluralRules('en-US').select(1); // Plural rules
177. new Intl.RelativeTimeFormat('en-US').format(-1, 'day'); // Relative time
178. new Intl.Locale('en-US'); // Locale
179. Object.keys(obj); // Get keys
180. Object.values(obj); // Get values
181. Object.entries(obj); // Get entries
182. Object.assign({}, obj); // Assign
183. Object.freeze(obj); // Freeze
184. Object.seal(obj); // Seal
185. Object.is(obj1, obj2); // Compare objects
186. Object.create(obj); // Create object
187. Object.defineProperty(obj, 'key', {}); // Define property
188. Object.getOwnPropertyDescriptor(obj, 'key'); // Get property descriptor
189. Object.getPrototypeOf(obj); // Get prototype
190. Object.setPrototypeOf(obj, proto); // Set prototype
191. Object.preventExtensions(obj); // Prevent extensions
192. Object.isExtensible(obj); // Check extensible
193. Object.isFrozen(obj); // Check frozen
194. Object.isSealed(obj); // Check sealed
195. Object.fromEntries([['key', 'value']]); // From entries
196. Array.isArray(arr); // Check array
197. Array.of(1, 2, 3); // Array of
198. Array.prototype.includes(arr, 1); // Array includes
199. Array.prototype.find(arr, x => x > 1); // Array find
200. Array.prototype.findIndex(arr, x => x > 1); // Array find index
Enter fullscreen mode Exit fullscreen mode

Conclusion

These 200 JavaScript shortcuts are essential for modern web development in 2025. Whether you're working on the frontend, backend, or full-stack applications, mastering these techniques will make you a more efficient and effective developer. Keep practicing, and happy coding!

Follow me for more tips and tricks: DHANIAN @e_opore 🚀

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (1)

Collapse
 
hafiz_abdullah_c4f93578 profile image
Hafiz Abdullah

Very informative for JS developer

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay