JavaScript (JS) Intro – Part 1

By user – Posted on

What is JavaScript (JS)?

Introduction

This tutorial series covering javascript assumes you have prior scripting knowledge and refines your ability to think in a web-based/javascript way. That is, some syntax and basic programming paradigms will be covered but will not be the focus on this series. JavaScript, its accompanying libraries and runtime environments have come a long way but in this series I will teach you the foundations of vanilla browser-based JavaScript to help you understand the intricacies of this language. It’s also much faster to get going!

JavaScript (JS or js) is one part of the successor to Flash-based websites. It is the language and logic that allows for dynamic web-pages to come alive (although CSS can do some fantastic things on its own) such as instant messaging, sending a form, making a payment, and much more. Think of it as the painter of the canvas with constructed rules (logic/syntax) on how to paint and repaint on the webpage. She can also erase the some of the webpage (i.e. delete HTML elements) directly. It was created by Brendan Eich in the 90s in 10 days in the spirit of Java but has little to do with Java, in fact classes were not a thing until recently.

Fundamentals and Architecture of the language:

  • High level language that was made for browsers, does not typically have access to CPU/RAM
  • Weakly-typed, i.e. you don’t need to declare what a type a variable is
    • All numbers are floating points FYI
  • Prototypal inheritance versus your traditional class-based inheritance (advanced, but FYI)
  • Can be thought of as interpreted but there are just-in-time compilers and modern JS bundlers that ‘transpile’ JS code (advanced)
  • Memory garbage collection automatically handled
  • Functions are pass-by-value and pass-by-reference (hotly debated, let’s not argue!)
  • Single threaded, but has asynchronous control via ‘Web-APIs’ (important, covered later)
  • Libraries (or modules in other languages) are often UI-based due to the web-nature of JS

See here or here for some more differences and history

JS Basics

Before we start you should code-along with either your browser dev tools console (press F12 on Chrome) or use something like REPL which hosts a browser-based javascript runtime for you.

PS: Useconsole.log("my text", var1); to debug for now

Variable Types

There are 7 variable types, all of which are primitive (have no reference – are created/’copied’ in memory again [some exceptions for strings] and can’t be mutated inside a function) except for objects.

Before you begin, you should know… Just like python there are differences in testing equivalency in JS, most prominently displayed by the ‘==‘ and ‘===‘ operator. == uses type coercion to try to figure out if two values are the same for a primitive, can you think of an example of a string and number (psst, test it!) that returns true using ==? === however is more strict and tests for type and value equivalency. For objects (i.e. non-primitives), both operands are treated the same and reference checks are made. 

var imANum = 5.01;
var alsoaNum = 5;

var string = "yolo";
let string1 = 'FOMO';
let templateString = `I ${string} because I got ${string1} !!!111!`;

const justABoolean = true;

const hiImNull = null;

var wellImUndefined = undefined;

var obj1 = { country: "Mozambique", continent: "Africa" }
var obj2 = { country: "Azerbaijan", continent: "Asia" }
var obj2 = { country: "Azerbaijan", continent: "Europe" }

const sym1 = Symbol("hi");
const sym2 = Symbol("hi");

A few things…

  • Notice how arrays/lists (we call them arrays in JS, they have list-like and array-like properties) is not a type unlike other languages? Arrays in are objects in JSland with special properties given by their prototype chain such as ‘length’.
  • Functions are also objects. First-class objects in fact which means you can play around with functions just like a typical variable! For example you can pass a function as an argument to another function (the passed function called a callback function).
  • undefined usually means that the variable has not be assigned a value. null is almost always an assignment value.
  • We use typeof operator to identify the object type. Try it!
  • For those who are familiar with Python (i.e. all of you), fill in the blanks: A JS object can be analogous to a ______________ (python type) and has pairs of __________ (property names) and ___________ (property values).
  • Can we figure out which data types return truthy or falsy values?
    • Hint: Conditionals are written like so if (2 > 1) { console.log('true') }
    • I’m actively listening check-up: Should two empty arrays assigned independently return true when they’re checked for equivalency via ‘===‘?
  • What does templateString print out?
    • These are template strings and are much more terse way of interpolating variables than the old-school way of concatenating strings together.
  • Symbols are an esoteric primitive data type are unique identifiers, it is mostly used for object property names.
  • Notice how we declare our variables with ‘var‘, ‘const‘ or ‘let‘?
    • There are some different implications for each one… Another good link
      • var is a classical way to declare variables that is either globally or functionally scoped; it can be re-assigned to another value
      • let is similar however is lexically scoped (fancy way of saying the variable is scoped within a curly braces ‘{ }’)
        • There’s also some differences in how each variable is “hoisted” inside a function to be used; var variables are brought to searched for and hoisted to the top of the function
      • Can you think of this local vs functionally scoping where this can be an issue? Hint: Think of for loops, for those are who are advanced, look up the ‘closure issue with var’
      • const is the most unique declaration in that the variable value cannot be changed by direct assignment (what do I mean by this?); it has similar scoping rules as ‘let‘. See how I reassigned obj2 easily but can you try reassigning justABoolean to false?

Up Next

This week’s workshop may have been a bit simple as some of you may already have experience scripting and simply see it as a programming syntax-workshop but soon we will dive into the intricacies of JS and how it operates the browser via the Document Object Model (DOM) !