0x344 JavaScript

Language

Lexical Structure

Several rules about lexical structures in javascript

  • javascript is case-sensitive
  • identifier must start with letter, underscore or dollar sign
  • unicode can be used in javascript

Semicolon is used to separate statement, but can be omitted with a line break. The general rule is Javascript treats a line break as semicolon if the next nonspace char cannot be a continuation of the current statement.

It might be useful to write in the defensive style by adding semicolon before symbols (, [, /

let x = 0                         // Semicolon omitted here
;[x,x+1,x+2].forEach(console.log) // Defensive ; keeps this statement separate

The exception of the general rule is return, throw, yield break and continue. These will add semicolon whenever there is a line break

Type, Value and Variables

Variables

  • let: re-assignable variable (ES 2015), re-declaration not allowed in the same scope
  • const: const variable (ES 2015)
  • var: old variable

Data Type

  • primitive: immutable data type: Boolean, Number, String, Null, Undefined, Symbol
  • object: mutable types: others

function

function fn1() {}

const fn2 = function() {};

const fn3 = () => {};

Backend

Node.js

Node.js is an runtime extending the V8 engine by adding more features (e.g: file system),

NPM is its package managing tools.

The basic commands are as follows:

npm init # initialize the repository, will create package.json and package_lock.json
npm install <package> # install the package into node_modules and update both package.json
npm install -g <package> # install globally
npm update <package> # updating the local package to most latest compatible versions
npm start # default command run the server.js if existed
npm run <command> # run the customized command defined in the "scripts"

webpack

resolve all dependencies in js and create a single bundled js file

Babel

According to the official site, Babel is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript. It can be tested online here https://babeljs.io/repl

The babel compilation takes three steps:

  • Build AST Tree: with babylon parser, jsx -> json tree, demo available here https://astexplorer.net/
  • Tree transformation: apply plugins + babel-traverse to transform trees
  • Code Generation: generate code with new tree

Frontend

React

minimalist framework.

JSX is a syntax extension of Javascript to build HTML,

According to the official page, JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It’s NOT intended to be implemented by engines or browsers. It’s NOT a proposal to incorporate JSX into the ECMAScript spec itself.

# equivalent statements
const element = <h1>Hello, world</h1>;
const element = React.createElement('h1', null, 'Hello World');

Component

  • state: maintain the observable data, when updated, the associated items will be rendered again. This should be treated as immutable. Use setState to update state

Vue

between angular & react

Angular

everything built-in

Reference

  • Flanagan, David, and Will Sell Like. “JavaScript: The Definitive Guide, 7th.” (2020).