[Javascript] 3항 연산자 활용

기준 관리 화면에 아래와 같이 시작시간과 종료시간을 추가해 달라는 요청을 받았다.

 

단순히 위 그림과 같이 '시작시간'과 '종료시간'을 입력(선택) 받아 저장하면 좋겠지만 

입력받은 값이 제대로 되어 있는지 체크까지 해줘야 하는게 우리의 일이다. 

오늘은 그 과정을 풀이해보려고 한다.

 

특정 날짜를 지정

위 그림을 보면 알겠지만 특정 날짜를 입력 받는 것은 아니고, 단순히 '당일'/'익일'만 선택 할 수 있도록 되어 있다.

시간과 날짜를 계산하기 위해서는 임의라도 날짜가 필요하다. 

따라서 날짜는 아래와 같이 고정 하였다. 

• 당일 : 1970.01.01
• 익일 : 1970.01.02

이미 눈치챈 사람도 있을 것이다. 1970년 01월 01일은 timestamp의 시작 날짜이다.

 

이제 위에 식을 코드로 짜보자

let staYmd = staClass == 2 ? '19700101' : staClass == 3 ? '19700102' : '';
let endYmd = endClass == 2 ? '19700101' : endClass == 3 ? '19700102' : '';

 

3항 연산자를 사용하였다. 

구분의 선택값은 당일(2), 익일(3) 이다.

따라서 2일 경우 당일('19700101') 이 할당될 것이고, 3일 경우 익일('19700102')가 할당될 것이다.

위에서는 3항 연산자를 중첩하여 사용하였다.

2일경우는 바로 '19700101'을 할당 하겠지만, false일 경우 다시 해당 값이 '3' 인지 확인하는 3항연산식을 사용했다.

일반적으로 3항 연산식을 중첩하면 분석이 어려워져 기피하게 되는데

위와 같이 간단한 내용은 2번까지 중첩을 하여도 크게 무리가 없다고 판단된다.

 

날짜/시간 비교 함수 만들기

이자 임의의 날짜를 지정 하는 방법을 정했으니 입력받은 모든 값을 조합하여 시간 계산을 해봐야 한다.

앞으로도 자주 사용될 것 같은 기능이어서 별도의 함수로 추출한다.

시간 관련 함수는 연결된 포스팅에서 확인하자

function dateTimeDiff(staClass, staHH, staMM, endClass, endHH, endMM){
    let staYmd = staClass == 2 ? '19700101' : staClass == 3 ? '19700102' : '';
    let endYmd = endClass == 2 ? '19700101' : endClass == 3 ? '19700102' : '';

    const staYMDHM = new Date(staYmd.substring(0,4), staYmd.substring(4,2), staYmd.substring(6.2), staHH, staMM);
    const endYMDHM = new Date(endYmd.substring(0,4), endYmd.substring(4,2), endYmd.substring(6.2), endHH, endMM);

    const timeDiff = (endYMDHM.getTime() - staYMDHM.getTime())/(1000*60*60);
    
    return timeDiff;
}


let staClass = 2;
let endClass = 2;
let staHH    = 2;
let staMM    = 0;
let endHH    = 1;
let endMM    = 30;

let isValiad = dateTimeDiff(staClass, staHH, staMM, endClass, endHH, endMM);

if(isValiad < 0){
    console.log('입력된 시간을 확인해 주세요');
}

 

dateTimeDiff 라는 함수를 만들었다.

맨 위의 그림에서 각 항목의 값을 입력 받아 new Data 클래스를 통해 시간을 생성한다.

생성된 시작시간과 종료시간의 차이를 구한다. 시작 시간의 숫자가 크게되면 - 값을 반환한다.

구문중 시간값의 차를 '1000*60*60' 으로 나눈 이유는 시간 차이를 밀리초로 반환하기 때문이다.

위와 같이 하면 '시간'으로 데이터를 반환하게 된다.