TIL - Javascript(헷갈리는 부분 정리 2) - Operator

(유튜브 드림코딩 by엘리 참고)
https://www.youtube.com/channel/UC_4u-bXaba7yrRz_6x6kb_w

1. preIncrement 와 postIncrement의 차이

let counter = 2;

const preIncrement = ++counter;   //선 더하기 후 할당
                                  //counter = counter +1;
                                  //preIncrement = counter;
                                  
const postIncrement = counter++;  //선 할당 후 더하기
                                  //postIncrement = counter;
                                  //counter = counter + 1;

2. Logical Operators: || (or), && (and)

//or: 세개 중 하나라도 true값이 나오는 경우 true값을 리턴. 
//처음부터 true값이 나오게 되면 or은 멈추게 됨 따라서 or을 쓸 때는 expression이나 function을 뒤에 위치하는게 효율적
const value1 = false;
const value2 = 4 < 2;

console.log(`or: ${ value1 || value2 || check()}`);//이게 효율적인 방법

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

//and : 세 개가 모두 true값이 나올 때 true를 리턴함. 따라서 처음에 false값이 나오게 되면 멈추게 됨
//and도 or과 마찬가지로 expression이나 function을 뒤에 위치하는 게 효율적
const value3 = false;
const value4 = 4 < 2;

console.log(`and: ${ value3 && value4 && check()}`);//이게 효율적인 방법

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

3. Equality Operators

3-1. loose equality, heavy equality

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

// == loose euqality(타입의 일치유무까지 확인하지 않음)
console.log(stringFive == numberFive);  //true
console.log(stringFive != numberFive);  //false

// === strict equality(타입의 일치유무까지 확인)  
// strict equality를 쓰는 게 합리적
console.log(stringFive === numberFive); //false
console.log(stringFive !== numberFive); //true

3-2. object equality by reference

const tom1 = { name: 'Tom'};
const tom2 = { name: 'Tom'};
const tom3 = tom1;
console.log(tom1 == tom2); // false 
//(서로 다른 reference가 들어있고 이는 서로 다른 object를 가리키고 있기 때문에)
console.log(tom1 === tom2);// false
console.log(tom1 === tom3);// true

3-3. 0과 empty string'', null은 모두 false로 간주될 수 있음.

console.log(0 == false);        // true
console.log(0 === false);       // false(0은 boolean 타입이 아님)
console.log('' == false);       // true
console.log('' === false);      // false(''은 boolean 타입이 아님)
console.log(null == undefined); // true(같은 것으로 간주)
console.log(null === undefined);// false(타입이 다름)

4. If operators

const name = '';
if(name === 'Tom'){
    console.log('Welcome, Tom!')
} else if (name === 'Bob') {
    console.log('Hello, Bob!')
} else {
    console.log('Who are you?') // name에 할당된 값이 없어도 else값이 나타나게 됨.
}

4-1. Ternary Operator

console.log(name === 'Tom' ? 'true' : 'false');

5. Switch statement

//If...else를 반복하는 경우 switch를 쓰는 것이 효율적
const browser = 'IE'
switch (browser){
  case 'IE': 
    console.log('go away');
        break;       //break를 꼭 써줘야 한다!
  case 'Chrome':
  case 'FireFox':    //같은 값이 나오는 경우 이와 같이 묶을 수 있음
    console.log('I love you!');
        break;
  default:
    console.log('same all');
        break;
}

6. loops

6-1: while, do...while statement

let i = 3;
//while문
while (i > 0) {
    console.log(`while: ${i}`);
    i--;
};
//do...while문
//블록 내에 있는 코드를 먼저 실행한다.
do{
    console.log(`do while: ${i}`);
    i--;
} while (i>0);

6-2: for statement

//바깥에 전역변수를 실행하거나 for문 안에 지역변수를 실행할 수 있다.
for (let i = 3; i > 0; i--){   //inline variable declaration
    console.log(`inline variable for: ${i}`);
};

6-3: break, continue

for (let i = 0; i < 11; i++){
    if(i % 2 !== 0){
        continue;   //continue문과 일치하는 값이 나오는 경우 그 밑의 코드를 실행하지 않고 다시 위의 반복문으로 돌아감.
    }
    console.log(`i = ${i}`);
};

for (let i = 0; i < 9; i++){
    if(i === 9){
        break;          //break가 있는 지점에서 종료하고 블록을 빠져나감.
    }
    console.log(`i = ${i}`);
};