data types: arrays and objects

Data TypesObjects and Arrays

Tuesday, September 8, 2009

objectscollection of properties and methods


creating a new object

new Object()


creating a new object(shortcut)

{}


different ways to do the same thing

var student = new Object();student.name = 'John Doe';student.age = 18;

var student = {name:'John Doe', age:18};


keys can be strings


var student = {'name':'John Doe', 'age':18};


liberal formattingvar student = {name:'John Doe', age:18};

var student = { name:'John Doe', age:18};

var student = { name : 'John Doe', age : 18};


writing properties

var student = {};student.name = 'John Doe';


write as manyas you want

var student = {};student.name = 'John Doe';student.age = 18;student.gpa = 3.7;


writing properties(shortcut)

var student = {name:'John Doe'};


writing multiple properties

var student = {name:'John Doe', age:18, gpa:3.7};


reading properties


student.name // "John Doe"student.age // 18


reading properties(alternative syntax)


student['name'] // "John Doe"student['age'] // 18


reading properties that are not set


student.foobar // undefined


different ways to dothe same thing


student.name // "John Doe"student['name'] // "John Doe"

student.age // 18student['age'] // 18


methodswe’ll cover them later


arraysordered collection of values


creating an array

new Array();


new Array with no arguments

var things = new Array();things.length; // 0creates empty array


new Arraywith one argument

var things = new Array(5);things.length; // 5

creates array with number of undefined elementsshouldn’t ever need to do this, but be aware


new Arraywith multiple arguments

creates array with each argument as element in array

var things = new Array(1,2,3);things.length; // 3


summary


creating an array(shortcut)

[]


much more predictable


array methods


remember how stringsare zero indexed?

var car = "car";car[0] // ccar[1] // acar[2] // r


arrays are too

var car = ['c', 'a', 'r'];car[0] // ccar[1] // acar[2] // r


array of numbers

var things = [1,2,3,4,5];

things[0] // 1things[1] // 2things[2] // 3things[3] // 4things[4] // 5things[5] // undefined


remember how strings know their length?

var football = "football";football.length // 8


arrays do too

var things = [1,2,3,4,5];things.length // 5http://www.w3schools.com/jsref/jsref_length_array.asp


http://www.w3schools.com/jsref/jsref_length_array.asp

http://www.w3schools.com/jsref/jsref_length_array.asp

remember how strings can get the indexOf stuff?

var football = "football";football.indexOf('f') // 0football.indexOf('o') // 1football.indexOf('foot') // 0football.indexOf('z') // -1


arrays can too

var car = ['c','a','r'];car.indexOf('c'); // 0car.indexOf('a'); // 1car.indexOf('r'); // 2car.indexOf('b'); // -1


more indexOf examples

var strings = ['aa', 'b', 'ccD'];strings.indexOf('aa') // 0strings.indexOf('ccD') // 2strings.indexOf('ccd') // -1


arrays can be multi-dimensional

var multi = ['a', 'b', ['z', 'y']];multi[0] // 'a'multi[1] // 'b'multi[2] // ['z', 'y']multi[2][0] // 'z'multi[2][1] // 'y'multi[2].length // 2


concatreturns joined arrays but does not alter them

http://www.w3schools.com/jsref/jsref_concat_array.asp




concat of a and b

var a = [1,2];var b = [3,4];

var c = a.concat(b);

// a is still [1,2]// b is still [3,4]// c is now [1,2,3,4]


concat of b and a

var a = [1,2];var b = [3,4];

var c = b.concat(a);

// a is still [1,2]// b is still [3,4]// c is now [3,4,1,2]


concat with multi-dimensional

var multi = ['a', 'b', ['z', 'y']];multi.concat([1, 2]) // ['a', 'b', ['z','y'], '1', '2']


joinjoins the elements of an array

into a string separated by a delimiter

http://www.w3schools.com/jsref/jsref_join.asp




join

var car_letters = ['c', 'a', 'r'];car_letters.join(''); // "car"


join with delimiter

var car_letters = ['c', 'a', 'r'];car_letters.join(','); // "c,a,r"


delimiter can be any string

var car_letters = ['c', 'a', 'r'];car_letters.join('WIN'); // "cWINaWINr"


date example

var date = [9, 8, 2009]date.join('/'); // "9/8/2009"


string has the opposite of join called split

var date = "9/8/2009"date.split('/') // [‘9’,‘8’,‘2009’]


split/join allow for switching back and forth

var date = "9/8/2009";var date_array = date.split('/') // [‘9’,‘8’,‘2009’]var date_string = date_array.join('/'); // “9/8/2009”


reversereverses the order of an array

http://www.w3schools.com/jsref/jsref_reverse.asp




reverse

var car = ['r', 'a', 'c'];car.reverse(); // ['c', 'a', 'r']


sortsorts the elements of an array

http://www.w3schools.com/jsref/jsref_sort.asp




sorting numbers

var numbers = [5,3,99,77,2];numbers.sort(); // [2,3,5,77,99]


sorting strings

var names = ['John', 'Steph', 'Steve', 'Carrie'];names.sort(); // ['Carrie','John','Steph','Steve']


upper case before lower case

var letters = ['a', 'B', 'c', 'D'];letters.sort(); // ['B','D','a','c']


popremoves and returns the last element of an array

(opposite of shift)

http://www.w3schools.com/jsref/jsref_pop.asp




pop

var car = ['c', 'a', 'r'];var last = car.pop();last // 'r'car // ['c','a']


pop

var car = ['c', 'a', 'r'];car.pop(); // 'r'car.pop(); // 'a'car.pop(); // 'c'car.pop(); // undefinedcar.length // 0


shiftremoves and returns the first element of an array

(opposite of pop)

http://www.w3schools.com/jsref/jsref_shift.asp




shift

var car = ['c', 'a', 'r'];var first = car.shift();first // 'c'car // ['a','r']


shift

var car = ['c', 'a', 'r'];car.shift(); // 'c'car.shift(); // 'a'car.shift(); // 'r'car.shift(); // undefinedcar.length // 0


pushadds one or more elements to the end of

an array and returns the new length (opposite of unshift)

http://www.w3schools.com/jsref/jsref_push.asp




push single element

var car = ['c','a','r'];car.push('d'); // 4car // ['c','a','r','d']


push multiple elements

var car = ['c','a','r'];car.push('d', 'e', 'd'); // 6car // ['c','a','r','d', 'e', 'd']


unshiftadds one or more elements to the beginning of the array and returns the new length (opposite of push)

http://www.w3schools.com/jsref/jsref_unshift.asp




unshift single element

var car = ['c','a','r'];car.unshift('s'); // 4car // ['s','c','a','r']


unshift multiple elements

var car = ['c','a','r'];car.unshift('o', 's'); // 5car // ['o','s','c','a','r']


shift/unshift pop/pushend of arraybeginning of array


sliceslices elements out of an array without changing array


slice parametersarray.slice(starting position, index after last position)


slice with one argument

var numbers = [1,2,3,4];numbers.slice(2); // [3, 4]numbers // [1,2,3,4]slices from index to end of array


slice with two arguments

slices from beginning index to index before second argument

var numbers = [1,2,3,4];numbers.slice(0, 2); // [1, 2]numbers // [1,2,3,4]


slice with negative second argument

var numbers = [1,2,3,4];numbers.slice(1, -1); // [2, 3]numbers.slice(1, -2); // [2]numbers // [1,2,3,4]negative starts from end and goes backwards


spliceadds and removes elements from an array

http://www.w3schools.com/jsref/jsref_splice.asp




splice parametersarray.splice(index, how many to remove, elements to add)

index and how many to remove are required


removing an element from an array

var letters = ['a', 'c', 'd'];letters.splice(1, 1); // 'c'letters // ['a','d']in english: at index 1, remove 1 element


removing multiple elements from an array

var letters = ['a', 'c', 'd'];letters.splice(1, 2); // ['c','d']letters // ['a']in english: at index 1, remove 2 elements


adding an elementto an array

var letters = ['a', 'c', 'd'];letters.splice(1, 0, 'b'); // ['a', 'b', 'c', 'd']in english: at index 1, remove 0 elements, add ‘b’


adding multiple elements to an array

in english: at index 1, remove 0 elements, add ‘b’ and ‘c’

var letters = ['a', 'c', 'd'];letters.splice(1, 0, 'b', 'c');letters // ['a','b','c','c','d']


replacing elements in an array

var car = ['c', 'a', 'r'];car.splice(0, 1, 'b'); // 'c'car // ['b','a','r']


var person = {name:'John Doe'};person.name


var person = {name:'John Doe'};person.name'John Doe'


var person = {name:'John Doe'};person.name = 'Jane Doe';person.name


var person = {name:'John Doe'};person.name = 'Jane Doe';person.name'Jane Doe'


var person = {name:'John Doe'};person['name']


var person = {name:'John Doe'};person['name']'John Doe'


[12, 23, 36].length


[12, 23, 36].length

3


[12, 23, 36].indexOf(12)


[12, 23, 36].indexOf(12)

0


[12, 23, 36].indexOf(35)


[12, 23, 36].indexOf(35)

-1


['b','a','t'].join('')


['b','a','t'].join('')

'bat'


'9/8/2009'.split('/')


'9/8/2009'.split('/')['9', '8', '2009']


var numbers = [1,2,3];numbers.push(4)numbers


var numbers = [1,2,3];numbers.push(4)numbers[1,2,3,4]


var numbers = [1,2,3,4];numbers.shift();numbers


var numbers = [1,2,3,4];numbers.shift();numbers[2,3,4]


var numbers = [2,3,4];numbers.unshift(1);numbers


var numbers = [2,3,4];numbers.unshift(1);numbers [1,2,3,4]


var numbers = [2,3,4];numbers.pop();numbers


var numbers = [2,3,4];numbers.pop();numbers [2,3]


var numbers = [2,3,4];numbers.splice(1, 0, 1);numbers


var numbers = [2,3,4];numbers.splice(1, 0, 1);numbers[2,1,3,4]


var numbers = [2,3,4];numbers.splice(0, 1, 1);numbers


var numbers = [2,3,4];numbers.splice(0, 1, 1);numbers[1,3,4]


data types: arrays and objects

Technology