Skip to content

javascript.md

Latest commit

 

History

History
425 lines (315 loc) · 7.61 KB

javascript.md

File metadata and controls

425 lines (315 loc) · 7.61 KB

Javascript

console.log

console.log("Hello JavaScript!")

Linking a JS File

    <script>
        console.log("Hello JavaScript!")
    </script>

    <script src="test.js"></script>

Values and Variables

// Values
console.log("Test")
console.log(23);

// Variables
let firstName = "John";
console.log(firstName);

Primitive Types

// Number
let age = 23;

// String
let firstName = "John"

// Boolean
let isAdmin = true

// Undefined
let nothing;

// Null
let empty = null;

// Symbol
const sym = Symbol("test")

// BigInt
let hugeNum = BigInt(1234567890123456789012345678901234567890)

let, const, var

let a = 1;
a = 2;
console.log(a); // 2

const b = 1;
b = 2;
console.log(b); // TypeError: Attempted to assign to readonly property.

var c = 1;
c = 2;
console.log(c); // 2

let is block scoped, var is function scoped.

Basic Operators

Arithmetic

let a = 2;
let b = 3;
console.log(a, b); // 2 3

a+= 1;
b-= 1;
console.log(a, b); // 3 2

let sum = a + b;
console.log(sum);   // 5

let sub = a - b;
console.log(sub);   // 1

let mul = a * b;    
console.log(mul);   // 6

let div = a / b;
console.log(div);   // 1.5

let mod = a % b;
console.log(mod);   // 1

let pow = a ** b;
console.log(pow);   // 9

let inc = 3;
inc++;
console.log(inc);   // 4

let dec = 3;
dec--;
console.log(dec);   // 2

Comparison

console.log(a == b); // false
console.log(a != b); // true
console.log(a > b); // false
console.log(a >= b); // false
console.log(a < b); // true
console.log(a <= b); // true

Order of operation (PEMDAS)

Parenthesis, exponents, multiplication, division, addition, substraction

Strings and Template Literals

const firstName = "John";
const lastName = "Smith";
const birthYear = 1983;
const currentYear = 2025;

const str = "I am " + firstName + " " + lastName + ", a " + (currentYear - birthYear) + " years old.";
console.log(str);

const templateLiteral = `I am ${firstName} ${lastName}, a ${currentYear - birthYear} years old.`;
console.log(templateLiteral);

If/Else statements

const birthYear = 2020;
const currentYear = 2025;
const legalDrivingAge = 18;

const age = currentYear - birthYear;

if (age >= legalDrivingAge) {
  console.log('You are old enough to drive');
} else {
  console.log(`You have ${legalDrivingAge - age} years to wait until you can drive`);
}

Type Conversion and Coercion

// Type conversion
const inputYear = '1991';
console.log(inputYear + 18); // 199118
console.log(18 + inputYear); // 181991
console.log(Number(inputYear) + 18); // 2009
console.log(Number('John')); // NaN
console.log(String(23), 23); // 23 23

// Type coercion
console.log(`I am ${99} years old`) // I am 99 years old
console.log('23' - '10' - 3); // 10
console.log('23' + '10' + 3); // 23103

Truthy and Falsy Values

// Falsy values
 console.log(Boolean(0));
 console.log(Boolean(''));
 console.log(Boolean(undefined));
 console.log(Boolean(null));
 console.log(Boolean(NaN));

 // Truthy values
 console.log(Boolean(4));
 console.log(Boolean('hi'));
 console.log(Boolean([]));
 console.log(Boolean({}));
 console.log(Boolean(function(){}));

Equality Operators

== does type coercion, === does not.

const age = 18

console.log(age == 18); // true
console.log(age == '18'); // true

console.log(age === 18); // true
console.log(age === '18'); // false

console.log(age != 18); // false
console.log(age != '18'); // false

console.log(age !== 18); // false
console.log(age !== '18'); // true

Boolean Logic

const isLoggedIn = true;
const isAdmin = false

console.log(isLoggedIn && isAdmin); // false
console.log(isLoggedIn || isAdmin); // true
console.log(!isLoggedIn); // false
console.log(!isAdmin); // true
console.log(isLoggedIn && !isAdmin); // true
console.log(isLoggedIn || !isAdmin); // true

console.log(isLoggedIn && isAdmin && !isBanned); // false
console.log(isLoggedIn || isAdmin || !isBanned); // true

Switch

const day = 'Monday';

switch(day){
    case 'Monday':
        console.log('Plan for the week');
        break;
    case 'Tuesday':
        console.log('Meeting with the team');
        break;
    case 'Wednesday':
        console.log('Work on the project');
        break;
    case 'Thursday':
        console.log('Meeting with the client');
        break;
    case 'Friday':
        console.log('Prepare for the weekend');
        break;
    case 'Saturday':
    case 'Sunday':
        console.log('Enjoy the weekend');
        break;
    default:
        console.log('Invalid day'); 
}

Ternary Operator

console.log(a >= 18 ? console.log('wine') : console.log('water'));

Strict Mode

Strict mode forbids us to do certain things and creates visible errors in situations where JS would normally fail silently.

'use strict';

const isAdmin = true;
let isLoggedIn = false;
const password =  '123456';

if(password === '123456'){
    isLogIn = true;
    console.log('Welcome to the admin panel');
}

With strict mode there will be an error (Can't find variable: isLogIn). Without strict mode this will run and output the message.

Functions

function logger(message) {
    console.log(message)
}
logger('Test message');

function sum(a, b) {
    return a + b;
}
logger(sum(1, 2)); // 3

Declarations vs Expressions

// Declaration
function sum(a, b) {
    return a + b;
}
console.log(sum(1, 2)); // 3

// Expression
const sub = function (a, b) {
    return a - b;
};
console.log(sub(1, 2)); // -1

Arrow Functions

  • Arrow functions do not create their own this binding
const sum = (a, b) => a + b;
console.log(sum(1, 2)); // 3

const sub = (a, b) => {
    return a - b;
};
console.log(sub(1, 2)); // -1

Arrays

const users = ['John', 'Juan', 'João'];
console.log(users, users.length, users[0]);

users[2] = 'Silvia';
console.log(users, users.length, users[2]);

users.push('Pedro');
console.log(users, users.length);

users.push('Ana', 'Maria'); //Last
console.log(users, users.length);

users.unshift('Peter'); //First
console.log(users, users.length);

let popped = users.pop(); //Last
console.log(users, users.length, popped);

let shifted = users.shift(); //First
console.log(users, users.length, shifted);

console.log('Silvia', users.indexOf('Silvia')); // 2

console.log('Silvia', users.includes('Silvia')); // true

Objects

const user = {
    firstName: 'John',
    lastName: 'Smith',
    isTeacher: true,
    age: 25,
    students: ['Silvia', 'Juan', 'João'],
    address: {
        street: 'Main St',
        number: 100,
        city: 'New York'
    },
    greet: function() {
        console.log(`Hello, my name is ${this.firstName}`);
    }
}
console.log(user.firstName);

const nameKey = 'Name';
console.log(user['last' + nameKey]);

user.greet();

For Loop

const users = ['John', 'Juan', 'João'];

for (const user of users) {
  console.log(user);
}

for (const user of users) {
    if(user === 'Juan') break;
    console.log(user);
} // Breaks the whole loop

for (const user of users) {
    if(user === 'Juan') continue;
    console.log(user);
} // Skips the current iteration

While Loop

let dice = 0;

while (dice !== 6) {
    dice = Math.floor(Math.random() * 6) + 1;
    console.log(`You rolled a ${dice}`);
    if (dice === 6) console.log('You won!');
}

General Notes

  • Values have types, variables dont.
  • Only primitive values are immutable with const.
  • const arrays can be modified but not replaced.