출처 : 유튜브 드림코딩 자바스크립트

operator

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(1 / 1); // devide
console.log(1 * 1); // multiply
console.log(5 % 2); // remainder (나누고 나머지 값)
console.log(2 ** 3); // exponentiation 거듭제곱 (2의 3승)

3. Increment and decrement operators (++ / --)

let counter = 2;
const preIncrement = ++counter;
// counter = counter + 1;
// preIncrement = counter; 
// 즉 preIncrement과 counter 에는 숫자 3 값이 할당된다.

console.log(`preIncrement : ${preIncrement}, counter : ${counter}`);

****const postIncrement = counter++;
// postIncrement = counter; 먼저 counter 값을 postIncrement에 할당한다.
// counter = counter + 1;
// precounter : 3, counter : 4 가 할당된다.
console.log(`postIncrement : ${postIncrement}, counter : ${counter}`)
****

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

4. Assignment operators (할당하는 연산자, = operators)

let x = 3;
let y = 6;
x += y; // x = x + y; 반복되는 x생략 가능
x -= y; // x = x - y;
x *= y; // x = x * y;
x /= y; // x = x / y;

5. Comparison operators (<= 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. 처음으로 true인 연산자가 나오면 거기서 멈춤.
  그렇기에 아래서 value1과 같이 심플한 값을 앞에 두고 check()와 같이 연산을 많이 하는 함수는 뒤쪽에 두는 것이 좋다.

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

nullableOject && nullableObject.something
간편하게 null체크할 때도 많이 쓰임, null object가 null이 아닐 때만 object의 something이라는 value를 받아옴.

if(nullableObject != null){
nullableObject.something; }

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

결국 check() 가 실행된다.

• ! (not) =>값을 반대로 바꾸어준다.

console.log(!value1);

true 값을 false로 바꾸어준다.

7. Equality operators

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(타입이 다르면 다르다고 판단. => strict 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;
console.log(ellie1 === ellie2);  //false;
console.log(ellie1 === ellie3); //true;

ellie1과 ellie2 는 실제로 다른 reference를 갖고 있다.
ellie1 이 가지고 있는 reference 을 ellie3 으로 할당했기 때문에 서로 같은 reference.

equality - 응용 문제

console.log(0 == false); //0 은 false로 간주되어지므로 true
console.log(0 === false); // 0은 Boolean type이 아니므로 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 = 'coder';
if(name === 'ellie'){
    console.log('Welcome, Ellie!');
} else if(name === 'coder'){
    console.log('You are amazing coder');
} else {
    console.log('unknown');
}

9. Ternary operator : ? (삼항조건 연산자)

condition ? value1 : value2; condition 이 true니? true 면 왼쪽 실행, false면 오른쪽 값 실행
간단할 때만 이용하는 것이 좋다.

console.log(name === 'ellie'? 'yes' : 'no');

10. Switch operators

use for multiple if checks (if 많이 써야할 경우 쓰면 좋음)
use for enum-like value check
use for multiple type checks in TS(타입스크립트에서 정해져 있는 타입을 검사할 때)

const browser = "Chrome";
switch(browser){
    case 'IE':
        console.log('go away');
        break;
    case 'Chrome':
    case 'Firefox':
        console.log('love you');
        break;
    default:
        console.log('same all!');
        break;
}

11.Loops (반복문)

While loop, while the condition is truthy, body code is excuted.

let i = 3;
while (i > 0) {
    console.log(`while: ${i}`);
    i--;
}
//while : 3
//while : 2
//while : 1 까지 출력되고 반복문 끝남. 

do while loop, body code is excuted first,then check the condition. 블럭을 먼저 실행하고 싶다면 do while 을 쓸 것.

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

// do while : 3
// do while :2
// do while : 1출력됌. 

for loop : for(begin; condition; step)=> (시작하는 문장; 어떤 조건; 어떤 스텝 밟아나갈 것인지)

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

for (let i = 3; i > 0; i= i - 2){
    //inline variable declaration(블럭 안에 let이라는 지역변수 선언)
    console.log(`inline variable for: ${i}`);
}
//inline variable for: 3
//inline variable for: 1 

//nested loops -> 너무 많아짐. 되도록 피하는 게 좋음!
for(let i = 0; i < 10; i++){
    for(let j = 0; j < 10; j++){
        console.log(`i: ${i}, j:${j}`)
    }
}

break, 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;
    }
}

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

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

for(let i = 0; i<11; i++){
    if(i > 8){
        break;
    }
}