자바스크립트의 조건문에 대한 내용입니다! 😊

📒 자바스크립트의 조건문(Conditionals)

자바스크립트에서는 코드의 진행을 제어할 수 있는 기능이 있다. 해당 제어 방식은 흐름 중간에 조건을 제시하여 흐름을 통제하던지 아니면 해당 흐름을 반복적으로 진행하도록 통제할 수도 있다.

위와 같이 주어진 조건에 따라 코드를 제어하는 구문을 제어문이라고 한다.

💡 제어문은 무엇인가

위에서 언급한 듯이, 제어문(control statements)은 특정한 결과를 도출해내기 위해서 조건을 제시하여 조건에 부합하는 상반되는 결과를 도출하거나, 구간의 반복 등을 유도하는 구문이라고 할 수 있다.

제어문에는 이번 포스팅에서 다룰 조건문과 반복문이 포함되며 흐름을 제어하는 구문이기 때문에, 순차적으로 진행되는 흐름이 제어문으로 인해 어떻게 전환되는지에 대한 이해가 필요하다!

🔖 출처

제어문의 정의 : Continuous Of Shoveling : [javascript 기초 강좌] 6. 제어문 ( if / switch / for / while / do~ while )

그 중 이번에 다룰 조건문(conditionals)은 코드 흐름 중간에 조건을 제시하여 흐름을 통제하는 제어문의 일종이다.

대개 조건문은 if 조건문을 사용하며 이외에도 switch 조건문도 사용을 하는데, 이번 포스팅에서는 해당 구문들의 차이점과 구조에 대한 이해를 할 것이다.

⚙️ if 문은 무엇인가?

영어 어휘에서 의미하는 if 를 이해했을 때 우리는 간단히 자바스크립트의 if 문의 기능에 대한 이해를 할 수 있다.

if 문은 말 그대로 만약에 ~ 면 이라는 조건을 제시하여 해당 조건에 부합하면 true 를 반환하여 작성한 구문을 실행하고, 반대의 경우 이어서 코드를 순차적으로 진행하거나 다른 조건을 다시금 제시하는 등의 흐름을 통제하는 기능을 하는 구문이다.

해당 정의를 이해하면 이어지는 if...else 문법에 대한 사항이나 구조에 대한 이해가 쉽게 될 것이다. 그럼 이어서 if...else 문의 문법에 대해 알아보자.

if...else 문의 문법

if...else 문은 크게 세 가지 단계로 이루어진다.

우선 조건을 제시하고 결과 값이 true 일 경우 구문을 실행하는 if 문, 앞의 조건이 false 인 경우 실행할 내용을 작성하는 else문, 마지막으로 앞의 조건이 false 일 경우 새로운 조건을 제시하는 else if 문이 있다.

해당 부분을 예시 코드로 살펴보자

if (condition1) { // if
	statement1
} else if (condition2) { // else if
	statement2
} else { // else
	statement3
}

위 예시 코드를 보면 조건은 총 2가지가 제시되어 있고, 실행 구문은 3가지가 작성되어 있다.

먼저 if 부터 보면 if 를 작성하고 소괄호(())를 열어 해당 소괄호에 조건(condition1)을 작성한 다음 중괄호({})를 열어 중괄호 안에 구문(statements1)을 작성하는 구조를 갖는다.

이어서 나오는 else if 도 if 와 같은 구조인데, 조건(condition2)을 제시하고 실행 구문(statements2)을 작성했으며 별다른 변화는 확인되지 않는다.

그러나 else 의 경우 조건 부분이 생략된 것을 알 수 있다. 그 이유는 else 문이 앞의 모든 조건들에 부합하지 않는 반대의 경우를 서술하기 때문에 별도로 조건을 작성하지 않아도 되는 것이다.

위 작성 방법은 세 가지 요소를 모두 활용하였을 때 작성할 수 있는 방식이고, else if 와 else 는 필수적인 요소가 아니다. 그렇기 때문에, else if 와 else 가 생략 가능한 경우를 다음의 예시에서 알아보자.

// n이 5 이상인 경우 true를 출력하는 조건문
let n = 3
if (n >= 5) { 
	console.log(true)
}
console.log(`none`) // output : `none`

위 예시의 경우 조건(n >= 5)이 만족하는 경우 true 를 반환하고, 아닌 경우에는 흐름을 이어서 진행하며 if 문 밖의 console.log() 를 실행하여 none 을 출력한다. 이렇게 반대의 경우를 별도로 규정하지 않아도 되는 경우에는 else 와 else if 를 생략할 수 있다.

또한 else 만을 추가해서도 구문을 작성할 수 있다.

// n이 5 이상인 경우 true를 출력하고, 반대의 경우 false를 출력하는 조건문
let n = 3
if (n >= 5) { 
	console.log(true)
} else {
	console.log(false)
}

이 경우에는 else 문이 n 이 앞 조건의 반대 상황을 의미하기 때문에 n >= 5 인 조건에 부적합한 모든 경우의 수들이 이에 해당하는 것이다.

여기서 알아야 할 점은 n >= 5 의 반대가 n < 5 만을 의미하는 것이 아님을 알아야 한다.

반대의 경우에는 숫자가 아닌 경우(NaN), 값이 정의되지 않은 경우(undefined), 값이 의도적으로 비어있는 경우(null) 등을 포함하기 때문에, 조건의 의도가 n < 5 이었다면 추가적으로 조건을 제시해야 할 것이다.

만약 해당 경우 코드를 이런 식으로 수정할 수 있다.

let n = NaN // n이 숫자 범위가 아닌 상황들을 else로 제시
if (n >= 5) { 
	console.log(true)
} else if (n < 5) {
	console.log(false)
} else {
	console.log('is Not a Number')
}

해당 코드는 위에서 언급했던 나머지 경우들에 대해 else 를 통해 일괄적으로 정의했고, 앞에 else if 를 추가하여 n < 5 에 대한 조건을 제시하였다.

알고리즘을 작성하다 보면 조건에 대한 명확한 제시가 되지 않아, 난 정확하게 입력한 것 같은데 예외의 경우에 걸려 답안과 일치하지 않는 상황이 발생하기도 한다. 그렇기 때문에, 조건이 명확하게 어떤 바를 의미하는 지에 대한 이해를 명확히 하고 적절하게 구문을 사용하여야 한다.

💡 if 와 else if 만을 사용하는 것

해당 경우에도 위와 마찬가지라고 생각한다.

let n = NaN
if (n >= 5) { 
	console.log(true)
} else if (n < 5) {
  console.log(false)
}
console.log('else') // output : 'else'

위 코드를 보면 변수 n 이 NaN 이기에 결과적으로 'else' 라는 결과 값을 반환한다.

이렇게 코드 진행이 이어지게 하는 것이 의도 된 경우라면 상관이 없지만, 만약 숫자가 아닌 결과를 오류로 간주하고 진행을 제어해야 하는 상황이라면 이는 문제가 될 수 있다.

조건문에서 자신이 생각한 의도와 코드에 작성된 의도가 명확히 일치해야 발생할 수 있는 오류를 최소한으로 할 수 있다고 생각한다.

그렇기에 위 코드의 경우에도 그 의도를 명확히 함이 중요하다고 생각한다.

이렇게 if...else 의 문법에 대해 알아보았고, 그렇다면 실제로 이 구문이 어떻게 작동하는 지에 대해 알아보자.

if...else 문의 흐름

if...else 의 흐름에 대해서 알아보기 전에, 앞에서 제시한 예시 코드를 일부 변형한 것을 살펴 보면서 알아보자.

let n = 3
if (n >= 5) { 
	console.log('n >= 5')
} else if (n < 5) {
	console.log('n < 5')
} else if (n === 3) {
  console.log(n)
} else {
	console.log('is Not a Number')
} // output : 'n < 5'

조건문의 흐름은 조건 일치 여부에 따라 그 흐름이 결정되는 것은 이미 다 알고 있을 것이다.

위 경우 변수 n 에 3 이라는 값이 할당되었고, 결과는 3 을 출력할 것 같지만 'n < 5' 를 출력하는 결과를 알 수 있다.

만약 의도한 출력 값이 3 이라면 이는 오류를 출력하지 않지만 문제가 있는 구문이다.

이는 앞의 else if 조건에서 제시된 n > 5 라는 조건이 다음의 n === 3 이라는 조건을 포함하는 조건이었기에, 3 이라는 값을 저장한 변수 n 은 앞의 조건에 대해 true 를 반환하였고 그 시점에서 결과 값을 출력한 것이다.

이를 의도한 바가 우선적으로 3 일 경우를 찾기 위함이라면 다음과 같이 수정할 수 있다.

let n = 3
if (n === 3) { 
	console.log(n)
} else if (n < 5) {
	console.log('n < 5')
} else if (n >= 5) {
  console.log('n >= 5')
} else {
	console.log('is Not a Number')
} // output : 3

이렇게 수정한 결과는 올바르게 3 이라는 값을 반환하는 것을 알 수 있다.

이렇게 조건문의 흐름은 우선적으로 작성된 조건에서 멈추면 뒤 조건들은 검증할 기회가 주어지지 않기 때문에 조건의 순서를 정확하게 하여 올바른 결과를 도출하도록 해야 한다.

이어서 switch 문에 대한 내용을 간단하게 알아보고 if 와 어떤 차이점이 있는지에 대한 내용을 알아보자.

🔄 switch 문은 무엇인가

우선 switch 문도 제어문의 일부이며 조건문에 포함된다.

switch 문을 간단하게 표현하자면 단순한 복수의 if 문을 표현하는 구문이라고도 표현된다. 이 말이 어떤 의미를 갖는 지 switch 문의 문법을 설명하면서 함께 알아보자.

switch 문의 문법과 기능

switch 문은 다음과 같은 문법을 갖는다.

switch (x) {
  case 'value1':  // if (x === 'value1')
    ...
    statement1
    
  case 'value2':  // if (x === 'value2')
    ...
    statement2

  default: // else
    ...
    statement3
}

언뜻 보면 if 문과 비슷하지만, 조건에서 소괄호(())가 없다는 점과 실행 구문에서 중괄호({})를 사용하지 않고 콜론(:)을 사용한다는 점에서 문법적인 요소의 차이를 보여준다.

그리고 switch 문의 경우에는 if 가 아닌 case 문을 통해 일치 여부를 구분하고, else 대신 default 문을 통해 반대의 경우를 출력하거나 반환한다.

또한 기능적인 부분에서도 차이가 존재하는데, if 의 경우에는 조건 지정의 자유도가 높지만, switch 문의 경우에는 일치 여부만 판별할 수 있기 때문에 단순한 조건만 제시할 수 있음을 알 수 있다.

이러한 switch 문은 범위나 복잡한 조건을 제시할 경우에는 사용할 수 없지만, 단순히 일치 여부만 판단해야 하는 if 문이 반복되는 경우를 대체할 수 있다.

🔖 출처

switch 문 : JAVASCRIPT.INFO : switch문

💡 switch 문, 언제 작성해야 할까?

switch 문과 if...else 문의 차이점은 탐색하고자 하는 데이터에 접근하는 방식에서 차이를 보이는 것으로 이해했다.

정확한 내용은 CS에 대한 내용이고, 아직 CS가 부족한 본인에게 완벽한 이해가 되지 않기에 최대한 간단하게 해석하여 작성한다.

간단하게 말하자면, if...else 문의 경우 조건에 만족하는 지를 구분하여 순차적으로 판단하는 반면에, switch 문의 경우 입력 값에 해당하는 점프 테이블의 위치로 jump 하는 방식을 채택한다.

그렇기에, 점프 테이블을 별도로 만들지 않지만 특정 데이터를 찾기 위해 구분하는 과정(조건 구분)이 지속적으로 존재하는 if...else 문의 경우 조건의 수가 적을 수록 유리하다.

반대로 구분하는 과정이 대입 값이 무엇인지만 확인하지만, 점프 테이블을 만드는 과정이 필요한 switch 문의 경우 조건의 수가 많을수록 유리하다.

당연히도 해당 내용은 if...else 와 switch 둘 다 사용할 수 있는 경우에 해당한다! 😆

🔖 출처

if...else vs switch : THINK-PRO BLOG : switch문과 if문의 성능 비교 (ISA 관점에서)

🔖 전체적인 참고

MDN Web Docs : if...else
MDN Web Docs : switch