Javascript Array

Let's see Javascript Array. There are many method related array . We'll see Javascript specific things and something is good to know. Learning test is written using Jasmine. Please refer Jasmine usage which I wrote before if you have interest it. 

1. Define array and access, attributes
You can create array object explicitly like [line 2]. It is also possible like [line 8] simply. Like [line 20], you can use any type of object as an array element. If you give other type which is not integer like [line 14, 15], it create attribute of object.

	it("delcare array, access element, property", function() {
	var aray = new Array(3);
	expect(aray.length).toBe(3);
	aray = Array(4);
	expect(aray.length).toBe(4);
	aray = [];
	aray.length = 5;
	expect(aray.length).toBe(5);
	aray[0] = 0;
	aray[1] = 1;
	aray[1.5] = "this prop";
	aray["prop"] = "this is prop";
	expect(aray.length).toBe(5);
	expect(aray[1.5]).toBe("this prop");
	expect(aray.hasOwnProperty(1.5)).toBe(true);
	aray = new Array(1,2,3,"hi");
	expect(aray.length).toBe(4);
	expect(aray[0]).toBe(1);
	expect(aray[3]).toBe("hi");
	aray = [1, 2, "hi"];
	expect(aray.length).toBe(3);
	expect(aray[0]).toBe(1);
	expect(aray[2]).toBe("hi");
	expect(aray["length"]).toBe(3);
	});

view raw jasmine-learning-arraydeclare.js hosted with ❤ by GitHub

2. length
The length of array is a just last index + 1 as see in [line 5].

	it("length of array" , function() {
	//length of array is just last index + 1
	var aray = [];
	aray[10] = 10;
	expect(aray.length).toBe(11);
	aray = ["a", "b", "c"];
	expect(aray.length).toBe(3);
	aray.length = 2;
	expect(aray.length).toBe(2);
	expect(aray[0]).toBe("a");
	expect(aray[1]).toBe("b");
	expect(aray[2]).toBe(undefined);
	aray.length = 3;
	expect(aray[2]).toBe(undefined);
	});

view raw jasmine-learning-arraylength.js hosted with ❤ by GitHub

3. iteration
You can iterate element of array using for, for-each statement. Of course, you can use for-in statement.

	it("iterations of array", function() {
	var aray = ["1", "2", "3"];
	for (var i = 0; i < aray.length; i++) {
	expect(aray[i]).toBe((i + 1).toString());
	}
	var sum = 0;
	aray.forEach(function(i) {
	sum += (+i);
	})
	expect(sum).toBe(6);
	});

view raw jasmine-learning-arrayiteration.js hosted with ❤ by GitHub

4. concat, push, pop, join

	var aray = [1, 2, 3];
	//concat
	aray = aray.concat(4, 5, 6);
	expect(aray.length).toBe(6);
	for (var i = 0; i < aray.lenght; i++) {
	expect(aray[i]).toBe(i + 1);
	}
	//push
	aray = [1, 2, 3];
	expect(aray.length).toBe(3);
	aray.push(4);
	expect(aray.length).toBe(4);
	expect(aray[3]).toBe(4);
	//pop
	expect(aray.pop()).toBe(4);
	expect(aray.length).toBe(3);
	//join
	expect(aray.join(",")).toBe("1,2,3");

view raw jasmine-learning-arrayiconcatpushpopjoin.js hosted with ❤ by GitHub

5. shift, unshift

	//shift
	expect(aray.shift()).toBe(1);
	expect(aray.shift()).toBe(2);
	expect(aray.shift()).toBe(3);
	expect(aray.length).toBe(0);
	//unshift
	aray = [1, 2, 3];
	aray.unshift(4, 5);
	expect(aray.length).toBe(5);
	expect(aray[0]).toBe(4);
	expect(aray[1]).toBe(5);
	expect(aray[2]).toBe(1);
	expect(aray[3]).toBe(2);
	expect(aray[4]).toBe(3);

view raw jasmine-learning-arrayshiftunshit.js hosted with ❤ by GitHub

6. slice, splice
The splice function remove element which are in specific range and insert into new elements. You can see element 2, 3 are deleted from Array [1,2,3,4,5] and new element "a","b","c" are inserted. So the array contains [1,"a","b","c",4,5].

	//slice
	aray = [1, 2, 3, 4, 5]
	aray = aray.slice(0, 2);
	expect(aray.length).toBe(2);
	expect(aray[0]).toBe(1);
	expect(aray[1]).toBe(2);
	//splice(startInx, countToRemove, addElement, addElement, ...)
	aray = [1, 2, 3, 4, 5];
	aray.splice(1, 2, "a", "b", "c");
	console.log(aray);
	expect(aray.length).toBe(6);
	expect(aray[0]).toBe(1);
	expect(aray[1]).toBe("a");
	expect(aray[2]).toBe("b");
	expect(aray[3]).toBe("c");
	expect(aray[4]).toBe(4);
	expect(aray[5]).toBe(5);

view raw jasmine-learning-arrayslicesplice.js hosted with ❤ by GitHub

7. reverse, sort

	//reverse
	aray = [1, 2, 3];
	aray.reverse();
	expect(aray[0]).toBe(3);
	expect(aray[1]).toBe(2);
	expect(aray[2]).toBe(1);
	//sort
	aray = [5, 1, 3, 6];
	aray.sort();
	expect(aray[0]).toBe(1);
	expect(aray[1]).toBe(3);
	expect(aray[2]).toBe(5);
	expect(aray[3]).toBe(6);
	aray = [5, 1, 3, 6];
	var sortFunc = function(a, b) {
	if (a > b) {return -1;}
	else if ( a < b) { return 1;}
	else {return 0;}
	}
	aray.sort(sortFunc);
	expect(aray[0]).toBe(6);
	expect(aray[1]).toBe(5);
	expect(aray[2]).toBe(3);
	expect(aray[3]).toBe(1);

view raw jasmine-learning-arrayreversesort.js hosted with ❤ by GitHub

8. indexOf, lastIndexOf
The lastIndexOf method start inspecting from last index of array.

	//index of
	aray = ["a", "b", "c", "a", "a"];
	expect(aray.indexOf("a")).toBe(0);
	expect(aray.indexOf("a", 1)).toBe(3);
	expect(aray.indexOf("F")).toBe(-1);
	//lastindex of
	expect(aray.lastIndexOf("a")).toBe(4);
	expect(aray.lastIndexOf("a", 2)).toBe(0);

view raw jasmine-learning-arrayindexoflastindexof.js hosted with ❤ by GitHub

9. forEach, map
It is useful when do some work using each element of array as an argument.

	//forEach(callback)
	aray = [1, 2, 3];
	aray.forEach(function(a) {
	var inx = aray.indexOf(a);
	aray[inx] = a * a;
	});
	expect(aray[0]).toBe(1);
	expect(aray[1]).toBe(4);
	expect(aray[2]).toBe(9);
	//map(callback)
	aray = ["a", "b", "c"];
	var aray2 = aray.map(function(item) {
	return item.toUpperCase();
	});
	expect(aray2[0]).toBe("A");
	expect(aray2[1]).toBe("B");
	expect(aray2[2]).toBe("C")
	aray = [1, "a", 2, "b"];
	aray2 = aray.filter(function(item) {
	return (typeof item == "number");
	})
	expect(aray2.length).toBe(2)
	expect(aray2[0]).toBe(1);
	expect(aray2[1]).toBe(2);

view raw jasmine-learning-arrayforeachmap.js hosted with ❤ by GitHub

10. every, some, reduce
It is useful when do some inspecting work from whole range or specific range.

	//every
	aray = [1, 2, 3];
	var result = aray.every(function(item) {
	return (typeof item == "number");
	});
	expect(result).toBe(true);
	//some
	result = aray.some(function(item) {
	return (item % 2) == 0;
	});
	expect(result).toBe(true);
	//reduce
	aray = [1, 2, 3];
	result = aray.reduce(function(a, b) {
	return a + b;
	});
	expect(result).toBe(6);

view raw jasmine-learning-arrayeverysomereduce.js hosted with ❤ by GitHub

11. Array Generic Method

	it("Array generic method", function() {
	var string = "hello";
	var aray = new Array();
	Array.prototype.forEach.call(string, function(char) {
	aray.push(char);
	});
	expect(aray[0]).toBe('h');
	expect(aray[1]).toBe('e');
	expect(aray[2]).toBe('l');
	expect(aray[3]).toBe('l');
	expect(aray[4]).toBe('o');
	});

view raw jasmine-learning-arraygenericmethod.js hosted with ❤ by GitHub

12. Reference
- MDN - https://developer.mozilla.org/en/docs/Web/JavaScript
- Jasmine - http://jasmine.github.io/2.3/introduction.html