CS312: Programming Languages

Lecture 21: JavaScript

Thomas Dillig

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 1/25 I Any application heavily relies on JavaScript

I JavaScript also has interesting language trade-offs

I You can think of JavaScipt as a hybrid language with features from almost everywhere glued together

Why Discuss JavaScript?

I JavaScript is very widely used and growing

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 2/25 I JavaScript also has interesting language trade-offs

I You can think of JavaScipt as a hybrid language with features from almost everywhere glued together

Why Discuss JavaScript?

I JavaScript is very widely used and growing

I Any AJAX application heavily relies on JavaScript

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 2/25 I You can think of JavaScipt as a hybrid language with features from almost everywhere glued together

Why Discuss JavaScript?

I JavaScript is very widely used and growing

I Any AJAX application heavily relies on JavaScript

I JavaScript also has interesting language trade-offs

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 2/25 Why Discuss JavaScript?

I JavaScript is very widely used and growing

I Any AJAX application heavily relies on JavaScript

I JavaScript also has interesting language trade-offs

I You can think of JavaScipt as a hybrid language with features from almost everywhere glued together

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 2/25 I C: Systems programming

I Java: Set-top box

I JavaScript: Web scripting

I Every language modifies some abstract data structure

I In JavaScipt, this is the of an html web page

JavaScript Target

I Every language has a design target:

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 3/25 I Java: Set-top box

I JavaScript: Web scripting

I Every language modifies some abstract data structure

I In JavaScipt, this is the document object model of an html web page

JavaScript Target

I Every language has a design target:

I C: Systems programming

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 3/25 I JavaScript: Web scripting

I Every language modifies some abstract data structure

I In JavaScipt, this is the document object model of an html web page

JavaScript Target

I Every language has a design target:

I C: Systems programming

I Java: Set-top box

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 3/25 I Every language modifies some abstract data structure

I In JavaScipt, this is the document object model of an html web page

JavaScript Target

I Every language has a design target:

I C: Systems programming

I Java: Set-top box

I JavaScript: Web scripting

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 3/25 I In JavaScipt, this is the document object model of an html web page

JavaScript Target

I Every language has a design target:

I C: Systems programming

I Java: Set-top box

I JavaScript: Web scripting

I Every language modifies some abstract data structure

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 3/25 JavaScript Target

I Every language has a design target:

I C: Systems programming

I Java: Set-top box

I JavaScript: Web scripting

I Every language modifies some abstract data structure

I In JavaScipt, this is the document object model of an html web page

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 3/25 I Embedded JavaScript produces HTML to be displayed by the browser

I Shell Scripts compute commands executed by the shell

I Lots of string support

I Simple structure with little/no declarations

I Flexibility preferred over efficiency, safety, common sense

I More specifically, a scripting language is used to write programs that produce inputs to another language processor

I Examples:

I Common characteristics of scripting languages:

What’s a Scripting Language?

I Answer: One language embedded in another

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 4/25 I Embedded JavaScript produces HTML to be displayed by the browser

I Shell Scripts compute commands executed by the shell

I Lots of string support

I Simple structure with little/no declarations

I Flexibility preferred over efficiency, safety, common sense

I Examples:

I Common characteristics of scripting languages:

What’s a Scripting Language?

I Answer: One language embedded in another

I More specifically, a scripting language is used to write programs that produce inputs to another language processor

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 4/25 I Lots of string support

I Simple structure with little/no declarations

I Flexibility preferred over efficiency, safety, common sense

I Embedded JavaScript produces HTML to be displayed by the browser

I Shell Scripts compute commands executed by the shell

I Common characteristics of scripting languages:

What’s a Scripting Language?

I Answer: One language embedded in another

I More specifically, a scripting language is used to write programs that produce inputs to another language processor

I Examples:

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 4/25 I Lots of string support

I Simple structure with little/no declarations

I Flexibility preferred over efficiency, safety, common sense

I Shell Scripts compute commands executed by the shell

I Common characteristics of scripting languages:

What’s a Scripting Language?

I Answer: One language embedded in another

I More specifically, a scripting language is used to write programs that produce inputs to another language processor

I Examples:

I Embedded JavaScript produces HTML to be displayed by the browser

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 4/25 I Lots of string support

I Simple structure with little/no declarations

I Flexibility preferred over efficiency, safety, common sense

I Common characteristics of scripting languages:

What’s a Scripting Language?

I Answer: One language embedded in another

I More specifically, a scripting language is used to write programs that produce inputs to another language processor

I Examples:

I Embedded JavaScript produces HTML to be displayed by the browser

I Shell Scripts compute commands executed by the shell

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 4/25 I Lots of string support

I Simple structure with little/no declarations

I Flexibility preferred over efficiency, safety, common sense

What’s a Scripting Language?

I Answer: One language embedded in another

I More specifically, a scripting language is used to write programs that produce inputs to another language processor

I Examples:

I Embedded JavaScript produces HTML to be displayed by the browser

I Shell Scripts compute commands executed by the shell

I Common characteristics of scripting languages:

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 4/25 I Simple structure with little/no declarations

I Flexibility preferred over efficiency, safety, common sense

What’s a Scripting Language?

I Answer: One language embedded in another

I More specifically, a scripting language is used to write programs that produce inputs to another language processor

I Examples:

I Embedded JavaScript produces HTML to be displayed by the browser

I Shell Scripts compute commands executed by the shell

I Common characteristics of scripting languages:

I Lots of string support

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 4/25 I Flexibility preferred over efficiency, safety, common sense

What’s a Scripting Language?

I Answer: One language embedded in another

I More specifically, a scripting language is used to write programs that produce inputs to another language processor

I Examples:

I Embedded JavaScript produces HTML to be displayed by the browser

I Shell Scripts compute commands executed by the shell

I Common characteristics of scripting languages:

I Lots of string support

I Simple structure with little/no declarations

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 4/25 What’s a Scripting Language?

I Answer: One language embedded in another

I More specifically, a scripting language is used to write programs that produce inputs to another language processor

I Examples:

I Embedded JavaScript produces HTML to be displayed by the browser

I Shell Scripts compute commands executed by the shell

I Common characteristics of scripting languages:

I Lots of string support

I Simple structure with little/no declarations

I Flexibility preferred over efficiency, safety, common sense

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 4/25 I Later standardized for browser compatibility, called ECMAScript

I Renamed to JavaScript in part of marketing deal with Sun - no relation to Java!

I Today: Many implementations available

JavaScript History

I Developed by Brendan Eich at in 1995 as scripting language for Navigator 2

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 5/25 I Renamed to JavaScript in part of marketing deal with Sun - no relation to Java!

I Today: Many implementations available

JavaScript History

I Developed by Brendan Eich at Netscape in 1995 as scripting language for Navigator 2

I Later standardized for browser compatibility, called ECMAScript

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 5/25 I Today: Many implementations available

JavaScript History

I Developed by Brendan Eich at Netscape in 1995 as scripting language for Navigator 2

I Later standardized for browser compatibility, called ECMAScript

I Renamed to JavaScript in part of marketing deal with Sun - no relation to Java!

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 5/25 JavaScript History

I Developed by Brendan Eich at Netscape in 1995 as scripting language for Navigator 2

I Later standardized for browser compatibility, called ECMAScript

I Renamed to JavaScript in part of marketing deal with Sun - no relation to Java!

I Today: Many implementations available

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 5/25 I Has >90% browser market share

I Opportunity to define the HTML scripting language

I Brendan Eich: “I hacked the JS prototype in 1 week in May, and it showed! Mistakes were frozen early. Rest of the yer spend embedding in browser and cursing my design”

I Initial uses of JavaScript: Form validation, page effects, dynamic content manipulation

I More recently: Web 2.0: Significant functionality implemented on web client

I Examples: Google Docs, Gmail, etc

Motivation for JavaScript

I Netscape, 1995

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 6/25 I Opportunity to define the HTML scripting language

I Brendan Eich: “I hacked the JS prototype in 1 week in May, and it showed! Mistakes were frozen early. Rest of the yer spend embedding in browser and cursing my design”

I Initial uses of JavaScript: Form validation, page effects, dynamic content manipulation

I More recently: Web 2.0: Significant functionality implemented on web client

I Examples: Google Docs, Gmail, etc

Motivation for JavaScript

I Netscape, 1995

I Has >90% browser market share

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 6/25 I Brendan Eich: “I hacked the JS prototype in 1 week in May, and it showed! Mistakes were frozen early. Rest of the yer spend embedding in browser and cursing my design”

I Initial uses of JavaScript: Form validation, page effects, dynamic content manipulation

I More recently: Web 2.0: Significant functionality implemented on web client

I Examples: Google Docs, Gmail, etc

Motivation for JavaScript

I Netscape, 1995

I Has >90% browser market share

I Opportunity to define the HTML scripting language

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 6/25 I Initial uses of JavaScript: Form validation, page effects, dynamic content manipulation

I More recently: Web 2.0: Significant functionality implemented on web client

I Examples: Google Docs, Gmail, etc

Motivation for JavaScript

I Netscape, 1995

I Has >90% browser market share

I Opportunity to define the HTML scripting language

I Brendan Eich: “I hacked the JS prototype in 1 week in May, and it showed! Mistakes were frozen early. Rest of the yer spend embedding in browser and cursing my design”

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 6/25 I More recently: Web 2.0: Significant functionality implemented on web client

I Examples: Google Docs, Gmail, etc

Motivation for JavaScript

I Netscape, 1995

I Has >90% browser market share

I Opportunity to define the HTML scripting language

I Brendan Eich: “I hacked the JS prototype in 1 week in May, and it showed! Mistakes were frozen early. Rest of the yer spend embedding in browser and cursing my design”

I Initial uses of JavaScript: Form validation, page effects, dynamic content manipulation

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 6/25 I Examples: Google Docs, Gmail, etc

Motivation for JavaScript

I Netscape, 1995

I Has >90% browser market share

I Opportunity to define the HTML scripting language

I Brendan Eich: “I hacked the JS prototype in 1 week in May, and it showed! Mistakes were frozen early. Rest of the yer spend embedding in browser and cursing my design”

I Initial uses of JavaScript: Form validation, page effects, dynamic content manipulation

I More recently: Web 2.0: Significant functionality implemented on web client

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 6/25 Motivation for JavaScript

I Netscape, 1995

I Has >90% browser market share

I Opportunity to define the HTML scripting language

I Brendan Eich: “I hacked the JS prototype in 1 week in May, and it showed! Mistakes were frozen early. Rest of the yer spend embedding in browser and cursing my design”

I Initial uses of JavaScript: Form validation, page effects, dynamic content manipulation

I More recently: Web 2.0: Significant functionality implemented on web client

I Examples: Google Docs, Gmail, etc

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 6/25 I Tolerate minor errors (missing semicolon)

I Simplified even handling, e.g., onClick, onMouseDown, . . . inspired by HyperCard

I Full features that make it easy to write and modify code that does something from all other languages

JavaScript Design Goals

I Make it easy to copy/paste code

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 7/25 I Simplified even handling, e.g., onClick, onMouseDown, . . . inspired by HyperCard

I Full features that make it easy to write and modify code that does something from all other languages

JavaScript Design Goals

I Make it easy to copy/paste code

I Tolerate minor errors (missing semicolon)

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 7/25 I Full features that make it easy to write and modify code that does something from all other languages

JavaScript Design Goals

I Make it easy to copy/paste code

I Tolerate minor errors (missing semicolon)

I Simplified even handling, e.g., onClick, onMouseDown, . . . inspired by HyperCard

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 7/25 JavaScript Design Goals

I Make it easy to copy/paste code

I Tolerate minor errors (missing semicolon)

I Simplified even handling, e.g., onClick, onMouseDown, . . . inspired by HyperCard

I Full features that make it easy to write and modify code that does something from all other languages

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 7/25 I We have higher order functions, lambda, etc

I Objects in JavaScript are based on Smalltalk/Self var pt = {x: 10, move:function(dx){this.x+=dx}}

I But lots of “issues”

I : “In JavaScript, there is a beautiful, elegant, highly expressive language that is buried under a steaming pile of good intentions and blunders”

JavaScript Design

I Functions based on LISP/Scheme

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 8/25 I Objects in JavaScript are based on Smalltalk/Self var pt = {x: 10, move:function(dx){this.x+=dx}}

I But lots of “issues”

I Douglas Crockford: “In JavaScript, there is a beautiful, elegant, highly expressive language that is buried under a steaming pile of good intentions and blunders”

JavaScript Design

I Functions based on LISP/Scheme

I We have higher order functions, lambda, etc

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 8/25 I But lots of “issues”

I Douglas Crockford: “In JavaScript, there is a beautiful, elegant, highly expressive language that is buried under a steaming pile of good intentions and blunders”

JavaScript Design

I Functions based on LISP/Scheme

I We have higher order functions, lambda, etc

I Objects in JavaScript are based on Smalltalk/Self var pt = {x: 10, move:function(dx){this.x+=dx}}

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 8/25 I Douglas Crockford: “In JavaScript, there is a beautiful, elegant, highly expressive language that is buried under a steaming pile of good intentions and blunders”

JavaScript Design

I Functions based on LISP/Scheme

I We have higher order functions, lambda, etc

I Objects in JavaScript are based on Smalltalk/Self var pt = {x: 10, move:function(dx){this.x+=dx}}

I But lots of “issues”

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 8/25 JavaScript Design

I Functions based on LISP/Scheme

I We have higher order functions, lambda, etc

I Objects in JavaScript are based on Smalltalk/Self var pt = {x: 10, move:function(dx){this.x+=dx}}

I But lots of “issues”

I Douglas Crockford: “In JavaScript, there is a beautiful, elegant, highly expressive language that is buried under a steaming pile of good intentions and blunders”

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 8/25 I But HTML is not case sensitive, so any HTML object in JavaScript is also not

I Example: onClick vs. ONCLICK

I Statements are terminated by returns or semi-colons

I JavaScript has blocks using {} , but no separate scope!

Language Syntax

I JavaScript is case sensitive

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 9/25 I Example: onClick vs. ONCLICK

I Statements are terminated by returns or semi-colons

I JavaScript has blocks using {} , but no separate scope!

Language Syntax

I JavaScript is case sensitive

I But HTML is not case sensitive, so any HTML object in JavaScript is also not

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 9/25 I Statements are terminated by returns or semi-colons

I JavaScript has blocks using {} , but no separate scope!

Language Syntax

I JavaScript is case sensitive

I But HTML is not case sensitive, so any HTML object in JavaScript is also not

I Example: onClick vs. ONCLICK

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 9/25 I JavaScript has blocks using {} , but no separate scope!

Language Syntax

I JavaScript is case sensitive

I But HTML is not case sensitive, so any HTML object in JavaScript is also not

I Example: onClick vs. ONCLICK

I Statements are terminated by returns or semi-colons

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 9/25 Language Syntax

I JavaScript is case sensitive

I But HTML is not case sensitive, so any HTML object in JavaScript is also not

I Example: onClick vs. ONCLICK

I Statements are terminated by returns or semi-colons

I JavaScript has blocks using {} , but no separate scope!

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 9/25 I But no declarations; variables are implicitly defined by their first use, which must be an assignment.

I Note: Implicit definition has global scope, even if it occurs in nested scope { var x = "123" } return x; //will return "123"

Variables

I You define variables using the var statement

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 10/25 I Note: Implicit definition has global scope, even if it occurs in nested scope { var x = "123" } return x; //will return "123"

Variables

I You define variables using the var statement

I But no declarations; variables are implicitly defined by their first use, which must be an assignment.

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 10/25 Variables

I You define variables using the var statement

I But no declarations; variables are implicitly defined by their first use, which must be an assignment.

I Note: Implicit definition has global scope, even if it occurs in nested scope { var x = "123" } return x; //will return "123"

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 10/25 I rhino has the same read-eval-print loop we have already seen in the LISP interpreter

I Play with it!

Stand-alone JavaScript

I You can use the Rhino commend-line interpreter to play with JavaScript without a website

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 11/25 I Play with it!

Stand-alone JavaScript

I You can use the Rhino commend-line interpreter to play with JavaScript without a website

I rhino has the same read-eval-print loop we have already seen in the LISP interpreter

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 11/25 Stand-alone JavaScript

I You can use the Rhino commend-line interpreter to play with JavaScript without a website

I rhino has the same read-eval-print loop we have already seen in the LISP interpreter

I Play with it!

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 11/25 I Main reason it is used: Only kind of program that anyone can run in any browser and expect to function

I This is the main reason JavaScript is popular

JavaScript in the Browser

I Most of the time JavaScript is used in the browser to manipulate a web page

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 12/25 I This is the main reason JavaScript is popular

JavaScript in the Browser

I Most of the time JavaScript is used in the browser to manipulate a web page

I Main reason it is used: Only kind of program that anyone can run in any browser and expect to function

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 12/25 JavaScript in the Browser

I Most of the time JavaScript is used in the browser to manipulate a web page

I Main reason it is used: Only kind of program that anyone can run in any browser and expect to function

I This is the main reason JavaScript is popular

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 12/25 Web Example: Page Manipulation

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 13/25 I 64-bit floating point

I No integer type!

I Special value NaN and Infinity

I Numbers:

I Strings using Unicode characters

I Special values null, undefined

Primitive Data Types

I Boolean: true and false

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 14/25 I 64-bit floating point

I No integer type!

I Special value NaN and Infinity

I Strings using Unicode characters

I Special values null, undefined

Primitive Data Types

I Boolean: true and false

I Numbers:

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 14/25 I No integer type!

I Special value NaN and Infinity

I Strings using Unicode characters

I Special values null, undefined

Primitive Data Types

I Boolean: true and false

I Numbers:

I 64-bit floating point

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 14/25 I Special value NaN and Infinity

I Strings using Unicode characters

I Special values null, undefined

Primitive Data Types

I Boolean: true and false

I Numbers:

I 64-bit floating point

I No integer type!

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 14/25 I Strings using Unicode characters

I Special values null, undefined

Primitive Data Types

I Boolean: true and false

I Numbers:

I 64-bit floating point

I No integer type!

I Special value NaN and Infinity

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 14/25 I Special values null, undefined

Primitive Data Types

I Boolean: true and false

I Numbers:

I 64-bit floating point

I No integer type!

I Special value NaN and Infinity

I Strings using Unicode characters

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 14/25 Primitive Data Types

I Boolean: true and false

I Numbers:

I 64-bit floating point

I No integer type!

I Special value NaN and Infinity

I Strings using Unicode characters

I Special values null, undefined

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 14/25 I Basic types by value

I Objects by reference

I fun.length: number of arguments in definition

I fun.arguments.length: number of arguments in call

I Parameter passing:

I You can supply any number of arguments

I Anonymous (lambda) functions: (function (x,y) {return x+y}) (2,3);

JavaScript Functions

I Declarations can appear in function body, allowing for local variables and inner functions

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 15/25 I fun.length: number of arguments in definition

I fun.arguments.length: number of arguments in call

I Basic types by value

I Objects by reference

I You can supply any number of arguments

I Anonymous (lambda) functions: (function (x,y) {return x+y}) (2,3);

JavaScript Functions

I Declarations can appear in function body, allowing for local variables and inner functions

I Parameter passing:

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 15/25 I fun.length: number of arguments in definition

I fun.arguments.length: number of arguments in call

I Objects by reference

I You can supply any number of arguments

I Anonymous (lambda) functions: (function (x,y) {return x+y}) (2,3);

JavaScript Functions

I Declarations can appear in function body, allowing for local variables and inner functions

I Parameter passing:

I Basic types by value

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 15/25 I fun.length: number of arguments in definition

I fun.arguments.length: number of arguments in call

I You can supply any number of arguments

I Anonymous (lambda) functions: (function (x,y) {return x+y}) (2,3);

JavaScript Functions

I Declarations can appear in function body, allowing for local variables and inner functions

I Parameter passing:

I Basic types by value

I Objects by reference

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 15/25 I fun.length: number of arguments in definition

I fun.arguments.length: number of arguments in call

I Anonymous (lambda) functions: (function (x,y) {return x+y}) (2,3);

JavaScript Functions

I Declarations can appear in function body, allowing for local variables and inner functions

I Parameter passing:

I Basic types by value

I Objects by reference

I You can supply any number of arguments

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 15/25 I fun.arguments.length: number of arguments in call

I Anonymous (lambda) functions: (function (x,y) {return x+y}) (2,3);

JavaScript Functions

I Declarations can appear in function body, allowing for local variables and inner functions

I Parameter passing:

I Basic types by value

I Objects by reference

I You can supply any number of arguments

I fun.length: number of arguments in definition

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 15/25 I Anonymous (lambda) functions: (function (x,y) {return x+y}) (2,3);

JavaScript Functions

I Declarations can appear in function body, allowing for local variables and inner functions

I Parameter passing:

I Basic types by value

I Objects by reference

I You can supply any number of arguments

I fun.length: number of arguments in definition

I fun.arguments.length: number of arguments in call

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 15/25 JavaScript Functions

I Declarations can appear in function body, allowing for local variables and inner functions

I Parameter passing:

I Basic types by value

I Objects by reference

I You can supply any number of arguments

I fun.length: number of arguments in definition

I fun.arguments.length: number of arguments in call

I Anonymous (lambda) functions: (function (x,y) {return x+y}) (2,3);

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 15/25 Function Examples

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 16/25 Use of Anonymous Functions

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 17/25 I Can think of it almost like a hash table or associative array

I Defined by a set of name:value pairs: objDuck = { name:"Quak", gender:"male" }

I New properties can be added at any time: objDuck.species = "mallard"

I Can have methods, can refer to this

Objects

I In JavaScript, an object is nothing but a collection of named properties

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 18/25 I Defined by a set of name:value pairs: objDuck = { name:"Quak", gender:"male" }

I New properties can be added at any time: objDuck.species = "mallard"

I Can have methods, can refer to this

Objects

I In JavaScript, an object is nothing but a collection of named properties

I Can think of it almost like a hash table or associative array

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 18/25 I New properties can be added at any time: objDuck.species = "mallard"

I Can have methods, can refer to this

Objects

I In JavaScript, an object is nothing but a collection of named properties

I Can think of it almost like a hash table or associative array

I Defined by a set of name:value pairs: objDuck = { name:"Quak", gender:"male" }

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 18/25 I Can have methods, can refer to this

Objects

I In JavaScript, an object is nothing but a collection of named properties

I Can think of it almost like a hash table or associative array

I Defined by a set of name:value pairs: objDuck = { name:"Quak", gender:"male" }

I New properties can be added at any time: objDuck.species = "mallard"

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 18/25 Objects

I In JavaScript, an object is nothing but a collection of named properties

I Can think of it almost like a hash table or associative array

I Defined by a set of name:value pairs: objDuck = { name:"Quak", gender:"male" }

I New properties can be added at any time: objDuck.species = "mallard"

I Can have methods, can refer to this

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 18/25 Basic Object Features

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 19/25 I In most cases, this points to the object which has the function as property (or method)

I Example: var o = {x:10, f:function): {return this.x}} o.f()

I This will evaluate to 10

Objects and this

I The this variable is a property of the activation object for a function call

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 20/25 I Example: var o = {x:10, f:function): {return this.x}} o.f()

I This will evaluate to 10

Objects and this

I The this variable is a property of the activation object for a function call

I In most cases, this points to the object which has the function as property (or method)

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 20/25 I This will evaluate to 10

Objects and this

I The this variable is a property of the activation object for a function call

I In most cases, this points to the object which has the function as property (or method)

I Example: var o = {x:10, f:function): {return this.x}} o.f()

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 20/25 Objects and this

I The this variable is a property of the activation object for a function call

I In most cases, this points to the object which has the function as property (or method)

I Example: var o = {x:10, f:function): {return this.x}} o.f()

I This will evaluate to 10

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 20/25 JavaScript Functions and this

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 21/25 Local Variables stored in“Scope Object”

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 22/25 I However, AJAX model allows for some hacked-up asynchronous callback mechanism using XMLHttpRequest

I Widely used, but sad and pathetic hack

I Another form of concurrency: Use SetTimeout for cooperative multitasking

Concurrency

I JavaScript is single-threaded

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 23/25 I Widely used, but sad and pathetic hack

I Another form of concurrency: Use SetTimeout for cooperative multitasking

Concurrency

I JavaScript is single-threaded

I However, AJAX model allows for some hacked-up asynchronous callback mechanism using XMLHttpRequest

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 23/25 I Another form of concurrency: Use SetTimeout for cooperative multitasking

Concurrency

I JavaScript is single-threaded

I However, AJAX model allows for some hacked-up asynchronous callback mechanism using XMLHttpRequest

I Widely used, but sad and pathetic hack

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 23/25 Concurrency

I JavaScript is single-threaded

I However, AJAX model allows for some hacked-up asynchronous callback mechanism using XMLHttpRequest

I Widely used, but sad and pathetic hack

I Another form of concurrency: Use SetTimeout for cooperative multitasking

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 23/25 I Add, delete methods of objects dynamically

I Redefine native functions and objects

I Iterate over methods of an object: for (variable in object) { statement }

Unusual features of JavaScript

I Built-in regular expressions

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 24/25 I Redefine native functions and objects

I Iterate over methods of an object: for (variable in object) { statement }

Unusual features of JavaScript

I Built-in regular expressions

I Add, delete methods of objects dynamically

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 24/25 I Iterate over methods of an object: for (variable in object) { statement }

Unusual features of JavaScript

I Built-in regular expressions

I Add, delete methods of objects dynamically

I Redefine native functions and objects

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 24/25 Unusual features of JavaScript

I Built-in regular expressions

I Add, delete methods of objects dynamically

I Redefine native functions and objects

I Iterate over methods of an object: for (variable in object) { statement }

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 24/25 I The language does everything possible to allow unreadable and buggy code

I Dynamic features make an performant interpreter extremely difficult

I And yet: JavaScript is one of the most widely-used languages!

JavaScript Overall

I JavaScript is in many ways the worst of all features combined in one language

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 25/25 I Dynamic features make an performant interpreter extremely difficult

I And yet: JavaScript is one of the most widely-used languages!

JavaScript Overall

I JavaScript is in many ways the worst of all features combined in one language

I The language does everything possible to allow unreadable and buggy code

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 25/25 I And yet: JavaScript is one of the most widely-used languages!

JavaScript Overall

I JavaScript is in many ways the worst of all features combined in one language

I The language does everything possible to allow unreadable and buggy code

I Dynamic features make an performant interpreter extremely difficult

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 25/25 JavaScript Overall

I JavaScript is in many ways the worst of all features combined in one language

I The language does everything possible to allow unreadable and buggy code

I Dynamic features make an performant interpreter extremely difficult

I And yet: JavaScript is one of the most widely-used languages!

Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 25/25