JAVASCRIPTTHE BASICS

Created by / Bruno Paulino @brunojppb

BASIC TYPESNumberStringBooleanObjectFunctionUndefined

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

OPERATIONSUnary

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

OPERATORSLogical

|| && == != === !===Arithmetic

* / - + %

"==" AND "===" ARE NOT THE SAMEif("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 valueto the type it wants, using a set of rules

that often aren’t what you want or expect.”

Eloquent Javasctipt

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

LOOPfor(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"

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

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

sayHello(); sayHiTo("Bruno");

OPTIONAL ARGUMENTSvar 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. Thefirst 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 aspace and a hashtag(#). The function should receive 2

arguments. The first one is the width, the second one is theheight of the grid. The output should look like this for a 8x4

chess grid:

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

Solution

THANK YOUREFERENCES:

Eloquent JavascriptProfessional Javascript for web developers