Computer Science and Engineering College of Engineering The Ohio State University

JavaScript:Coercion, Functions, Arrays

Lecture 20

Computer Science and Engineering The Ohio State University

Conversion of Primitive Values

String Number Boolean

numbers 0 "0" false

-0 "0" false

1 "1" true

NaN "NaN" false

Infinity "Infinity" true

-Infinity "-Infinity" true

6.022e23 "6.022e+24" true

Computer Science and Engineering The Ohio State University

Conversion of Primitive Values

string number boolean

boolean true "true" 1

false "false" 0

strings "" 0 false

"1.2" 1.2 true

"0" 0 true

"one" NaN true

Computer Science and Engineering The Ohio State University

Conversion of Primitive Values

string number boolean

undefined undefined "undefined" NaN false

null null "null" 0 false

Computer Science and Engineering The Ohio State University

Easier? Column-Major View

How do things convert to Boolean? Empty string is false Numbers (+/-)0 and NaN are false undefined and null are false

How do things convert to Numbers? Empty string is 0 Non-numeric strings are NaN undefined is NaN null is 0

Computer Science and Engineering The Ohio State University

== Testing is… Different

When types don't match, coerce: null & undefined only equal each other Strings & booleans converted to numbers

'1' == true

Pitfall: NaN is not equal to NaN Object converted via valueOf or toString

Several surprising consequencesfalse == 'false' //=>falsefalse == '0' //=>true('0' == 0) && (0 == '') && ('0' != '')

dorey.github.io/JavaScript-Equality-Table

Computer Science and Engineering The Ohio State University

Functions are People too

Named functions: declaration & usefunction foo(a, b) { … }foo("hi", 3);

Anonymous functionsfunction(a, b) { … }//how do we invoke such a thing?

Functions are first-class citizens They can be assigned to variables!

var foo = function(a, b) {…};foo("hi", 3);var b = foo; //cf var b = foo();

Computer Science and Engineering The Ohio State University

Functions Can Be Arguments

function apply(x, a) { return x(a); //x is a function!

}

function square(i) { return i*i;

}

apply(square, 5) //=>25

Computer Science and Engineering The Ohio State University

Functions Can Be Return Valuesfunction grantDegree() {

function addTitle(name) { return "Dr. " + name;

} return addTitle; //a function!

}

var phd = grantDegree(); phd("Turing"); //phd is a function!

Computer Science and Engineering The Ohio State University

Closuresfunction greaterThan(bound) {

function compare (value) { return value > bound;

} return compare; //1-arg function

}

var testPos = greaterThan(0); testPos(4) //=>true testPos(-3) //=>false

Computer Science and Engineering The Ohio State University

Closures + Anonymityfunction greaterThan(bound) { function compare (value) {

return value > bound; } return compare; //1-arg function

}

var testPos = greaterThan(0); testPos(4) //=>true testPos(-3) //=>false

Computer Science and Engineering The Ohio State University

Closures + Anonymityfunction greaterThan(bound) { var compare = function(value) {

return value > bound; } return compare; //1-arg function

}

var testPos = greaterThan(0); testPos(4) //=>true testPos(-3) //=>false

Computer Science and Engineering The Ohio State University

Closures + Anonymityfunction greaterThan(bound) { return function(value) { return value > bound;

} }

var testPos = greaterThan(0); testPos(4) //=>true testPos(-3) //=>false

Computer Science and Engineering The Ohio State University

Arrays: Basics

Numbered starting at 0 Indexed with [ ] Property length is # of elements

var sum = 0;for (var i = 0; i < n.length; i++) {

sum += n[i];}

Computer Science and Engineering The Ohio State University

Array Instantiation/Initialization

Instantiate with newvar n = new Array(3);

Initially, each element is undefined Note: Elements can be a mix of types

n[0] = 10;n[1] = "hi";n[2] = new Array(100);

Array literals usually preferredvar n = [10, 20, 30, 40];var m = ["hi", , "world", 3.14];[3, "hi", 17, [3, 4]].length == 4

Computer Science and Engineering The Ohio State University

Dynamic Size

Arrays can growvar n = ["tree", 6, -2];n.length == 3 //=>truen[8] = 17;n.length == 9 //=>true

Arrays can shrinkn.length = 2;//n is now ["tree", 6 ]

Computer Science and Engineering The Ohio State University

Arrays are Dynamic

var n = [];

Computer Science and Engineering The Ohio State University

Arrays are Dynamic

n

var n = [];

Computer Science and Engineering The Ohio State University

Arrays are Dynamic

n

var n[0] = 4;

Computer Science and Engineering The Ohio State University

Arrays are Dynamic

40n

Computer Science and Engineering The Ohio State University

Arrays are Dynamic

40n

var n[3] = 3.14;

Computer Science and Engineering The Ohio State University

Arrays are Dynamic

4

undefined

undefined

3.14

0

1

2

3

n

Computer Science and Engineering The Ohio State University

Arrays are Dynamic

4

undefined

undefined

3.14

0

1

2

3

n

var n[1] = "hi";

Computer Science and Engineering The Ohio State University

Arrays are Dynamic

4

"hi"

undefined

3.14

0

1

2

3

n

Computer Science and Engineering The Ohio State University

Summary

Functions as first-class citizens Can be passed as arguments Can be returned as return values! Closure: carry their context

Arrays are fun too Dynamically sized Shorthand syntax