JavaScript Cheatsheet
Tags: javascript, webdev, programming, react
Published: 2024-01-29 16:48:23

Hello Everyone 👋 Ciao

It's been a long month and I know most of us are already waiting for January to get over. And I know it's been a long gap since my last technical article, but don't worry. Now I shall try to remain consistent in sharing what I learn regularly.

Today we are discussing JavaScript Arrays and Dates. In my future articles in this series, I shall discuss error handling, using JSON inside JavaScript, JavaScript Objects, JavaScript Events and much more. 

Also, you can share in the comments below what else you would like to learn in this series.
 
## JavaScript Arrays

JavaScript arrays are versatile and fundamental data structures used to store and organize multiple values within a single variable. Arrays in JavaScript can hold various data types, including numbers, strings, objects, or even other arrays. They provide methods and properties that enable efficient manipulation and retrieval of elements.

Arrays are indexed, starting from 0, allowing easy access to individual elements. Common operations on arrays include adding or removing elements, iterating through elements, and applying various transformation functions using methods like map, filter, and reduce.

In this series, we'll explore the essential concepts related to JavaScript arrays, ranging from basic operations to advanced techniques. Understanding arrays is crucial for any JavaScript developer, as they are a fundamental building block for handling collections of data efficiently.

| Code                                      | Comment                                       |
|-------------------------------------------|-----------------------------------------------|
| `var num = [1, 2, 3, 4];`                  | Initialize an array                           |
| `num.at(1)`                                | Access element at index 1: 2                  |
| `num.push(5)`                              | Add element to the end: [1, 2, 3, 4, 5]       |
| `num.pop()`                                | Remove last element: [1, 2, 3]                |
| `num.fill(1)`                              | Fill every element with 1: [1, 1, 1, 1]      |
| `num.shift()`                              | Remove first element: [2, 3, 4]               |
| `num.unshift(5)`                           | Add element to beginning: [5, 1, 2, 3, 4]    |
| `num.reverse()`                            | Sort in descending order: [4, 3, 2, 1]        |
| `num.includes(2)`                          | Check if array contains 2: true               |
| `num.map(item => 2 * item)`                | Map elements: [2, 4, 6, 8]                    |
| `num.filter(item => item > 2)`            | Filter elements: [3, 4]                       |
| `num.find(item => item > 2)`               | Find first element greater than 2: 3         |
| `num.every(item => item > 0)`             | Check if every element is greater than 0: true|
| `num.findIndex(item => item === 2)`       | Find index of element 2: 1                    |
| `num.reduce((prev, curr) => prev + curr, 0)`| Reduce elements to sum: 10                   |
| `num.toString()`                          | Convert array to string                       |
| `num.join(" * ")`                          | Join elements with " * ": "1 * 2 * 3 * 4"     |
| `num.splice(2, 0, "i", "p");`             | Add elements at index 2: [1, 2, 'i', 'p', 3, 4]|
| `num.slice(1, 4)`                          | Slice elements from index 1 to 3: [2, 'i', 'p']|
| `num.sort()`                               | Sort string alphabetically                    |
| `x.sort(function(a, b){return a - b});`   | Numeric sort                                 |
| `x.sort(function(a, b){return b - a});`   | Numeric descending sort                       |
| `x.sort(function(a, b){return 0.5 - Math.random()});` | Random sort                           |


## JavaScript Dates

In JavaScript, dates are represented by the Date object, offering a range of functionalities to work with dates and times. The Date object allows the creation, manipulation, and formatting of dates. It can be used to represent a specific moment or a duration.

JavaScript dates support various formats, including the standard string format (e.g., "YYYY-MM-DDTHH:mm:ssZ") and can be instantiated with different parameters, such as year, month, day, hour, minute, second, and millisecond.

Throughout this series, we'll delve into the intricacies of working with JavaScript dates. Topics will include creating dates, formatting and parsing date strings, performing arithmetic operations on dates, and handling time zones. Understanding how to effectively work with dates is essential for building robust and dynamic web applications.

| Code                                             | Comment                                           |
|--------------------------------------------------|---------------------------------------------------|
| `var d = new Date();`                            | Declare a new Date object for the current moment  |
| `Date("2017-06-23");`                            | Set date to "2017-06-23"                         |
| `Date("2017");`                                  | Set date to Jan 01, YYYY                         |
| `Date("2017-06-23T12:00:00-09:45");`             | Set date to "2017-06-23T12:00:00-09:45"       (YYYY-MM-DDTHH:MM:SSZ)   |
| `Date("June 23 2017");`                          | Set date to long date format "June 23 2017"      |
| `Date("Jun 23 2017 07:45:00 GMT+0530");`         | Set date to "Jun 23 2017 07:45:00 GMT+0530" (with time zone)      |
| `a = d.getDay();`                                | Get the weekday (0-6)                            |
| `getDate();`                                     | Get day as a number (1-31)                       |
| `getDay();`                                      | Get weekday as a number (0-6)                    |
| `getFullYear();`                                 | Get four-digit year (yyyy)                       |
| `getHours();`                                    | Get hour (0-23)                                  |
| `getMilliseconds();`                             | Get milliseconds (0-999)                         |
| `getMinutes();`                                  | Get minutes (0-59)                               |
| `getMonth();`                                    | Get month (0-11)                                |
| `getSeconds();`                                  | Get seconds (0-59)                               |
| `getTime();`                                     | Get milliseconds since 1970                     |

## Conclusion
In this article, we've started a journey into JavaScript Arrays and Dates. Understanding these fundamental concepts is essential for any JS developer, as arrays serve as the cornerstone for efficient data manipulation, while dates give developers the power to play with time-related functionalities. We've only scratched the surface of what's to come, and I'm excited to explore more into _error handling_, _using JSON within JavaScript_, _exploring JavaScript objects_, _understanding events_, and much more in the upcoming articles. 

Remember, the beauty of JavaScript lies in its versatility, and by mastering these core topics, you'll be better equipped to tackle the intricacies of web development. Stay tuned for a series packed with insights and practical knowledge!

**Disclaimer**: I have used ChatGPT to format the code and comments into proper shape for this article.