Operatorのクリーンアップ

1) String concatenation

*DreamCodingの資料を以下に示します.

console.log("my" + " cat"); // my cat
console.log("1" + 2); // 12 (string)
console.log(`template literals: 1 + 2 = ${1 + 2}`);
// template literals: 1 + 2 = 3
// 공백이나 특수문자도 그대로 표시 가능
console.log("ellie's book");
// 특수기호는 앞에 backslash 사용

- template literals

複数行の文字列と文字補間機能を使用して、式をネストできる文字列テキスト.
例)

let a = 5;
let b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."

templateテキストを使用すると、構文糖を使用して読みやすくすることができます.

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

2) Numeric operators

console.log(1 + 1); // add 
console.log(1 - 1); // substract
console.log(1 / 1); // divide
console.log(1 * 1); // multiply
console.log(1 % 1); // remainder
console.log(1 ** 1); // exponentiation

3) Increment and Decrement operators

let counter = 2;
const preIncrement = ++counter;
// counter = counter + 1;
// preIncrement = counter;
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`);
// preIncrement: 3, counter: 3

const postIncrement = counter++;
// postIncrement = counter;
// counter = counter + 1;
console.log(`postIncrement: ${postIncrement}, counter: ${counter}`);
// postIncrement: 3, counter: 4

4) Assignment operators

let x = 3;
let y = 6;
x += y; // x=x+y; → x=3+6 → x=9
x -= y; // x=x-y;
x *= y; // x=x*y; 
x /= y; // x=x/y;

5) Comparison operators

console.log(10 < 6); // less than
console.log(10 <= 6); // less than or equal
console.log(10 > 6); // greater than
console.log(10 >= 6); // greater than or equal
// 결과는 boolean임 (t/f)

6) Logical operators

// 3가지: ||(or), && (and), !(not)
const value1 = true;
const value2 = 4 < 2;

//||(or), finds the first truthy value🌟
console.log(`or: ${value1 || value2 || check()}`);
//연산이 heavy한 함수를 호출하거나 expression은 효율성을 위해 제일 뒤에 와야함

//&&(and), finds the first falsy value🌟
console.log(`and: ${value1 && value2 && check()}`);
//often used to compress long if-statement

/*🌟nullableObject && nullableObject.something;
- and는 null체크할때도 많이 쓰인다.
- null일 수도 있는 값을 체크 없이 실행시키면 프로그램이 다운되므로, 이를 방지하기 위해 nullableObject가 null이면 false가 되도록 하여 뒤의 실행을 막는다.
- 즉,object가 null이 아니여야 object의 something이라는 value를 받아오게 된다.*/

if (nullableObject != null) {
  nullableObject.something;
}
// 위 코드는 nullableObject && nullableObject.something과 같다.

function check() {
  for (let i = 0; i < 10; i++) {
    //wasting time
    console.log("💕");
  }
  return true;
}

//! (not)
console.log(!value1);

7) Equality

const stringFive = "5";
const numberFive = 5;

// ==loose equality, with type conversion
console.log(stringFive == numberFive); //true
console.log(stringFive != numberFive); //flase

// ===strict equality, no type conversion → ❗ loose equality보다 이것을 사용하는 게 더 좋다.
console.log(stringFive === numberFive); //false
console.log(stringFive !== numberFive); //true

// object equality by reference
const ellie1 = { name: "ellie" };
const ellie2 = { name: "ellie" };
const ellie3 = ellie1;
console.log(ellie1 == ellie2);//false → 각각 다른 ref가 저장되어 있기 때문
console.log(ellie1 === ellie2); //false → 똑같은 타입이든 아니든 ref값이 다르기 때문
console.log(ellie1 === ellie3); //true → 똑같은 ref 가지고 있음

// equality Quiz💥
console.log(0 == false); //true
console.log(0 === false); //false
console.log("" == false); //true
console.log("" === false); //false
console.log(null == undefined); //true!!!!
console.log(null === undefined); //false

8) Conditional operators: if

// if, else if, else

const name = "merry";
if (name === "merry") {
  console.log("Welcome, Merry!"); // Welcome, Merry!
} else if (name === "coder") {
  console.log("You are amazding coder");
} else {
  console.log("unknown");
}

9) Conditional (ternary) operator: ?

/* condition ? value1: value2;
→ condition이 true이면 value1을, false면 value2를 return함 */

const name = "merry";
console.log(name === "merry" ? "yes" : "no"); // yes

//💥복잡하게 중첩시키지 말고 그럴 땐 if나 switch문을 쓰자

10) Switch statement

//use for multiple if checks : if문 너무 반복할 때 사용
//use for enum-like value check, use for multiple type checks in TS

const browser = "IE";
switch (browser) {
  case "IE":
    console.log("go away!");
    break;
  case "Chrome":
  case "Firefox": 
    // 다른 case지만 같은 코드를 실행하면 이렇게 case를 연달아 쓰면 묶어서 표현 가능
    console.log("love you!");
    break;
  default:
    // 보통 default까지 오면 안되기 때문에 throw Error('unknown type')와 같이 에러를 호출시킨다.
    console.log("same all!");
    break;
}

11) Loops

1. while loop

: while the condition is truthy, body code is executed.

let i = 3;
while (i > 0) {
  console.log(`while: ${i}`);
  i--;
}

/* [console]
while: 3
while: 2
while: 1
*/

2. do while loop

: body code is executed first, then check the condition.

let i = 0;
do {
  console.log(`do while: ${i}`);
  i--;
} while (i > 0);

/* [console]
do while: 0
*/

3. for loop

: for ( begin ; condition ; step )

-既存の変数に割り当てられている場合:

for (i = 3; i > 0; i--) {
  console.log(`for: ${i}`);
}

/* [console]
for: 3
for: 2
for: 1 
*/

-変数が既存に存在しない場合

inline variable declaration
:letという領域変数をブロックに宣言します.

for (let i = 3; i > 0; i = i - 2) {
  console.log(`inline variable for: ${i}`);
}

/* [console]
inline variable for: 3
inline variable for: 1
*/

-ネストループ→CPUに悪いので、なるべく避けましょう!

for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    console.log(`i: ${i}, j: ${j}`);
  }
}
/* [console]
i: 0, j: 0
i: 0, j: 1
...
i: 9, j: 9
*/

-break、continue→loopで使用

break
:現在のループを終了し、次の文に移動してプログラム制御します.
問題)0から10の反復から8(use break)に達するまで

i = 0;
while (i <= 10) {
  console.log(i);
  if (i === 8) {
    break;
  }
  i += 1;
}

continue
:ラベルがループの現在のループで文の実行を終了し、繰り返し文の最初のループを返し、ループの次のコードを実行します.
break文とは異なり、continueはループの実行を完全に終了するのではなく、次の操作を実行します.

、ループ上では

の再ジャンプが条件となる

forループ更新式を使用して

をジャンプ
問題)0から10までの反復と偶数のみの印刷(continueを使用)

for (let i = 0; i <= 10; i++) {
  if (i % 2 === 0) {
    console.log(i);
  } else {
    continue;
  }
}

参考資料
https://www.youtube.com/channel/UC_4u-bXaba7yrRz_6x6kb_w