[JavaScript] 03 Operators

2021. 8. 26. 17:31·frontend/javascript

이번 게시글에서는 자바스크립트 연산자와 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
'frontend/javascript' 카테고리의 다른 글
  • [JavaScript] 05 Objects
  • [JavaScript] 04 Class
  • [JavaScript] 02 Function
  • [JavaScript] 01 Variable
민똔
민똔
  • 민똔
    기록은 기억보다 오래 머무른다
    민똔
  • 전체
    오늘
    어제
    • All (24)
      • web (1)
      • frontend (12)
        • javascript (8)
        • CSS (1)
        • react (2)
      • backend (3)
        • CS (1)
        • java (1)
        • spring (1)
      • algorithm (2)
      • 우아한테크코스 7기 (6)
        • 회고 (6)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

    • 깃허브
  • 공지사항

  • 인기 글

  • 태그

    로그인 기능 구현
    개방 폐쇄 원칙
    batchsize
    httpOnly cookie
    SOLID
    cookies
    OCP
    spring
    css
    일급 컬렉션
    SUBSELECT
    객체지향
    Session Storage
    백준 11000
    Local Storage
    Session
    secure cookie
    JWT
    Refresh Token
    Java
    백준
    fetch join
    리팩토링
    LSP
    access token
    N+1 문제
    개발
    그리디 알고리즘
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
민똔
[JavaScript] 03 Operators
상단으로

티스토리툴바