[js] 코드 최적화 - 반복문(for-of, for-in), 조건문(if문, switch문)

[js] iterable객체의 반복문, if문, switch문의 코드 최적화 방법 (클린코드)

 

* iterable 객체란?

2023.02.18 - [언어/Javascript,TypeScript] - [js] iterable 객체, Array.from

[js] iterable 객체, Array.from

 

1. iterable객체의 반복문

배열과 객체의 내부에 접근할 때 단순 for문을 사용하는 것을 지양하고 자바스크립트에 기본 내장되어 있는  for..of,  or..in문을 사용하면 명확하게 코드를 짤 수 있다.

 

1-1. 배열은 for..of 문을 사용한다.

const arr = ['A', 'B', 'C', 'D', 'E'];

for (let i = 0; i < arr.length; i++) {
  const element = arr[i];
  console.log('1', element)
}

// 위 코드를 아래와 같이 변경해도 동일하게 동작한다.
for (const element of arr) {
  console.log('2', element)
}

출력값

1 A
1 B
1 C
1 D
1 E
2 A
2 B
2 C
2 D
2 E

 

1-2. 객체는 for..in 문을 사용한다.

const obj = {
  KEY1: "VALUE1",
  KEY2: "VALUE2",
  KEY3: "VALUE3",
};

const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
  const key = keys[i];
  const value = obj[key];
  console.log(value);
}

// 위 코드를 아래와 같이 변경해도 동일하게 동작한다.
for (const key in obj) {
  const value = obj[key];
  console.log(value);
}

출력값

1 = VALUE1
1 = VALUE2
1 = VALUE3
2 = VALUE1
2 = VALUE2
2 = VALUE3

 

2. switch문, if문과 같은 조건문

switch문이나 조건문 if문과 || 연산자를 조합해서 사용할 수도 있다.

하지만 switch문은 json형태의 객체로 구성하여 접근하는 방식, if문은 배열과 include와 같은 함수를 사용하여 아래와 같이 구현하는것이 명확하게 코드를 짤 수 있다.

 

2-1 switch 문(오늘 요일의 숫자(0~6) 비교해서 문자열로 출력)

const dayNumber = new Date().getDay();

let day;
switch (dayNumber) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}
console.log('1 = ', day);

// 위 코드를 아래와 같이 변경해도 동일하게 동작한다.
const days = {
  0: "Sunday",
  1: "Monday",
  2: "Tuesday",
  3: "Wednesday",
  4: "Thursday",
  5: "Friday",
  6: "Saturday",
};
day = days[dayNumber];
console.log('2 = ', day);

출력값 (글 발행일 기준, 화요일)

1 = Tuesday
2 = Tuesday

 

2-2 if 문(문자열 동등비교)

const isFruit = (fruit) => {
  if (
    fruit === "apple" ||
    fruit === "banana" ||
    fruit === "grape" ||
    fruit === "lemon" ||
    fruit === "orange"
  ) {
    return true;
  }
  return false;
};

// 위 코드를 아래와 같이 변경해도 동일하게 동작한다.
const isFruit2= (fruit) =>
  ["apple", "banana", "grape", "lemon", "orange"].includes(fruit);

console.log(isFruit("apple"));
console.log(isFruit2("apple"));

출력값

true
true