Skip to content

Basics of JavaScript#

What was first javascript engine ?#

  • java script is created by Brendan Eich
  • java script engine is also created by him

  • spidermonkey

  • javascript is not understandable by computer but only browser understand JavaScript.

  • java script engine is a computer program that execute javascript program and convert it into computer understandable language.
Browser Name of Javascript Engine
Google Chrome V8 written in c++
Edge Chakra
Mozilla Firefox Spider Monkey
Safari Javascript Core Webkit

Google chrome's Javascript V* engine#

  • html parser tries to fetch script file
  • either from Network Cache Service Worker
  • stream of bytes return to byte Stream Decoder
  • Decoder generate tokens1
  • token send to parser
  • Ignition Interpreter generate Bytecode
  • use turbo fan(optimizing optimizer) to generate byte code faster and optimize machine code
  • faces problem due to dynamically type - not good for engine
  • orinoco - garbage collector
  • oilterm - garbage collector

Java script runtime environment#

  • it provides all the things required to run js code
  • things like
  • eg : Js engine
  • api - local storage , settime out ,console is api
  • event loop
  • call back queue
  • every browser have javascript run time env .

Execution Context#

  • Every thing in a js happens in a Execution context.
  • Execution context has 2 components
  • memory component - Variable Environment : variables and values stored in key value pairs
  • code component - Thread of Execution: code execute one line at a time
  • Js is a synchronous , single threaded language
  • single threaded means - one line at a time
  • Syncronuos means - execution done is a order

Architecture#

  • create own engine by following ECMAScript language standard
  • code →parsing →compilation →execution
  • parser generate Abstract javascript code for a piece of javascript code
    javascript parse tree generator

javascript is an interpreted language or a compile language ?#

  • use both interpreter + along compiler called JIT
  • job of compiler is to optimize the the code generated by the interpreter
  • Execution - with the help of Memory heap and call stack
  • just In time Compilation
  • garbage collector uses Mark and sweep algorithm - optimize memory space
  • ilining
  • copy elision
  • inline caching

Basics#

VAriables#

  • start with $,_,letter

Declaring variable#

  • var

  • used to declare both local and global variables

  • let or const

  • blocked scope local variable
  • constant - read only
const MY_OBJECT = {'key': 'value'};
MY_OBJECT.key = 'otherValue';

// this will not cause any error

Difference between var and let#

if (true) {
  var x = 5;
}
console.log(x);  // x is 5

if (true) {
  let y = 5;
}
console.log(y);  // ReferenceError: y is not defined

VAriable hoisting#

  • can refer to a variable declare later hoisting

Function hoisting#

  • function hoisting done using function declaration
  • not hoisted if they're defined using function expression
foo(); // "bar"

/* Function declaration */
function foo() {
  console.log('bar');
}

Global variable#

  • global variables - properties of global object
  • global object is window
  • sent and access global variable using window.variable syntax

Datatypes#

  • 7 datatype
  • string
  • number
  • boolean
  • null - behave as 0 in numeric context
  • undefined - var or let statement with no assigned value
  • object
  • symbol

Data type conversion#

  • javascript is a dynamically typed language
  • + operator convert numeric to strings
y = 42+"this my ans"   // "42 this is my ans"
  • - operator
 var y = 5 - "1"; // y = 4 number

converting string to numbers#

  • parseInt()
var y =  "121";
var x = parseInt(y,10);   // string ,  base
  • parseFloat()

Literals#

  • Literals are fixed values not variables
  • array Literals
  • boolean literals
  • Numeric literals
  • Integer literals
  • floating point literal
  • object Literals
  • RegExp literals
  • string literals
let coffees = ['French Roast', 'Colombian', 'Kona'];
  • Only the last comma is ignored
let myList = ['home', , 'school', , ];
//length 4

Java script Selectors#

  • QuerySelector
document.querySelector("h1");
  • QuerySelectorAll
document.querySelectorAll("li")
  • Event Listener
function sayHi() {
  alert("hi");
}

let element = document.querySelector("#city");
element.addEventListener("click", sayHi);

  • Click is the most common event type but you can also use click | mouseenter | mouseleave | mousedown | mouseup | mousemove | keydown | keyup.

  • innerHTML - for changing value

DOM (Document object Model)#

adding javascript#

  • Inline - onload = "alert('hello');"
  • internal
  • external
  • always add javascript in the end - because it will try to access the elements which is not exist yet

get property#

  • innnerHTML
  • style
  • firstchild

set property#

  • click()
  • appendChild()
  • setAttribute()

Refactoring code#