JavaScript fundamental notes 1

What is Javascript?

high level: no complications regarding memory management

object oriented: based on objects, storing most kinds of data

 multi-paradigm:  different styles of programming

programming language

 

Website consist of : HTML(content) , CSS (presentation) , JS (programming language: build web apps)

 

JS is important as they are used as a basis for many JS based frameworks such as Vue, React and Angular!

node.js paired with JS can be used for "back-end" programming

JS can also be created to create native desktop applications!! using Electron with JS

 

---

in JS every value is an object or a primitive value!

 

Primitive data types:

7 types

Number: floating point numbers, used for decimals and intergers 

let age = 23;

 

String: sequence of characters, used for text (always use '', so JS doesn't confuse them with variables)

let name = 'Julie';

 

Boolean: logical type (true, false), used for taking decisions

let fullAge = true;

 

Undefined: Value taken by varaible that is not yet defined, empty value

let children;

 

Null: also empty value

 

Symbol (ES2015): unique value that cannot be changed

 

BigInt(ES2020): larger intergers than number type can hold

 

JS has dynamic typing: no need to manually define data type of the value stored in variable: determined automatically!

 

---

Basic Operators: 

( +, - , *, =, typeof, +=, *=, ++, --)

 

Math operators:

* : 2 ** 3 (2 to the power of 3) = 2 * 2 * 2

 

assignment operators:

+=

x = 10 + 5

x+=10

x= 25

 

*=

x*=4

x= x*4=100

 

comparison operators:

( >, <, >=, <=)

 

---

Operator Precedence

the order of Javascript executing each operator

usually math operators are operated left to right

refer below for further info:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_precedence

Operator precedence - JavaScript | MDN

 

---

if / else statements

 

if the condition is true, the command in the if statement will be executed, if its false, the command in the else statement will be executed.

 

example 1 :

const age = 15;

const isOldEnough = age >= 18;

if (isOldEnough) {

  console.log("Sarah can start driving");

} else {

  const yearsLeft = 18 - age;

  console.log(`wait another ${yearsLeft} years`);

}

 

example 2:

let century;

const birthYear = 1999;

if (birthYear <= 2000) {

  century = 20;

} else {

  century = 21;

}

console.log(century);

 

---

Type Conversion and coercion

 

Type Conversion:

you can use either Number() or String() function to convert a number to a string or vice versa

NaN is also a number. 

so console.log(Number('Jonas')) = NaN

 

Type Coercion:

JS has automatic type coercion!

if you use a plus operator (+) a string to a number the end result would become string

if you use a minus, multiplier, divide operator (-, * ,/)  the end result would become number

---

Truthy and Falsy value

 

Falsy values: 0, ' ' , undefined, null and Nan

these values will all show up as false in boolean terms and JS automatically makes this conversions!

 

But how is this applied? 

an example in an if else statement:

const money = 0;

if (money) {

  console.log(`don't spend it all`);

} else {

  console.log(`get a job`);

}

 

since 0 is false, the console will print out 'get a job'. 

---

Equality operators

(==, ===, !=, !==)

tripe operators = strict operators

'18' === 18 false: as the type is different it doesn't matter if the value is the same

double operators = loose operators

'18' == 18 true: as long as value is same the type doesn't need defining

 

for clean code always use strict operators as loose operators can crete bugs that cannot be detected!

to change type always use type conversion!!

 

---

Boolean Logic

And, or, not operators

 

&&

And operator: true when all are true

 

||

Or operator: true when one is true

 

!

Not operator: inverts true/ false value (!)

 

---

Switch statement

alternative way to write an if/ else statement => slightly easier'

= siphen method

const day = `tuesday`;

switch (day) {

  case `monday`:

    console.log(`plan course structure`);

    console.log(`go to coding meet up`);

    break;

  case `tuesday`:

    console.log(`laundry`);

    break;

  case `wednesday`:

  case `thursday`:

    console.log(`write code examples`);

    break;

  case `friday`:

    console.log(`record video`);

    break;

  default:

    console.log(`not a valid day`);

}

 

without break the code will just continue to execute so its good to place a break where you want to stop

---

Conditional (ternary) operator 

? for true : for else

const age = 23;

age >= 18 ? console.log(`I like wine`) : console.log(`I like water`);

 

you can use conditionals in a template literal!

console.log(`I like to drink ${age >= 18 ? `wine 😍` : `water 😅`}`);