🤟🏽 Javascript

Why?

• Javascript has an extremely rich open source library and package manager that allows you to build apps quickly.
• Javascript is very high level, making it easy to write code.
• Javascript is very well supported in industry, and that support is increasing.
• Javascript is the foundational language for a large and increasing number of software engineering companies (largely due to the saturation of web-based products). Javascript is the langauge of the web.

🧑🏼‍🏫 Learning another language

In the case of learning another language like Javascript after doing COMP1511 with C, the main hurdles we have to overcome are:

• Javascript does not have programmer-defined types, unlike C
• Javascript has object-oriented components (which we can somewhat ignore), unlike C
• Javascript does not deal with pointers, unlike C (yay)
• Javascript is often written at a "higher level" (more abstract)
• Javascript does not have an intermediate compilation step, like C

🤺 Javascript VS C

Write a function that takes in two numbers, and returns the smaller number

#include <stdio.h>
 
int minimum(int a, int b) {
  if (a > b) {
  	return b;
  } else {
  	return a;
  }
}
 
int main(int argc, char* argv[]) {
  printf("%d\n", minimum(3, 5));
}

function minimum(a, b) {
  if (a > b) {
    return b;
  } else {
    return a;
  }
}
 
console.log(minimum(3, 5));

🤺 Javascript VS C

#include <stdio.h>
 
int minimum(int a, int b) {
  if (a > b) {
  	return b;
  } else {
  	return a;
  }
}
 
int main(int argc, char* argv[]) {
  printf("%d\n", minimum(3, 5));
}

function minimum(a, b) {
  if (a > b) {
    return b;
  } else {
    return a;
  }
}
 
console.log(minimum(3, 5));

gcc -Wall -Werror -O -o 1.4_compare_2.c -o runnable
./runnable

node 1.4_compare_2.js

🥳 NodeJS

NodeJS is what's known as an interpreted language instead of a compiled language. This means that the program is compiled and run as part of the same step.

This has two implication:

• A little slower to run, because it has to compile to runnable code every time.
• A little more convenient, as changes to code don't require an extra compilation step.

🤺 Performance V Convenience

🔢 Sequential collections

In sequential collections values are referenced by their integer index (key) that represents their location in an order.

In Javascript sequential collections are represented by an array. In Javascript, arrays are used for both C-style arrays and C-style linked lists.

🗺 Associative Collections

In associative collections values are referenced by their string key that maps to a value. They often do not have an inherent sense of order.

They're kind of like C structs, except the structure does not have to be defined at compile time.

• name → "sally"
• age → 18
• height → "187cm"

Unpause, back to code!

🍋 Arrays

We can use arrays with loops, too.

const items = ['a', 'b', 'c', 'd', 'e'];
 
let i = 0;
while (i < 5) {
  console.log(items[i]);
  i++;
}
 
for (let j = 0; j < 5; j++) {
  console.log(items[j]);
}
 
for (let k = 0; k < items.length; k++) {
  console.log(items[k]);
}

🍋 Arrays

We can use arrays with loops, too.

Run
function getEvens(nums) {
  const evens = [];
  for (let i = 0; i < nums.length; i++) {
    if (nums[i] % 2 === 0) { // Why is this not == ??
      evens.push(nums[i]);
    }
  }
  return evens;
}
 
const allNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(getEvens(allNumbers));

🍋 Arrays

Because Javascript is a higher level language, we have the ability to use a more concise and clear syntax when doing looping. You are not required to use this in the first few weeks of the course but we'd encourage all students to move toward this.

const items = ['a', 'b', 'c', 'd', 'e'];
 
// prints 0, 1, 2, 3, 4
for (const i in items) {
  console.log(items[i]);
}
 
// prints a, b, c, d, e
for (const item of items) {
  console.log(item);
}
 
console.log(items.includes('c'));

🍊 Objects

We can create and populate objects different ways.

const userData = {};
userData.name = 'Sally';
userData.age = 18;
userData.height = '187cm';
console.log(userData);

const userData = {
  name: 'Sally',
  age: 18,
  height: '187cm',
};
console.log(userData);

Both of these programs would print { name: 'Sally', age: 18, height: '187cm' }

🍊 Objects

We can mix the two methods, and also use alternative syntax with assigning.

userData.prop = 1;
userData['prop'] = 1;

Or in a more full example.

// You can assign more keys even
//  after creation
const userData = {
  name: 'Sally',
  age: 18,
};
userData.height = '187cm';
 
console.log(userData);

// You can reference keys with either
//  obj.key or obj['key']
const userData = {};
userData.name = 'Sally';
userData.age = 18;
userData.height = '187cm';
console.log(userData);

🍊 Objects

We can also get various properties of an object using the Object functions.

const userData = {
  name: 'Sally',
  age: 18,
  height: '187cm',
};
 
const keys = Object.keys(userData);
const entries = Object.entries(userData);
const values = Object.values(userData);
 
console.log(keys);
console.log(entries);
console.log(values);

[ 'name', 'age', 'height' ]
[ [ 'name', 'Sally' ], [ 'age', 18 ], [ 'height', '187cm' ] ]
[ 'Sally', 18, '187cm' ]

🍊 Objects

We can also loop through objects and check if certain keys are in them.

const userData = {
  name: 'Sally',
  age: 18,
  height: '187cm',
};
 
for (const key in userData) {
  console.log(key);
}
 
if ('name' in userData) {
  console.log('Has name key');
}

name
age
height
Has name key

🕛 Recap: Various types in C

int a;

struct point {
  int x;
  int y;
}

• Simple types in C were basic types that occupied limited memory.
• Structs were collections of primitive types wrapped into an "object".
• We would create instances of these "objects" and then access properties of them.
• We can expand this concept into Javascript.

🍅 Everything in Javascript is an object

const arr = [1,2,3];

• In Javascript, basically every data type acts like an "object"
• This array is an object.
• An "object" being a data type that:
  • Contains 0 or more properties (/attributes)
  • Contains 0 or more functions (/methods)

To oversimplify: It's structs with functions

🍅 Everything in Javascript is an object

Can I define my own objects?

• Yes! But we don't cover that in this course.

Does that make Javascript object-oriented?

• C is a purely procedural language
• Java is a purely object-oriented language
• Javascript is a procedural language with OO capabilities

👯‍♂️ Tying some things together

Let's try some lists of objects.

const userData = [
  {
    name: 'Sally',
    age: 18,
    height: '186cm',
  }, {
    name: 'Bob',
    age: 17,
    height: '188cm',
  },
];
 
for (let i = 0; i < userData.length; i++) {
  console.log(`${userData[i].name}'s properties are:`);
  console.log(`  name: ${userData[i].name}`);
  console.log(`  age: ${userData[i].age}`);
  console.log(`  height: ${userData[i].height}`);
}

👯‍♂️ Tying some things together

Let's try some lists of objects.

const userData = {
  Sally: {
    age: 18,
    height: '186cm',
  },
  Bob: {
    age: 17,
    height: '188cm',
  },
};
 
for (const key in userData) {
  console.log(`${key}'s properties are:`);
  for (const key2 in userData[key]) {
    console.log(`  ${key2}: ${userData[key][key2]}`);
  }
}

Sally's properties are:
age: 18
height: 186cm
Bob's properties are:
age: 17
height: 188cm

👯‍♂️ Tying some things together

Let's try more lists of objects.

const student1 = { name: 'Hayden', score: 50 };
const student2 = { name: 'Nick', score: 91 };
const student3 = { name: 'Emily', score: 99 };
const students = [student1, student2, student3];
 
console.log(students);
 
// Approach 1
const numStudents = students.length;
for (let i = 0; i < numStudents; i++) {
  const student = students[i];
  if (student.score >= 85) {
    console.log(`${student.name} got an HD`);
  }
}
 
// Approach 2
for (const student of students) {
  if (student.score >= 85) {
    console.log(`${student.name} got an HD`);
  }
}