The Javascript Language
This is lab explores even more crucial functionalities of javascript, some of which you won't see in any other language
Task 1
Click the following link to open in Repl, which is an online code editor.Then click fork to begin editing.
In modern javascript we declare variables in two ways.
- Const : used to define constants which must be assigned during declaration and can never be reassigned another value.
- Let: Used to declare any block scoped variable of any type, can be reassigned.
Comments in Javascript are written using \\ for single line and \* *\ for multiline. Mathematical operators such as =, +, -, *, /, % are supported.
Task 2
Edit index.js and create variables "radius" assign it the value 7 and a constant "pi" assigned the value 3.14 then calculate area and stored in a variable called "area".
index.js
let radius = 7;
const pi = 3.14;
let area = radius * radius * pi;
Javascript is a dynamically typed language, this means datatypes are not given in the declaration of a variable. Instead the compiler infers the variable's data type from its given value.
Primitive Data Types include
Numbers
let num1 = 0.1341 // float
let num2 = 2344 // integer
let num3 = 1.2e+3 // 12000 scientific notation
let num4 = Infinity // really large number
let num5 = 0b1000111 // binary number
let num6 = 0xFFF // hexadecimal number
let num7 = 9007199254740991n //BigIntegerStrings
Can be written in three ways.
let str1 ="Hello World";
let str2 = 'Hello World';
let str3 = `
hello
world
`;// template literal (backtick above tab key)
console.log(str1, str2, str3);
Single (') and double (") quotes more or less have the same effect. However template literals (`) (Backtick, the key under Esc) have two advantages:
- They can be multiline, i.e. the string can continue on a new line.
- String Interpolation
String interpolation is simply printing the values of variables or expressions within a string.
Task 3
Execute the following and observe the output.
let name = "bob";
let age = 24;
console.log(typeof(name))//string
console.log(typeof(age))//number
console.log(`Hello my name is ${name}, I'm ${age} years old`);
//Hello my name is bob, I'm 24 years old.
console.log(`I was born in ${2020 - age}`)
//I was born in 1966You would notice that the values of name and age are logged in the string. This can only be done with template literals (`).
Type Coercion
Due to javascript's dynamic typing it performs type coercion. This is where the language converts the data type of a variable to resolve an expression. This is best understood by seeing itfor yourself.
Task 4.1
Execute the following
console.log("1" == 1); //true
console.log(1 == true); //true
Task 4.2
Execute the following
console.log('1' === 1); //false
console.log(1 === true); //false
console.log("true" === true); //false
If Statements
If statements work just the same as in any other language.
Comparison operators include
===: equal to!==: not equal to>=: more than or equal to<=: less than or equal to
Logical operators include
&&: And||: Or!: not
let grade = 67;
if( grade < 50){
console.log('Failed');
}else{
console.log('Passed');
}
While and for
Same goes for while and for loops.
let num =0;
while(num < 10){
console.log(num);
num++;
}
for(let i=0; i <10; i ++){
console.log(i);
}Task 4.3
Write some code to print the numbers 1 - 50. However when a number divisible by 3 is reached ‘fizz' must be printed instead, when a number is divisible by 5 print ‘buzz'. If the number is divisible by 3 and 5 print ‘fizzbuzz' instead.
Answer
for(let i=0; i< 50; i++){
if(i %3 === 0 && i%5 === 0){ // is divisible by 3 and 5?
console.log('fizzbuzz');
}else if(i%3 === 0){ // ok it's not divisible by both how about just 3?
console.log('fizz');
}else if(i%5 === 0){ //no? what about just 5 then?
console.log('buzz');
}else{ //so its not divisible by 3 or 5 then
console.log(i);
}
}Date and Math are some built in javascript objects which are used for fundamental date and mathematical operations.
Unix Timestamp
The unix timestamp is simply a 10 digit number which counts the number of seconds since Jan 1st 1970. It is used to uniquely identify any second of any date. Eg 1581289838 translates to 02/09/2020 @ 11:10pm (UTC).
let nowTimestamp = Date.now();//store the current Date
console.log(nowTimestamp);//unix timestamp in milliseconds 1581291269848
let now = new Date(nowTimestamp);//today's Date object
//months go from 0 - 11
let date = new Date(2019, 11, 17, 3, 24, 0);//December 17, 2019 03:24:00
//printing the date
console.log(date.toLocaleDateString("en-US"));//12/17/2019
//1 is added to month because January is 0
console.log(` ${now.getDate()} - ${now.getMonth() + 1} - ${now.getFullYear()} `); // 9 - 2 - 2020
//Calculate difference between two dates in milliseconds
let difference = now - date;
//convert milliseconds to days
let daysBetween = difference * 1.15741e-8;
console.log(daysBetween);//54.6740790437368The following are some useful mathematical functions and properties which can be used instead of implementing your own version.
let root = Math.sqrt(9);// 3
let cubed = Math.pow(2, 3);// 8
let roundDown = Math.floor(12.3453);// 12
let roundUp = Math.ceil(12.3453);// 13
let absolute = Math.abs(-34);// 34
let randNum = Math.random();// random number between 0 and 1
let pi = Math.pi;// pi in radians * 180 to convert to degrees
//generate a random Integer between a supplied range
function randInt(min, max){
return Math.floor(Math.random() * (max - min + 1) + min);
}Functions are written as follows.
function hello() {
console.log("hello");
}
Notice that there is no return type for functions as javascript is dynamically typed.
Parameters and Returning a Value
Functions can take parameters and return values. However, if the expected parameters aren't passed to a function they will receive an undefined value.
function add(a, b){
return a + b;//undefined + undefined = NaN
}
let ans = add(5, 1);
console.log(ans); //6
let ans2 = add();
console.log(ans2); //NaNWhen a mathematical operation is performed on a non numerical value such as a string or undefined it will result in a NaN (Not a Number) value.
First Class functions
Javascript functions are called first class functions. This means that they are treated as any variable. Because of this we must be careful and avoid name clashes between variable names and function names as variables cannot be declared more than once.
let sum = 10
function sum(){ //duplicate declaration error
}As they are treated as variables this means that they can be passed to functions and can be returned by other functions.
Due to being dynamically typed js arrays can be heterogeneous, this means the elements of an array can be of different data types. Like in other languages array elements can be accessed via their indices which start at 0;
let arr = []//empty array
let arr2 = [1, 2, 3, 4, 5, 6, 7]//initialize with elements
let arr3 = [1, 12.9, "Hi", '🎈', ]// heterogeneous array
console.log(arr[0]);// 1
console.log(arr3[3]);//🎈Arrays can be iterated using its index or by using a For of loop. The useful property length exists on all arrays which can be used to get the size of an array.
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];// 10 elements
for(let i=0; i< arr.length; i++){
console.log(arr[i])
}
for (let item of arr){// for of loop
console.log(item);
}Array Methods
There are several methods on array which are available for your convenience. They help make writing complex behaviors easilier. Some popular array methods include.
Task 5
Run the following code and observe the console.
let arr = [ -5, 16, 33, 42, 103, 344];
console.log(arr.includes(-5));//true
arr.push(11);//adds item to the end
console.log(arr)//[ -5, 16, 33, 42, 103, 344, 11];
let lastItem == arr.pop();//removes last item
console.log(lastItem, arr);//11, [ -5, 16, 33, 42, 103, 344]
arr.unshift(22);//adds item to the front
console.log(arr);//[22, -5, 16, 33, 42, 103, 344]
let firstItem = arr.shift();//removes first item
console.log(firstItem, arr);//22, [-5, 16, 33, 42, 103, 344]
let reversed = arr.reverse();//creates a new array in reverse order
console.log(reversed);//[344, 103, 42, 33, 16, -5]
console.log(arr.join('-'));//"-5-103-16-33-344-42" joins array with provided separatorArrays are collections with integer indices but what if we wanted our indices to be more meaningful and descriptive? JS Object literals, (dictionaries or associative array as known in other languages) help us achieve just that.
We can also put objects in array and let our object contain array values. Objects are key value pairs which can be used to create a mapping from a set of keys to a set of values.
let person = {
// key : value
"name": "John",
"age": 12
};
//we can print the values of a key in two ways
console.log(person["age"]);//Using an index
console.log(person.name);//referencing the key as a property
person["weight"] = 70;
person.marks = [67, 34, 55, 89];
let firstMark = person.marks[0];
//mixing array and objects
let people = [
person,
{
name: "Jane",
age: 23,
marks: [51, 78, 99, 76]
}
];
let johnClone = {};//empty object
//copying objects
Object.assign(johnClone, person);
console.log(johnClone);
console.log(people[0].marks[0]);//what is printed?Task 6
Write some code to record the height, weight and name of a collection of people. Then create a function which receives this collection and calculates their average bmi.
Answer
//Create a constructor a functions which builds object for us
function createPerson(name, height, weight) {
return { name: name, height: height, weight: weight };
}
function calcBMI(weight, height) {
return weight / (height * height);
}
function avgBMI(people) {
let sum = 0;
for (let person of people) {
//sum the bmi of each person
sum += calcBMI(person.weight, person.height);
}
//calculate average
return sum / people.length;
}
//create a collection of people
let people = [
createPerson("Sally", 60, 2.5),
createPerson("Ben", 81, 3),
createPerson("Shelly", 50, 1.7)
];
console.log(avgBMI(people));Congratulations on making it to the end feel free to use labs 1-3 for javascript reference when building out your web applications.