Scope in Javascript ( Advanced Javascript )

Javascript precompiles like _______________, allows you to write code using ES2015 standards and compile to ES5.

CoffeeScript

Modules have existed in JavaScript for a while; the ________________ and Asynchronous Module Definition (AMD) API standards both offered a way for JavaScript developers to use modules. ES2015 brings the module feature into the language officially.

CommonJS

common map properties __________________ Creates a Map ex) theMap = new Map()

Constructor

the _____________ (often referred to as "ES2015") release of Javascript introduced a new syntax for OOP in javascript. technically is it called ECMAScript 2015 and this is the 6th edition, we will use the common term "ES2015".

ECMAScript6

all variables have some scope: some portion of your script in which they can be referred - printed to the screen , say, or used as part of a calculation. __________ __________ have global scope - they can be accessed ( set or read) anywhere in your script.

Global scope

________ _______ __________ often abbreviated as "OOP" is a coding paradigm centered on the idea of an "object".

Object-oriented programming

ES2015 modules syntax isn't supported by any current browsers. But we can make use of the ___________ transpiler and the webpack module bundler to convert ES2015 module code into ES5 compatible JavaScript. (See https://www.typescriptlang.org/ and https://webpack.github.io/, respectively, for more information.)

Typescript

the ".ts" file extension indicates that this is a ________________(a superset of JavaScript) file

Typescript

Variables created with the var keywords are as we have seen scoped to their enclosing function. A function defined inside of another function has :

access to variables created in the parent function.

Common set Methods _______: Appends a new value, if the value does not already exist in the set. Ex) theSet.add('abc')

add

Variables can also have __________ scope

block

The ___________.com site is a great reference for checking browser support.

caniuse

Common set Methods _________ : removes all values ex) theSet.clear()

clear

common map methods ________: Removes all elements Ex) theMap.clear()

clear

ES2015 also introduces the _______ keyword that is similar to let, in that the scope of javascript variable declared without the _______ keyword has block-level scope, variables declared with ________ create an immutable (unchanging) binging.

const

Variables declared as ______ create a read-only reference - a binding- to a value. This does not mean that the value can't be changed: rather, the variable identifier can't be reassigned. For primitive values (number, strings, etc) this effectively means that you can't change the value. But if the content were an object, for example, the object itself could be altered - a property of the object added or an existing property changed.

const

At the core of the new ECMAScript syntax is the class and a _______ for that class; the ______________ is the method invoked when we instantiate an object of the class with the new keyword- just like the function we defined to serve as the prototype for objects previously.

constructor

Common set properties ____________: Creates a set Ex) theSet= new Set()

constructor

Common set Methods __________: removes a specified value ex) theSet.delete('abc')

delete

common map methods ___________: removes a specified element Ex) theMap.delete(16) //deletes element with index 16

delete

Object _________ can be methods (functions) as well: a function that returns a value.

elements

consider a file mod1.js that contains the following code: export const val = 1234; export function doubleIt(x) { return 2 * x; } export function tripleIt(x) { return 3 * x; } Our module defines a constant (val) and two functions, doubleIt and tripleIt. In this example, we're using named exports, in which we prefix each declaration with the _________-keyword.

export

One of the real benefits of object-oriented programming is the ability to build upon existing classes - to inherit all of the functionality of a well-written class and extend it for some purpose specific to your needs. Imagine that you have a Person class - a complex set of code that includes all of the functionality you need, that has been tested in production for years, but yet which is missing just a few things that you need for a new application. Everything is great - you just need to add a field for "EmployeeID" or something similar, but the rest of the class works fine. In JavaScript (like in many other languages) we would here create a subclass using the __________ keyword; note that this keyword is new to ES2015.

extends

common map methods ___________: iterates over the Map ex)theMap.forEach(function (value, key, map) { //do something with each key/value })

forEach

Common set Methods __________: Iterates over the set ex) theSet.forEach(function (item) {//do something with each item})

foreach()

Variables defined with the var keyword have ____________ scope that is more limited; these are variables that might be accessed only within a function (often the function in which they are defined) or some other section of your script.

function

common map methods __________: returns element from specified key Ex )theMap.get("arizona") // gets value of element with key "arizona"

get

any variable declared (by assigning it a value) without using the var keyword is :

global in scope, regardless of wether it is declared inside of a function or not.

Common set Methods __________: returns true if is element is contained in the set ex) theSet.has(20) // return true if 20 in theSet

has

common map methods __________: returns True if key exist ex)theMap.has(20) // returns true if key 20 exists

has

<script> class Person { constructor(fname, lname, age) { this.fname = fname; this.lname = lname; this.age = age; } toString() { return this.fname + ' ' + this.lname; } } class Player extends Person { constructor(fname, lname, age, jerseyNumber) { super(fname, lname, age); this.jerseyNumber = jerseyNumber; } toString() { return super.toString() + ' (#' + this.jerseyNumber + ')'; } } what does : super (fname, lname, age); do?

has the effect of setting this.name = name and this.color = color

In javascript as we have seen, a variable declared with the var keyword has function-level scope; the has global scope if created outside of any function. the__________ keyword works in similar fashion but has block-level scope - with for loops and if statements being two common examples of enclosing blocks.

let

most of the time you would want to restrict a for loop variable to have scope specific to the loop, to avoid unwanted side effects after the running of the loop, As such using ________ is generally preferable to var in this context , but keep in mind that it may no be supported by all browsers at the time if this writing.

let

the _______ keyword is a relatively-recent development in Javascript, a new feature of ECMAScript6. we need to keep in mind that older browsers won't always implement the ______ keyword.

let

imilar to the built-in Object, a _____ is a collection of key-value pairs. But, unlike an Object, a ______ allows for any data type as a key, not just Strings and Symbols. So a key could be an array, an instance of a custom class, etc.

map

Objects also have ________ these are functions that can get or set the values of the object's attributes and offer a mechanism for messaging between objects and other code. A "bank account" object, for instance, might have a "balance" attribute (storing the amount of money currently in the account) and a "doDeposit" method, which accepts an "amount" parameter and increments the balance attribute accordingly.

methods

We might use the resources created in our mod1.js module in another JavaScript file named main.js: import { val, doubleIt } from './mod1'; document.write(val); document.write(doubleIt(4)); The import statement at the top of main.js allows us to use the val constant and doubleIt function from the ________ module. We can then use resources just as if they were declared in main.js itself.

mod1.js

A ________ in ES2015 is a file that exports something - functions, constants, etc. - for importing by other files. Modules have their own scope, meaning that they don't share the global scope; you have to import anything needed in the module explicitly. As a result, the contents of each module is, of course, modular: self-contained and free from any possible side effects from conflicts with other code.

module

_________ are associative arrays or hashes: arrays where the element index is not a number starting at 0, but rather a string.

objects

_________ have properties or fields relevant to themselves : a "person" object, for instance, might have attributes for "name" , "address", "occupation" etc

objects

In javascript _________ is how we create an object, assigning to it the required field(attributes and methods) and then instantiate(create) other objects from it using the ___ keyword.

prototyping new

In the module, we can change the name of the export in mod1.js: const val = 1234; export {val as VAL1}; which we then import using that name: import { VAL1 } from './mod1'; //...

read-only

In javascript like in any programming language __________ refers to where a variable is accessible, based on where and how the variable was declared.

scope

Unlike a map, a ______ object can contain no duplicate items : it stores only unique values, of any type.

set

_________: Adds element or modifies existing element ex) theMap.set(-9, "blue") // adds element "blue" with key -9, or changes value of existing key

set

Common set properties ____________: Returns the number of values Ex) theSet.size

size

common map properties Returns the number of elements ex) theMap.size

size

a method which belongs to the class as a whole, rather than to an instance of the class. In javascript like many other programming languages, we call this a static method, using the ________ keyword when defining the method.

static

the prototyping objects serve as a pattern or ________ for the other objects, all of which have the same fields as defined in the prototype.

template

Perhaps more important than what happens when you declare a variable with the var keyword is what happens when you declare a variable without the var keyword. For variables declared without var outside of a function:

there is no difference; these variables are global in scope, accessible anywhere inside or outside of functions

__________: Returns string representation ex) theMap.toString()

toString

Unforunately, no current browser supports ES2015 modules. But given the importance of modules, we give a brief overview of the concepts here - and offer examples of both ES2015 code (which won't work natively) and examples transpiled into ES5 code, which will work. (________________ is the process of converting source code of one language or version of a language into another language/version.

transpiling

for variables declared without var inside of functions, the situation is different :

variables declared (by passing a value) without using the var keyword are global, rather than local (local to the parent function) in scope.