Lab 20: Mini Project Completion + JS Review

Outline

In this lab you will:

continue building your mini project
revise JavaScript concepts around data, variables and scope

Introduction

Welcome back everyone! I hope you had a great break.

This week you will continue working on your mini projects on the theme More Than Human.

We will also have a quick look back at JavaScript concepts around data, variables and scope of variables.

If you haven’t done so already…

do: …fork and then clone the Mini Project Template Repo and open it in VSCode.

JavaScript Datatypes, Variables and Scope

As noted on the Resources Books and Links page, the Mozilla Developer Network (MDN) Web Docs JavaScript Reference is the ultimate source of truth for all things JavaScript.

This week we are looking at Datatypes, Variable Declarations, and Scope.

The starting point is the Guide chapter on Grammar and Types.

Data Structures and Types

Boolean: true and false (for binary classification and decision making)
null: a variable that is “empty”. It points to nothingness, but nothingness is itself, an object.
undefined: the value automatically assigned to a declared variable prior to initial assignment.
Number: contains numeric data. Surprisingly, all numbers are floating point numbers in JavaScript.
BigInt: contains arbitrary precision integers. Yes, INTEGERS. You put an “n” at the end of an integer literal to make it a BigInt. Like 42n. For more detail read this. Note: it is not always possible to sensibly compare Number and BigInt.
String: contains text data, a sequence of characters. There is a subtle yet important difference between String primitives (created directly from literals, e.g. let myString = "this is a string";) and String objects (created from invoking a String constructor like this: let strObject = new String("Character Data");)
Symbol - we haven’t encountered a need for Symbols yet. They are unique. They are not Strings. They have a number of use-cases in programming, especially around creating guaranteed unique property names for objects.
Object - OK Objects are not really primitives and some primitives are objects. Objects have named properties which contain data made from the other types (and even objects). BTW - functions are also objects. More info here.

More complex data is built using these basic building blocks. Colours, shapes, sounds, textures are all built from numeric, text, or boolean data — which is combined as collections or objects.

This page says that there are 3 types of variable declaration in JavaScript. Actually, there are four 😄 but one is heavily discouraged. Or is it truly 3 - as “const” are constants, and so not technically variable.

var declares variables which are scoped to a function, or when outside a function, with global scope.
let declares variables which are scoped to their containing block.
const - declares unchangeable variables (that is, their value remains constant, they cannot be reassigned or updated after initial declaration), which are also block scoped. HOWEVER only primitive values will be protected from change: the properties of a const object can be reassigned or updated.
direct use without declaration: The reference says: “Variables should always be declared before they are used. JavaScript used to allow assigning to undeclared variables, which creates an undeclared global variable. This is an error in strict mode and should be avoided altogether.”

let size;
console.log(size, typeof(size));
size = 42;
console.log(size, typeof(size));

Scope

Scope in Computer Science and Programming refers to a set of rules, which are usually strictly enforced, about which variable names are valid within the current context of program execution, and which pieces of computer memory they refer to.

In JavaScript scope is created by functions, and by code blocks. There is also a Global context and Module context.

Scope enables you to use the same name for a local variable within the current context without impacting variable values in a wider context. It allows the programmer to manage and avoid name collisions, and unintended changes to the values of a common piece of data.

It is highly recommended that you use local scope wherever possible. Using Global scope should be used carefully. As Wikipedia puts it: “Variable names with global scope—called global variables—are frequently considered bad practice, at least in some languages, due to the possibility of name collisions and unintentional masking, together with poor modularity, and function scope or block scope are considered preferable”.

Block scope: A code block is delimited by ”{“ and ”}”. Variables declared using let or const are valid only within the containing {…}. When used outside any {…}, they will have Global scope. Code Blocks may apply to functions, or other flow control statements (for, if, while, do..while, switch, try…catch, throw)
Function scope: Functions have special status in JavaScript. Variables declared using var within a function are scoped to that function. Variables declared using var have either Function scope or Global Scope.
Global scope: Variables declared outside code blocks (using let or const), or outside functions (using var) have global scope. They are valid anywhere within the context of a running script. The context is the “window” for JavaScript running in a web browser. Note: local block or function scope will have precedence over global scope.
Module scope: the name is valid within the context of the Module the code is defined in. We haven’t yet looked into modules. Modules enable namespaces for variables, classes and functions to be separated for code libraries.

/* Anything declared out here has "global scope" */
let globalvar = "Mx Cosmopolitan";

/* blocks can be declared for no reason - but this is discouraged */
{  
    /* arbitrary code block */
    let localvar = 0b101;
    console.log(globalvar, localvar);
}
console.log(globalvar, localvar);

/* blocks are usually attached to functions, flow control (if, for, while, switch), and classes */
/* objects also use block notation {} */

Summary

Congratulations! In this lab you:

continued implementing your Mini Project
revisited JavaScript Datatypes, Variables and Scope

More-Than-Human

The Project Provocation/Theme for this year’s project is “More-Than-Human”, inspired by the book “The Spell of the Sensuous” by David Abram.¹

This week I have been inspired by Ferris Jabr’s book “Becoming Earth” ², which takes a different look at the More Than Human world.

… “Earth and life are bound in reciprocal evolution. Over billions of years, this process of coevolution transformed a lump of orbiting rock into a cosmic oasis with a breathable atmosphere, a balanced chemistry, and an ecological pulse. Many experts agree that life’s most important defining quality is a capacity to sustain itself. Earth has an innate ability to regulate its climate over great spans of time, gradually recovering from extreme hothouse states and deep freezes. Life is an integral part of this self-regulation. Despite repeated catastrophes, our living planet has demonstrated astonishing resilience, enduring for more than four billion years. Thus, Earth is not simply a planet with life on it, but rather a planet that came to life: a vast, interconnected, self-regulating, living system.”

قلب

A programming language in Arabic by Ramsey Nasser.

“قلب is a programming language exploring the role of human culture in coding. Code is written entirely in Arabic, highlighting cultural biases of computer science and challenging the assumptions we make about programming. It is implemented as a tree-walking language interpreter in JavaScript.” ³