JavaScript

The Basics

Created by Bruno Paulino / @brunojppb

Basic Types

• Number
• String
• Boolean
• Object
• Function
• Undefined

Variable Declaration

var num = 10; //number
var str = "hello, there"; //string
var bool = true; //boolean
var foo = { //object
	name: 'Bar'
};
var bark = function() { //function
	console.log('Ruff!');
};
						

Operations

console.log(typeof 23.0);
// number
							

if(102 > 101) {
	console.log('greater than');
}
// greater than
							

var discount = 10 > 12 ? "10% OFF" : "20% OFF";
console.log("Code: " + discount);
// Code: 20% OFF
							

Operators

• Logical
  • || && == != === !===
• Arithmetic
  • * / - + %

"==" and "===" are not the same

if("5" == 5) {
	console.log("Same thing.");
}
// Same Thing.

if("5" === 5) {
	console.log("same thing.");
} else {
	console.log("Ops! This is not the same thing.");
}
// Ops! They are not the same thing.
					

Why?

Short-Circuiting

console.log(null || 'Foo');
// Foo
console.log('Foo' || 'Bar');
// Foo
console.log('Bruno' && 0);
// 0
console.log(false && 0);
// false
					

Loop

for(var i = 0; i < 5; i++) {
	console.log("i: " + i);
}
// 5 times: "i: n"

var counter = 0;
while(counter < 5) {
	console.log('counter: ' + counter);
	counter++;
}
// 5 times: "counter: n"
var newCounter = 0;
do {
	console.log('newCounter: ' + newCounter);
	newCounter++;
}while(newCounter < 5);
// 5 times: "counter: n"
					

Functions

function sayHello() {
	console.log('Hello!');
}

var sayHiTo = function(name) {
	console.log('Hi ' + name);
}

sayHello();
sayHiTo("Bruno");
					

Optional Arguments

var sayHello = function(name) {
	if (name == undefined)
		console.log('Hello! There!');
	else
		console.log('Hello! ' + name + "!");
}

sayHello();
// Hello! There!
sayHello("bruno");
// Hello! Bruno!
					

Challenge 1

Write a function that calculates the power of a number. The first argument is required(the base) and the second should be optional(the exponent), which is 2 by default.

Challenge 2

Write a function that creates a chess grid dinamically with a space and a hashtag(#). The function should receive 2 arguments. The first one is the width, the second one is the height of the grid. The output should look like this for a 8x4 chess grid:

// call function
createChess(8, 4);
//output:
/*
 # # # #
# # # #
 # # # #
# # # #
*/
						

Thank you

References:

• Eloquent Javascript
• Professional Javascript for web developers