[JS] 연산자(Operator)

1. String Concatenation

console.log('my' + 'cat');  // str + str = str
console.log('1' + 2);       // str + num = str
console.log(`string literals: 1 + 2 = ${1+2}`);
// console.log(`elie`s book'); //에러발생
console.log(`elie's book`);
console.log("elie's \n book"); //줄바꿈

" \' " : 콤마안에 또 콤마를 사용하고자 할 때 [ \ + 콤마 ]

" \n " : 줄바꿈시에는 [ \ + n ]

" \t " : 탭키

 

 

2.Numeric Operators

console.log(1 + 1); //add
console.log(1 - 1); //subtract
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;
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`); //preIncrement:3, counter:3
// counter = counter + 1;
// preIncrement = counter;
const postIncrement = counter++;
console.log(`postIncrement: ${postIncrement} , counter: ${counter}`); //postIncrement:3, counter:4
// postIncrement = counter;
// counter = counter + 1;

 

 

 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)

||(or)

'or'연산자는 먼저 'true'가 나오면 뒤에가 'false'던 'true'던 뒤에는 체크하지 않고 'true'를 리턴

따라서 앞쪽은 간단한 로직을 넣는 것이 효율적

const or1 = true;
const or2 = 4<2;
console.log(`or: ${or1 || or2 || checkOr()}`); //or: true
function checkOr(){ //무조건 'true'리턴하는 함수
    for(let i=0; i<10; i++){
        //wasting time
        console.log('**');
    }
    return true;
}

 

 

&&(and)

'and'연산자는 먼저 'false'가 나오면 뒤에 로직은 체크하지 않고 무조건 'false'를 리턴

따라서 앞쪽은 간단한 로직을 넣는 것이 효율적

const and1 = false;
const and2 = 4<2;
console.log(`and: ${and1 && and2 && checkAnd()}`); //and: false
function checkAnd(){ //무조건 'true'리턴하는 함수
    for(let i=0; i<10; i++){
        //wasting time
        console.log('**');
    }
    return true;
}

!(not)

값을 반대로 변경

 

 

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: 'elie'}; 
const ellie2 = {name: 'elie'};
const ellie3 = ellie1;
console.log(ellie1 == ellie2); //false(똑같은 데이터가 들어있는 object이지만 object를 가리키는 reference가 각각 다름)
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
var a = false; 
console.log(a == false);    //true
console.log(a === false);   //true

 

 

8. Conditional Operators : if

const name = 'ellie';
if(name === 'ellie'){
    console.log('Welcome, Ellie');
} else if(name === 'coder'){
    console.log('You anr amazing coder');
} else{
    consol.log('unKnown');
}

 

 

9. Ternary operator : ?

condition ? value1 : value2;

condition이 true면 value1, false면 value2

 

 

10. Switch Statement

use for multiple if checkks

use for enum-likke value checks

use for multiple type checkks in TS

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

 

 

 

참고 : 드림코딩 by 엘리 유투브