Full Stack Learning Note——JS

Fundamental Syntax

To name a let variable only by number,$,letter,_,and can’t begin with number likelet 4myName = 'Jerry Yu'

Value is either an object or primitive value in JS:

//Objec
let me = {
    name: 'Jerry Yu',
    age: 30
};
//Primitive
let firstName= 'Jerry';
let age = 30;

7 primitive data types:

⚠️It’s the value that has a type,not the variable!!!

console.log(typeof null)会输出Object(本应为null)这是js的历史遗留问题，并且这个bug无法被修复，因为这涉及到需要修改底层的ASCⅡ字符编码。

template literal (strings):

//template strings:
const firstName = "Jerry";
const lastName = "Yu";
const fullName = `${firstName} ${lastName}`;
console.log(fullName);
//template strings for multiline:
console.log(`multiline
string
par excellence`);

type conversion(explicitly manually convert by programmer) and type coercion(implicitly automatically convert by JS)

type coercion:

console.log('23' + '1' - 1);
console.log('23' + 1 - 1);
console.log('23' - 1 + '1');

result:

230(number)
230(number)
221(string)

当JS做 type coercion时，string和number做减法时string被转成number参与运算，而string和number做加法时number被转成string参与运算。

不论什么情况有string参与/ *运算string都转成number参与运算。

empty object {} will be seen as FALSE when it is converted to Boolean type.

== (宽松相等 / Loose Equality)

• 特点： 比较时，如果两个值的类型不同，JavaScript 会尝试进行类型转换 (Type Coercion)，将它们转换成相同的类型，然后再进行值的比较。

console.log(1 == "1");      // true (字符串 "1" 被转换为数字 1)
console.log(0 == false);    // true (false 被转换为数字 0)
console.log(null == undefined); // true (特殊情况)
console.log([] == false);   // true (空数组转换为 ""，然后 "" 转换为 0，0 转换为 false)
console.log("" == 0);       // true (空字符串转换为 0)
console.log(" " == 0);      // true (带空格的字符串转换为 0)
console.log("true" == true);// false ("true" 转换为 NaN，true 转换为 1)

=== (严格相等 / Strict Equality)

• 特点： 比较时，不进行任何类型转换。只有当两个值的类型相同且值也相同时，才返回 true。

NaN === NaN 为 false (这是 JS 中 NaN 的特殊行为，NaN 不等于自身)。

console.log(1 === "1");      // false (类型不同，一个是 number，一个是 string)
console.log(0 === false);    // false (类型不同，一个是 number，一个是 boolean)
console.log(null === undefined); // false (类型不同)
console.log([] === false);   // false (类型不同)
console.log("" === 0);       // false (类型不同)
console.log(NaN === NaN);    // false (NaN 的特殊性质)
console.log(true === 1);     // false (类型不同)

const obj1 = { a: 1 };
const obj2 = { a: 1 };
console.log(obj1 === obj2);  // false (引用地址不同)

const arr1 = [1, 2];
const arr2 = [1, 2];
console.log(arr1 === arr2);  // false (引用地址不同)

const arr3 = arr1;
console.log(arr1 === arr3);  // true (引用地址相同)

statement and expression

expression: small pieces of code、be able to produce value.

statement: larger pieces of code、may contain several expression and a series of actions that we want the program to perform.

In the first line of .js file codes'use strict';will activate the strict mode to write more secure code.

Anonymous function:

'use strict';
// Function Declaration:
function calcAge1(birthYear) {
    return 2025 - birthYear;
}

const age1 = calcAge1(2004);
console.log(age1);

//Anonymous function / funtion expression:
const calcAge2 = function (birthYear) {
    return 2025 - birthYear;
}

const age2 = calcAge2(2004);
console.log(age2);

We can call Function Declaration before define it but can’t do the same to Function Expression because of a process called hoisting.

'use strict';

const age1 = calcAge1(2004);
console.log(age1);

// Function Declaration:
function calcAge1(birthYear) {
    return 2025 - birthYear;
}

//Anonymous function / funtion expression:
const calcAge2 = function (birthYear) {
    return 2025 - birthYear;
}

const age2 = calcAge2(2004);
console.log(age2);

// Arrow function:
const calcAge3 = birthYear => 2025 - birthYear;
const age3 = calcAge3(2004);
console.log(age3);

Note: Arrow function can’t use this keyword.

const yearsTillDie = (birthYear, myname) => {
    const age = 2025 - birthYear;
    const deadYear = 35 - age;
    return `${myname} will live for only ${deadYear} years from now.`;
}
const restOfTime = yearsTillDie(2004, "Jerry Yu");
console.log(restOfTime);

Array in JS can contain different type of values:

const friends = ['Daria', 'Todd'];
const favoriteFood = 'potato chip';
const jerryYu = [friends, favoriteFood, 2025 - 2004, 'students'];
console.log(jerryYu);
console.log(jerryYu.length);

Basic methods of array:

const friends = ['Daria', 'Todd'];
friends.push("김민희");
const newLength = friends.push("福柯");
console.log(newLength);

//add an element at the beginning of array
friends.unshift("金爱烂");

const popped = friends.pop();
console.log(popped);

//pop an element at the beginning of array
const beginningPopped = friends.shift();
console.log(beginningPopped);

console.log(friends.indexOf('Daria'));

console.log(friends.includes('Daria'));

Object:

const jerry = {
    firstName: 'Jerry',
    lastName: 'Yu',
    birthYear: '2002',
    mood: 'poise',
    friends: ['Daria', 'Todd'],
    isConfused: true,
    // clacAge: function () {
    //     console.log(this);
    //     return 2025 - this.birthYear;
    // }

    //Prevent multiple repeated computation when we have to multiply call the same funtion.
    clacAge: function () {
        this.age = 2025 - this.birthYear;
        console.log(this);
        return this.age;
    }
};
 
console.log(jerry.clacAge());
// console.log(jerry.clacAge());
// console.log(jerry.clacAge());
console.log(jerry.age);
console.log(jerry.age);

在vscode中windows ctrl+d 可以用multiple cursor一次操作多个相同值，非常方便。（前题是在vscode中设置了）

let dice = Math.trunc(Math.random() * 6) + 1;

while (dice !== 6) {
    console.log(`You rolled a ${dice}`);
    dice = Math.trunc(Math.random() * 6) + 1;
}

在vscode中control+b可以展开或关闭侧边栏。

DOM

const score0 = document.getElementById("score--0");
const score1 = document.getElementById("score--1");
//manipulate an id element by two different methods.
//getElementById() is a litte faster than querySelector().
const score0 = document.querySelector("#score--0");

Deeper understanding to JS

arrow function don’t own arguments object and this keyword in its execution context .But, they can use the arguments object and this key word from their closest regular function parent.

---

let,const and function are blocked scoped.var is function scoped.

---

---

---

用var创建的变量会成为global window Object的一部分:

var x = 1;
let y = 2;
const z = 3;
console.log(x===window.x);
console.log(y===window.y);
console.log(z===window.z);

output:
true
false
false

---

arrow function的thiskey word 是它的 parent function 的thiskey word.

---

定义object的{}并不创建scope：

const jerry = {
  firstName: "Jerry",
  age: 12,
  greet: function () {
    console.log(`Hello dear ${this.firstName}`);
  },

  howOld: () => console.log(`I am ${this.age}`),
};

jerry.howOld();

输出I am undefined这里this的parent scope是global scope。this在global中应该为window Object 而 window Object 无age属性。

---

Data Structures and Modern Operators

Iterables: arrays, strings, maps, sets. NOT objects.

//Functions
const add = function (...numbers) {
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) sum += numbers[i];
  console.log(sum);
};

add(2, 3);
add(5, 3, 7, 2);
add(8, 2, 5, 3, 2, 1, 4);

const x = [23, 5, 7];
add(...x);

//7. The team with the lower odd is more likely to win. Print to the console which team is more likely to win, WITHOUT using an if/else statement or the ternary operator.
team1 < team2 && console.log('Team 1 is more likely to win');
team1 > team2 && console.log('Team 2 is more likely to win');

/*
83. Print the 3 odds to the console, but in a nice formatted way, exaclty like this:
      Odd of victory Bayern Munich: 1.33
      Odd of draw: 3.25
      Odd of victory Borrussia Dortmund: 6.5
Get the team names directly from the game object, don't hardcode them (except for "draw"). HINT: Note how the odds and the game objects have the same property names 😉
*/
const game = {
  team1: 'Bayern Munich',
  team2: 'Borrussia Dortmund',
  players: [
    [
      'Neuer',
      'Pavard',
      'Martinez',
      'Alaba',
      'Davies',
      'Kimmich',
      'Goretzka',
      'Coman',
      'Muller',
      'Gnarby',
      'Lewandowski',
    ],
    [
      'Burki',
      'Schulz',
      'Hummels',
      'Akanji',
      'Hakimi',
      'Weigl',
      'Witsel',
      'Hazard',
      'Brandt',
      'Sancho',
      'Gotze',
    ],
  ],
  score: '4:0',
  scored: ['Lewandowski', 'Gnarby', 'Lewandowski', 'Hummels'],
  date: 'Nov 9th, 2037',
  odds: {
    team1: 1.33,
    x: 3.25,
    team2: 6.5,
  },
};

for (const [goal, playerName] of game.scored.entries()) {
  console.log(`Goal ${goal + 1}: ${playerName}`);
}

let ave = 0;
for (const odd of Object.values(game.odds)) {
  ave += odd;
}
console.log(ave);
/////////////////////////////////////////////////////////////////////////////////////////
for (const [team, odd] of Object.entries(game.odds)) {
  const teamStr = team === 'x' ? 'draw' : `victory ${game[team]}`;
  console.log(`Odd of ${teamStr} ${odd}`);
}
/////////////////////////////////////////////////////////////////////////////////////////
/*
BONUS: Create an object called 'scorers' which contains the names of the players who scored as properties, and the number of goals as the value. In this game, it will look like this:
      {
        Gnarby: 1,
        Hummels: 1,
        Lewandowski: 2
      }
*/
const scorers = {};
for (const player of game.scored) {
  scorers[player] ? scorers[player]++ : (scorers[player] = 1);
}
console.log(scorers);

VSCODE Short Cut Key

在vscode中control+b可以展开或关闭侧边栏。

alt+箭头 可以上下移动代码块。

在vscode中windows ctrl+d 可以用multiple cursor一次操作多个相同值，非常方便。（前题是在vscode中设置了）