[JavaScript] operator, if, for loop

참고 영상

1. String Concatenation

console.log("my" + " cat");
console.log("1" + 2);
console.log(`string literals:

....
i + 2 = ${1 + 2}`);

console.log("ryan's \n\tbook");

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(5 % 2); // remainder
console.log(2 ** 3); // exponentiation

3. Increment and decrement operators

let counter = 2;
const preIncrement = ++counter; // counter에 1을 더한 다음에 변수에 할당
// counter = counter + 1;
// preIncrement = counter;
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`);
// preIncrement: 3, counter: 3

const postIncrement = counter++; // 변수에 할당한 다음에 counter에 1을 더함
// postIncrement = counter;
// counter = counter + 1;
console.log(`postIncrement:${postIncrement}, counter: ${counter}`);
// postIncrement:3, counter: 4

const preDecrement = --counter;
console.log(`preDecrement: ${preDecrement}, counter:${counter}`);
const postDecrement = counter--;
console.log(`postDecrement: ${postDecrement}, counter: ${counter}`);

4. Assignment operators

let x = 3;
let y = 6;
x += y; // x = x + y;
x -= y; // x = x - y;
x *= y;
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

6. Logical operators: || (or), && (and), ! (not)

const value1 = false;
const value2 = 4 < 2;

// || (or), finds the first truthy value
console.log(`or: ${value1 || value2 || check()} `);

// && (and), finds the first falsy value
console.log(`and: ${value1 && value2 & check()}`);

// often used to compress long if-statement
// nullableObject && nullableObject.something
// if (nullableObject != null) {
//   nullableObject.something;
// }

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

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

• or 연산자는 처음으로 true가 나오면 거기에서 멈춘다. 만약, value1이 true면 거기에서 게임 끝. true가 된다.
• check()같이 computation이 무거운, 연산을 많이 하는 함수를 호출하거나 또는 expression 같은 것을을 제일 앞에 두면 안된다. simple한 것들을 제일 앞에 두고, 함수나 expression을 제일 뒤에 마지못해 두는 것이 가장 효율적이다.
• and 연산자는 처음으로 false가 나오면 게임 끝. false가 된다.

7. Equality

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

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

// === strict equaltity, no type conversion
console.log(stringFive === numberFive); // false
console.log(stringFive !== numberFive); // true

// object equality by reference
const ryan1 = { name: "ryan" };
const ryan2 = { name: "ryan" }; // ryan1과 ryan2의 데이터는 같지만,
const ryan3 = ryan1;
console.log(ryan1 == ryan2); // false, ryan1과 ryan2는 서로 다른 레퍼런스가 들어있고,
console.log(ryan1 === ryan2); // false, 서로 다른 레퍼런스는 서로 다른 object를 가리킨다.
console.log(ryan1 === ryan3<); // true

// equality - puzzler
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 = "ryan";
if (name === "ryan") {
  console.log("Welcome, Ryan!");
} else if (name === "coder") {
  console.log("You are amazing coder");
} else {
  console.log("unknown");
}

9. Ternary operator: ?

// condition ? value1 : value2;
console.log(name === "ryan" ? "yes" : "no"); // yes

• Ternary operator는 간단할 때는 쓰는 것이 좋다.

10. Switch statement

// use for multiple if checks
// 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":
    console.log("love you!");
    break;
  default:
    console.log("same all!");
    break;
}

• if, else 여러개를 반복한다면 Switch를 사용하는 것을 고려해보는 것이 좋다.

11. Loops

// while loop, while the condition is truthy,
// body code is executed.
let i = 3;
while (i > 0) {
  console.log(`while:${i}`);
  i--;
}

// do while loop, body code is executed first,
// then check the condition.
do {
  console.log(`do while: ${i}`);
  i--;
} while (i > 0);

// for loop, for(begin; conditionl; step)
for (i = 3; i > 0; i--) {
  console.log(`for: ${i}`);
}

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

// nested loops
for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    console.log(`i: ${i}, j:${j}`);
  }
}

• block을 먼저 실행하고 싶으면, do while loop을 쓰고, 조건문이 맞을 때만 실행하고싶다면 while을 쓰면 된다.
• nested loops는 CPU에 좋지않아서, 되도록이면 피하는 것이 좋다.

break, continue

• break는 loop를 완전히 끝낸다.
• continue는 지금 것만 생략하고, 다시 다음 스텝으로 넘어간다.

Q1. iterate from 0 to 10 and print only even numbers (use continue)

for (let i = 0; i < 11; i++) {
  if (i % 2 != 0) {
    continue;
  } else {
    console.log(`q1. ${i}`);
  }
}

Q2. iterate from 0 to 10 and print numbers until reaching 8 (use break)

for (let i = 0; i <= 10; i++) {
  if (i > 8) {
    break;
  } else {
    console.log(`q2. ${i}`);
  }
}