[JavaScript]if문 간결화

if...else문은 JavaScript뿐만 아니라 모든 프로그래밍 언어에 존재합니다. if...else문이 안 좋은 문법은 아니지만, 남발해서 사용한다면 코드의 가독성을 저하시키는 단점이 있습니다.

 

이번 포스팅에서는 JavaScript에서 if...else문을 심플하게 작성할 수 있는 방법들을 소개합니다.

---

삼항 조건 연산자로 if...else문 한 줄로 처리

삼항 연산자( ? : )를 사용하여 if...else문을 한 줄로 작성할 수 있습니다.

// if...else문
if (num === 10) {
  return true;
} else {
  return false;
}

// 삼항 연산자
num === 10 ? true : false;

삼항 연산자는 사용 방법은 다음과 같습니다.

조건문 ? true인 경우 실행할 표현식 : false인 경우 실행할 표현식

물음표( ? ) 뒤에 있는 조건문이 true인 경우 콜론( : ) 뒤에 있는 표현식이 반환되며, 조건문이 false인 경우 콜론( : ) 앞에 있는 표현식이 반환됩니다. 만약, 표현식이 함수라면 해당 함수가 실행됩니다.

---

if문에서 여러 값을 체크하는 경우

다음과 같이 if문 내부에서 OR 연산자( || )를 사용하여 변수의 값을 체크하는 경우가 있습니다.

if (code === 'A' || code === 'B' || code === 'C' || code === 'D') {
  console.log('true');
}

체크해야 하는 값이 많아질수록 코드가 길어지고 가독성이 저하됩니다. 위 코드는 배열의 includes() 함수를 사용하여 코드를 간결하게 작성할 수 있습니다.

if (['A', 'B', 'C', 'D'].includes(code)) {
  console.log('true');
}

includes() 함수는 배열에 특정 값이 포함 여부에 따라 불리언 값을 반환합니다.

 

위에서 작성한 예제에서 배열을 변수로 정의한다면 if문을 더 간결하게 작성할 수 있습니다.

let codeCheckList = ['A', 'B', 'C', 'D'];

if (codeCheckList.includes(code)) {
  console.log('true');
}

반응형

---

배열에 특정 값이 있다면 true를 반환

배열에 특정 값이 있는지 확인하기 위해 for문과 if문을 사용할 수 있습니다. 다음은 배열을 순회하여 10이라는 값을 가지면 true를 반환하는 예제입니다.

for (let loop = 0; loop < arr.length; loop++) { 
  if (arr[loop] === 10) {
    return true; 
  }
}

위 예제는 나쁜 방법은 아니지만 배열의 some() 함수를 사용한다면 위 예제를 한 줄로 작성할 수 있습니다.

let check = arr.some(item => item === 10);

some() 함수는 배열을 순회하여 조건을 만족하면, 순회를 즉시 중단하고 true를 반환합니다. 조건을 만족하는 값이 없다면 false를 반환합니다.

---

중첩된 객체의 속성을 체크하는 경우

중첩된 객체의 속성을 체크하는 경우 속성이 존재할 수도 있고 존재하지 않을 수 있습니다.

let obj = {
}

if (obj && obj.name && obj.name.firstName) {
  console.log('true');
}

위 예제는 obj.name.firstName을 체크하기 위해 obj를 체크하고 obj.name을 체크합니다. 객체가 여러 번 중첩되었다면 if문 내부에 작성된 코드는 더 길어질 수 있습니다.

 

다음과 같이 옵셔널 체이닝( ?. )을 사용한다면, 위 예제를 간단하게 작성할 수 있습니다.

let obj = {
}

if (obj?.name?.firstName) {
  console.log('true');
}

---

불필요한 else문 제거

다음 예제는 else문에서 null을 반환합니다.

let netedIfElse = (value) => {
  if (typeof value === "string") {
    if (value === "10") {
      return true;
    } else {
      return null;
    }
  } else {
    return null;
  }
}

조건을 만족하지 않으면, 어쨌든 null을 반환하므로 다음과 같이 else문을 생략할 수 있습니다.

let netedIfElse = (value) => {
  if (typeof value === "string") {
    if (value === "10") {
      return true;
    }
  } 
  return null;
}

---

if...else문을 객체로 처리

다음은 if...else문을 사용하여 값을 체크하는 예제입니다.

if ( value === 'A') {
  return 'string A';
} else if ( value === 'B') {
  return 'string B';
} else if ( value === 'C') {
  return 'string C';
} else if ( value === 'D') {
  return 'string D';
} else if ( value === 'E') {
  return 'string E';
}

위 예제는 나쁜 방식은 아니지만, 조건문이 많아질수록 코드가 길어진다는 단점이 존재합니다. 'A'인 경우 'string A'를 반환하며 'B'인 경우 'string B'를 반환한다면, 객체의 Key-Value 구조를 사용하여 코드를 단순하게 작성할 수 있습니다.

let valueCheck = {
  'A': 'string A',
  'B': 'string B',
  'C': 'string C',
  'D': 'string D',
  'E': 'string E'
}

let value = 'A';
let returnValue = valueCheck[value];