Introduction to Javascript

Aug 04, 2021 / 6 min read
javascript English

title: Introduction to Javascript published: false description: Introduction to javascript cover_image: https://thepracticaldev.s3.amazonaws.com/i/deadbeef.png tags: beginners, webdev, javascript, career

Introduction to Javascript

Summary

  • What is Javascript ?
  • Specifications
  • Run your first javascript program
  • What can you do with javascript ?
  • Closing notes

What is Javascript ?

high level

  • abstraction or simplification that the language provide over the computer hardware
  • Otherwise you would know about memory allocation, CPU, Thread to run your program. Lowest level is machine code or byte code (set of 0 and 1)

interpreted programming language -- now JIT (Just in time compiled)

  • Interpreted
    • need of an interpreter that convert every instruction one by one as your program goes
  • Compiled
    • analyze all your code in advance and turn it down to a binary (.exe, .sh, ...) that can run on the machine

dynamic language

  • Dynamic weakly typed language No explicit type declaration just like in Python. The type is associated with the runtime value. Once your program starts, the language is able to squeeze the type of the value
  String welcome = "Hello world";
  public final static bar = 34;

  let welcome = 'Hello world';
  const bar = 34;

prototype based

Boring stuff I hope you won't need to know unless you're in charge of maintaining legacy code. So I'll skip for now. My purpose is to give you the latest way to write JS since you're the new generation. Then you can walk your way back in the past to learn how to understand legacy code if you ever have to deal with it

multi paradigm

You can use Imperative or Object oriented programming

// The following below is pseudo code

// Server update
// - Imperative
const updates = findNewSoftwares()
const localSoftwares = System.softwares
// find


// - Object Oriented
const salade = Salade.fromProvider()
const meat = Meat.fromProvider()
const hamburger = compose(meat, bun, salade)

single threaded

Javascript can only do one single task at a time Try running

  white (true) {}
  // this line will never run
  console.log('hello are you here ?')

with non blocking event loop

Single threaded so how to do multiple tasks ? We expect multi tasking from a computer // listening to the music while running your idea when coding and terminal opened as well

while (queue.waitForMessage()) {
  queue.process.NextMessage();
}

This is why javascript is non blocking since all it does is listen to events and handle it with callback. It is not actually waiting for the return value of a function. Oversimplification here but just know that the event loop handles events in this order:

  1. Run sync code
  2. Run promise or microtask callbacks
  3. Run async task callbacks

History

  • Mocha => LiveScript => Javascript (1995) to make it sound like a cousin of the famous programming language of the time
  • Microsoft built JScript != Javascript 1996
  • Ecma (European Computer Manufacturer Association [1961]) as Standard for Javascript since 1997
  • Ecmascript version
    • [insert:puzzle peace not fitting] This first version missed a lot of things: try catch bloc
    • ECMA 1999
    • 2000 - ES4 => ActionScript then died
    • 2000 - ES3.1
    • 2008 V8
    • 2009 NodeJs - server side Javascript
    • 2009 ES5
    • 2010 Backbone - AngularJS Making the DOM manipulations smoother
    • 2015 ES6 Every ES version added new set of features to the language but older browser does not support them. This is where transcompiler comes into place (Babel/Typescript)
    • ES2019
    • WebAssembly as a lower level of building web application WebAssembly lowest level after bytecode

Specifications

You don't need to know all to run your first javascript program If you know C language then you already have a solid ground [insert-meme:wind blowing up people]

  • Primitives

    • Boolean
    • Undefined: missing value
    • Null: represent empty value
    • Number
    • BigInt
    • String
    • Symbol

  • Object

    • all the previous primitives are in fact objects
    • you can make your own objects

  • conditions: if, switch

  • logical operators: &&, ||

Truthy/Falsy

Falsy values: false, 0, '', null, undefined. In other words: all that is not Falsy Note: Be aware that

  if (0) { // as well as all falsy values: false, 0, null, undefined
    doSomething() // will never run
  }

loops: for, while

try catch bloc

you can use triple equal to get force type comparison

const A = 34 == '34' // true 
const B = 34 === '34' // false

Run your first javascript program

Where does this run ?

You need an interpreter remember.

  • NodeJS

    • Install nodejs on your computer ()
    • create a file (whatever the name you want) index.js with
      console.log("hello world")
    • run node index.js

  • Or use your browser console. F12 to open the developer function

  • Or include it in a html file with

  • Interactive platforms: You can run code with zero installation right in the browser. (You can code a whole website from there)

<script src="index.js"/>

What can you do with javascript ?

You can do anything from web, mobile to desktop.

Web application

  • Front end
    • Single Page Application (SPA) with React, Angular, VueJS, Stencil, ...
    • Progressive Web Application (PWA)
      • A Website running locally on your device
      • an interceptor of user network requests. This allows us caching, installation of a website as an app

Web application

  • Back end
    • NodeJS is Javascript on the server. So far what we've learned is that javascript is running on the browser (client)

NB: The terms Full JS or Fullstack JS when both of your front and back end are written in JS

Desktop application

With:

Mobile application

With:

  • ReactNative
  • Ionic
  • VueNative
  • Nativescript

What I like about Javascript

  • low to no learning curve
  • c like
  • one to rule them all

What I dislike about Javascript

  • interpreted which mean if there is an error somewhere in your code you may not find it even on production
function average (notes) {
  if (notes.length == 0) {
    throw Error("Can't divide by 0")
  }
  var stack = 0
  for (var i=0; i<notes.length; i++) {
    stack += notes[i]
  }
  const sum = stack
  const sum = notes.reduce((acc, note) => note + acc, 0)
  return sum / notes.length
}

average([10,12,16]) // 14
average([]) // throw error: can't divide by 0

Scenarios

Simple app

  • existing website created in AngularJs
  • engineering team of web devs
  • doesn't require many features
  • solution: PWA

Augmented Reality app

  • Venture Capitol Funcding

Closing notes

Useful resources

Where to go from here ?

  • Web application:
    • front-end: try any of these and see which one resonate the most with your preferences: React, Vue, Angular
    • back-end: NodeJS API, NodeJS server
  • Desktop application: electron
  • SPA
  • PWA
  • test your skills: https://github.com/babacarcissedia/javascript-101/