Scribd
Upload
8 views

COMP 1537 - Week 5 - JavaScript and Objects

The document discusses JavaScript arrays, objects, classes, functions, scope, and lambda functions. It covers how arrays can contain different data types and grow/shrink, and how objects are associative arrays. The differences between var and let, and how this works depending on context, are explained. The new operator and prototypes are described. Strict mode and anonymous lambda functions are also overviewed.

Uploaded by

Yogita Tiwari
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

COMP 1537 - Week 5 - JavaScript and Objects

The document discusses JavaScript arrays, objects, classes, functions, scope, and lambda functions. It covers how arrays can contain different data types and grow/shrink, and how objects are associative arrays. The differences between var and let, and how this works depending on context, are explained. The new operator and prototypes are described. Strict mode and anonymous lambda functions are also overviewed.

Uploaded by

Yogita Tiwari
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

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

You might also like