2017-12-27

## Introduction

### Primitives

// Numbers
4
9.3
-10
10 % 3

// Strings
"Hello"
"hi " + "day"
"Sing \"hi\" "
"hello".length
"hello"[1] // get "e"

// Booleans
true
false

//null and undefined
null
undefined


### Variables

• Can change the value and type of a variable
• Name should be camel cased
• Variables that are declared but not initialized are undefined
• null is “explicitly nothing”
// pattern
var name =  "John";
var isTrue = true;

"hello " + name


### Built-in functions

// alert: get a pop-up

// prompt: get user input
var num = prompt("Enter a number");
// convert input to number
if (Number(num) === 4) {
}

// console.log: print something on the console
console.log("msg");

//clear() will clear the console


### Use js code in another file

Just include a script tag in the HTML code.

<script src="js_file_path"></script>


## Control flow

### Boolean logic

5 == "5" // equal to, perform type coercion
5 === 5
5 !== "5" // equal value and type

null == undefined
null !== undefined

true == "1"
false == "12" // true
0 == false

NaN == NaN  // false

// operators
&&
||
!

// falsy values, anything else will be truthy
null
""
0
NaN
false
undefined


### Conditionals

if (age < 18) {

} else if (age < 30) {

} else {

}


### Loops

// while
var i = 1;
while (i < 2) {
i++;
}

// for
for (var i = 0; i < 5; i++) {

}

// for in
var obj = {a: 1, b: 2, c: 3};

for (const prop in obj) {
console.log(obj.${prop} =${obj[prop]});
}


## Functions

function capitalize(x) {
return x.charAt(0).toUpperCase() + str.slice(1);
}


### Scope

When we define something outside a function, we still have the access to that variable and the value can be changed inside that function.

var y = 99;
function print() {
y = 100;    // no var declaration
console.log(y);
}
print();
// y will be 100


### Higher order functions

A function can take another function as input.

function hi() {
console.log("hi");
}
setInterval(hi, 1000); // call hi() every 1 second, it will return a number as an exit flag
clearInterval(exitFlag); // exit

// anonymous func
setInterval(function() {
console.log("hello");
}, 2000);


## Arrays

// initialize
var a1 = [];
var a2 = new Array();

// arrays can hold any type of data
var a3 = ["a", 49, true, null];
a3[4] = 1;  // size is dynamic
a3.length   // 5


### Array methods

MDN js Array reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

• push/pop
• push: add to the end of an array
• pop: remove the last item in an array
• shift/unshift
• unshift: add to the front of an array
• shift: remove the first item in an array
• indexOf: find the index of an item in an array; -1 if none
• slice: like substring()
var nums = [1, 2, 3];
nums.push(4);
var last = nums.pop();


### Array iterations

var nums = [1, 2, 3, 4];

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

// for each
nums.forEach(function(num) {
console.log(num);
});

function printNum(num) {
console.log(num);
}

nums.forEach(printNum); // don't put () in, because if we do, js will call the function immediately

// define myForEach
Array.prototype.myForEach = function(func) {
for (var i = 0; i < this.length; i++) {
func(this[i]);
}
}


## Objects

// define
var person = {
name: "Jack",
age: 32,
city: "LA"
};

// initialize
var person = {};
// or
var person = new Object();
person.name = "Jack";

// access
person["name"];
person.name;

// update
person.name = "Jay";

// functions
var person = {
name: "Jack",
age: 32,
city: "LA",
greet: function(name) {
return "Hi " + name + ", from " + this.name;    // this keyword
}
};

var dog = {};
dog.greet = function() { return "WHOOF"; }


For the two access methods, note:

1. Use [] if the field name start with number, obj["12a"]
2. Lookup using a variable with [], var str = "name"; obj[str]
3. Use [] with field name including spaces, obj["one color"]

## Misc

### Javascript console

In Chrome, Ctrl + Shift + J will open the Javascript console.

### Map

var myMap = new Map();

var keyString = 'a string',
keyObj = {},
keyFunc = function() {};

// setting the values
myMap.set(keyString, "value associated with 'a string'");
myMap.set(keyObj, 'value associated with keyObj');
myMap.set(keyFunc, 'value associated with keyFunc');

myMap.size; // 3

// getting the values
myMap.get(keyString);    // "value associated with 'a string'"
myMap.get(keyObj);       // "value associated with keyObj"
myMap.get(keyFunc);      // "value associated with keyFunc"