Javascript - operator

안녕하세요, 이번에는 Javascript에서의 operator(연산자) 중 헷갈릴만한 것들에 대해 정리해보겠습니다.

 

1. Increment and decrement operator : 증감 연산자입니다. 전위형(++counter)과 후위형(counter++)으로 나누어져 있습니다. 두 개의 차이는 counter를 1씩 증가시켜주는 것은 동일하지만 반환 값이 차이가 있습니다. 아래코드를 보면서 이해하면 도움이 될 것 같습니다. 전위형은 counter에 1을 먼저 추가를 시킨 후에 preIncrement에 counter 값을 할당하고, 후위형은 postIncrement에 counter를 할당시킨 후에 counter에 1을 추가합니다. 그렇기 때문에 아래 코드에서 후위형을 적용하였을 때 postIncrement는 그대로 3이 할당이 되고 그 후에 counter가 1 추가되어 4가 나오게 됩니다.

let counter = 2;
const preIncrement = ++counter;
// counter = counter +1;
// preIncrement = counter;
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`); //둘다 3이 된다
const postIncrement = counter++;
// postIncrement = counter;
// counter = counter +1;
console.log(`postIncrement: ${postIncrement}, counter: ${counter}`); //postIncrement는 3이고 counter는 4가 된다.

2. Logical operators : 논리 연산자입니다. !(not), &&(and), ||(or)가 있습니다.

!(not)은 뒤의 논리를 뒤집어 주는 역할을 하고, &&(and) 연산자는 모두 참이면 참을 출력해 주는 연산자이며 첫 번째 false값이 나오게 되면 멈추게 됩니다! ||(or) 연산자는 하나라도 참이라면 참을 출력해주며 첫 번째 true값이 나오면 멈추게 됩니다.

 

3. Equality : 동등 연산자로 같은지 비교해주는 연산자입니다. 동등 연산자에는 2가지가 있는데요, ==와 ===가 있습니다. ===가 좀더 엄격(?)하게 비교를 해서 type까지 맞아야 같은 값으로 인정해 줍니다. 아래 코드를 보며 설명드리겠습니다.

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

// == loose equality, with type conversion
console.log(stringFive == numberFive); // 값이 5로 같으므로 True
console.log(stringFive != numberFive); // False

// === strict equality, no type conversion
console.log(stringFive === numberFive); // 값은 같지만 type이 string과 number로 달라 False
console.log(stringFive !== numberFive); // True

// object equality by reference
const hoon1 = { name: 'hoon' };
const hoon2 = { name: 'hoon' };
const hoon3 = hoon1;
console.log(hoon1 == hoon2); // 1과 2가 가리키는 ref가 다르므로 Type에 관계없이 False 
console.log(hoon1 === hoon2); // 1과 2가 가리키는 ref가 다르므로 Type에 관계없이 False
console.log(hoon1 === hoon3); // 1과 3은 같은 ref이므로 True

console.log(0 == false); // T
console.log(0 === false); // F (0은 boolean 타입이 아닌 number 타입이므로 F)
console.log('' == false); // T
console.log('' === false); // F (''은 boolean 타입이 아닌 string 타입이므로 F)
console.log(null == undefined); // T
console.log(null === undefined); // F (null은 object 타입이므로 F)

4. Ternary operator : condition ? value1: value2; 

let name = 'hoon'
console.log(name === 'hoon' ? 'yes': 'no'); //name이 'hoon'이기 때문에 'yes'가 출력됨

5. Switch Statement : value 값 체크할 때 사용합니다. 주의해야 할 점으로는 break가 꼭 필요합니다. 아래 코드에서 만약에 case 'IE' 안에 break가 없다면 'Chrome'이나 'Firefox'가 아니어도 'love you!'가 출력됩니다.

const browser = 'IE';
switch(browser) {
    case 'IE':
        console.log('go away!'); // 'IE'이므로 'go away!'가 출력
        break;
    case 'Chrome':
    case 'Firefox':
        console.log('love you!'); // 'Chrome'이나 'Firefox'인 경우 'love you!' 출력
        break;
    default:
        console.log('same all!'); // 위의 Case들에 해당되지 않을 경우 default 값이 실행
        break;
}

6. Loop : 반복문으로 while 반복문과 for 반복문이 있습니다.

while 반복문에는 조건을 먼저 확인하는 while문과 한번 실행하고 조건을 비교하는 do while문이 있습니다.

// while 문
let i = 3;
while (i > 0) {
    console.log(`while: ${i}`);
    i--;
}

// do while문 (처음에 console.log를 한번 시작 후 조건을 비교) 
i = 3;
do {
    console.log(`do 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}`);
}

// nested loops (이중 반복문도 구현 가능)
for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
        console.log(`i: ${i}, j: ${j}`);
    }
}

반복문을 잘못 작성하게 되면 무한 Loop에 빠져들게 되는데요, 이것을 나오게 해 주는 것이 break와 continue입니다. break는 진행 중인 반복문을 종료시켜 주며 continue는 다음 조건으로 넘어가주게 합니다.

아래 코드에서 continue를 이용해 짝수만 출력하는 반복문(2로 나눌 때 나머지가 0이면 출력, 아니면 continue로 다음 조건으로 넘어감)과 7까지 출력하는 반복문(8이 되면 break를 통해 반복문 종료)을 살펴보면 조금 더 이해하기 쉬울 것 같습니다!

// break, continue
// 01. iterate from 0 to 10 and print only even numbers(use continue)
for (let num = 0; num <= 10; num++) {
    if (num % 2 == 0) {
        console.log(num);
    } else {
        continue;
    }
}
// 02. iterate from 0 to 10 and print numbers until reaching 8 (use break)
for (let num = 0; num <= 10; num++) {
    if (num == 8) {
        break;
    } else {
        console.log(num);
    }
}