JavaScript CheetSheet

gistfile1.txt

/* //////////////////////////////////////////////////////
//       STRINGS, NUMBERS, VARIABLES AND LOOPS        //
//////////////////////////////////////////////////////*/


// 1. Single-line comments start with two slashes.
/* Multiline comments start with slash-star,
   and end with star-slash */

// 2. JavaScript has a number type
this.say(3);
and a string type
this.say("Joshua"); 

// 3. Strings are created with ' or ".
'Kratt';
"Hello, enemy";

// 4. Strings are concatenated with +
"Attack" + "the" + "enemy!"; // = "Attacktheenemy!"
"Attack "+ "the "  + "enemy!"; // = "Attack the enemy!"

// 5. We can create variables and reuse them
var enemy = this.findNearestEnemy();
this.attack(enemy);
this.attack(enemy);

// 6. If the code repeats - we can use loops
// As does `while`.
while (true) {
    this.moveRight();
    this.moveUp();
    this.moveLeft();
}

// DEVELOPER TOOLS

// 1. As said before
JavaScript has a number type
this.say(3);
and a string type
this.say("Joshua"); 

// 2. Some basic arithmetic works as you'd expect with number type.
1 + 1; // = 2
0.1 + 0.3; // = 0.4
8 - 1; // = 7
10 * 2; // = 20
35 / 5; // = 7
(1 + 3) * 2; // = 8


// 3. There's also a boolean type.
true;
false;

// 4. Equality is ===
1 === 1; // = true
2 === 1; // = false

"Brak" === "Brak" // = true
var enemy = "Kratt"
enemy === "Kratt" // = true
enemy === "Brak" // = false

// More comparisons
1 < 10; // = true
1 > 10; // = false
2 <= 2; // = true
2 >= 2; // = true

// 5. As does `while`.
while (true){
    this.moveRight();
    this.moveUp();
    this.moveLeft();
}


var count = 0;
while(count < 10) {
  count = count + 1;
  // print count
  log.console(count);
}

//IF

/* //////////////////////////////////////////////////////

   if (true) {
      //computer does what we want
   } 
   
//////////////////////////////////////////////////////
  
   if (false) {
      //computer doesn't do what we want
   }
   
////////////////////////////////////////////////////// */

/* if 2 + 2 is 4   //true
  @say "Hey!" */

if (2+2 === 4) {
    console.log('Hey!');
}


/* if 3 + 3 is 6  
  @say "Come at me!" */

if (3+3 === 6) {
    console.log('Come at me!');
}


/* if 5 + 3 is not 9
  @say "Hasta la vista, baby!"  */

if (5 + 3 != 9) {
    console.log('Hasta la vista, baby!');
}

//ELSE

/* //////////////////////////////////////////////////////

   if (true) {
      //computer does what we want
   } 
   else {                                                // if (false)
      //computer does something else
   }
   
////////////////////////////////////////////////////// */

/* if 5 * 6 is not 31
      @say "Come at me!"
   else 
      @say "I'm waiting for you, baby!" */

      
if (5 * 6 != 31) {
  console.log("Come at me!");
}
else {
  console.log("I'm waiting for you, baby!");
}



//COMPARISSONS

===
>=
<=
!=

console.log(5 < 6);
console.log(5 === 2);
console.log(5 != 5);
console.log(5 > 5);
console.log(5 >= 5);

var x = 5;
console.log(x < 6);
console.log(x === 2);
console.log(x !== 5);
console.log(x > 5);
console.log(x >= 5);

/* //////////////////////////////////////////////////////
//                IF / ELSE / ELSE IF                 //
//////////////////////////////////////////////////////*/


You can make a block of code execute when a conditional expression is true using an if statement.

The conditional expression is the expression surrounded by parenethesis following the word IF.

// IF
var x = 11;
if (x < 10) {
    console.log("True");
}

/* You can put an else statement after an if statement to tell the computer what to do if the if conditional expression wasn't true. */

// ELSE
var x = 11;
if (x < 10) {
    console.log("True");
}
else {
    console.log("False");
}

Use else if to chain together fall-through cases - if first condition is not true, then check the new condition and execute first one that is true.

// ELSE IF
var x = 22;
if (x > 10) {
    console.log("x > 10");
}
else if (x === 22) {
    console.log("x === 22");
}
else {
    console.log("None of the above");
}

// NESTING CONDITIONALS
var flag = {color: "violet", position: {x: 30, y: 23 }};
var enemy = "Brak";
if (enemy) {
   console.log("There's the enemy.");
}
else {
    if (flag) {
        console.log("No enemy, just flag.");
    }
    else {
        console.log('No enemy, no flag.');
    }
}

/* //////////////////////////////////////////////////////
//                  INDENTATION                       //
//////////////////////////////////////////////////////*/


// 4 spaces
if (true) {
    if (true) {
        if (true) {
            // ...
        }
    }
}

// 2 spaces
if (true) {
  if (true) {
    if (true) {
      // ...
    }
  }
}

/* RULES OF INDENTATION
1. However you choose to indent, be consistent!
2. Your code will be much easier for others and yourself to read.
3. Remember to line up closing braces at the same level as opening statements! */


/* //////////////////////////////////////////////////////
//              RELATIONAL OPERATORS                  //
//////////////////////////////////////////////////////*/


&&  //and
||  //or 
!   //not

var x = 5;
var y = 10;

if (x < 10) {
    console.log("True")
}

if (x < 10 && y > 20 ) {
    console.log("True")
}

if (x < 10 || y < 20 ) {
    console.log("True")
}

if (y != 20 ) {
    console.log("True")
}

/* //////////////////////////////////////////////////////
//                       OBJECTS                      //
//////////////////////////////////////////////////////*/


// OBJECT FLAG

/* 
key                     value
----------------------|---------
color                 | green
pos                   | x:67, y:102
*/


// SAVING OBJECT INTO VARIABLE FLAG

var flag = {
    color: "green",
    pos  : {
        x: 67,
        y: 102
    }
}

var flag = { color: "green", pos: {x:67, y:102}}
console.log(flag)

// PICKING OUT A SINGE ATTRIBUTE (or A FIELD)

console.log(flag.color)
console.log(flag.pos)
console.log(flag.pos.x)
console.log(flag.pos.y)

// CREATING NEW ATTRIBUTES

flag.distance = 55
console.log(flag.distance)
console.log(flag)

// UPDATING ATTRIBUTES

flag.color = "violet"
console.log(flag.color)
console.log(flag)

// DELETING ATTRIBUTES

delete flag.distance;
console.log(flag.distance);
console.log(flag);



/* //////////////////////////////////////////////////////
//                 ARRAYS                             //
//////////////////////////////////////////////////////*/


// INDEXING

var enemies = [ "Erika", "Robin", "Lara", "Josh" ];
console.log(enemies[0]);
console.log('first:', enemies[0]);
console.log('second:', enemies[1]);
console.log('third:', enemies[2]);

// INDEXING WITH VARIABLES

var coins = [ "silver-coin", "golden-coin", "copper-coin" ];
for (var i = 0; i < coins.length; i++) {
    console.log(coins[i]);
}

// LENGTH

console.log(coins.length);

// PUSH - to add an item to the end of an array

console.log(coins);
coins.push("bronze-coin");
console.log(coins);

// POP - to remove an element from the end of an array 
console.log(coins);
coins.pop();
console.log(coins);

// UNSHIFT - to add new element to the beggining of an array

console.log(coins);
coins.unshift("bronze-coin");
console.log(coins);


// SLICE

console.log(coins.slice(2));

// SHIFT - to remove an element from the beggining of an array

console.log(coins);
coins.shift();
console.log(coins);

/* MORE - to see more, visit 
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype#Methods */


// LOOP OVER AN ARRAY


var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]

for (var i = 0; i < 4; i++) {
    console.log(numbers[i]);
}

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]
for (var i = 0; i < letters.length; i++) {
    console.log(letters[i]);
}

// BREAK

var x = 9;
while (true) {
    console.log("Number is: ", x);
    x --;
    if (x <= 3) break;
}


/* //////////////////////////////////////////////////////
//                 FUNCTIONS                          //
//////////////////////////////////////////////////////*/

// You can think of functions as little factories that take input as arguments and return output.

function add (x, y) {
    return x + y;
}
console.log(add(3, 4));

/* FUNCTION HOISTING 
You can define a function lower down in a file than where you use it too: */

console.log(multiply(3, 4));

function multiply (x, y) {
    return x * y;
}


/* FUNCTION SCOPE 
Any variables declared inside a function are only accessible inside of that function. */

function fff (a, b) {
    var c = 500;
    return a + b + c;
}

console.log(fff(3,4));
console.log(c); // will raise an error


/* FUNCTIONS AS VALUES - Functions can appear in any expression. You can assign them to variables (you don't need to give them a name) */

var add = function (a, b) {
    return a + b;
};
console.log(add(5, 2)); // 7


/* HIGHER-ORDER FUNCTIONS
Because functions are ordinary values that can appear in expressions, you can pass a function as an argument to another function. */

function calculate (a, b, operation) {
    return operation(a, b);
}
function add (a, b) {
    return a + b;
}
function multiply (a, b) {
    return a * b;
}
console.log(calculate(3, 4, multiply));


/* HIGHER-ORDER FUNCTIONS: EVERYTHING INLINE WHY NOT
We could even define the calculate function inline, although this is not very readable: */

console.log(
    function (a, b, operation) {
        return operation(a, b);
    }(3, 4, function (a, b) {
        return a + b;
    })
);


/* HIGHER-ORDER FUNCTIONS: Array.prototype.map
There are some built-in functions that accept functions as arguments. .map() takes a function that transforms the contents of an array, creating a new array: /*

var first = [ 3, 4, 5 ];
var second = first.map(plusFifty);
console.log(second);

function plusFifty (x) { return x + 50 }  

// prints [ 53, 54, 55 ]


/* HIGHER-ORDER FUNCTIONS: Array.prototype.forEach
You can also use forEach to loop over items in an array without having to whip up a for loop: /*

[ 7, 8, 9 ].forEach(function (x) {
    console.log(x);
});


/* RETURNING A FUNCTION
Functions can return any javascript value: numbers, strings, arrays, objects, even other functions! 
When you return a function from another function, the variables you declare persist in the inner function. */

function counter () {
    var times = 0;
    return function () {
        times ++;
        return times;
    };
}

var c = counter(); // c is a function
console.log(c()); // 1
console.log(c()); // 2
console.log(c()); // 3


/* RETURNING AN OBJECT WITH FUNCTIONS 
Another common pattern is to return an object with functions as values: */

function Num (value) {
    return {
        add: function (x) {
            value += x;
            return value;
        },
        multiply: function (x) {
            value *= x;
            return value;
        }
    };
}

var n = Num(100);
console.log(n.add(5)); // 105
console.log(n.multiply(3)); // 315

/* REMAINDER or MODULO (%) - The remainder operator returns the remainder left over when one operand is divided by a second operand. */

12 % 5 // 2
-1 % 2 // -1
NaN % 2 // NaN
1 % 2 // 1
2 % 3 // 2
-4 % 2 // -0
5.5 % 2 // 1.5


var friends = ["soldier", "archer", "peasant"]
var i = 0;
function findFriend () {
  var friend = friends[i%friends.length];
  i++;
  return friend;
}

console.log(findFriend());