Home JavaScript의 if와 '?'를 사용한 조건 처리
Post
Cancel

JavaScript의 if와 '?'를 사용한 조건 처리

if와 ‘?’를 사용한 조건 처리

조건에 따라 다른 행동을 취해야 할 때가 있습니다. 이럴 땐, if문과 ‘물음표’ 연산자라고 불리는 조건부 연산자 ?를 사용하면 됩니다.

if문

if(...)문은 괄호 안에 들어가는 조건을 평가하는데, 그 결과가 true이면 코드 블록이 실행됩니다.

1
2
let year = 2015;
if (year == 2015) console.log(year == 2015);

위 예제에서는 조건 (year == 2015)이 간단한 경우만 다루었는데, 조건문은 더 복잡할 수도 있습니다.

조건이 true일 때 단수의 문은 위 예제처럼 중괄호로 감싸지 않아도 되지만 복수의 문을 실행하고 싶다면 중괄호로 코드 블록을 감싸야 합니다.

1
2
3
4
if (year == 2015){
    console.log(year == 2015);
    console.log("참입니다.");
}

if문을 쓸 때는 조건이 참일 경우 실행되는 구문이 단 한 줄이더라도 중괄호 {}를 사용해 코드를 블록으로 감싸는것을 권장합니다.
이렇게 코드를 작성하면 코드 가독성이 증가하는 효과를 볼 수 있습니다.

불린형으로의 변환

if (...) 문은 괄호 안의 표현식을 평가하고 그 결과를 불린값으로 변환합니다.

형 변환에 대해 자세하게 다루었던 게시글을 잠깐 이용하자면, 다음과 같습니다.

  • 숫자 0, 빈 문자열"", null, undefined, NaN은 불린형으로 변환 시 모두 false가 됩니다. 이런 값들은 ‘falsy(거짓 같은)’ 값이라고 부릅니다.
  • 이 외의 값은 불린형으로 변환시 true가 되므로 ‘truthy(참 같은)’ 값이라고 부릅니다.

이러한 자바스크립트의 형변환 규칙에 따르면 다음 예제는 절대로 실행될 수 없습니다.

1
2
3
if (0) { // 0은 falsy입니다.
  ...
}

다음 예제는 반드시 항상 실행됩니다.

1
2
3
if (1) { // 1은 truthy입니다.
  ...
}

다음 예제와 같이 평가를 통해 확정된 불린값을 if문에 전달할 수도 있습니다.

1
2
3
4
5
let cond = (year == 2015); // 동등 비교를 통해 true/false 여부를 결정합니다.

if (cond) {
  ...
}

else절

if문에는 else절을 붙일 수 있습니다. else 뒤에 이어지는 코드 블록은 조건이 거짓일 때 실행됩니다.

1
2
3
4
5
6
7
let year = 2015;

if (year == 2015) {
  console.log( '정답입니다!' );
} else {
  console.log( '오답입니다!' ); // 2015 이외의 값을 입력한 경우
}

else if로 복수 조건 처리

유사하지만 약간씩 차이가 있는 조건 여러 개를 처리해야할 때는 else if를 사용합니다.

1
2
3
4
5
6
7
8
9
let year = 2015;

if (year < 2015) {
  console.log( '숫자를 좀 더 올려보세요.' );
} else if (year > 2015) {
  console.log( '숫자를 좀 더 내려보세요.' );
} else {
  console.log( '정답입니다!' );
}

위 예제에서, 자바스크립트는 조건 year < 2015를 먼저 확인합니다. 이 조건이 거짓이라면 다음 조건 year > 2015를 확인합니다. 이 조건 또한 거짓이라면 else절 내의 console.log() 함수가 실행됩니다.

else if 블록을 더 많이 붙이는 것도 가능합니다. 또한 if문에서 else ifelse의 사용은 필수가 아닌 선택사항입니다.

조건부 연산자 ‘?’

조건에 따라 다른 값을 변수에 할당해줘야 할 때가 있습니다.

1
2
3
4
5
6
7
8
9
10
let accessAllowed;
let age = 22;

if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}

console.log(accessAllowed);

“물음표(question mark) 연산자”라고도 불리는 “조건부(conditional) 연산자”를 사용하면 위 예제를 조금 더 짧고 간결하게 변경할 수 있습니다.

조건부 연산자는 물음표 ?로 표시합니다. 피연산자가 세 개이기 때문에 조건부 연산자를 “삼항(ternary) 연산자”라고 부를수도 있습니다. 참고로, 자바스크립트에서 피연산자를 3개 받는 연산자는 조건부 연산자가 유일합니다.

1
let result = condition ? value1 : value2;

평가 대상인 conditiontrue라면 value1, 아니라면 value2가 반환됩니다.

1
let accessAllowed = (age > 18) ? true : false;

age > 18 주위의 괄호는 생략 가능합니다. 물음표 연산자는 우선순위가 낮으므로 비교 연산자 >가 먼저 실행되고 난 뒤에 실행됩니다.

아래 예제는 위 예제와 동일하게 작동합니다.

1
2
3
// 연산자 우선순위 규칙에 따라, 비교 연산 'age > 18'이 먼저 실행됩니다.
// (조건문을 괄호로 감쌀 필요가 없습니다.)
let accessAllowed = age > 18 ? true : false;

괄호가 있으나 없으나 차이는 없지만, 코드의 가독성 향상을 위해 괄호를 사용할 것을 권장합니다.

다중 ‘?’

물음표 연산자 ?를 여러 개 연결하면 복수의 조건을 처리할 수 있습니다.

1
2
3
4
5
6
7
8
let age = 22);

let message = (age < 3) ? '아기야 안녕?' :
  (age < 18) ? '안녕!' :
  (age < 100) ? '환영합니다!' :
  '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';

console.log( message );

물음표 연산자를 이런 방식으로 사용하는것을 처음 본 분이라면 이 코드가 어떤식으로 동작하는지 파악하기 힘들 수 있습니다.
그러나 주의를 집중하고 보면, 단순히 여러 조건을 나열한 코드임에 불과하다는것을 알 수 있습니다.

  1. 첫 번째 물음표에선 조건문 age < 3을 검사합니다.
  2. 그 결과가 참이면 "아기야 안녕?"을 반환합니다. 그렇지 않다면 첫 번째 콜론 ":"에 이어지는 조건문 age < 18을 검사합니다.
  3. 그 결과가 참이면 "안녕!"를 반환합니다. 그렇지 않다면 첫 다음 콜론 ":"에 이어지는 조건문 age < 100을 검사합니다.
  4. 그 결과가 참이면 “환영합니다!”를 반환합니다. 그렇지 않다면 마지막 콜론 ":" 이후의 표현식인 `“나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!”를 반환합니다.

if ... else를 사용하면 위 예제를 다음과 같이 변경할 수 있습니다.

1
2
3
4
5
6
7
8
9
if (age < 3) {
  message = '아기야 안녕?';
} else if (age < 18) {
  message = '안녕!';
} else if (age < 100) {
  message = '환영합니다!';
} else {
  message = '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';
}

부적절한 ‘?’

물음표 연산자 ?if 대용으로 사용하는 경우가 종종 있습니다.

1
2
3
4
let company = "Netscape";

(company == 'Netscape') ?
   console.log('정답입니다!') : console.log('오답입니다!');

조건 company == 'Netscape'의 검사 결과에 따라 ? 뒤에 이어지는 첫 번째 혹은 두 번째 표현식이 실행되어 console.log()함수를 통해 출력됩니다.

위 예제에선 평가 결과를 변수에 할당하지 않고, 결과에 따라 실행되는 표현식이 달라지도록 하였습니다.

그런데 이런 식으로 물음표 연산자를 사용하는것은 좋지 않습니다.

개발자 입장에서는 if문을 사용할 때 보다 코드 길이가 짧아진다는 점 때문에 물음표 연산자 ?if 대용으로 사용하는것이 좋아보일 수 있으나, 이렇게 코드를 작성하면 가독성이 현저히 떨어집니다.

아래는 if를 사용해 변형한 코드입니다. 어느 코드가 더 읽기 쉬운지 직접 비교해 보시기 바랍니다.

1
2
3
4
5
6
7
let company = "Netscape";

if (company == 'Netscape') {
  console.log('정답입니다!');
} else {
  console.log('오답입니다!');
}

코드를 읽을 때 우리의 눈은 수직으로 움직입니다. 수평으로 길게 늘어진 코드보다는 여러 줄로 나뉘어 작성된 코드 블록이 더 읽기 쉽습니다.

물음표 연산자 ?는 조건에 따라 반환 값을 달리하려는 목적으로 만들어졌습니다. 이런 목적에 부합하는 곳에 물음표 연산자를 사용하시길 바랍니다.

여러 분기를 만들어서 처리할 때는 if를 사용할것을 권장합니다.

This post is licensed under CC BY 4.0 by the author.