Please enable JavaScript.

Coggle requires JavaScript to display documents.

JS/ES - Coggle Diagram

- - - - Object Wrapper : Number()
    - - It's absence of a definition
    - - It's absence of a value
    - - For creating unique things
    - - Object Wrapper: Boolean()
  - - - Function
      - Array
        
        Check if the variable is array: Array.isArray()
        
        Copy an array: [].concat(arr)
      - Object
        
        :fire: Shallow Clone
        
        sperad operator : {...obj}
        
        Object.assign({}, obj)
        
        Deep Clone
        
        JSON.parse(JSON.stringify())
        
        Can make performance issues
        
        Object Comparision Link
  - - - Data store in memory and we pass the address of data to variables.
      - Non-primitive types are pass by reference
    - - Variables with this type don't know about each other existence.
      - Variables with this type are immutable. We can't modify it until to create new thing.
      - Primitive types are pass by value
- - - - Hoisting making code unpredictable. Avoid!
      - IIFEs aren't hoisted
      - 3 - Hoisting means to declare variables and functions as undefined in memory until store data inside of them.
      - 2 - During the hoisting, Call Stack asks from Memory Heap to allocate some memory for variables and functions during creation phase.
      - let and const aren't hoisted
      - Function expressions are hoisted
      - Function declaration are hoisted
      - Variables (var) are partially hoisted
      - Happened during compilation phase
      - 1 - Moving variables or function declaration into the top of respective environments.
    - - :star: Is the object that the function is a property of: obj.func(this)
      - It's whatever is to the left of the '.' : obj.func(this) or obj.func(anotherFunc(this))
      - Gives methods to access their objects.
      - Can execute same code for multiple object (DRY).
      - 3 - It matters how the function was called! functions inside a method in object have access to global object! :(
        
        Arrow Functions is a way to solve issue. In arrow functions, 'this' is lexically scoped!
        
        bind(this) in another way to solve the issue.
        
        'var self = this' is one more way.
      - 4 Binding Ways
        
        new binding Example
        
        implicit binding Example
        
        explicit binding Example
        
        arrow function Example
- - - - With 'var', 'let' or 'const'
      - :fire: IIFE: To avoid Global Variable Issue
    - - Example
- - - - SpiderMonkey
        
        First JS Engine
        
        Branden Eich (MDN)
      - V8
        
        :star: Workflow
        
        :fire: 3 - Interpreter
        
        It creats bytcode
        
        4 - Profiler
        
        :fire: 5 - JIT (Just In Time) Compiler
        
        Optimized code
        
        1- Parser : Lexical Analysis : Break the code to some tokens
        
        2 - AST : Abstract Syntax Tree : https://astexplorer.net/
        
        Info
        
        Most popular engine
        
        Used by Chrome and Node.js
        
        Written with C++
        
        Released on 2008
        
        Created for google map at first
        
        Probably fastest Engine
    - - Stack Overflow : Simplest way: Call a function inside of it!
    - - Memory Leak
        
        Example: Infinite loop!
        
        :star: Cases SoundCloud Article
        
        Too much global variables
        
        Event listeners (Specially in SPAs)
        
        setInterval()
  - - - fetch()
      - setTimeout()
      - DOM
      - ...
- - - - Using: Array.from(arguments)
      - Using: spread operators
- - - - Example
    - - Means hiding unnecessary information to be seen from the outside world.
      - Example
- - - - It's like building a robot
      - Related on prototype
      - Modeling real world objects and relationships
    - - Example
    - - :star: First way to create : Link
      - Second way to create : Link
      - new keyword changes this in global object into the object that we created.
      - The only way to add properties to constructor function is this keyword.
    - - instanciation with 'new'
      - :star: Every time we create an instance from class, we run constructor function. And because of that, we won't initialize methods inside constructor because it creates methods every time!
      - Example
    - - Before 'class' syntactic sugar, inheritance was so hard to implement.
      - 'extends' keyword
      - 'super' class
      - Example
      - JS links object together with inheritance not copying them.
      - JS doesn't have 'public' or 'private' in class
      - 4 pillars
        
        encapsulation
        
        We wrap code into boxes that are related to another.
        
        These boxes can be interacted with each other.
        
        abstraction
        
        Hiding complexity form the user.
        
        Creating simpler interfaces
        
        Also helps when we work with public and private properties.
        
        inheritance
        
        Preventing to rewrite the same code.
        
        Save memory
        
        polymorphism
        
        Ability to call the same method on different objects and each object responding in a different way.
        
        method overriding
        
        method overloading
        
        Because of JS is a dynamically typed language, it limits polymorphism.
      - It's about structure
      - Answering the question: 'What it is'
      - Poblems
        
        Tight Coupling
        
        Fragile Base Class
        
        Hierarchy
        
        Classic Guerilla banana
        
        How to fix problem with composition
        
        Removing all the methods
    - - Few operations on common data
      - stateful
      - side effect
      - Imperative
      - Data and behavior bring together
  - - - Related on closures.
      - Separation of concerns.
      - Operates on well-defined data structures like objects or functions.
      - many operations on fixed data
      - Data and behavior are separate things
    - - 2 rules
        
        1 - The function can't modify anything outside itself (No Side Effect)
        
        Prevent mutating shared states
        
        2 - The function has to always return the same output with the same input (Referential Transparency)
      - console.log() is an api, so it breaks pure function
      - The goal is minimum side effects. We can't create everything pure!
    - - 1 task
      - return statement
      - pure
      - no shared state
      - perdictable
      - composable
      - immutable state
    - - Eaxmple
      - Example2: Http Get request is idempotent
      - 1 - A function always returns what expected to do. (predictable)
      - 2 - A function calls itself over and over and still get the same result.
    - - Definition
        
        Imperative code tells the machine how to do it.
        
        Machine Code is very imperative
        
        Like : for loop
        
        jQuery is imperative!
        
        Declarative code tells what should be.
        
        High Level Language are very declarative.
        
        Like : foreach loop
        
        Modern fronend frameworks are declarative
      - Functional programming helps us to be more declarative
    - - Means not changing data (state).
      - Copying objects may create memory issue
        
        To prevent that, we use Structural Sharing (picking up what we need from object) Link
    - - Definition
        
        It's the technique of translating the evaluation of a function that takes multiple arguments into evaluating a sequence of functions each with a single argument.
      - Example
    - - It's a way to partially apply a function
      - Producing a function with a smaller number of parameters
      - Example
    - - Any data transformation, should be obvious
      - Example
      - pipe (It's invert of composition) Example
      - Answering to 'What it has'
    - - The number of arguments that function takes.
      - Less arity makes functions more flexible and better.
- - - - array
        
        proto (arr.proto === Array.prototype) Array Constructor
        
        prototype: {}
        
        isPrototypeOf
        
        proto
        
        null
        
        hasOwnProperty
        
        ...
      - :star: function
        
        proto (fn.proto === Function.prototype) Function Constructor
        
        prototype: {}
        
        proto (fn.proto.proto) : Object Constructor
        
        prototype: {}
        
        hasOwnProperty
        
        isPrototypeOf
        
        proto
        
        1 more item...
        
        ...
        
        ...
        
        bind()
        
        Function Currying : Example
        
        Function Borrowing : With certain context and parameters Example
        
        call()
        
        func() === func.call()
        
        Function Borrowing : Example
        
        apply()
        
        func() === func.apply()
        
        Function Borrowing : Example
        
        code()
        
        properties
        
        code()
        
        name (optional)
        
        properties
        
        prototype: {}
        
        :star: This is useful when we create a new constructor function
      - object
        
        proto (obj.proto === Object.prototype) Object Constructor
        
        prototype: {}
        
        proto
        
        null
        
        isPrototypeOf
        
        hasOwnProperty
        
        ...
      - :star: Notes
        
        :star: Only functions have the prototype property
        
        :fire: typeof Object => 'function'
        
        typeof Object.prototype => 'object'
        
        typeof Function => 'function'
        
        typeof Function.prototype => 'function'
        
        typeof Array => 'function'
        
        typeof Object.prototype => 'object'
        
        'String.prototype' is from String Constructor
        
        We can use FunctionConstructor.prototype to add new methods to a constructor!
    - - with 'proto' : Example
        
        Using proto has bad performance issue. We should never create our own prototype chain!
      - with 'create()' : Example