Lecture 13

Recap everything

What we would cover?

• Git
• Variables
• Types
• Objects
• Arrays
• Loops
• Functions
• Scope

Git

Important things to remember

• git clone <repo name> - clone repository
• git branch -a - get list of all known branches in repository
• git checkout <branch name> - switch to a different branch
• git checkout -b <branch name> - create new branch

Git

• git status & git diff - check current status of your changes
• git add . - mark all your changes as ready for commit
• git commit -m "your meaningful comment about these changes" - commit all your changes
• git push origin <branch name> - push your branch so it would be available for review

Variables

Important things to remember

• Create variables with const or let
• You can store anything inside variables

Variables

Examples

// Strings and Numbers
const name = "Petja";
let age = 20;

// Boolean
let isOld = false;

// Arrays
const colors = ['red', 'green', 'blue'];

// Objects
const book = {
	name: 'The Silmarillion',
	author: 'J. R. R. Tolkien',
	pages: 365,
	year: 1977
};

// Function
const getCurrentDate = function() {
	return (new Date());
};
				

Types

We learned and used following types:

• String
• Number
• Boolean
• Array
• Object

Types

Useful methods to work with types

• typeof() - to get type of a variable
• parseInt() & parseFloat() - cast to a number
• toString() - cast to a string

Objects

Important things to remember

					
const book = {
	name: 'The Silmarillion',
	author: 'J. R. R. Tolkien',
	pages: 365,
	year: 1977,
	origin: {
		country: 'United Kingdom',
		language: 'English'
	}
};
					
				

Objects

• syntax
• book.name or book.origin.language - access properties
• book.price = 30; - create new properties or change existing values
• document.createElementById('div') - call methods available in some objects

Arrays

Important things to remember

					
const colors = ['red', 'green', 'blue'];
const houseNumbers = [12, 3, 94, 23, 51, 83];
					
				

Arrays

• syntax
• index starts from 0
• colors[1] - access element via index inside an array
• colors.length - get length of array
• colors.push('yellow') - add new element into array
• MDN is you best freand for further reading

Loops

Important things to remember

Loops

for loop

					
const houseNumbers = [12, 3, 94, 23, 51, 83];

for (let i = 0; i < houseNumbers.length; i++) {
	console.log(`House number is: ${houseNumbers[i]}`);
}
					
				

Loops

forEach

					
const houseNumbers = [12, 3, 94, 23, 51, 83];

houseNumbers.forEach(function(hn) {
	console.log(`House number is: ${hn}`);
});
					
				

					
const houseNumbers = [12, 3, 94, 23, 51, 83];

houseNumbers.forEach((hn) => console.log(`House number is: ${hn}`));
					
				

Loops

map

					
const someNumbers = [1, 4, 9, 16];

const doubledNumbers = someNumbers.map(function(n) {
	return (n * 2);
});
console.log(doubledNumbers);
					
				

					
const someNumbers = [1, 4, 9, 16];
console.log(someNumbers.map((n) => (n * 2)));
					
				

Functions

Important things to remember

• syntax
• parameters & arguments
• return statement
• callback function

Functions

					
// sum all numbers in array
function sum(numbers) {
	let result = 0;

	for (let i = 0; i < numbers.length; i++) {
		result += numbers[i];
	}

	return result;
}
console.log(sum([1, 4, 6, 10]));
					
				

Function

					
function sum(numbers) {
	let result = 0;

	numbers.forEach(function(n) {
		result += n;
	});

	return result;
}
console.log(sum([1, 4, 6, 10]));
					
				

Functions

					
console.log([1, 4, 6, 10].reduce((a, n) => (a += n), 0));
					
				

Functions

					
document.body.addEventListener('click', function() {
	console.log('Body clicked');
});
					
				

Scope

Important things to remember

• global scope
• function scope

Scope

Global scope

					
const name = 'Babu';
const age = 99;

function printAgeName() {
	alert(`${name} is ${age} years old!`);
}
printAgeName();
					
				

Scope

Function scope

					
const name = 'Babu';

function printAgeName() {
	const age = 99;
	alert(`${name} is ${age} years old!`);
}
printAgeName();

// let's try to console log age
console.log(`Console: ${name} is ${age} years old!`);
 					
				

Class work