/ JAVASCRIPT

JavaScript(3) - operator

JavaScript 관련 포스팅

1. String concatenation

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

3 + 4 = ${3 + 4}`);

```
> **Console**  
> ###### my cat  
> ###### 12  
> ###### string literals: 1 + 2 = 3  
> ###### string literals:  
> ###### '''''  
>   
> ###### 3 + 4 = 7  

- string literals의 경우, \`(backtick)을 사용해 줄 바꿈과 **`'`** (single qoutation mark) 입력이 쉬움

2. Logical operators: ||(or), &&(and), !(not)

  • ||(or)
    → 여러 조건 중 하나라도 true이면 true
    → 조건을 나열할 때, 연산이 많은 것일수록 뒤에 선언하는 것이 좋음
    → true인 조건을 만나면 이후의 조건은 더 이상 읽지 않음

  • &&(and)
    → 여러 조건 중 하나라도 false이면 false
    → 조건을 나열할 때, 연산이 많은 것일수록 뒤에 선언하는 것이 좋음
    → false인 조건을 만나면 이후의 조건은 더 이상 읽지 않음
    → null check할 때 유용하게 쓰임

3. Equality

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

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

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

Console

true
false
false
true
// object equality by reference
const minji1 = { myname: 'minji'};
const minji2 = { myname: 'minji'};
const minji3 = minji1;
console.log(minji1 == minji2); // false
console.log(minji1 === minji2); // false
console.log(minji1 === minji3); // true

Console

false
false
true

→ object에는 object를 가리키는 reference를 저장함

// equality
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

⇒ 0, null, undefined, NaN, ‘’ 은 false로 간주함

⇒ 0은 boolean type이 아니라서 strict equality를 적용하게 되면 0은 false가 아님

⇒ null은 undefined로 간주되지만, null과 undefined는 다른 type

4. Ternary operator

  • 삼항연산자
  • condition?value1:value2;
  • 조건이 간단한 경우에만 씀
  • 조건이 복잡해질 경우에는 if나 switch를 사용하는 것이 좋음

Switch statement

  • if, else if를 반복하게 된다면 switch를 쓰는 것이 더 나음

  • enum-like value check시 사용

      const browser = 'IE';
  switch (browser) {
      case 'IE':
          console.log('go away!');
          break;
      case 'Chrome':
      case 'Firefox':
          console.log('love you!'); // 'Chrome'과 'Firefox'의 결과 값이 같으므로 한번에 적어줌!
          break;
      default:
          console.log('same all!');
          break;
  }

※ 같은 결과 값을 요구한다면, case를 이어서 적어주면 됨

Loops

nested loops

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

⇒ O(n^2)이므로 CPU에 좋지 않으므로 피하는 것이 좋음!

continue/break

// 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;
    }
    console.log(`q1. ${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;
    }
    console.log(`q2. ${i}`);
}

※ label은 다른 방식으로 코드를 바꿔 사용이 가능해 현업에서는 쓰지 않으니 참고!

< 출처 >

“자바스크립트 4. 코딩의 기본 operator, if, for loop 코드리뷰 팁 | 프론트엔드 개발자 입문편 (JavaScript ES6),” 유튜브 비디오, 20:14, 게시자 “드림코딩 by 엘리,” 2020년 4월 15일, https://youtu.be/tJieVCgGzhs