Introducing JavaScript

CSCI-UA.0480-008

A Little Bit About JavaScript

What are we getting ourselves into? We'll introduce JavaScript by →

Defining what JavaScript is? 🤔
Taking a quick look at some interesting JavaScript features 👀
Going over why we're using JavaScript? 🕸
And, finally, we'll discuss how to run JavaScript programs 🏃

About JavaScript

Perhaps You've Used it Before?

It's pretty much the standard language for developing for the web (for better or worse).

JavaScript is →

a high-level programming language available on many platforms
that supports multiple programming paradigms, such as imperative, functional and object oriented programming
it has a Java / C-like syntax - (curly braces for blocks, etc.)
it's dynamically typed (eh… maybe not a great feature? 😐)
it's weakly typed (definitely not a great feature 😟)
most implementations are interpreted rather than compiled
it has a lot of really great (and sometimes quirky 🙃) features, but it also has some really terrible parts too 😖

Interesting JavaScript Features

We'll go over these in more detail in the next couple of classes but it's nice to get a preview here as motivation to learn the language →

first-class functions (functions are just objects that can be passed around as values like strings and numbers)
closures (a function has access to the variables in scope when the function was created)
versatile and dynamic objects (object literal notation is pretty powerful)
prototypal inheritance (using another object to base new objects off of)

Functions as First Class Citizens

In JavaScript, functions are just objects that can be →

Passed around:


// in the code below, w => w.toUpperCase() is a shorthand 
// way of creating a function (an arrow function or a 
// lambda), which is then passed to the array method, map

const  words = ['yachty', 'boaty', 'canooey'];
console.log(words.map(w => w.toUpperCase()));

Or even have properties and methods!


// another way to declare a function

function sayBroccoli(times=1) {
    console.log('broccoli'.repeat(times));
}
// WAT? this function has a method called bind!?
const sayBroccoliTwice = sayBroccoli.bind(null, 2);

Closures

A function has access to the variables in scope when the function was created:


// val is available to returned function 
// even after stringAccumulator returns
function stringAccumulator(val='') {
    return function(s) {
        val += '\n' + s;
        console.log(val);
    };
}


const addColdStates = stringAccumulator('Cold states:');
addColdStates('Minnesota');
addColdStates('Maine');
addColdStates('Michigan');

Expressive Syntax for Creating Powerful Objects

Object literal notation is easy!


const obj = {nights: 0};

Add a method? No problem!


obj.incrementNights = function() {
    this.nights += 1;
}

obj.incrementNights();
console.log(obj.nights);

Prototypal Inheritance

Perhaps you want another object to have the same "properties" and "methods" as the object, obj, in the previous slide…


// set obj to be the "prototype" of anotherObj using Object.create
const anotherObj = Object.create(obj);

Now… anotherObj has both nights and incrementNights as properties


anotherObject.incrementNights();
anotherObject.incrementNights();
console.log(anotherObj.nights);

About Those Examples

So, hopefully that quick tour of language features makes JavaScript enticing to learn!

However, the examples in the previous slides may have looked unusual, even if you already knew JavaScript →

don't worry, we'll cover everything in-depth in this class and the next few classes
if you've used JavaScript before and are confused by the lack of var usage and the weird => syntax…
- it's because we're using recent JavaScript language features
- specifically stuff from ES6, and maybe beyond!

ECMAScript and ES6

ECMAScript is the name of the standard that JavaScript implementations are based off of.

new features are included in yearly editions of this standard
the 6th edition of ECMAScript was published in 2015 (called ES6 or ES2015)
the specification is continually evolving, with new features being added through a proposal process
the most recent version is the 8th edition in 2017 (ES8 / ES2017)

We're going to be using ES6 (and possibly features from later editions) in this course

ES6 Continued

We're going to use a lot of ES6 (features from 2015) for this course.

ES6 contained a large set of features that signficantally influenced JavaScript syntax and best practices … for example:

arrow functions (instead of anonymous functions): x => 2 * x
let and const (instead of var): 'let x = 1'
destructuring (instead of single assignment): const [x, y] = [1, 2]
…and others (like class, various String and Array methods)

At this point:

most of these features are implemented by a significant number of JavaScript engines
see this table to find out which features are implemented by various JavaScript engines

Why JavaScript / ES6

So… that leads to why we're using JavaScript (and additionally, why ES6):

it's ubiquitous on the web
it has some interesting features, making it fun to program in
it can be installed easily in many environments
most of these environments support the features specified in ES6
in ES6 introduced many syntactic improvements and features, many of which are in wide usage

Availability

JavaScript can be run in many different environments, from servers and microcontrollers…. all the way to its most common use in client side (web browser) programming.

you can install server-side JavaScript on multiple platforms (Node.js has Windows, Linux, and OSX installers)
it's available on every major browser (such as Chrome, Safari or Edge)
…and there are sites like gomix, jsfiddle, and codepen that allow you to run JavaScript in various capacities

Running JavaScript

We'll be running JavaScript on both the server and the client… so we'll rely on:

the Node.js commandline interpreter / REPL, which is really just V8 (what's v8? →)
```
node myfile.js
```
```
pines:~ joe$ node
> console.log('REPL time!')
```
and Chrome for running JavaScript in browser (which is, coincidentally, also v8)

A few Notes on How You'll be Writing Programs

use any text editor you want
some editors that I, as well as other students, have used in the past:
- Visual Studio Code (has great debugging tools, frequent releases)
- WebStorm (for a full IDE experience)
- Atom
- sublimetext
- vim or emacs

Choose the one that you're most comfortable with!

(I use vim in class, but you should work with the editor that you're the most productive in).