조건문에서 indexOf, includes 활용

JavaScript에서 여러 개의 조건을 나열할 때 아래와 같이 or를 길게 연결해서 사용합니다.

 

const code = data.code;

if (code === 'A'
||  code === 'B'
||  code === 'C'
||  code === 'D'
||  code === 'E') {
	//Do anything
}

보통 현업에서 코드를 길게 쓰다보면 해당 라인이 계속 늘어나게 되면 프로그램도 지저분해지고, 가독성도 떨어지게 됩니다. 이럴 경우 Array.prototype.indexOf나 Array.prototype.includes를 활용하여 코드를 개선해 볼 수 있습니다.

 

Array.prototype.indexOf

이 메소드는 배열에서 해당 요소를 찾을 수 있는 첫 번째 인덱스를 return 하거나, 찾지 못할 경우 -1을 return 합니다.

const code = data.code;
const conditions = ['A', 'B', 'C', 'D', 'E'];

if (conditions.indexOf(code) > -1) {
	//Do anything
}

 

Array.prototype.includes

이 메소드는 배열이 해당 요소를 포함하고 있는지 여부를 boolean 으로 return 합니다.

const code = data.code;
const conditions = ['A', 'B', 'C', 'D', 'E'];

if (conditions.includes(code)) {
	//Do anything
}

 

만약 개발하고 있는 애플리케이션의 지원 범위에 I.E가 포함된다면 indexOf를 사용하면 되고, I.E를 지원할 필요가 없다면 includes 메소드를 일반적으로 사용하면 됩니다.

자세한 브라우저 호환성은 JavaScript MDN 문서를 참고하시면 됩니다.