Study JavaScript #5 – Arrays

by

Arrays in JavaScript are versatile and essential for managing collections of data. Unlike statically typed languages such as Java or C, JavaScript arrays are dynamic and can hold multiple types of values within a single array.

1. Creating Arrays

JavaScript provides multiple ways to create arrays.

1.1 Using Array Literals

The simplest way to create an array is using square brackets [].

JavaScript
var fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana
console.log(fruits[2]); // Cherry
console.log(fruits[3]); // undefined

1.2 Using the Array() Constructor

Creating an Empty Array with a Specified Length

JavaScript
var numbers = new Array(3);
console.log(numbers); // [empty × 3]
console.log(numbers.length); // 3

Creating an Array with Specific Elements

JavaScript
var numbers = new Array(1, 2, 3);
console.log(numbers); // [1, 2, 3]
console.log(numbers.length); // 3

2. Adding Elements to an Array

JavaScript allows dynamic modification of arrays.

JavaScript
var arr = [];
arr[0] = 1;
arr[3] = 'hello';
arr[5] = true;
console.log(arr); // [1, undefined, undefined, "hello", undefined, true]
console.log(arr.length); // 6

3. Array Properties

3.1 length Property

The length property represents the highest index plus one.

JavaScript
var arr = [1, 2, 3, 4];
console.log(arr.length); // 4

arr.length = 2;
console.log(arr); // [1, 2]

3.2 Adding Custom Properties

Arrays in JavaScript are objects, allowing additional properties.

JavaScript
var arr = [1, 2, 3];
arr.name = "Test Array";
console.log(arr.name); // "Test Array"
console.log(arr.length); // 3

4. Removing Elements

4.1 Using delete

The delete operator removes an element but does not change length.

JavaScript
var arr = [1, 2, 3];
delete arr[1];
console.log(arr); // [1, undefined, 3]
console.log(arr.length); // 3

4.2 Using splice()

splice() removes elements and updates length.

JavaScript
var arr = [0, 1, 2, 3, 4];
arr.splice(2, 1);
console.log(arr); // [0, 1, 3, 4]
console.log(arr.length); // 4

5. Checking If a Value is an Array

5.1 Using Array.isArray()

JavaScript
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray(1004)); // false

5.2 Using instanceof

JavaScript
console.log([1, 2] instanceof Array); // true
console.log(1004 instanceof Array); // false

6. Iterating Over Arrays

6.1 Using for...in (Not Recommended)

for...in iterates over enumerable properties, including custom properties.

JavaScript
var arr = [0, 1, 2];
arr.name = 'Test';

for (var key in arr) {
    console.log('key:', key, 'value:', arr[key]);
}

6.2 Using forEach()

JavaScript
var arr = ["a", "b", "c"];
arr.forEach((value, index) => console.log(index, value));

6.3 Using for...of

JavaScript
for (let value of arr) {
    console.log(value);
}

7. Useful Array Methods

7.1 indexOf()

Finds the first occurrence of a value.

JavaScript
var arr = [1, 2, 3, 3];
console.log(arr.indexOf(3)); // 2

7.2 concat()

Merges arrays without modifying the original.

JavaScript
var a = ['x', 'y'];
var b = [1, 2];
var c = a.concat(b);
console.log(c); // ["x", "y", 1, 2]

7.3 join()

Converts an array to a string.

JavaScript
var arr = ['a', 'b', 'c'];
console.log(arr.join('|')); // "a|b|c"

7.4 pop() and shift()

Removes elements from the end and the start, respectively.

JavaScript
var arr = ['a', 'b', 'c'];
arr.pop();
console.log(arr); // ["a", "b"]

arr.shift();
console.log(arr); // ["b"]

7.5 push() and unshift()

Adds elements to the end and the start, respectively.

JavaScript
var arr = ['b', 'c'];
arr.push('d');
console.log(arr); // ["b", "c", "d"]

arr.unshift('a');
console.log(arr); // ["a", "b", "c", "d"]

7.6 reverse()

Reverses the order of elements.

JavaScript
var arr = ['a', 'b', 'c'];
arr.reverse();
console.log(arr); // ["c", "b", "a"]

Conclusion

JavaScript arrays are powerful and flexible, supporting a variety of operations for efficient data manipulation. Understanding these fundamentals is key to writing effective JavaScript code. Keep exploring and experimenting to master arrays!

Leave a Comment