Class example day-3

Module-1, Week-1, Day-3

M1W1D3

Find all of the class examples here:

Variables

/**
 * Welcome to JavaScript!
 */

/**
 * ? Primitive types:
 * numbers
 * string
 * boolean
 * null
 * undefined
 * out of the course :
 *  - BigInt
 *  - Symbol
 *
 * Non primitive type:
 * object
 * array
 * function
 *  */

// What is a variable

let myVariable;

// Assigning a value to a variable
myVariable = "Hello Squad!";

console.log(myVariable);

let myName = "Florian";

const aConstantVariable = "I can't be changed!";

// Reassigning a value

myVariable = "Sunshine!";
console.log(myVariable);
// This will throw me an Error (Read the errors, from the top)
// aConstantVariable = 5;

// Assigning an other type

myName = 7;
console.log(myName);

// Rules for naming variables

let aCorrectVariableName, name, Name;

// snake_case
let a_correct_variable_name_in_python;

// PascalCase
let AVariableNameInJava;

let na1me5;

let x = "Vishnu";

// JS file is read from top to bottom

console.log(x);

Numbers

/**
 * Let's talk about Math
 */

/**
 * Operators:
 * addition: +
 * substraction: -
 * multiply: *
 * division: /
 * powerof: **
 * modulo: %
 */

let classSize = 23

const increasedClassSize = classSize + 1
console.log('classSize:', classSize)
console.log('increasedClassSize', increasedClassSize)

/**
 * Those two ways of reassigning a variable are the same
 * The second one is just a shorthand notation
 */
classSize = classSize + 1

classSize += 1

// classSize -= 1;
// classSize /= 1;
// classSize *= 2;

console.log(10 - 5)

console.log(2 / 3)

console.log('modulo: ', 7 % 3)

console.log(125 % 60)
// Order of operations

console.log(2 + 3 * 5)
// 2 + 15
// 17

// Getting some random number

console.log('Math floor', Math.floor(1.7))
console.log('Math ceil', Math.ceil(1.7))
console.log('Math round', Math.round(1.7))

console.log(Math.random())

const myRandomNumber = Math.floor(Math.random() * 10)

const firstOperation = Math.random()
const secondOperation = firstOperation * 10
const thirdOperation = Math.floor(secondOperation)

/**
 * Math.floor(0.2546854 * 10)
 * Math.floor(2.546854)
 * 2
 */

console.log('Random integer in a range: ', myRandomNumber)

const five = 5

console.log(typeof NaN)
// NaN is actually a number

console.log(2 * 'Loop')
// This is not a valid operation and will result to NaN

console.log('1' + 5)
// "15"
console.log(+'1' + 5)
// 6
console.log(5 - '1')
// 4
console.log(3 * '5')
// 15

// Incrementing / Decrementing numbers

let myNumber = 0
// Post-incrementation, return the current value.
myNumber++

console.log('myNumber: ', myNumber)
// Since this is post-incrementation, we can't directly see the updated number.
console.log(myNumber++)

// Pre-incrementation will increment the number and return the updated value.
console.log(++myNumber)

Strings

/**
 * We want to be able to "write text"
 * (And a bit of coercion, casting/conversion, search)
 */

/**
 * single quotes: ''
 * double quotes: ""
 * backticks: ``
 */

const futureOperation = "I'll drink a coffee"

const hello = 'Hello'
;('prettier-ignore')
const squadNumber = 'Squad-161'
const teachingStaff = `Ines, Haroun, Florian`

//  Concatenation
console.log(hello + ' ' + squadNumber + ' ' + teachingStaff)

//  Template literal

const greetings = `${hello} ${squadNumber} ${teachingStaff}! We are a grand total of: ${
  23 + 3
}`

console.log(greetings.length)
console.log(greetings.toUpperCase())

console.log(greetings.toLowerCase().includes('florian'))

/**
 * Operations order:
 * -> toLowerCase get executed
 * "hello squad-161 ines, haroun, florian".includes("florian")
 * -> includes get executed
 * true
 */

console.log(futureOperation.replace('coffee', 'tea'))

console.log(hello[99])
console.log(hello[4].toUpperCase())
// console.log(hello[99].toUpperCase());
/**
 * undefined.toUpperCase()
 */

// EXTRA: out of a discussion during the break. This is not important to the course
// It's just fun little behaviour when you're more confortable with JS !

/**
 * Extra stuff discussed during the break
 * a String created with quotes will have a type of "string"
 * a string created with the *new String* constructor will have a type of "object"
 * you will never create a string with this "new String" 😊
 */

console.log(typeof 'aString')
console.log(typeof new String('hey'))

// Modifying the replace method in the String constructor 🤯

String.prototype.replace = () => 'hey'

console.log('string'.replace())

// Creating some documentation for a function

/**
 * This is a sum function
 * @return {Number} The sum of a + b
 * @param {Number} a
 * @param {Number} b
 */
function sum(a, b) {
  return a + b
}

Boolean

/**
 * They are just true or false statements
 */

// True false table:

/**
 * And: &&
 * Or: ||
 * Greater: >
 * Lesser: <
 * GreaterOrEqual: >=
 * LesserOrEqual: <=
 * Loose Equality: ==
 * Strict Equality: ===
 */

// console.log(true && true);
// => true
// console.log(true && false);
// => false
// console.log(false && false);
// => false
// console.log(true || false);
// => true
// console.log(false || false);
// => false

// Loose equality
console.log(5 == '5')
// This is true because the double equal does not compare the type.

// Strict equality
console.log(5 === '5')
// => false

// This is not a comparison
// console.log(5 = 5)

console.log(1 < 5)

// ASCII values of J and j
//           J: 74     j: 106
console.log('John' < 'joe')

// Truthyness

const hi = 'Hello there'
console.log('5 as a bool:', Boolean(5))
console.log("'a string' as a bool:", Boolean('a string'))
console.log('a variable with a string as a bool:', Boolean(hi))
console.log('an Object as a bool:', Boolean({}))
console.log('an Array as a bool:', Boolean([]))

// Falsiness

console.log('0 as a bool:', Boolean(0))
//  => 0 evaluate to false
console.log("'' as a bool:", Boolean(''))
// => an empty String evaluate to false!
console.log('undefined as a bool:', Boolean(undefined))
console.log('null as a bool:', Boolean(null))
console.log('false as a bool:', Boolean(false))

// Quirky quirky JS..
console.log(true + true + true)
// => 3 !

Conditions

const itIsWednesday = false

if (itIsWednesday) {
  console.log('Yes !')
} else {
  console.log('It is an other day')
}

// In a normal world -> false
const tenIsGreaterThanAHundred = 10 > 100

if (tenIsGreaterThanAHundred) {
  console.log("Math, is turning in it's grave")
} else {
  console.log('We live in a world were 10 is less than 100')
}

if ('hello'.length > 'abc'.length) {
  console.log('hello is longer than abc')
}

const itIsTuesday = false

if (itIsTuesday) {
  console.log('This is true')
} else if (itIsWednesday) {
  console.log("It's wednesday")
} else {
  console.log('an other day')
}

Loops

// The good old for-loop

// Anatomy of a for-loop
// for (variable initialisation; exit condition; incrementing i) {}

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

const myName = 'Florian'

for (let i = 0; i < myName.length; i++) {
  console.log(myName[i])
}
/**
 * F
 * l
 * o
 * r
 * i
 * a
 * n
 */

for (let i = myName.length - 1; i >= 0; i--) {
  console.log(myName[i])
}
/**
 * n
 * a
 * i
 * r
 * o
 * l
 * F
 */

for (let i = 0; i < myName.length; i++) {
  const currentLastIndex = myName.length - 1 - i
  console.log(myName[currentLastIndex])
}
/**
 * n
 * a
 * i
 * r
 * o
 * l
 * F
 */

console.log(myName.at(-2))
// In JS, we can't access negative indexes but the `.at()` method allow us to do so.

Odds Even exercise proposed solution

// Simple odd-even

// for (let i = 1; i <= 20; i++) {
//     if (i % 2 === 0) {
//         console.log(`${i} is even`);
//     } else {
//         console.log(`${i} is odd`);
//     }
//     // console.log(`${i} is ${i % 2 === 0 ? "even" : "odd"}`);
// }

// Fizzbuzz

for (let i = 1; i <= 20; i++) {
    let evenOrOdd;
    if (i % 2 === 0) {
        evenOrOdd = "even";
    } else {
        evenOrOdd = "odd";
    }

    if (i % 3 === 0 && i % 5 === 0) {
        console.log(`fizzbuzz is ${evenOrOdd}`);
    } else if (i % 5 === 0) {
        console.log(`buzz is ${evenOrOdd}`);
    } else if (i % 3 === 0) {
        console.log(`fizz is ${evenOrOdd}`);
    } else {
        console.log(`${i} is ${evenOrOdd}`);
    }
}

Transform my Name example solution

/**
 * Florian => LRA
 */

const myName = "Florian";
let newName = "";

for (let i = 0; i < myName.length; i++) {
    if (i % 2 === 1) {
        newName += myName[i].toUpperCase();
    }
    console.log(myName[i], newName);
}

console.log(newName);