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
alert("msg");
// prompt: get user input
var num = prompt("Enter a number");
// convert input to number
if (Number(num) === 4) {
alert("yes");
}
// 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:
- Use
[]if the field name start with number,obj["12a"] - Lookup using a variable with
[],var str = "name"; obj[str] - 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"
