Javascript 3

Proto for objects in created by Constructor Functions cont'd

prototype object = constructor which points back to the Employee constructor function. Also, all properties/methods in prototype object are shared among all created objects.

Proto for objects in created by Constructor Functions

prototype object is assigned to all object's __proto__ property created using the constructor function

Variable mutation

reassigning a variable to another value, using the assignment operator =.

Hiding properties in a constructor function/classes

replace a variable definition from this.property to var property. (variable accessible only inside constructor function)

Returning regular functions

returned function executes only after we execute it

Document Node

root node of all documents

Window Object

root object of the browser's window. Refers to all elements/objects within the tab of the browser. Tabbed browsers = each tab has own window obj

Function Scope

scope inside the function declaration.

Arrow functions with a single argument

see attached

Arrow functions without arguments

see attached

Defining Regular Function as Arrow

see attached

Example of Lexical Scope

see attached

Passing a regular function as an argument

see attached

Passing an anonymous function as an argument

see attached

Passing an arrow function as an argument

see attached

Prototype Manipulation

see attached

Returning arrow functions

see attached

Returning objects in an arrow function

see attached

Single Line Function as Arrow

see attached

Single-lined function as an arrow function

see attached

Writing regular functions as arrow functions

see attached

Functions

set of organized instructions used to carry out a task. modular way to reuse code. Type of object. ex. shows function declaration, loaded before any code is executed

Falsy Values

something which evaluates to FALSE. Values: undefined, null, NaN, 0, "" (empty string), and false

JSON.stringify

takes JS object argument and translates it into respective JSON text.

JSON.parse

takes a string argument and translates it into respective JS object

Associativity

the order in which operators of the same precedence are parsed. There are two types of associativity laws: -Left-associativity (left to right) -Right-associativity (right to left)

Implicit Type Conversion

type conversion that happens automatically. Also known as type coercion. JS automatically converts types of two operands so they're are same type for processing.

Dynamic Type Checking

types are checked and assigned during run time. Happens on the fly. Used by languages like JS that are interpreted or use a JIT compiler. JS is weakly-typed and uses dynamic type checking

Static type checking

types are checked before run time. (JS cannot use this technique but TypeScript can)

Class-base programming

use of class keyword. assist in inheritance and OOP implementation thru constructor, extend, super and static. Clearer and easier to use

Call Method

used to invoke (call) a method with an owner object as an argument (parameter). an object can use a method belonging to another object. Ex. In the code above, the Employee constructor function inherits properties from the Human constructor function. We remove the age and name property from Employee as it already exists in Human. To inherit all properties, use the call method (line 12). The Human.call method invokes the Human constructor function under the same context as we have passed this to it. Then, all properties of the Human constructor function are available to the Employee constructor function, inheriting all properties. However, when we add a new property to the Human constructor functions' prototype object on line 26, it is not accessible by the objects of Employee constructor functions. This is because, on the creation of objects, the call method may add properties of Human but still lacks the prototypal chaining to the Human prototype object. How can we fix this?

Copy Values

variables hold values and variables can be assigned to other variables

Query Elements

we can access certain elements without traversing the tree-like structure of the DOM.

Hierarchical inheritance

when a class inherits from multiple classes

Invoking function w/o args when args are required

will give an undefined value for each arg.

Browser Env

window: root object child objects: DOM, BOM, and JavaScript. JS manipulates/accesses each of the objects for increased interactivity (adds interactivity to web pages)

Traversing elements

x.firstChild: The first child node of the node x. x.lastChild: The last child node of the node x. x.childNodes: All child nodes of the node x in the form of NodeList. x.parentNode: The parent node of the node x. x.previousSibling: The previous sibling node of the node x. x.nextSibling: The next sibling node of the node x.

Anonymous Function

a function where we do not assign a name

Scope Chain

a stack of currently accessible scopes, from the most immediate context to the global context

Inheritance

ability for a class to take properties of another class. base class inherits properties from the super class

Lexical Scope

ability for a function scope to access variables from the parent scope.

Super() Function

acts as the parent class constructor. If super() function called w/ params insidechild class constructor, then parent class props get initialized for the child class = Child inherits parent class properties. super() function called before using the this keyword inside child class constructor. child class derived from parent class = initialization of this for child class done by parent class constructor. Need parent class constructor to be called inside child class constructor using super() function.

Invoking Functions to Variables

after assignment, variables can invoke functions in same way

Adding Properties to Prototype Object

all objects share same link to the prototypal chain. They all inherit the same properties. If we modify the prototype object, then all objects' inherited props will be modified.

Class

blueprint for an object. (object will be instance of a class)

JS Class

blueprints of a type of object with the certain properties/methods to generate objects. Created objects have the same properties and methods, not necessarily same values. Instead of using functions, use class keyword to create classes.

Type Conversion

changing a value from one type to another

JIT compilation

compiler translates source code at run-time into machine language before executing. - uses a profiler to avoid re-translating. JIT complier faster than an interpreter, which just interprets the code. Steps: -Source code parsed into AST (Abstract Syntax Tree). -AST is used to create bytecode. (executed at Runtime) -Bytecode is translated into machine code. (executed at runtime) - machine code is executed.

Object.Create

creates a new object with the specified prototype object and properties. Prototype Obj is passed as an arg. ex. Results = objs created from Employee constructor functions now have access to Human prototype object, as feet property is also accessible. ***All props of prev object assigned to Employee.prototype will be lost by assigning the new object.

Operator precedence

determines the order in which operators are evaluated. Operators with higher precedence are evaluated first. (JS uses higher order precedence)

Creating Element

document.createElement(x); method to create an Element Node with the specified name. document.createTextNode(text); method to create a Text Node with the specified text. *After the Text Node is created, use element.appendChild() or element.insertBefore() methods to append it to an element.

Extends Keyword

enable the availability of all properties from one class to another.

Scope

extent to which a variable is accessible throughout the program at run-time.

Modules

files of JS code. usually contain a class/library of functions for a specific task. modules break our programs down into smaller parts = easier to manage. import {variable_names} from "./module_name"; export {variable_names};

Global Scope

outermost scope in JS program. Variables accessible by any other scopes

Methods

property names assigned to functions in an object

Internal Property

property/method only accessible by methods inside the constructor function or class.

Alternative assigning a variable to a function declaration

(Function expression) function loads when interpreter reaches line of code

Assigning Functions to variables

(function expression) Can Assign functions to variables. This ex. We do not invoke the function

Primitive Types

(immutables) Data types that can be assigned only a single value. cannot be modified, but new primitives can be created -Boolean -Number -Null -Undefined -String -Symbol

Object Properties

(key, value) pair key = prop name value = assigned value

Prototype-based programming

(programming style) object encapsulates properties, methods and data, instead of a class. new properties can be added to this object whenever. object can be an individual vs instance of the class; if you want an object, you can create one without creating a class first.

Two Types of Local Scope

- Function scope - Block scope

Prototypical Chaining

- __proto__ property is traversed when said property is not found in the current object. -traverses to the next object until either property is found or null is reached. (allows objects to inherit properties.)

Let and Const

-cannot be redeclared in the same local scope -difference is that const doesn't allow reassignment, while let does.

JavaScript Engines

-computer programs that execute JavaScript code. Uses either Interpretation or JIT

DOM

-data representation of objects that comprise the structure/ content of a document (web page) on the web (tree of nodes) -a programming interface (api) for HTML/XML documents -allows programs to modify it's structure, style, and content. -DOM represents the document as nodes and objects

Scope Features

-limit variable visibility and accessibility -controls a variables life and the assigned resources. - helps secure resources - makes debugging easier.

Prototype Property (__proto__)

All JS objects have prototype property. assigned at object creation

Prototype objects with constructor functions

All objects created by the constructor function share its prototype object

JS Class Constructor Function

All properties defined in this function. (params are optional)

Objects

Almost everything in JavaScript is made up of objects. Mutable values. (Arrays, dates ie are Objects) unordered collection of data where each data item is a value referenced by a key (property name).

Prototypal Inheritance

An object's ability to inherit properties of another object through manipulating the prototype property

Invoke Functions at their declaration

Args passed immediately after function block.

Object.setPrototypeOf(obj, proto)

Assigns the value of proto to __proto__ property of the obj object

JS Window Obj

In JS, the window obj accesses all objs within window.

Constructor Function Keywords

Constructor Functions: -this: identifies the current obj in the constructor -new: Keyword used to creates new obj and then sets the prototype of this obj to the constructor function's prototype property. * Properties can't be added after constructor func is created.

Primitive Takeaways

NaN === NaN is false 0 === -0 and -0 === 0 is true

JS Encapsulation

No formal support for public, private, or protected keywords. All properties public by default.

Null vs Undefined

Null: a type that represents nothing (expresses a lack of identification) Undefined: value assigned to variables that have not been assigned a value (represents a lack of assignment of the variable)

Object.getPrototypeOf(obj)

Retrieves the value of __proto__ property of the obj object

Prototype Manipulation ex.

The __proto__ property allows accessing properties of another object, if it was assigned to it. In our case, it allows access to the wheels property of vehicle object.

Prototype Checking when immediate obj has property

The __proto__ property is only checked if the immediate object has no property with the respective name. The __proto__ link is traversed after confirming that a target property doesn't already exist.

JavaScript Weakly Typed

Weakly-typed language, at-time type conversions are done automatically. Two Types of conversions: -Implicit type conversion -Explicit type conversion

Callback Functions

functions passed as arguments

Constructor Functions

functions that can be used as templates for creating other objects. (blueprints) All objects created from a constructor function will have the same properties/methods but not necessarily the same values.

Higher Order Functions

functions that take other functions as an argument or return functions

getElementById(x)

get object (Element) by Id attribute

getElementsByClassName(x)

get object (NodeList) with all elements by class attribute

getElementsByTagName(x)

get object (NodeList) with all elements by tag name

Types

group of similar values of similar characteristics

BOM (Browser Object Model)

hierarchy of all objects provided by the browser. These objects let you interact w/ everything other than the web page itself. ie. location, history, or navigator. All BOM objs are accessible by the (parent) window obj

Inheritance in JS

implement inheritance through manipulating prototypes of objects.

Public Properties/Methods

internal props cannot be accessed directly. Accessed by public properties/methods (used to access or manipulate internal properties)

JSON

lightweight data-interchange format. Built on two structures: -collection of key/value pairs (objects) -ordered list of values (arrays)

Local Scopes

limit their accessibility of variables to only certain parts of the program. Has full access to variables in global scope.

Block scope

local scope bounded between two curly brackets {}. Const and Let are only accessed inside {} vs var not bound to {} and accessible outside

Explicit Conversion

manually specify the program to change the type of one value to another specific type. Can be done into 3 types: -to string -to boolean -to number Can be applied to both Primitives and Objects

Static Methods

methods belonging to class only, not objects created from it

Arrow Functions

more concise syntax for writing regular function expressions. Also known as Anonymous functions