Variables

  • let name; // undefined
  • let name = ‘Jamie’;
  • 盡量一行一個變數宣告，這是 best practice

Constant

  • const interestRate = 0.2;
  • 如果不會改變，盡量用 const 而不是 let

Primitives/Value types

  • number
  • string
  • boolean
  • symbol
  • undefined
  • null
let name = "jamie"; // string
let age = 30; // number
let isApproved = false; // boolean
let firstName = undefined; // undefined
let lastName = null; // clear a variable

typeof age; // "number"
typeof firstName; // "undefined". undefined 既是 type 也是 value
typeof lastName; // "object"

Reference types

  • object
  • array
  • function
// --- object
let person = {
  // object
  name: "jamei", // property
  age: 30,
};

person.name = "john"; // dot notation
person["age"] = 20; // bracket notation

let selection = "name";
person[selection] = "Jenny";

//--- array is also a 'object' type 💡
let selectedColors = ["red", "blue"]; // array
selectedColors[2] = "green"; // length is dynamic
console.log(selectedColors[0]);
console.log(selectedColors.length);

Functions

// 1. performing a task
function greet(name, lastName) {
  // name is the parameter
  console.log("hello world " + name + " " + lastName);
}

greet("jamie"); // jamie is the argument, actual value is applied

// 2. calculating a value
function square(number) {
  return number * number;
}
let number = square(2);

Operators

  • arithmetic
  • assignment
  • comparison
  • equality (strict & lose equality)
  • ternary operator (? a : b)
  • logical operator (&&, ||, !)
    • 以下在 logical operator，會自動轉為 Falsy (false)
      • undefined
      • null
      • 0
      • false
      • ''
      • NaN
  • bit operator(|, &)
// arithmetic operator
console.log(x % 2); // remainder
console.log(x ** y); // exp
console.log(++x); // increment (++)
console.log(y--); // decrement (--)

// assignment operator
let x = 10;
x++; // x = x + 1
x += 5; // x = x + 5
x *= 3; // x = x * 3

// comparison operator
let x = 1;
console.log(x > 0); // true

// equality
console.log(x === 1);
console.log(x !== 1);

// strict equality (same type + value)
console.log(1 === 1); // true
console.log("1" === 1); // false
// lose equality (don't care type, automatically convert type)
console.log(1 == "1"); // true
console.log(true == 1); // true

// ternary operator
let poins = 110;
let type = points > 100 ? "gold" : "silver";

// logical
console.log(true && true); // logical AND (&&)
let highIncome = true;
let goodCreditScore = true;
let eligibleForLoan = highIncome && goodCreditScore; // true
let eligibleForLoan = highIncome || goodCreditScore; // logical OR (||)
let applicationRefused = !eligibleForLoan; // Not (!)

// automatically convert operand ->
false || "jamie"; // 'jamie'
false || 1; // 1

// 以下在 logical operator，會自動轉為 Falsy (false)
// undefined
// null
// 0
// false
// ''
// NaN

// short-circult
let userColor = "red";
let defaultColor = "blue";
let currentColor = userColor || defaultColor; // can provide default value if user not select

// bit operator application
// Read, Write, Execute
// 00000100
// 00000010
// 00000001
const readPermission = 4;
const writePermission = 2;
const executePremission = 1;

let myPermission = 0;
myPermission =
  myPermission | readPermission | writePermission | executePermission;
let message = myPermission & readPermission ? "yes" : "no"; // 可以用來判斷有無權限

Conditional statements

  • if else
if (condition) {
  // statement
} else if (anotherCondition) {
  // statement
} else {
  // statement
}
  • switch case
// switch case (can be string, number or boolean)
let role;
switch (role) {
  case "guest":
    console.log("Guest User");
    break; // need
  case "moderator":
    console.log("Moderator User");
    break;
  default:
    console.log("Unknow Role");
}

Flow control

  • For loop

    for (let i = 0; i < 5; i++) {
  console.log("hello world");
}

  • While Loop

    let i = 0;
while (i < 5) {
  if (i % 2 !== 0) console.log(i);
  i++;
}

  • Do-while Loop: execute at least once

    let i = 0;
do {
  if (i % 2 !== 0) console.log(i);
  i++;
} while (i <= 5);

  • For-in Loop: 用在 property

     const person = {
   name = 'jamie',
   age: 30
 };

for (let key in person) {
  console.log(key, person[key]);
}

const colors = ['red', 'blue', 'green'];
for (let inex in colors)
  console.log(index, colors[index]);

  • For-of Loop: 用在 array

    const colors = ["red", "blue", "green"];
for (let color of colors) console.log(color);

  • break and continue

    let i = 0;
while (i <= 10) {
  if (i == 5) break;

  if (i % 2 === 0) {
    i++;
    continue; // 盡量不要用
  }

  conosle.log(i);
  i++;
}

  • exercise

    function max(a, b)
  return (a > b) ? a : b;

function isLandscape(width, height) {
  return (width > height);
}

// Math.floor(1.3)
// 12 points suspend
function checkSpeed(speed) {
  const speedLimit = 70;
  const kmPerPoint = 5;
  if (speed < speedLimit + kmPerPoint) {
    console.log("ok");
  } else {
  	const points = Math.floor((speed - speedLimit) / knPerPoint);
  	if (points >= 12 )
      console.log("suspend");
  	else
    	console.log('points: ', points);
  }
}

const array = [0, null, undefined, '', 2, 3];
function countTruthy(array) {
  let count = 0;
  for (let element of array) {
    if (element)
      count++;
  }
  return count;
}

const movie = {
  title: 'a',
  release: 2018,
  director: 'b'
};
function showProperties(obj) {
  for (let attr in obj)
    if (Typeof obj[attr] === 'string')
    console.log(attr, obj[attr]);
}
showProperties(movie);

function showStars(row) {
  for (let i = 1; i <= row; i++) {
    let output = '';
    for (let j = 0; j < i; j++)
      output += '*';
    console.log(output);
  }
}

showStars(5);


function showPrimes(limit) {
  for (let i = 2; i <= limit; i++) {
    let isPrime = true;
		for (let f = 2; f < limit; f++) {
      if ((i % f) === 0) {
        isPrime = false;
        break;
      }
    }
    if (isPrime) console.log(i);
  }
}

showPrimes(20);

Object

  • object literal
// object literal
const circle = {
  radius: 1,
  location: {
    x: 1,
    y: 1,
  },
  isVisible: true,
  draw: function () {
    console.log("draw");
  },
};

circle.draw();
  • factory function
function createCircle(radius) {
  return {
    radius: radius,
    draw: function () {
      console.log("draw");
    },
  };
}

// modern
function createCircle(radius) {
  return {
    radius,
    draw() {
      console.log("draw");
    },
  };
}

const circle1 = createCircle(1);
console.log(circle1);
  • constructor function
// PASCAL notion
function Circle(radius) {
  this.radius = radius;
  this.draw = function () {
    console.log("draw");
  };
}

const circle = new Circle(1);

delete circle.color;
delete circle.draw;

primitives are copied by their value, objects are copied by their reference.

  • enumerate properties
const circle = {
  radius: 1,
  draw() {
    console.log("draw");
  },
};

for (let key in circle) {
  console.log(key);
}

// 🔥 circle is not iterable!!! ERROR
for (let prop of circle) {
  // WRONG!!
  console.log(prop);
}

for (let key of Object.keys(circle)) console.log(key);

for (let entry of Object.entries(circle)) console.log(entry);

if ("radius" in circle) console.log("yes");
  • Clone Object (Shallow Copy)
const circle = {
  radius: 1,
  draw() {
    console.log("draw");
  },
};

// old clone syntax
const another = {};
for (let key in circle) another[key] = circle[key];

// new clone syntax
const another = Object.assign({}, circle);

// spread operator to shallow copy 🔥
const another = { ...circle };
  • Math (MDN)
Math.random(); // 0~1
Math.round(1.9); // 2
Math.max(1, 2, 3, 4, 5); // 5
  • String object
// string primitive
const message = "this is my first string"; // typeof string
message.split(" ");

// string object
const another = new String("hi"); // typeof object
  • template literal
const another = `Hi ${name}, ${2 + 3},
Thank you`;
  • date
const now = new Date();
const date1 = new Date("May 11 2018 09:00");
now.toISOString();

Array

  • add element
const numbers = [3, 4];
// End
numbers.push(5, 6);
console.log(numbers); // 3,4,5,6
// beginning
numbers.unshift(1, 2); // 1,2,3,4
// middle
numbers.splice(2, 0, "a", "b");
  • find element (primitive)
const numbers = [1, 2, 3, 1, 4];
numbers.indexOf("a"); // -1 not found!
numbers.indexOf(1); // 0
numbers.lastIndexOf(1); // 3

console.log(numbers.indexOf(1) !== -1);
console.log(numbers.includes(1)); // new syntax 🔥
  • find element (object)
const courses = [
  { id: 1, name: "a" },
  { id: 2, name: "b" },
];

const course = courses.find(function (course) {
  return course.name === "a"; // criteria
});

console.log(course);

const course2 = courses.findIndex(function (course) {
  return course.name === "a"; // 0
});

console.log(course2);
  • arrow function
    • 當你要傳一個 function 進去當作 callback 時
const courses = [
  { id: 1, name: "a" },
  { id: 2, name: "b" },
];

const course = courses.find(function (course) {
  return course.name === "a";
});

// 只有一行 return 時
const course2 = courses.find((course) => course.name == "a");
console.log(course2);
  • remove elements
const numbers = [1, 2, 3, 4];

// end
// numbers.push();
const last = numbers.pop();
console.log(last); // 4

// beginning
//numbers.unshift();
const first = numbers.shift();
console.log(first); // 1

// middle
numbers.splice(2, 1);
console.log(numbers); // 1, 2, 4
  • empty array
const numbers = [1, 2, 3, 4];
let another = numbers;

// solution 1 💡
numbers = [];
console.log(numbers);

// solution 2 💡
numbers.length = 0;

// solution 3
numbers.splice(0, numbers.length);

// solution 4
while (numbers.length > 0) numbers.pop();
  • combine & slice
const first = [1, 2, 3];
const second = [4, 5, 6];

const combined = first.concat(second); // [1,2,3,4,5,6]

const slice = combined.slice(2, 4); // [3,4]
const slice = combined.slice(2); // [3,4,5,6]
const slice = combined.slice(); // [1,2,3,4,5,6]
  • spread operator (ES6)🔥
const combined = [...first, ...second];
const combined = [...first, "a", ...second, "b"]; // [1,2,3,'a',4,5,6,'b']
const copy = [...combined]; // copy
  • iterate array
const numbers = [1, 2, 3];
for (let number of numbers) console.log(number);

numbers.forEach(function (number) {
  console.log(number);
});

numbers.forEach((number) => console.log(number)); // arrow version

numbers.forEach((number, index) => console.log(index, number)); // also index 🔥
  • join array, split string
const numbers = [1, 2, 3];
const joined = numbers.join(","); // '1,2,3'

const message = "This is my first message";
const parts = message.split(" "); // ['This', 'is', ..];
  • sort array
const numbers = [2, 3, 1];
numbers.sort(); // [1,2,3]
numbers.reverse(); // [3,2,1]

const Courses = [
  { id: 1, name: "Node.js" },
  { id: 2, name: "JavaScript" },
];

Courses.sort(function (a, b) {
  // a < b => -1
  // a > b => 1
  // a == b => 0
  const nameA = a.name.toUpperCase();
  const nameB = b.name.toUpperCase();

  if (nameA < nameB) return -1;
  if (nameA > nameB) return 1;
  return 0;
});
  • testing elements
    • every()
    • some()
const numbers = [1, 2, 3];

// 只要一個失敗，就回傳 false
const allPositive = numbers.every(function (value) {
  return value >= 0;
});

// 只要有一個成立就回傳 true
const atLeastOnePositive = number.some(function (value) {
  return value >= 0;
});
  • Filter array
const number = [1, -1, 2, 3];
const filtered = numbers.filter(function (value) {
  // [1,2,3]
  return value >= 0;
});
const filtered = numbers.filter((n) => n >= 0); // arrow
  • mappin array
    • map 跟 filter return array, 可以 chain
const number = [1, -1, 2, 3];
const filtered = numbers.filter((n) => n >= 0);
const items = filtered.map((n) => "<li>" + n + "</li>");
console.log(items);
const html = "<ul>" + items.join("") + "</ul>";

const items = filtered.map((n) => {
  const obj = { value: n };
  return obj;
});

const items = filtered.map((n) => ({ value: n })); // 這邊用 () 將 obj 包起來，不然會出錯
  • reduce array
const numbers = [1, -1, 2, 3];
let sum = 0;
for (let n of numbers) sum += n;
console.log(sum);

// alternative
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

// arrow
const sum = numbers.reduct(
  (accumulator, currentValue) => accumulator + currentValue
);