JavaScript Fundamentals


Data Types

Reserved Keywords

Should Avoid Keywords

Falsy Value - 5*

 0, '', undefined, null, NaN(Not a Number)

Equality Operators

    === Strict(Check both Value and Type) ***USE Only for single Input/Output NOT for multiple output.
== Loose Equality(Check just Value) = Assignment Operator

Boolean Logic

    && (and) /Strict/ true + false = false
    ||  (or) /Loose/ true + false = true
    !!  (not) /not/ !true = false
***Truthy/Falsy value != True/False Conditional Operator

Switch Statement

    /Design for Equality not for Comparision/

    const day = prompt("Enter Your Day")
    switch (day) {
        case 'mon': // day === 'monday' [true]
            alert('Plan course structure');
            alert('Go to coding meetup');
            break;
        case 'tue':
            alert('Prepare theory videos');
            break;
        case 'wed':
        case 'thu':
            alert('Write code examples');
            break;
        case 'fri':
            alert('Record videos');
            break;
        case 'sat':
        case 'sun':
            alert('Enjoy the weekend :D');
            break;
        default:
            alert('Not a valid day!');
    }

Expression and Statement

Expression is a piece of code that produces value.

//Example//

    2 + 2
    3 * 7
    1 + 2 + 3 * (8 ** 9) - Math.sqrt(4.0)
    min(2, 22)
    max(3, 94)
    round(81.5)
    'Zonayed'
    'Ahmed'
    'Zonayed' + 'Ahmed'
    null
    true
    talse
    2
    3
    4.0

Statement  is a bigger piece of code that executed and does not produce a value.

1. Loop

2. Condition

3. Function

'use strict'; // Strict

The default mode is Sloppy Mode.

1. Find out Unspecified Error

2. Suggest code optimization 

3. Avoid future syntax 

4. We can access inside of {} or Block scope from outside if strict mode is disabled


    if (birthyear >= 1981 && birthyear <= 1996) { 
        var millenial = true;
        const str = `Oh, and youre a millenial ${firstName}`;
        console.log(str);

        function add(a, b) {
            return a + b;
        }
    }
    add(2, 3); // <== calling a function outside of function because 'strict' mode is disabled
    console.log(add(2, 3));

JavaScript Brackets

1. Parentheses()

2. Square Bracket [] 

3. Curly Bracket, Squirrely Bracket or Braces{} 

4. Angle Bracket or Chevron <>

Conditional (Ternary) Operator

    const age = 20;
    // age >= 18 ? console.log('I like to drink wine 😎') :
    // console.log('I like to drink water 😎');

    const drink = age >= 18 ? 'wine' : 'water';
    console.log(drink)
    console.log(`I like to drink ${age >= 18 ? 'wine' : 'water'}`)
    console.log(`I like to drink ${drink}`)
    
    // syntax:
	// <expression> ? <value-if-true> : <value-if-false>

Function

Function Declaration

    function calcAge(birthYear){
        return 2021 - birthYear
    }

Function Expression

    const calcAge = function(birthYear){
        return 2021 - birthYear
    }

Array Function

    const calcAge = birthYear => 2021 - birthYear;
// No function(), No {}, No return

Emmidiatly function || Anonymous function

    (function(name){
        console.log(name);
    })("Rafe");

Function calling inside a function || callback function

    const calcAge = function(birthYear){
    return 2021 - birthYear;
    }
    // Main function
    function yearsUnitRetirement(birthYear){
       const age = calcAge(birthYear);
       return 65 - age;

    }
    const retirement = yearsUnitRetirement(1994)
    console.log(retirement)

Callback Function

A callback function is a function passed into another function as an argument, which is taken invoked the other function to complete some kind of action.

Basic Array Operations (Method)

    const friends = ['Nur', 'Mohamod', 'Rafe'];

    console.log(friends[0]); // first value;
    console.log(friends[1]); // second value;
    console.log(friends.length); // total value count;
    console.log(friends.length - 1); // total value count - 1;
    console.log(friends[friends.length - 1]); // last value name;
    console.log(friends.indexof('name')) // if not match than output (-1)
    console.log(friends.includes('name')) // true or false

    variable.push('') // Adds new item(s) to the end of array
    variable.pop() // Removes the last item from array
    variable.unshift('') // Adds item(s) to the beginning of array
    variable.shift() // Removes the first item from array

Object

    const jonas = {
        firstName: 'jonas',
        lastName: 'Schmedtmann',
        age: 2037 - 1991,
        occupation: 'teacher',
        friends: ['Michael', 'Peter', 'Steven']
    }

    jonas.firstName = 'Rafe'; //Dot *Notation
    jonas['firstName'] = 'Rafe' ; //Bracet *Notation /Must use ['']/ 
// For access property which is in the list but value created by user //
console.log(jonas[hobby]) / DO_NOT_USE [''], Otherwise it will not work/

// Function inside a Object

    const mark = {
        fullName: 'Mark Miller',
        mass: 78,
        height: 1.69,
        calcBMI: function () {
           return this.bmi = this.mass / this.height ** 2
        }
    }

// this keyword in Object

    const john = {
        fullName: 'John Smith',
        mass: 92,
        height: 1.95,
        calcBMI: function () {
            return this.bmi = this.mass / this.height ** 2;   
        }
    }


    if (mark.BMI > john.BMI) {
        console.log(`Mark's BMI (${mark.calcBMI()}) is higher than Mark's (${john.calcBMI()})!`);
    } else {
        console.log(`John's BMI (${john.calcBMI()}) is higher than Marks's (${mark.calcBMI()})!`);
    }

For The Loop

    for[Initialization];[Condition];[Final-Exression]{
    	//Statement
    }

    for(শুরু; কন্ডিশন; স্টেপ) {
       স্টেটমেন্ট;
    }

    for(let i = 0;i < 10; i++){
        console.log(any[i])	
    }

    /Or/

    for(let i = 0; i > 10; i--){
        console.log(any[i]) 
    }

    (i > বড় i--);
    (i < ছোট i++);

    for(let i = 0; i < jonas.length ; i++){
     console.log(jonas[i], typeof jonas[i]);
     }

// Continue

    console.log('--- ONLY STRINGS ---')
    for (let i = 0; i < jonas.length; i++) {
        if (typeof jonas[i] === 'number') continue; //{Continue without === value}
        console.log(jonas[i])
    }

// Break

    console.log('--- BREAK WHEN NUMBER COME ---')
    for (let i = 0; i < jonas.length; i++) {
        if (typeof jonas[i] === 'string') break;
        console.log(jonas[i])
    }

Backwards Loop

    const jonas = [
        'Jonas',
        'Schmedtmann',
        2037 - 1991,
        'teacher',
        ['Michael', 'Peter', 'Steven']
    ];
    for(let i = jonas.length - 1; i >= 0; i--){
        console.log(jonas[i])
    }

    // jonas.length - 1 = findout last value;
    // i-- = decrement;

Loop inside a Loop

    for (let exercise = 1; exercise <= 3; exercise++) {
        console.log(`--------- Starting Exercise ${exercise}`);
        for (let rep = 1; rep <= 5; rep++) {
            console.log(`Lifting weight repitition${rep}`)
        };
    }

    for (let rep = 1; rep <= 3; rep++) {
        console.log(`Lifting weight repitition${rep}`);
    }
    console.log({}, {})
    let rep = 1;
    while (rep <= 5) {
        console.log(`Lifting weight repetition${rep}`);
        rep++;
    }

//Example//

    --------- Starting Exercise 1
    Lifting weight repetition 1
    Lifting weight repetition 2
    Lifting weight repetition 3
    --------- Starting Exercise 2
    Lifting weight repetition 1
    Lifting weight repetition 2
    Lifting weight repetition 3
    --------- Starting Exercise 3
    Lifting weight repetition 1
    Lifting weight repetition 2
    Lifting weight repetition 3

forEach Loop

    const fruits = ['mango', 'papaya', 'pineapple', 'apple'];

    // Iterate over fruits below

    // Normal way
    fruits.forEach(function (fruit) {
        console.log('I want to eat a ' + fruit)
    });

    /*
    I want to eat a mango
    I want to eat a papaya
    I want to eat a pineapple
    I want to eat a apple
    */

    const paragraph = document.querySelectorAll('p')

    paragraph.forEach(p => {
        p.style.color = 'red';
    });

    console.log(p)

Post a Comment

0 Comments