Array Type Checking and Conversion
Type Checking
const isValidArray = Array.isArray(targetValue);
String Conversion Methods
Method 1: toString()
const text = [1, 3, 5].toString(); // Result: '1,3,5'
Method 2: String Constructor
const text = String([1, 3, 5]); // Result: '1,3,5'
Method 3: join()
const data = ['x', 'y', 'z'];
const result1 = data.join(); // Result: 'x,y,z'
const result2 = data.join('-'); // Result: 'x-y-z'
String to Array Conversion
const source = "a,b,c,d";
const collection = source.split(','); // Result: ['a', 'b', 'c', 'd']
Converting Array-like Objects
const text = 'hello';
console.log(Array.from(text)); // Result: ['h','e','l','l','o']
// Converting DOM elements
const buttons = document.querySelectorAll('button');
const buttonArray = Array.from(buttons);
Creating Arrays with Values
const items = Array.of(1, 'test', true);
console.log(items); // Result: [1, 'test', true]
Adding and Removing Elements
Adding Elements
push() - Add to End
const list = ['A', 'B', 'C'];
const newSize = list.push('D'); // Returns: 4
// list becomes: ['A', 'B', 'C', 'D']
unshift() - Add to Beginning
const list = ['B', 'C'];
const newSize = list.unshift('A'); // Returns: 3
// list becomes: ['A', 'B', 'C']
Removing Elements
pop() - Remove from End
const list = ['A', 'B', 'C'];
const removed = list.pop(); // Returns: 'C'
// list becomes: ['A', 'B']
shift() - Remove from Beginning
const list = ['A', 'B', 'C'];
const removed = list.shift(); // Returns: 'A'
// list becomes: ['B', 'C']
splice() Method
const items = ['a', 'b', 'c', 'd', 'e'];
// Remove elements
const deleted = items.splice(1, 2); // Remove 2 elements starting at index 1
// items: ['a', 'd', 'e']
// deleted: ['b', 'c']
// Replace elements
const removed = items.splice(1, 2, 'x', 'y');
// items: ['a', 'x', 'y', 'e']
// removed: ['d', 'e']
Array Merging
concat() Method
const first = [1, 2];
const second = [3, 4];
const combined = first.concat(second); // Result: [1, 2, 3, 4]
Spread Operator
const first = [1, 2];
const second = [3, 4];
const merged = [...first, ...second]; // Result: [1, 2, 3, 4]
Extracting Elements
const data = ['a', 'b', 'c', 'd', 'e'];
const all = data.slice(); // All elements
const fromIndex = data.slice(2); // From index 2 to end: ['c', 'd', 'e']
const range = data.slice(1, 4); // Elements 1-3: ['b', 'c', 'd']
Filling Arrays
// Fill entire array
const empty = Array(4).fill('x'); // Result: ['x', 'x', 'x', 'x']
// Fill specific range
const values = ['a', 'b', 'c', 'd'];
values.fill('y', 1, 3); // Fill indices 1-2: ['a', 'y', 'y', 'd']
Array Sorting
Reversing
const items = ['a', 'b', 'c'];
const reversed = items.reverse(); // Result: ['c', 'b', 'a']
Custom Sorting
const numbers = [5, 2, 11, 3, 4, 1];
// Ascending order
numbers.sort((a, b) => a - b);
// Result: [1, 2, 3, 4, 5, 11]
// Descending order
numbers.sort((a, b) => b - a);
// Result: [11, 5, 4, 3, 2, 1]
// Sorting objects
const posts = [
{title: 'Post 1', time: 200},
{title: 'Post 2', time: 100},
{title: 'Post 3', time: 300}
];
posts.sort((a, b) => a.time - b.time);
Finding Elements
Index-based Search
const items = ['a', 'b', 'c', 'd', 'c'];
console.log(items.indexOf('c')); // First occurrence: 2
console.log(items.lastIndexOf('c')); // Last occurrence: 4
console.log(items.indexOf('c', 3)); // Search from index 3: 4
Value Checking
const values = [11, 12, 13, 14, 15];
console.log(values.includes(12)); // true
console.log(values.includes(20)); // false
console.log(values.includes(11, 1)); // false (start from index 1)
Conditional Search
find() - First Match
const numbers = [2, 3, 2, 5, 7, 6];
const match = numbers.find(item => item > 4); // Returns: 5
findIndex() - First Match Index
const numbers = [2, 3, 2, 5, 7, 6];
const position = numbers.findIndex(item => item > 4); // Returns: 3
Validation Methods
every() - All Elements Match
const words = ['cat', 'dog', 'bat'];
const allShort = words.every(item => item.length <= 3); // true
some() - Any Element Matches
const words = ['cat', 'elephant', 'dog'];
const hasLong = words.some(item => item.length > 5); // true
Array Iteration
Tradiitonal Loop
const items = ['first', 'second', 'third'];
for (let i = 0; i < items.length; i++) {
console.log(items[i]);
}
forEach() Method
const data = ['A', 'B', 'C'];
data.forEach((item, index, array) => {
console.log(`${index}: ${item}`);
});
for...of Loop
const items = ['A', 'B', 'C'];
for (const value of items) {
console.log(value);
}
Transformation Methods
map() - Transform Elements
const numbers = [1, 3, 6, 2, 5];
const doubled = numbers.map(item => item * 2); // [2, 6, 12, 4, 10]
const users = [
{name: 'John', age: 25},
{name: 'Jane', age: 30}
];
const names = users.map(user => user.name); // ['John', 'Jane']
filter() - Select Elements
const numbers = [1, 3, 6, 2, 5];
const large = numbers.filter(item => item > 3); // [6, 5]
const staff = [
{name: 'Alice', level: 'senior'},
{name: 'Bob', level: 'junior'}
];
const seniors = staff.filter(person => person.level === 'senior');
Aggregation with reduce()
Sum Calculation
const values = [2, 0, 1, 9, 6];
const total = values.reduce((sum, item) => sum + item, 0); // 18
Maximum Value
const numbers = [2, 0, 1, 9, 6];
const max = numbers.reduce((prev, current) =>
prev > current ? prev : current
);
Count Occurrences
function countValue(array, target) {
return array.reduce((count, item) => {
return count + (item === target ? 1 : 0);
}, 0);
}
const data = [1, 2, 6, 5, 6, 1, 6];
console.log(countValue(data, 6)); // 3
Practical Examples
Removing Duplicates
const items = [1, 2, 3, 2, 1, 4];
const unique = [];
for (let i = 0; i < items.length; i++) {
if (!unique.includes(items[i])) {
unique.push(items[i]);
}
}
// Result: [1, 2, 3, 4]
Array Clearing
let data = [1, 2, 3];
data = []; // Method 1
// or
data.length = 0; // Method 2
// or
data.splice(0); // Method 3
String Joining
const words = ['hello', 'world', 'test'];
const result = words.join('|'); // 'hello|world|test'
Array Reversal
function reverseArray(array) {
return array.slice().reverse();
}
// Manual implementation
function manualReverse(array) {
const result = [];
for (let i = array.length - 1; i >= 0; i--) {
result.push(array[i]);
}
return result;
}