코딩의 기본 operator, if, for loop

초반 입사시기에 진짜 ...진짜 정말 고생했던 내용이다
만만하게 봤다가 에디터 할인창을 만들때 거의 한달내내 이 깍깨물고 만든 것 같다.
언제나 기본이 중요!

오늘 정리한 드림코딩4강

들어가기 전에..

// Note!
// Immutable data types: primitive types, frozen objects(i.e. object.freeze())
// Mutable data type: all objects by default are mutable in JS
// favor immutable data type always for a few reasons:

참고하면 좋을듯 : primitive data type과 immutable value의 차이와 사용하는 이유
primitive data type(원시 타입)은 변경 불가능한 값
원시 타입 이외 모든 값(객체)은 변경 가능한 값(mutable value)

연산자

1.String concatenation

console.log('my' + ' cat');
console.log('1' + 2);
console.log(`string literals: 1 + 2 = ${1 + 2}`);

2.Numeric operators

console.log(1 + 1); // add
console.log(1 - 1); // substract
console.log(5 / 2); // divide
console.log(parseInt(5 / 2)); // 몫
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 = counter + 1;
// preIncrement = count;
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`);
const postIncrement = counter++;
// postIncrement = counter;
// counter = counter + 1;
console.log(`postIncrement: ${postIncrement}, counter: ${counter}`);

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

++를 앞에 붙여주면 preIncrement
++를 뒤에 붙여주면 postIncrement
마이너스도 동일하게 적용, 업데이트가 어느 시점에서 가능한지의 차이임

4.Assignment operators

let x = 3;
let y = 6;

x += y; // x = x + y;
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 comporess long if-statement
// nullableObject && nullableObject.something
let nullableOject = null;
if (nullableOject != null) {
   nullableOject.something;
}

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

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

|| (or) = 둘중 하나만 true여도 true
&& (and)둘다 true를 만족해야 true를 반환
!X (not) X가 true면 false를 반환, false면 true를 반환
연산을 많이 하는 작업을 호출해야 한다면 뒤에 호출 할 수록 좋다.

7.Equality

const stringFive =  '5';
const numberFive = 5;

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

// == strict equality, no type conversion
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
console.log(ellie1 === ellie2); // false
console.log(ellie1 === ellie3); // 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

웬만하면 strict equality (===)를 사용하자

대부분의 경우 엄격한 검사가 좋다. (후에 버그가 생기는 것을 방지)

8.Conditional operators: if

// if, else if, else
const name = 'df';
if(name === 'ellie') {
   console.log("welcome ellie");
} else if(name === 'coder') {
   console.log("You are amazing coder");
} else {
   console.log("unknown");
}

if 안의 if를 넣는 일은 되도록이면 지양하자 (코드 읽기가 어렵다)
그런데 나의 한계인지 종종 이렇게 써야만 하는 상황이 올때가 있는데, 어떻게 해결해야하는지는 공부 하면서 해결해야 할 문제 인 것 같다.

9.Ternary Operator: ?

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

if를 좀 더 간단하게 쓸 수 있음, 간단하게 출력할때 사용하면 좋음
nesting을 지양하자.

10. Switch statement

// use for muliple if checks
// use for enum-like value check
// use for mulitple 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;
}

• case로 코드를 실행한 후 break; 를 걸어주지 않으면 그대로 아래까지 전부 훑는 대 참사가 일어난다. 꼭 break;를 걸어주자/
• 가독성 측면에서는 if else보다 좋지만 Comparison operators이 case문 내에서는 되지 않는 것 같다.
  case안에 비교 연산자 넣어보려다가 찾은 스택오버 플로우 글

11. Loops

// while loop, while the condition is truthy
// body code is executed.
let i = 3;
while(i > 0){
   console.log(`while: ${i}`);
   i--;
}
//false가 나오기전까지는 계~~속 돌아감 

// do while loop, body code is executed first.
// then check the condition.

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

// for loop, for(begin; condition; 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}`);
}

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

querySelectorAll로 불러왔을때 forEach를 써서 하나하나 집어넣어주는 방법도 있다.