Primitive Data Types

https://rgbk21.github.io/Code/JavaScript/JavaScript.html#Module8_Udemy

Pasted image 20231208180239.png

Easy way of writing strings:

Pasted image 20231208185746.png

Type Conversion and Coercion:

Type conversion:

const inputYear = `1991`;
console.log(inputYear + 18); // Output: 199118
console.log(Number(inputYear) + 18); // Output: 2009

console.log(Number('Jonas')); //Ouptut: NaN
console.log(String('23')); //Ouptut: 23 

Type Coercion:

console.log('23' + 10 + '2'); // Output: 23102
console.log('23' - 10 - '2'); // Output: 11
console.log(23 + 10 + '2'); // Output: 332

Truthy and Falsy Values "

Pasted image 20231208203733.png

  • these will be converted to false when we'll try to convert them to boolean type
  • everything else is truthy values
console.log(Boolean(0)); // false
console.log(Boolean(false)); // false
console.log(Boolean(true)); // true
console.log(Boolean('jonas')); //true
console.log(Boolean('')); // false
console.log(Boolean('undefined')); // true
console.log(Boolean(undefined));   // false
console.log(Boolean({}));   // false ({} reps an object)

Switch Case :

Pasted image 20231208211402.png

Conditional / Ternary Operator :

Pasted image 20231208211940.png
Pasted image 20231208212045.png
Pasted image 20231208212152.png

Strict Mode:

'use strict';
  • add this at the very top of the script.js. It helps us to write better code and creates visible error codes.

Functions :

'use strict';

/* ------------------------------------------------------ */

function logger() {
    console.log('Function Executed');
}

logger();

/* ------------------------------------------------------ */

function fruitProcessor(apples, oranges) {
    console.log(apples, oranges);
    const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
    return juice;
}

console.log(fruitProcessor(5, 2));
// or
const appleJuice = fruitProcessor(5, 2);
console.log(appleJuice);


/* ------------------------------------------------------ */
/* -------------- functions and expressions ------------- */

// function declaration
const calcAge1 = function (birthYear) {
    return 2037 - birthYear;
}

const age1 = calcAge1(1991);
console.log(age1);

// function expression : There is no function name here
const calcAge2 = function (birthYear) {
    return 2037 - birthYear;
}

const age2 = calcAge2(1991);

//printing
console.log(age1, age2);

// the difference b/w FD and FE is that we can call FD before they are defined


/* ------------------------------------------------------ */
/* ------------------- Arrow Function ------------------- */

const yearsUntilRetirement = (birthYear, firstName) => {
    const age = 2037 - birthYear;
    const retirement = 65 - age;
    return `${firstName} retires in ${retirement} years`;
}

console.log(yearsUntilRetirement(1991, 'Jonas'));
console.log(yearsUntilRetirement(1980, 'Bob'));


/* ------------------------------------------------------ */
/* ------------- Calling a fxn inside a fxn ------------- */

function cutFruitPieces(fruit) {
    return fruit * 4;
  }
  
  function fruitProcessor(apples, oranges) {
    const applePieces = cutFruitPieces(apples);
    const orangePieces = cutFruitPieces(oranges);
  
    const juice = `Juice with ${applePieces} piece of apple and ${orangePieces} pieces of orange.`;
    return juice;
  }
  console.log(fruitProcessor(2, 3));

/* ------------------------------------------------------ */

Arrays :

/* ------------------------ Array ----------------------- */
const friends = ['Michael', 'Steven', 'Peter'];
console.log(friends);
console.log(friends[0]);

const years = new Array(1991, 1984, 2008, 2020);
console.log(years);

/* ------------------- Array Functions ------------------ */

//1.Length
console.log(friends.length); // Output: 3
console.log(friends[0].length); // Output: 7

//2.Changing / Replacing Elements
friends[2] = 'jay';
console.log(friends);   // notice that even tho we used `const` we were still able to change the value in the array. i.e because only primitive values are immutable and array is not a primitive value. So we can mutate an array defined with const.

/* However we can't change the entire aray:
 friends = ['Bob', 'Alice'] : this is illegal
*/

//3. using variables and arrays inside an array
const firstName = 'Jonas';
const jonas = [firstName, 'Schmedtmann', 2037-1991, friends];
console.log(jonas); // Output: [ 'Jonas', 'Schmedtmann', 46, [ 'Michael', 'Steven', 'jay' ] ]
console.log(jonas.length); // Output: 4

//4. We can even put function calls inside an array to store items inside of an array.

//5. push : End me daal dega
const friends2 = ['Michael', 'Steven', 'Peter'];
friends2.push('Jay');

//6. unshift : Beginning me daalne ke liye
friends2.unshift('Jay');

//7. pop : Remove Element from the end
friends2.pop();
const popped = friends2.pop() // this doesn't return the array but instead returns the popped element

//8. shift : Remove Element from the beginning
friends2.shift();
const shifted = friends2.shift(); //returns the shifted element


//9. indexOf : returns the index where an element is located
console.log(friends2.indexOf('Steven')); // if the item isn't present in the array then it returns '-1'
// it test with strict equality i.e. number number and string string.

//10. includes : checks whether the array has something or not
console.log(friends2.includes('Steven')) //Output : true or false
//it also tests with strict equality

Object:

const jonas = {
    firstName: 'Jonas',
    lastName: 'Schmedtmann',
    // age: 2037 - 1991,
    birthYear: 1991,
    job: 'teacher',
    friends: ['Michael', 'Peter', 'Steven'],

    calcAge: function (birthYear) {
      return 2037 - birthYear;
    },
    
    calcAge2: function () {
      return 2037 - this.birthYear;
    },

    calcAge3: function() {
      // creating a new property named age (we've done it before too by using `jonas.location = ...` below)
      this.age = 2037 - this.birthYear;
      return this.age; //not necessary to return but it is a good practice to do so.
    }
    
  };
//   these are 'key: value' pairs, key is also called a property

/* ---------- To accesss these key value pairs ---------- */

//dot notation
console.log(jonas.firstName);
console.log(jonas.friends[1]);
//bracket notation
console.log(jonas['lastName']);

const nameKey = 'Name';
console.log(jonas['first' + nameKey]);
  //eg
    // const interestedIn = prompt('enter something');
    // alert(`hello: ${jonas[interestedIn]}`);
    //where as console.log(jonas.interestedIn) will output the value 'undefined'
/* ------------------------------------------------------ */


/* --------- TO add new properties to the object -------- */
jonas.location = 'Portugal';
jonas['twitter'] = '@jonas';
/* ------------------------------------------------------ */

/* --------- Calling functions inside an object --------- */
console.log(jonas.calcAge(1991)); // Output: 46
console.log(jonas['calcAge(1991)']); // Output: undefined
console.log(jonas['calcAge'](1991)); // Output: 46
/* ------------------------- +++ ------------------------ */
console.log(jonas.calcAge2()) // Output: 46
/* ------------------------- +++ ------------------------ */
console.log(jonas.age) // Output: undefined
console.log(`calcAge3: ${jonas.calcAge3()}`) // This function needs to be executed once to create the 'age' property so that we can access it later on.
console.log(jonas.age) // Output: 46
/* ------------------------------------------------------ */