JavaScript

The Basics

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

Unary


console.log(typeof 23.0);
// number

Binary


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

Ternary


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?

Data coercion

“Javascript will quietly convert that value to the type it wants, using a set of rules that often aren’t what you want or expect.”

Eloquent Javasctipt

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.

Solution

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:
/*
 # # # #
# # # #
 # # # #
# # # #
*/