Array & Array Methods (Basic)

What is Array?

An array is a non-primitive data type. You can store multiple data items and various data types within it. Since arrays are special objects in JavaScript, the typeof operator returns object meaning an array is essentially an object. You may already be aware of this.

const fruits = ["Apple", "Banana", "Orange"];

create a array in used to const variable. The reason is const protects the array variable, not the items inside. So we can still add or remove items, but we cannot replace the whole array.

After creating an array, the next step is to get the items from it. We use something called an index to access elements. An index is the position number of an item in the array. Important Rule Array index always starts from 0, not 1.

const fruits = ["Apple", "Mango", "Orange"];

console.log(fruits[0]); // Output: Apple
console.log(fruits[2]); // Output: Orange

What is Array Methods?

An array method is a built-in function that lets you add, remove, search, or change items in an array easily. You don’t need to write long code. JavaScript already gives you these tools. Methods save time and make code clean.

3 types of methods in here.

1. Methods That Add or Remove Items

These methods change the size of your array. They add new items or delete existing ones.

2. Methods That Search Items

These methods help you find something in the array. They don't change the array.

4. Methods That Reorder or Copy

These methods change the order or create copies.

I am just learning the basic methods; we can proceed with that.

• Array length
• Array toString()
• Array at()
• Array join()
• Array pop()
• Array push()
• Array shift()
• Array unshift()
• Array isArray()
• Array delete()
• Array concat()
• Array copyWithin()
• Array flat()
• Array slice()
• Array splice()
• Array toSpliced()

The W3Schools website lists several basic array methods, we can try creating each of these methods ourselves.
W3Schools Website Link :https://www.w3schools.com/js/js_array_methods.asp

Let's start with the length method.
What is length in Array?

length is an array property that tells you how many items are inside the array. It's a property, not a method. so we won't use ().

const fruits = ["Apple", "Mango", "Orange"];
console.log(fruits.length); 
// Output: 3

Okay, now I'm going to create this Method Sorry Sorry.. Create property myself.

function lengthDemo(arr) {
    let i = 0;

    while (arr[i] != undefined) {
        i++;
    }

    return i;
}

const arr=[ 1, 2, 3, 4, 5]

console.log(lengthDemo(arr));

output : 5

At first, I did it this way. But there is a problem with this. The thing is...

const arr=[ 1, , 3, , 5]

Finding a Problem in My Array Length Program

I tried to find the length of an array without using the built-in .length property.

I wrote the following code:

function lengthDemo(arr) {
    let i = 0;

    while (arr[i] != undefined) {
        i++;
    }

    return i;
}

const arr=[ 1, , 3, , 5]

console.log(lengthDemo(arr));

output : 1

I expected the output to be 5 because the array contains five positions.

But the program returned 1.

After checking the code, I found the problem. The array contains empty slots.

[1, , 3, , 5]

JavaScript treats these empty slots as undefined.

The while loop checks whether the current element is not undefined.

When i becomes 1, arr[1] is undefined, so the condition becomes false and the loop stops immediately.

Because of this, the function returns 1 instead of 5.

*This helped me understand that arrays with empty slots can cause unexpected results. My friends helped me solve this problem. So, I found a new way. *

I wrote the following code.

let array = [1, , 3, , 5];
let lengthDemo = 0;

for (let e of array) {
    length++;
}


console.log(lengthDemo);

output : 5

console.log(typeof array[1]);

output : undefined

I wanted to understand how JavaScript handles empty spaces inside an array.

[1, , 3, , 5]

Here, index 1 and index 3 are empty.

When I executed the code:

console.log(typeof array[2]);

The output was:

number

**This is because array[2] contains the value 3, and the data type of 3 is number.

I also learned that empty slots in JavaScript arrays behave differently. If I check an empty slot like this:**

console.log(typeof array[1]);

The output will be:

undefined

This is because there is no value stored at index 1.

Another interesting thing is that the for...of loop still iterates through all positions in the array, including empty slots. Therefore, the value of length becomes 5.

Through this example, I learned that JavaScript arrays can contain empty slots, and these empty slots are treated as undefined when accessed.

Okay Guys, I will create all the methods in my own style. So, let's meet in the next blog post.