CPIT-405 · Part 1

CPIT-405 · WEB APPLICATIONS

JS

JavaScript

Part 1: The Fundamentals

Running JSVariablesData typesEqualityArraysConditions & loopsFunctionsSpread & Rest

01 · INTRODUCTION

The programming language of the web

client-side

In the browser

Makes web pages interactive: buttons, forms, content that changes without reloading.

server-side · Node.js

Everywhere else

Servers (Node.js), mobile (React Native), desktop (Electron), machine learning (TensorFlow.js).

1995Brendan Eich at Netscape

1997ES1, first spec

2009ES5

2015ES6: let, const, arrow functions

2016+a new version every year

02 · GETTING STARTED

Three ways to run your code

1 · Console

F12 or Ctrl+Shift+I

> console.log("Hello")Hello

2 · Web page

Inline or an external file

3 · Terminal

After installing Node.js

$ node script.jshello JavaScript

03 · VARIABLES

var, let and const

var

Function scope

Visible in the whole function. Outside any function it is added to window.

let

Block scope

Visible only inside the { } block where it is declared.

const

Constant

Cannot be reassigned after it is declared.

const discount = 0.20;discount = 0.50;

Uncaught TypeError: Assignment to constant variable.

const course = {semester: "fall"}course.semester = "spring" ✓

{ semester: 'spring' }

04 · SCOPE

The block changes everything

var

var x = 10;if (x == 10) { var x = 20; console.log(x);}console.log(x);

x1020one variable

20 20

let

let x = 10;if (x == 10) { let x = 20; console.log(x);}console.log(x);

x 10outside the block

x 20inside the block

20 10

05 · DATA TYPES

Seven primitives + one object

37Number

"Ali"String

trueBoolean

let foo;Undefined

nullNull

9007199254740991nBigInt

Symbol("id")Symbol

let person = { firstName: "Ali", age: 21, greet: function() {…}};

typeof null

"object"

Historical bug!

06 · EQUALITY

== or === ?

5

==

"5"

String → Number

true

5Number

===

"5"String

types differ

false

07 · STRINGS & NUMBERS

let name = 'Khalid';console.log(`Hello, ${name}`);

Hello, Khalid

let name = "Sami";name[0] = "R";

Sami // unchanged

10 / 0 → Infinity

-3 / 0 → -Infinity

0 / 0 → NaN

Number("zero") → NaN

08 · ARRAYS

let fruits = ['Apple', 'Banana', 'Cherry'];

length: 343

Apple0

Banana1

Cherry2

Date3

fruits.push('Date')

fruits.pop() → 'Date'

let bigArr = [...smallArr, 4, 5, 6]

1

2

3

4

5

6

09 · CONDITIONS & LOOPS

let isMember = false;let fee = isMember ? '$2.00' : '$10.00';

$10.00

for (let i=0; i<array.length; i++) console.log(array[i]);

1i=0
2i=1
3i=2
4i=3
5i=4

1 2 3 4 5

forforEachwhiledo...whilefor...of → valuefor...in → index

10 · FUNCTIONS

3

2

→

add(x, y)

→

5

return x + y;

1Function Declaration

function getCourse() { }

2Function Expression

let getCourse = function() { };

3Named Expression

let getMyCourse = function getCourse() { };

4Arrow Function

let getCollege = () => "FCIT";

5IIFE

(function() { … })();

11 · SPREAD vs REST

Three dots ..., two jobs

Spread · unpack

let numbers = [2, 4, 6];add(...numbers);

[2, 4, 6]

→

2

4

6

12

Rest · pack

function sum(n, m, ...numbers)sum(1, 2, 3, 4);

n=1

m=2

numbers=[3,4]

10

Open the practice platform and start with the Part 1 tab

Predict the outputtypeof machineSpread or RestFunction formsCode challenges