조건문?

우리는 사회라는 공간 안에서 규칙을 지키면서 살아가고 있다.
만약에 규칙이 존재하지 않는다면 사고나 혼란이 발생하게 될 수 있다.
이 중, 많은 예시 중에 익숙한 예시를 말해보라고 하면 신호등이 있다.

신호등이 빨간색이면🔴 멈추는 의미,
신호등이 초록색이면🟢 걸어가라는 의미이다.
마치 이것이 맞다면 가고, 아니라면 가지 않는 것처럼
조건에 따라 다른 행동을 취하게 하는 조건문과 같은 것이다.

자바스크립트에서 사용하는 조건문에 대해 알아보도록 하자

1. if ... else문

자바스크립트에 조건문이라고 하면 빠질래야 빠질 수가 없는
if...else문이 대표적이다.

if...else문은 특정상황에서 프로그램 작동을 조건부로 제어를 한다.

그러면 위에 설명한 예시로 신호등을 조건문으로 아래에 만든다고 하면,

let isLightRed = true

if (isLightRed) {
	console.log('신호등 앞에 멈춰!')
} else {
	console.log('신호등 건너!')
}

2. 참, 거짓 평가

모든 조건은 표현식이라서, 참(Truthy) 또는 거짓(Falsey)인지 평가한다.
JavaScript에서 값이 거짓으로 평가되는 경우는 6가지가 존재한다.

1. false
2. undefined
3. null
4. 0
5. ""(빈 문자열)
6. NaN
(Not a Number,
숫자 데이터 유형에 정의되지 않거나 표현할 수 없는 값을
나타내는 오류값, 쉽게 말해 숫자가 아니란 의미이다.)

3. 불리언 타입 변경

JavaScript가 제공하는 Boolean() 함수를 사용한다면,
전달된 표현식을 불리언 타입으로 변경이 가능하다.

위 사진 외에 나머지 값은 모두 참(Truthy)으로 평가된다.

자동 타입 변경
조건문 내부에서 평가되는 표현식은 자동으로 불리언(Boolean)
타입으로 변경이 된다.

4. 비교 연산자

비교 연산자는 4가지 유형이 존재한다.

1. 보다 크다(>) / 크거나 같다(>=)
2. 보다 작다(<) / 작거나 같다(<=)
3. 동일(==) / 완전히 동일(===)
4. 다름(!=) / 완전히 다름(!==)

처음 1번과 2번의 유형은 숫자를 비교하는 데에 사용한다.

24 > 23 // True
24 > 24 // False
24 >= 24 // True

24 < 25 // True
24 < 24 // False
24 <= 24 // True

3번과 4번의 유형은 각 항을 비교하여 같거나, 다른 지를
평가할 때, 사용한다.

24 === 24 // True
24 !== 24 // False

여기서, 주의해야할 점이 있는데 동일(==), 완전히 동일(===)과
다름(!=), 완전히 다름(!==)은 비교에 차이가 있다.

'24' === 24 // False
'24' == 24 // True

'24' !== 24 // True
'24' != 24 // False

문자열과 숫자를 === 연산자로 비교하게 되면 거짓으로 평가된다.
그러면 의문을 가지는 점이 왜 이런 결과로 평가되는지 갖게된다.

차이점을 한번 살펴보도록 하자

5. 느슨한 VS. 엄격한 비교

JavaScript는 느슨한 타입(loosely-typed) 언어이다.
다시 말해서, 변수를 선언할 때 변수에 어떤 타입의 값이
들어가는지를 신경쓰지 않는다는 말이 된다.

변수에 할탕된 값의 타입이 변경이 되면 문제가 안되나?
싶겠지만, 변경되도 문제가 되지 않는다.

let 학생 = '전공 과목' // String
학생 = 404 // String -> Number
학생 = false // Number -> Boolean

5-1. 느슨한 비교

변수에 할당된 값의 타입은 유동적으로 변경될 수가 있다.
그래서 비교할 때도 자동으로 변경이 된다.

예를 들어서, 문자열 '24'와 숫자 24를 비교할 때
두 값의 타입은 다르다.

하지만, JavaScript가 타입을 자동 변환을 해서
두 수가 동일하다고 판단하게 된다.
(모든 타입을 숫자로 자동 변환을 시도함)

그래서 아래와 같이 예측한 결과와 다르게 평가가 이루어진다.

'24' == 24 // True ?? ('24' -> 24)

'24' != 24 // False ?? ('24' -> 24)

불리언 값도 숫자로 자동 변환한다.
JavaScript의 불리언 값을 숫자로 변경할 경우,
true는 1을, false는 0으로 변경된다.

그래서 아래와 같이 예측한 결과와 다르게 평가가 이루어진다.

0 == false // True ?? (false -> 0)
1 == true // True ?? (true -> 1)

5-2. 엄격한 비교

느슨한 비교와 달리, 엄격한 비교를 수행할 경우에는
JavaScript는 다음 두 가지 사항을 확인한다.

1. 변수에 할당된 값의 타입(Type)
2. 변수 값(Value)

===, !== 연산자를 사용하면 JavaScript가 타입을
자동 변환하지 않는다.

그래서 아래와 같이 우리가 기대한 평가가 이루어진다.

'24' === 24 // False

'24' !== 24 // True

6. else if 문

조건을 하나만 사용할 때는 if...else문 만으로 사용해도 되지만,
조건이 하나가 아니라 여러 개가 있는 경우에는
if, else 외에도 else if문을 사용해 비교하여 처리할 수 있다.

예를 들어서 신호등의 예시로 다시 돌아가보자면
신호등 색상에 따라서 다른 처리가 필요한 상황을 보도록 하자

일반적으로 우리가 알고 있는 신호등 색상은,
"빨강", "초록", "노랑"으로 이루어져 있다.

위 사진처럼 신호등 색상의 조건으로 3가지 상황을
수행할 수가 있다.
1. 신호등 색상이 "빨강"일 때 처리
2. 신호등 색상이 "초록"일 때 처리
3. 신호등 색상이 "빨강", "초록"이 아닐 때 처리

이러한 조건 처리를 if, else, else if문을 사용하여
다음 아래와 같이 코드를 작성할 수 있게 된다.

let lightColor = '노란색'

if (lightColor == '빨간색') {
  console.log('신호등 앞에서 멈춰!')
} 
else if (lightColor == '초록색') {
	console.log('신호등 건너!')
}
else {
  console.log('신호등을 빠르게 건너!')
}

7. 조건부 연산자 "?"

조건에 따라 다른 값을 변수에 할당해줘야 하는 경우도 있다.

let accessAllowed;
let age = prompt('나이를 입력해 주세요 : ', '');

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

console.log(accessAllowed);

물음표(question mark)라고 불리는 "조건부 연산자"를 사용하면
위와 같이 작성한 코드를 짧고 간결하게 작성 가능하다.

조건부 연산자는 물음표?로 표시해주면 된다.
피연산자가 3개면 조건무 연산자를 "삼항 연산자"라고
부르는 사람들도 있다. 참고로, JavaScript에서
피연산자를 3개나 받는 연산자는 조건부 연산자가 유일하다.

let result = condition ? value1 : value2;

다시, 그러면 위에 예시를 들은 코드를 간결하게 만들면
아래 코드와 같이 작성해도 동일하게 작동한다.

let accessAllowed = age > 18 ? true : false;

7.1 다중 '?'

여러 개 조건이 존재한다면 다중으로 else if를 쓸 수 있는데,
물음표 연산자도 혹시 될까? 라고 한다면
물음표 연산자도 여러 개로 연결해서 사용 가능하다.

let age = prompt('나이를 입력해주세요.', 18);

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

console.log( message );

만약 위 코드를 if...else문으로 작성해본다면,

if (age < 3) {
  message = '안녕 아기야🐥';
} else if (age < 18) {
  message = '안녕!🖐️';
} else if (age < 100) {
  message = '환영합니다!😎';
} else {
  message = '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!👀';
}

7.2 부적절한 '?'

if문을 사용할 때보다 코드길이를 줄일 수 있기 때문에,
물음표?를 if문 대용으로 쓰는게 매력적으로 느낄 수가 있다.
하지만 코드를 아래처럼 사용한다면, 가독성이 떨어질 수 있다.

let company = prompt('자바스크립트는 어떤 회사가 만들었을까요?', '');
(company == 'Netscape') ?
   console.log('정답입니다!✅') : console.log('오답입니다!❌');

아래는 if를 사용하여 변형한 코드이다.
어떤 코드가 더 가독성이 좋은지 비교해보면 좋다.

let company = prompt('자바스크립트는 어떤 회사가 만들었을까요?', '');

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

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

물음표 연산자'?'는 조건에 따라 반환 값을 달리하려는
목적으로 만들어졌다.

이러한 목적에 부합하는 곳에 물음표 연산자를 사용하면 된다.
여러 분기로 만들어 처리해야 할 때는 if문을 사용한다.

출처

야무쌤 자바스크립트 강의