본문 바로가기

frontend/javascript

[JavaScript] 03 Operators

이번 게시글에서는 자바스크립트 연산자와 if문, 반복문과 같은 제어문을 다룰 것이다. 

 

 

1. 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 )
    === 은 보통 개발에서 흔히 떠올리는 equal 연산으로, == 와 다르게 데이터 타입을 무시하지 않고 타입까지 비교한다.

    console.log(stringFive === numberFive); // false
    console.log(stringFive !== numberFive); // true

 

Object equality by reference

 

const min1 = { name: 'min' };
const min2 = { name: 'min' };
const min3 = min1;
console.log(min1 == min2); // false (서로 다른 레퍼런스)
console.log(min1 === min2); // false
console.log(min1 === min3); // true
오브젝트는 레퍼런스로 저장된다는 점을 기억하자

 

 

2. Conditional operators ( 조건 연산 ) - if, else if, else

 

const name2 = 'df';
if (name2 === 'min') {
    console.log('Welcome, min!');
} else if (name2 === 'coder') {
    console.log('You are amazing coder');
} else {
    console.log('unknown')
}

 

 

3. Ternary operator - ?

 

 if 문을 한줄로 간결하게 표현한 식이다. 코드 작성 형식은

condition ? value1 : value2 ;

와 같으며, 물음표 앞에 위치한 조건문이 true일 경우 value1을 반환하고 false인 경우에는 value2를 반환한다.

 

console.log(name2 === 'min' ? 'yes' : 'no');

 

 

4. Switch Statement

 

 만약 if 문을 스위치문으로 충분히 변환할 수 있다면, 해당 코드는 if 문 보다는 스위치문으로 작성하는 것이 더 좋다. 

 

Switch Statement
use for multiple if checks
use for enum-like value check
use for multiple type checks in TS

 

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

 

 

5. Loops

 

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

 

  • do-while loop
// do while loop, body code is executed first,
// then check the condition.
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}`);
}

 

'frontend > javascript' 카테고리의 다른 글

[JavaScript] 05 Objects  (0) 2021.09.02
[JavaScript] 04 Class  (0) 2021.08.26
[JavaScript] 02 Function  (0) 2021.08.26
[JavaScript] 01 Variable  (0) 2021.08.25
[JavaScript] 자바스크립트  (0) 2021.08.25