PROWAREtech

JavaScript: ES5 Array Methods

These EcmaScript 5 (ES5) array method functions are good fodder for web developers taking JavaScript exams.

See also, JavaScript EcmaScript 3 Array Method Functions.

All of the following code is ES5 and so is compatible with IE11.

• sort() (an ES3 method but worth revisiting)
• forEach()
• filter()
• map()
• reduce()

 // array.sort() sorts an array of values or objects
 var customers = [
	{fname:"Xavier",lname:"Smith",year:1990},
	{fname:"Jack",lname:"Levens",year:2010},
	{fname:"Jill",lname:"Kitrick",year:2000},
	{fname:"Aaron",lname:"Williams",year:1999},
	{fname:"Aaron",lname:"Williams",year:1985},
	{fname:"Hank",lname:"Brown",year:1987},
	{fname:"John",lname:"Smith",year:1982}
];
function compare(obj1, obj2) { // compare the object by last name then first name
	if(obj1.lname == obj2.lname) {
		if (obj1.fname < obj2.fname) {
			return -1;
		}
		else if (obj1.fname > obj2.fname) {
			return 1;
		}
	}
	else {
		if (obj1.lname < obj2.lname) {
			return -1;
		}
		else if (obj1.lname > obj2.lname) {
			return 1;
		}
	}
	return obj1.year - obj2.year; // if year does not matter then return zero here.
}
customers.sort(compare);
console.log(customers);

var customersByYear = customers.concat(); // copy the array
customersByYear.sort(function (obj1, obj2) {
	return obj1.year - obj2.year;
});
console.log(customersByYear);

 // array.forEach() calls a function for each array element
var customers = [
	{fname:"Xavier",lname:"Smith",year:1990},
	{fname:"Jack",lname:"Levens",year:2010},
	{fname:"Jill",lname:"Kitrick",year:2000},
	{fname:"Aaron",lname:"Williams",year:1985},
	{fname:"Hank",lname:"Brown",year:1987},
	{fname:"John",lname:"Smith",year:1982}
];

customers.forEach(function (element) { console.log(element.fname); });

customers.forEach(function (element, index, array) { // "index" and "array" are optional
	// do something with element or array[index]
	console.log(array[index].fname);
});

 // array.filter() creates a new array with a possible reduction in elements based on a test
var customers = [
	{fname:"Xavier",lname:"Smith",year:1990},
	{fname:"Jack",lname:"Levens",year:2010},
	{fname:"Jill",lname:"Kitrick",year:2000},
	{fname:"Aaron",lname:"Williams",year:1985},
	{fname:"Hank",lname:"Brown",year:1987},
	{fname:"John",lname:"Smith",year:1982}
];

var newMillennium = customers.filter(function (element) { return element.year >= 2000; }); // will create a new array
console.log(newMillennium);

var lastMillennium = customers.filter(function (element, index, array) { return array[index].year < 2000; }); // will create a new array; uses "array" and "index"
console.log(lastMillennium);

var oldCustomers = customers.filter(function (element) { // will create a new array with the age of the customer greater than or equal to thirty
	var age = (new Date()).getFullYear() - element.year;
	return age >= 30;
});
console.log(oldCustomers);

 // array.map() creates new array while modifying each element
var customers = [
	{fname:"Xavier",lname:"Smith",year:1990},
	{fname:"Jack",lname:"Levens",year:2010},
	{fname:"Jill",lname:"Kitrick",year:2000},
	{fname:"Aaron",lname:"Williams",year:1985},
	{fname:"Hank",lname:"Brown",year:1987},
	{fname:"John",lname:"Smith",year:1982}
];

var customerNames = customers.map(function (element, index, array) { return element.fname + ' ' + element.lname; }); // will create a new array with just the full name; "index" and "array" are optional
console.log(customerNames);

var customerAges = customers.map(function (element) { // will create a new array with the age of the customer calculated
	var d = new Date();
	element["age"] = d.getFullYear() - element.year;
	return element;
});
console.log(customerAges);

 // array.reduce() to calculate total values; it reduces the array to a single value
var customers = [
	{fname:"Xavier",lname:"Smith",year:1990},
	{fname:"Jack",lname:"Levens",year:2010},
	{fname:"Jill",lname:"Kitrick",year:2000},
	{fname:"Aaron",lname:"Williams",year:1985},
	{fname:"Hank",lname:"Brown",year:1987},
	{fname:"John",lname:"Smith",year:1982}
];

var initialTotalValue = 0;
var totalYears = customers.reduce(function (total, element, index, array) { // "index" and "array" are optional and unused here
	var d = new Date();
	return total + (d.getFullYear() - element.year);
}, initialTotalValue);
console.log(totalYears);

Comment