COMP 1537
JavaScript Basics (Arrays, Objects, and Classes)
Copyright Ⓒ 2022, Arron Ferguson 1
ARRAYS (1/2)
As was mentioned, arrays are collections
You can declare arrays with:
The constructor
A literal set
Arrays in JavaScript:
Can grow and shrink in JavaScript
Unlike other programming languages (e.g., Java, C#, C)
Using methods push/pop
Copyright Ⓒ 2022, Arron Ferguson 2
ARRAYS (2/2)
Arrays in JavaScript (cont'd):
Can hold any of the data types in JavaScript
String, Boolean, number, null, other arrays, even functions
An array of arrays is known as a multi-dimensional array
Use indices to access items in the array
Can have a mixture of data types in them
E.g., a string, a number, another array, etc.
Have a bunch of methods as well as properties
See: http://www.w3schools.com/jsref/jsref_obj_array.asp
Are JavaScript objects – just a specialized type!
Speaking of objects …
Copyright Ⓒ 2022, Arron Ferguson 3
Associative arrays are arrays that use named keys that you assign to them.
JS OBJECTS First-class citizenship, within the world of programming, means that a given entity (such as a function) supports all the
operational properties inherent to other entities; properties such as being able to be assigned to a variable, passed
around as a function argument, returned from a function, etc. Basically, first-class citizenship simply means “being
able to do what everyone else can do.”
Revisiting JS objects:
JS objects:
Are associative arrays: key-value pairs for each property added to an object
Do not require classes (at least prior to ES6)
Can be functions – as functions are objects too!
JS functions are objects
JS functions are “first class citizens”
Which, within the context of JS as a programming language, means:
Functions can be passed as arguments to other functions
This is a core aspect of JS
Because JS functions are objects, they can have properties – and do!
JS functions always have an arguments array property
So you can see all of the arguments passed into the function
Copyright Ⓒ 2022, Arron Ferguson 4
VAR VS. LET
We can specify variables using ‘var’ or ‘let’, what’s the difference?
Using ‘var’:
Variables are global scope (when defined outside of a function)
But local in a function, or global if in a loop and used after
Same variable can be re-declared
Using ‘let’:
Limited within the block it is defined in
In a function, a loop (inside of the loop block or parenthesis)
Cannot be re-declared
Copyright Ⓒ 2022, Arron Ferguson 5
JAVASCRIPT – THIS (1/2)
When creating JavaScript function objects, we can use the keyword ‘this’,
example:
function User (n) {
this.name = n;
this.toString = function() {
return this.name;
}
}
Copyright Ⓒ 2022, Arron Ferguson 6
JAVASCRIPT – THIS (2/2)
This has a different meaning depending on:
Where it is
How it’s called/used
‘this’ will refer to:
The global object (i.e., browser window) inside of a unattached function
The containing object if the function is a ‘method’ of an object
The target of the event if inside of an event listener
The current object if the function is called with the constructor
There are two other cases but we’re not interested in those for now:
https://stackoverflow.com/questions/12370851/understanding-javascript-scope-with-var-that-
this
Copyright Ⓒ 2022, Arron Ferguson 7
JS NEW OPERATOR (1/5)
Because JS is very different than Java in runtime/structure, it helps to understand
what the differences are
In Java (or C# or C++), when you use the new operator:
You create a new object … end of story
The new operator in JS is very different
Even though it looks identical to Java/C#:
new constructor[([arguments])]
var str = new String(“hello world!”);
It does something very different!
Copyright Ⓒ 2022, Arron Ferguson 8
JS NEW OPERATOR (2/5)
For example, take these two expressions:
var str1 = new String("hi");
var str2 = "hello";
They will print at the console.log():
String {“hi”} this is a string object
Hello and this is a string.
The variable str1 created an object
Why??? What happened???
Copyright Ⓒ 2022, Arron Ferguson 9
JS NEW OPERATOR (3/5)
Using the new operator takes one parameter:
Class (more on classes in JS later) or a Function
If a Function is the parameter to new, the following happens:
A new JS object is created
The new object gets a new property: __proto__
__proto__:
Is an object and contains many methods (getters/setters, constructor)
And functions in __proto__ have their own __proto__ and so on
This is why we call JS prototype-based – a prototype object is created on our behalf
Copyright Ⓒ 2022, Arron Ferguson 10
JS NEW OPERATOR (4/5)
With this:
let obj = {};
console.log(obj);
We get:
Copyright Ⓒ 2022, Arron Ferguson 11
JS NEW OPERATOR (5/5)
The function has a prototype
The object based on the prototype has __proto__
console.log(Student.prototype); // object
console.log(s1.prototype); // undefined
console.log(s1.__proto__); // object
Copyright Ⓒ 2022, Arron Ferguson 12
WHAT IS STRICT MODE IN JS?
Strict mode was introduced in ECMAScript 5
You can specify it at the top of your file
In which case all of your script must adhere to the strict rules
You can specify it at the function level (only function is strict then)
Usage: 'use strict';
What does it do? It enforces more strict rules:
Variables must be declared before usage
Can’t assign if no setter, not allow arguments duplicate name
Can’t specify duplicate property names
Copyright Ⓒ 2022, Arron Ferguson 13
LAMBDAS & JS (1/2)
Anonymous Function is a function that does not have any name associated with it. Normally we use the function keyword before the function name to
define a function in JavaScript, however, in anonymous functions in JavaScript, we use only the function keyword without the function name.
Anonymous functions in JS are lambdas!
For quite some time, JS has supported anonymous functions
We’ve been using them in jQuery for our callback functions
Remember, functions in JS are “first class citizens” – so we can pass them as arguments to
other functions/methods
Something that you haven’t seen yet:
An Immediately Invoked Function Execution (IIFC)
This declares a function and immediately executes it!
Copyright Ⓒ 2022, Arron Ferguson 14
LAMBDAS & JS (2/2)
However, most current languages allow us to use some shortened syntax for
defining lambdas
E.g., Java:
button.addActionListener(e -> System.out.println("Pressed"));
ES6 arrow function uses ‘=>’ (equals, not dash)
One difference is that they don’t have their own ‘this’
They use the surrounding scope’s ‘this’
Copyright Ⓒ 2022, Arron Ferguson 15
