# My JavaScript Learning Journey - Week 5: Dates, Arrays, and Objects

Every week of my JavaScript learning journey brings something new to explore. Some concepts are easy to understand at first, while others take a little more time and practice.

During Week 5, from Day 25 to Day 29 of my learning challenge, I explored JavaScript Date and Time, array methods, objects, built-in Object methods, and object destructuring.

At first, some of these topics felt a little confusing, especially when I started working with nested objects and different methods. But practising them with examples helped me understand how they work.

In this article, I am sharing what I learned this week, along with some simple examples from my learning notes.

## Day 25: Learning About Date and Time in JavaScript

On Day 25, I explored how JavaScript works with dates and time.

I learned about the Date object and some useful methods that help us get information about dates, times, and timestamps.

### Understanding the Date object

JavaScript provides a built-in Date object that helps us work with dates and times.

For example:

```javascript
const currentDate = new Date();

console.log(currentDate);
```

This creates a new Date object representing the current date and time.

I also explored some useful methods.

**getTime()**

The getTime() method returns the timestamp in milliseconds since January 1, 1970, UTC.

```javascript
const date = new Date();

console.log(date.getTime());
```

**Date.now()**

The Date.now() method returns the current timestamp in milliseconds.

```javascript
console.log(Date.now());
```

One thing I learned is that Date.now() and getTime() can both give us a timestamp in milliseconds, but they are used a little differently.

### Converting milliseconds into seconds

I also practised converting the current timestamp from milliseconds into seconds.

```javascript
const timestamp = Math.floor(Date.now() / 1000);

console.log(timestamp);
```

Since 1 second contains 1000 milliseconds, dividing by 1000 gives us seconds. Using Math.floor() removes the decimal part.

### getDate() and toLocaleDateString()

I explored these methods as well:

```javascript
const date = new Date();

console.log(date.getDate());
console.log(date.toLocaleDateString());
```

- getDate() returns the day of the month, from 1 to 31.
- toLocaleDateString() returns a date string formatted according to a locale.

This helped me understand how JavaScript can work with date information and display it in a readable format.

## Day 26: Exploring More Array Methods

On Day 26, I learned about some array methods that were new to me:

🔹flat()

🔹flatMap()

🔹Array.from()

🔹Array.of()

🔹Array.isArray()

I also explored the difference between map() and flatMap().

Let's look at some simple examples.

1. **flat()**

The flat() method creates a new array by flattening nested arrays.

```javascript
const numbers = [1, 2, [3, 4], [5, 6]];

console.log(numbers.flat());
```

**Output:**

```javascript
[1, 2, 3, 4, 5, 6]
```

This method is useful when an array contains other arrays and I want to bring their elements into a single array.

2. **map()**

The map() method creates a new array by applying a function to each element of the original array.

```javascript
const numbers = [1, 2, 3];

const result = numbers.map((num) => num * 2);

console.log(result);
```

**Output:**

```javascript
[2, 4, 6]
```

Here, each number is multiplied by 2, and the results are stored in a new array.

3. **flatMap()**

The [flatMap()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap) method combines mapping and flattening one level of nested arrays.

```javascript
const numbers = [1, 2, 3];

const result = numbers.flatMap((num) => [num, num * 2]);

console.log(result);
```

**Output:**

```javascript
[1, 2, 2, 4, 3, 6]
```

This was one of the interesting methods I explored because it combines two operations.

### Difference between map() and flatMap()

The difference became clearer when I tried the same example with both methods.

```javascript
const numbers = [1, 2, 3];

const result1 = numbers.map((num) => [num, num * 2]);

const result2 = numbers.flatMap((num) => [num, num * 2]);

console.log(result1);
console.log(result2);
```

Output:

```javascript
// map()
[[1, 2], [2, 4], [3, 6]]

// flatMap()
[1, 2, 2, 4, 3, 6]
```

The map() method keeps the nested arrays, while flatMap() flattens the returned arrays by one level.

4. Array.from()

The Array.from() method creates a new array from an iterable or array-like object.

```javascript
const name = "JavaScript";

const result = Array.from(name);

console.log(result);
```

**Output:**

```javascript
["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"]
```

5. **Array.of()**

The Array.of() method creates a new array from the values passed to it.

```javascript
const numbers = Array.of(10, 20, 30);

console.log(numbers);
```

**Output:**

```javascript
[10, 20, 30]
```

6. **Array.isArray()**

The Array.isArray() method checks whether a value is an array.

```javascript
const numbers = [1, 2, 3];

console.log(Array.isArray(numbers)); // true
console.log(Array.isArray("Dharma")); // false
```

I found these methods useful to explore because they provide different ways to create, transform, and check arrays.

## Day 27: Understanding Objects in JavaScript

On Day 27, I started learning more about objects.

Objects are an important part of JavaScript because they allow us to organize related information using key-value pairs.

For example:

```javascript
const student = {
  name: "Dharma",
  course: "MCA",
  learning: "JavaScript"
};

console.log(student);
```

Here, name, course, and learning are properties of the object.

### Object literals

An object literal is a way to create an object using curly braces {}.

```javascript
const user = {
  name: "Dharma",
  age: 22
};
```

I also learned how to access object properties using dot notation and bracket notation.

```javascript
console.log(user.name);
console.log(user["age"]);
```

Both approaches allow us to access the values stored in an object.

### Singleton objects

I also explored the difference between singleton objects and object literals.

An object literal is a way of creating an object directly:

```javascript
const user = {
  name: "Dharma"
};
```

A singleton object refers to an object intended to have only one instance in a particular context.

In JavaScript, there is not a special singleton object syntax. A singleton can be created using different approaches, such as keeping one object instance in a module.

This helped me understand that object literals and singleton objects describe different ideas: one is a way of creating an object, while the other is about having a single instance.

### Symbols in objects

I also learned about Symbol().

A Symbol creates a unique value that can be used as an object property key.

```javascript
const id = Symbol("id");

const user = {
  name: "Dharma",
  [id]: 101
};

console.log(user.name);
console.log(user[id]);
```

This was a new concept for me, and I found it interesting how a Symbol can be used as a property key.

### Functions inside objects

I practised defining functions inside objects as well.

```javascript
const user = {
  name: "Dharma",

  greet() {
    console.log("Hello!");
  }
};

user.greet();
```

This helped me understand how objects can contain both data and behaviour.

## Day 28: Exploring Built-in Object Methods

On Day 28, I explored several built-in Object methods.

These methods provide useful ways to work with object properties, create objects, and control whether an object can be modified.

Here are some methods I practised.

**Object.keys()**

Returns an array containing an object's own enumerable property names.

```javascript
const user = {
  name: "Dharma",
  age: 22
};

console.log(Object.keys(user));
```

**Output:**

```javascript
["name", "age"]
```

**Object.values()**

Returns an array containing an object's own enumerable property values.

```javascript
console.log(Object.values(user));
```

**Output:**

```javascript
["Dharma", 22]
```

### Object.entries()

Returns an array containing an object's key-value pairs.

```javascript
console.log(Object.entries(user));
```

**Output:**

```javascript
[["name", "Dharma"], ["age", 22]]
```

These methods helped me understand how I can access object information in different forms.

**Object.assign()**

The Object.assign() method copies enumerable own properties from one or more source objects into a target object.

```javascript
const first = {
  name: "Dharma"
};

const second = {
  course: "MCA"
};

const result = Object.assign({}, first, second);

console.log(result);
```

**Output:**

```javascript
{
  name: "Dharma",
  course: "MCA"
}
```

**The spread operator**

I also learned about the spread operator (...) and how it can be used to copy properties into a new object.

```javascript
const user = {
  name: "Dharma",
  course: "MCA"
};

const newUser = {
  ...user,
  learning: "JavaScript"
};

console.log(newUser);
```

**Output:**

```javascript
{
  name: "Dharma",
  course: "MCA",
  learning: "JavaScript"
}
```

This gave me another way to create a new object using the properties of an existing object.

**Object.freeze() and Object.seal()**

I also explored two methods that control changes to objects.

- Object.freeze() prevents changes to an object's own properties, including adding, removing or changing property values.
- Object.seal() prevents adding or removing properties, but existing writable properties can still be changed.

These methods helped me understand that JavaScript provides ways to restrict certain changes to objects.

**Other methods I explored**

I also learned about:

- Object.hasOwn() - checks whether an object has a specified own property.
- hasOwnProperty() - an object method that checks for an own property.
- Object.create() - creates a new object using a specified prototype.

There are many more built-in Object methods and I know I will get more familiar with them as I continue practising.

## Day 29: Learning Object Destructuring

On Day 29, I learned about object destructuring.

Before learning destructuring, I used to access object properties like this:

```javascript
const user = {
  name: "Dharma",
  course: "MCA"
};

const name = user.name;
const course = user.course;

console.log(name);
console.log(course);
```

Object destructuring provides a shorter way to extract properties from an object.

```javascript
const user = {
  name: "Dharma",
  course: "MCA"
};

const { name, course } = user;

console.log(name);
console.log(course);
```

This makes the code easier to read when I need to access multiple properties.

**Destructuring nested objects**

I also practised extracting properties from nested objects.

```javascript
const user = {
  name: "Dharma",
  address: {
    city: "Bhubaneswar",
    country: "India"
  }
};

const {
  address: { city, country }
} = user;

console.log(city);
console.log(country);
```

Here, I can directly extract city and country from the nested address object.

This was a little challenging at first, but practising with examples helped me understand how the syntax works.

**Destructuring in function parameters**

I also learned that object destructuring can be used directly in function parameters.

```javascript
const user = {
  name: "Dharma",
  course: "MCA"
};

function displayUser({ name, course }) {
  console.log(name);
  console.log(course);
}

displayUser(user);
```

Instead of receiving the whole object and accessing its properties inside the function, I can extract the properties directly in the parameter list.

**Using default values**

I also practised assigning default values during destructuring.

```javascript
const user = {
  name: "Dharma"
};

const { name, course = "MCA" } = user;

console.log(name);
console.log(course);
```

Since the course property is not present in the object, the default value "MCA" is used.

This helped me understand how destructuring can make working with objects more convenient.

Read More: [First Week Learning JavaScript: From Variables to Arrays](https://dharmapadadalai.hashnode.dev/first-week-learning-javascript-variables-to-arrays)

## What I Learned in Week 5

Looking back at this week, I explored several concepts that are useful when working with JavaScript.

Here are my main takeaways:

- I learned how JavaScript handles dates, time and timestamps.
- I explored more array methods and understood how they can transform data.
- I practised creating objects, accessing properties and working with nested objects.
- I explored built-in Object methods for accessing and managing properties.
- I learned how object destructuring makes it easier to extract values.

One thing I noticed is that JavaScript has many built-in features that can help simplify code. But knowing the method name is not enough. I need to practise using it and understand what it returns.

Some methods are still new to me, and I may need to revisit them. That is part of learning.

Read More: [Week 3: DOM Manipulation, Events & Practice](https://dharmapadadalai.hashnode.dev/javascript-learning-journey-week-3-dom-events-practice)

## What is Next in My JavaScript Journey?

I am continuing my JavaScript learning challenge and I want to keep building on the fundamentals.

My next steps are to practise more, solve exercises and use these concepts in small projects.

I know I will not understand everything perfectly in one attempt. But each time I practise, I become a little more comfortable with the language.

If you are also learning JavaScript, my advice is to take your time with the fundamentals. Try examples yourself, change the values, observe the output and see what happens.

Learning takes time and every small step counts.

This is the end of Week 5 of my JavaScript learning journey. I am excited to keep learning and see what the next week brings! 🚀