JavaScript - 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

내장된 표현식을 허용하는 string 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 literals을 이용하면, 이를 더욱 읽기 쉽도록 syntactic sugar을 활용할 수 있다.

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
*/

- nested loops → 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
  : 현재 루프를 종료하고, 그 다음 문으로 프로그램 제어를 넘긴다.

  문제 ) iterate from 0 to 10 and print numbers until reaching 8 (use break)

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

• continue
  : 레이블이 지정된 루프의 현재 반복에서 명령문의 실행을 종료하고 반복문의 처음으로 돌아가여 루프문의 다음 코드를 실행

  break 문과 달리 continue는 루프의 실행을 완전히 종료하지 않고 다음과 같이 동작한다.

  • while 루프에서는 다시 조건으로 점프
  • for 루프에서는 업데이트 표현식으로 점프

문제 ) iterate from 0 to 10 and print only even numbers(use 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