JavaScript-Notes.doc

JAVASCRIPT NOTES

What is JavaScript?

    - JavaScript is a lightweighted and interpreted (or just-in-time compiled) programming language with first-class functions. It is a scripting Language for web pages.
    - JavaScript features are
            - protype-based
            - multi paradigm
            - single threaded
            - dynamic language
            - supporting oops concept
            - imperative and declarative(eg: functional programming)style.

Histroy of JavaScript?

    - JS was originally developed as "LiveScript" by Netscape in 1990's.
    - JS was created by "Brendan Eich" in 1995 during his time at Netscape Communications.
    - JS is client-side scripting language used for web applications at that time.


    Note:

        "JavaScript is not JAVA". 

What are the applications or builing with using JS is possible?

    - Website Development
    - Web and Mobile applications
    - Desktop Applicaitons 
    - Game Development
    - Server-Side Development
    - Browser Extensions
    - Real Time Applicaitons
    - IoT
    - Machine Learning and AI

Why we should learn JS?

    - Easier to start with learn
    - Great career opportunities
    - Wide range of usage
    - Big community supporting
    - High Demand for Future 

What are the frameworks in JS?

    - React JS
    - Vue JS
    - Angular JS
    - React Native (Build Mobile Application)
    - ElectronJS and much more (Build Desktop Applicaiton)
    
How JS works?

    Old Method:

             run
    JS code ----> browser (Inbuilt JS Engine) ----> output

    for eg: Google Chrome (V8 JS Engine), FireFox Browser (Spidermonkey JS Engine)

    Limitation: For browser works only JS


    New Method: 

    - In 2009, Ryan Dahl (Scientist) introduce "JS Engine Wrapper into C++" it called as "Node".

    Using Node, we can create,

        - Web applications
        - Mobile applications
        - Backend applications

ECMA Script?

    - It is a Just a specification (set of rules).
    - JS to follow ECMA Script


JS Comments:

    // - Single Line Comment
    
    /* ... */ - Multiline Comment

How to run JavaScript in Node JS?

    - Already installed node JS
    - Check node version (using cmd)

        node -v (v18.17.1)

    - node js file name. eg: main.js

JavaScript Variable:

    - variable is a store in values and temporary memory allocation 

    syntax:

            var variableName = value;

        Ex:
            varibale name
                   |
                   |
            var message = "Hello, my name is arun, I'm Learning JavaScript";
             |                                  |
             |                                  |
    variable keyword                          value


            console.log(message);
    
    Variable Keyword:

        - var
        - let
        - const

    Shortcut Tip: console opening (F12) for chrome

    Concatnation Operator:

        "content" + variableName
        "content" + variableName + "conent"

    Without value in variable ---> Undefined

        Ex: let age;

    JavaScript is dynamically typed language. don't need a data type.

    Variable Naming Convention:

        - Don't use reserved JS keywords name. (eg: let break)
        - Should not start with numbers. (eg:5star)
        - No space and hypen (-) (eg:note-pad or full name)
        - It's Case-Sensitive (eg: fullName and FullName both are different.)
        - Use valuable name

    Tip: Variable name using "CamelCase" like fullName, getView and lastName, etc.,

    var vs let:

        var - old way of storing variables
        let - new way of storing variables (After Improvement of ES6+)


    const:

        - const variable don't change the value (don't override the values). But let or var (override the values).
        - const variable can't edit or modify the values.

        Error:

            Uncaught TypeError: Assignment to constant variable.

JavaScript Datatypes:

    - 2 types of Datatypes. there are "Primitive" and "Reference" Types

        Primitive Types                         Reference Types

            - String                                - Object
            - Integer/Number                        - Array
            - Float/Double                          - Function
            - Boolean
            - Undefined
            - null

    Statically Typed:

        - Datatype is defined. (C, C++, Java)

                    variableName
                        |
                        |
                String name = "Arunkumar"
                   |               |
                   |               |
                Datatype         value

    Dynamically Typed:

        - Datatype is not defined. (JavaScript, Python, PHP)

              variableName
                   |
                   |
                 name = "Arunkumar"
                            |
                            |
                          value

    Find the datatype ----> "typeof" keyword

                typeof variableName

        note: "null" is a Object Datatype

JavaScript Object:

    - Object declare using variable keywords and values represented inside the flower braces {}.

    syntax:

        
        variableKeyword variableName = {}

    Ex:

        let person = {}

        - It's an empty object

    Object Values:

        - It's represented as many types.

            1. Key pair value

        syntax:

            key : value

        - key is a unique 
        - value is represent all datatypes.

    Pass Multiple Parameters passing to objects using separated by (,) delimiter.

    Ex: name : "Arunkumar", 
        age : 24,

    Object values reference or get the values from object.

        - 2 Ways

            - Dot Notation (.) (Mostly Used)

            syntax:

                objectName.key

            Ex:

                person.name

                - Object Values are change (Override the values), but "Keys" Doesn't change

            - Bracket Notation 

            syntax:

                objectName['key']

            Ex:

                person['name']

    Object Freedom for creation for sub object.

        syntax:

            variableKeyword variableName = {
                key : value,
                key : {
                    key:value
                }
            }

JavaScript Arrays:

    - Array is a collection of data.
    - Array is an object
    - It represent or denoted by []
    - Arrays are Index based
    - Index starts from 0
    - One of the Important Property of array "array length"
    - array length -1 = Max. Index no

    syntax:

        variableKeyword arrayName = []
    
    Ex:

        let favColor = ['red', 'blue', 'green']

    Access Array values using Index

        arrayName[1] --> blue

    Calculate an array length ----> arrayName.length

    Ex: favColor.length  ----> 3

JavaScript Functions:

    - Function Create using keyword is "function".
    - 2 parts are important. they are function declation and function calling.

    syntax: 
       
        () ---> Placeholder of parameters or Passing through parameters
        
        // function declation
        function functionName(){
            // set of statements
        }

        // function calling
        functionName();

        () ---> Placeholder of arguments or Passing through arguments

JavaScript Operators:

    - Operators means
    - Operators is a important play role an every programming language.

        variable + Operators = Expression (Algorithm)


    Types of Operators:

        - Arithmatic Operators
        - Comparison Operators
        - Assignment Operators
        - Logical Operators
        - Bitwise Operators

    Arithmatic Operator

        - +,-, *, /, % and **
        - Increament (++)
            - preincreament (++value)
            - postincreament (value++)
        - Decreament (--)
            - predecreament (--value)
            - postdecreament (value--)

    Assignment Operator

        - = is assignment operator.
        - To assign the value of variables

    Comparison Operator

        - Comparison operator produces "boolean(true, false)" as a result.
        - Relational Operator -  >, <, <=, >= and ==
        - Equality Operator -  === and ==
        - Not Equality Operator - !== and !=

        === ---> Strict Equality Operator. Compare both (Datatype + Value)
        ==  ---> Lose Equality Operator. Compare (value)

    Ternary Operator

        syntax:

            variableKeyword variableName = condition ? "Condition True Statement" : "Condition False Statement"

            Ex:

            let applyVoterId = age > 18 ? "Eligible" : "Not Eligible"

    Logical Operator

        - 3 Types

            - Logical AND (&&)
                Returns TRUE If both operands are TRUE (both conditions = TRUE)

            - Logical OR (||)
                Returns TRUE If any one operands are TRUE (any ond condition = TRUE)

            - Logical NOT (!)
                Returns TRUE If operand is FALSE (opposite condition FALSE = TRUE)
    
        Logical Operator with Non Boolean Values:

            false || true ---> true (using boolean result)

            Non Boolean Values treated with different mechanism in JS. 2 Mechanisms

                - Falsy (false)

                    Falsy means doesn't exactly false, but some what false.

                        - Undefined
                        - null
                        - 0 --> numbers
                        - false
                        - '' or "" --> strings
                        - NaN

                - Truthy

                    Anything thant is not falsy is Truthy.

            Short Circuiting Concept:

                - First 2 condition only check, otherwise ignore this concept.

                Ex: true || false || true ---> true 

                    Last one true is not consider this condition.

    Bitwise Operators:

        bits and bytes --> Memory allocation

        Humar code --> Machine code (0,1) binary

        1 -> 00000001
        2 -> 00000010
        3 -> 00000011

    Operator Precedence:

        Complex Calcaltion  approach in JavaScript.

        BODMAS RULE

            Bracket -> ( or )  <- Parenthesis
            Order   -> √ or x² <- Exponent

            Divide -> /
            Multiplication -> *
            Addition -> +
            Subtraction -> -
            
JavaScript Conditional Statements:

    They are 2 types of conditional statements.

        - If-else condition
        - Switch-case condition

        If-else condition:

            syntax:

                if(condition){
                        // block of code
                }
                else{
                        // block of code
                }

            One or more conditions using else if condition

            syntax:

                if(condition){
                        // block of code
                }
                else if(condition){
                        // block of code
                }
                else{
                        // block of code
                }

            Pre or In buit function of Date and Time:

                Date() --> In Built Function

                Date().hours()

            Create a object in new keyword method:

                let objectName = new functionName();

                Ex:

                let hour = new Date();

                or 

                let hour = new Date().getHours();

    Switch Case:

        - Switch Case also same if else statement, but condition to be decided goto switch case or if else.

        syntax:

            switch(condition){
                case 1:
                  // block of code
                  break;
                case 2:
                  // block of code
                  break;
                default:
                  // block of code
            }

            multicase in single statement:

            switch(condition){
                case 1:
                  // block of code
                  break;
                case 2:
                case 3:
                  // block of code
                  break;
                default:
                  // block of code
            }

JavaScript Loops:

    - For Loop
    - While Loop
    - Do While Loop
    - For-in Loop
    - For-of Loop

        For Loop:

            syntax:

                for(initialExpression; condition; step){
                    // block of code
                }

                    initialExpression -> intialize the value 
                    condition -> Logical Portion
                    step -> either increament or decreament

                

                for(initialExpression; condition; step)
                            |
                            |
                        Inline Variable

        While loop:

            Global variable using for Loop

            syntax: 

                variable initialExpression;

                while(condition){
                    //block of code
                    step;
                }

        Do-While loop: (Not used Mostly)

            syntax:

                variable initialExpression;
                
                do{
                    // code
                    step
                }while(condition)


        In Modern JavaScript:

            For-in loop: To iterate the object and arrays value.

            syntax:

                for(variableKeyword key in object){
                    // code
                }

            Ex:

                const person = {
                    name : "Arunkumar",
                    age : 24
                }

                for (let key in person){
                    console.log(key + ":" , person.key)
                }

            For-of loop: Better Iteration for arrays

            syntax:

                for(let variableName of array){
                    // code
                }

            Ex:

                let color = ["red", "blue", "green"];

                for (let colors of color) {
                console.log("Color: " + colors);
                }

JavaScript Objects in OOPs:

    - variable to create inside the object to be organized and maintained code easily. It means "Encapsulation"

    2 types of variable accessing in output:

        "sentence" + variableName or , variableName --> Normal Method

        `sentence ${variableName}` --> tilda Method

    Object inside function creation is called "Method".

    syntax:

        variableKeyword objectName = {
            functionName : function(){
                // block of code
            }

                        or
            
            functionName(){
                //block of code
            }
        }

        functinName();

    Accessing the object variable inside the function using "this" keyword.

                ${this.variableName}


    Factory Function:

        Naming Convection: CamelCase (createPerson)

    syntax:

        function functionName(parameter){
            return {
                variableName : value,
                functionName : function(){
                    // Block of code
                }
                            or
            
                functionName(){
                    //block of code
                }
            };
        }

        creating dynamic values 

        let variableName = functionName(argument);

        variableName.functionName();

        In Modern JS
        
            variableName and Value are same using this "variable name"
            name ---> (name:name)

    Constructor Functions:

        Naming Convection: PascalCase (CreatePerson)

    syntax: (FunctionName or ClassName or ConstructorName)

        function ClassName(parameter){
            
                this.variableName : value,
                this.functionName : function(){
                    // Block of code
                }
                           
            };

        let variableName = new ClassName(argument);
        variableName.functinName()


Dynamic Objects: (Create, Edit and Delete)

    - It means objects working on dynamic like add the new values, accessing dynamically and delete the values.
    - In log objects don't be concatenation(+).

        "sentense" + objectName ---> WRONG

        "sentence" , objectName ---> CORRECT

    Delete Object:

    syntax:

        delete objectName.variableName

    Ex:

        delete student.age;

Constructor Property:

    Object() --> In built constructor in JavaScript
    

    Object Literals - let x = {} --> let x = new Object()
    String Literals - let name = "Arun" --> let name = new String("Arun")
    Number Literals - let age = 24 --> let age = new Number(24)
    Boolean Literals - let isAlive = true --> let isAlive = new Boolean(true)

Functions are Object!

    Functions is kind of objects.

    some inbuilt methods in object:

        - name
        - length
        - constructor
        - call
        - apply

    name : Display Function name
    lenght : length of function
    constructor : Call default constructor
    call : 

        FunctionName.call({ }, "values", "values");
                           |
                           |
                          this

            - It reference of this value

    apply :

        FunctionName.call({ }, ["values", "values"]);
                           |            |
                           |            |
                          this     value represent an array

            - It reference of this value


    Tip:

       In Vs code "purple" color - "Methods"

Primitive Values vs Reference Values:

    Primitive Types                                             Reference Types

        Number                                                      Object
        String                                                      Array       
        Boolean                                                     Function
        Symbol (Developed by ES6+ Module)
        Undefined
        Null

    Ex:

        let x = 10; (from x value copy)
        let y = x; (to paste the x value )

        x = 20;

        print x = 20
        print y = 10

    Primitive Values:
       - Both x & y variables are Independent!
       - It doesn't care what you do with x variable.
       - These are independent variales.

    Ex:

        let a = { value: 5 }; (Refer the value only. Don't copy the value) ---> Random Memory Address
        let b = a; (Refer the memory location Id.)

        a.value = 10;

    Reference Values:

        - Don't copy the value. Only refer the memory location.
        - This is known as Reference Value.

Enumerating Properties of an Object:

    - Objects are not Iteratable

            for (let key of user)
                    console.log(key)

            // TypeError: Object is not Iterable

        Iteratable:
            - Arrays
            - Map

        If your iterate the object is converted in array format

            for (let key of Object.keys(user))
                console.log(key)

        Object.keys ---> Get the key from the object
        Object.entries ---> Get the both keys and value from the object

Cloning an Object:

    - It means copy of an object and it duplicate copy of object
    
        3 Methods to create Object clone

            - Traditional (For in) Method
            - Assign Method

                syntax:
                    
                    Object.assign(target,source)

                Ex:

                    let anotherObject = Object.assign({key:values},user)

            - Modern Method

                - In Modern JS intruduce Spread Operator to clone the object in all frameworks like react js, angular js and vue js, etc.,

                syntax:

                    {...objectName}

                Ex:

                    let anotherObject = {...user}

JavaScript Garbage Collection:

        - Memory stored in system mermory.
        - Automatically JS clean the memory. Garbage collection is automated in js. (v8 engine to prefectly handled)
        - Mermory Freed

JavaScript Inbuilt Objects:

    Case sensitive 

    - Math Object
    - String Object


        Math Object:

            - Static Properties
                PI (more)

            - Static Methods
                random()
                ceil()
                floor()
                round()
                max()
                min() (more)

        String Object:

            Propertices 

                length
            
            Methods

                charAt()
                includes() --> find the letter or name present in the object
                concat()
                endWith()
                indexOf()
                repeat()
                replace()
                slice() --> cut the sentence
                split() --> sentence will be spliting
                substr()
                toLowerCase()
                toUpperCase()
                trim() --> White space trim
                trimStart()
                trimEnd() 

            
        Date Object:

            Methods

                - Date()
                - Date.now()
                - Date.getFullYear()
                - Date.setFullYear()

JavaScript Template Literals:

    Escape Notation:

        \n - new Line
        '"\"' - bypassing double quotes

    Object Literals - {}
    Boolean Literals - true, false
    String Literals - '', ""
    Template Literals - ``


    Template Literals:

        - Introduce to ES6.
        - Using ``(backtick)
        - Format is easy use

JavaScript Arrays:

    - Adding/Pushing element to Array
    - Finding/Filtering an element in an Array
    - Removing an element in an Array
    - Splitting the arrays
    - Combining the arrays

    Adding Elements to an JS Array

        Dynamically adding element in arrays:

            push
                Add the element at last position in the array
            unshift
                Add the element at very first position in the array
            splice
                Add the element at any position in the array

                    arrayName.splice(indexno, deleteindexno, value)

                eg:

                    foodItems.splice(3, 0, "Mutton Gravy")

    Finding element in an JS Array:

        Some Inbuilt Method:

            PRIMITIVE TYPE:
                indexOf()

                    - Array not present the value in default value is -1.

                includes() 

                    - Find the element arrays.

            REFERENCE TYPE:
                find()

                    - find the objects elements in given array 
                
                findIndex()

                    - Find the position or index of element in given array

            
    -------- Arrow Function ----------- (IMPORTANT)

    Normal Function                                 Arrow function

        function(params){                               (params) => {
            // your logic                                   // your logic
        }                                                }


        Ex of Arrow Function:(Modern JS)

            () => {
                // your logic
            }

            (param1, param2) => {
                // your logic
            }

    Removing elements in the array:

        Adding           Removing

        push (End)          pop
        unshift (Start)     shift
        splice (Middle)     splice


        splice(startIndex, deleteCount)

    Emptying an JS Array:

        Many Ways:

            1. Based on dependable variable (RECOMMENDED)
            2. Based on assign length = 0 (RECOMMENDED)
            3. Using Splice Method (SLIGHTLY RECOMMENDED)
            4. Using Pop Method (NOT RECOMMENDED)

                -Performance Issuse
                -Over RAM Usage



        


REFERENCE LINKS:

DEVELOPER MOZILLA FOUNDATION : https://developer.mozilla.org/en-US/docs/Web/JavaScript

ECMA SCRIPT : https://www.ecma-international.org/publications-and-standards/standards/ecma-262/

BINARY CALCULATOR : https://www.rapidtables.com/convert/number/decimal-to-binary.html?x=2

JS OPERATOR PRECEDENCE TABLE: https://www.dummies.com/article/technology/programming-web-design/general-programming-web-design/javascript-operator-precedence-254119/

Inbuilt Objects : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects