본문 바로가기
JavaScript & TypeScript

JavaScript의 내장함수 - every()

by 대박플머 2024. 10. 12.

JavaScript의 every 함수는 배열 내 모든 요소가 특정 조건을 만족하는지 검사할 때 사용되는 유용한 고차 함수입니다. 이 글에서는 every 함수의 개념, 작동 방식, 적절한 사용 예시, 그리고 실제 프로젝트에서 유용한 활용법을 설명합니다.

1. every 함수란?

every 함수는 배열의 모든 요소가 주어진 조건을 만족하는지 검사합니다. 검사하는 과정에서 하나라도 조건을 만족하지 않으면 false를 반환하고, 모든 요소가 조건을 만족하면 true를 반환합니다.

const isAllPositive = [1, 2, 3, 4].every((num) => num > 0);
console.log(isAllPositive); // true

위의 예시에서 모든 요소가 0보다 크므로 every 함수는 true를 반환합니다.

2. every 함수의 문법

every 함수의 기본 문법은 아래와 같습니다.

arr.every(callback(element[, index[, array]])[, thisArg])
  • callback: 배열의 각 요소에 대해 실행되는 함수로, 조건을 확인합니다. 이 함수는 최대 세 개의 인수를 받을 수 있습니다.
    • element: 배열에서 현재 처리되고 있는 요소
    • index (선택): 현재 요소의 인덱스
    • array (선택): 호출된 배열 자체
  • thisArg (선택): callback 함수 내에서 this로 사용할 값

3. every 함수의 특징

  • 배열의 모든 요소가 callback 함수의 조건을 만족할 때 true를 반환합니다.
  • 첫 번째로 조건을 만족하지 않는 요소를 만나면 즉시 false를 반환하며, 이후 요소는 더 이상 검사하지 않습니다. 이는 성능 측면에서 유리합니다.
  • 빈 배열에 every 함수를 호출하면 무조건 true를 반환합니다. 이는 논리적으로 모든 요소가 조건을 만족한다고 간주되기 때문입니다.
console.log([].every((num) => num > 0)); // true

4. every 함수의 예시

(1) 모든 숫자가 짝수인지 확인하기

배열 내 모든 숫자가 짝수인지 확인하는 예제입니다.

const numbers = [2, 4, 6, 8];
const allEven = numbers.every((num) => num % 2 === 0);
console.log(allEven); // true

이 예시에서는 모든 숫자가 짝수이므로 every 함수는 true를 반환합니다.

(2) 문자열의 모든 요소가 특정 길이 이상인지 확인하기

다음은 배열의 모든 문자열이 최소 5자 이상인지 확인하는 예제입니다.

const words = ["hello", "world", "javascript", "coding"];
const minLength = words.every((word) => word.length >= 5);
console.log(minLength); // true

이 예제에서는 모든 단어의 길이가 5자 이상이므로 true를 반환합니다.

(3) 객체 배열의 모든 객체가 특정 조건을 만족하는지 확인하기

객체 배열을 다룰 때 every 함수를 사용하여 모든 객체가 특정 속성을 가지고 있는지 확인할 수 있습니다.

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 35 },
];

const allAdults = users.every((user) => user.age >= 18);
console.log(allAdults); // true

이 예시에서는 모든 사용자의 나이가 18세 이상이므로 every 함수는 true를 반환합니다.

(4) 부분적인 조건 만족 확인

every는 조건을 만족하지 않는 요소가 하나라도 있으면 바로 false를 반환하는데, 이를 이용해 유효성 검사를 간편하게 할 수 있습니다.

const numbers = [10, 20, 30, -40];
const allPositive = numbers.every((num) => num > 0);
console.log(allPositive); // false

위 예시에서는 -40이 음수이기 때문에 false가 반환됩니다.

5. 실전에서의 활용

(1) 배열의 유효성 검사

폼 데이터를 다룰 때, 모든 필드가 올바르게 입력되었는지 확인하는 데 every를 사용할 수 있습니다.

const formFields = [
  { name: "email", value: "user@example.com", valid: true },
  { name: "password", value: "pass1234", valid: true },
  { name: "age", value: "", valid: false },
];

const allValid = formFields.every((field) => field.valid);
console.log(allValid); // false

위의 예시에서 한 필드의 유효성 검사가 실패했으므로 전체 유효성 검사 결과는 false가 됩니다.

(2) API 응답 데이터 검사

API 응답에서 데이터가 예상한 형태로 오는지 검사할 때 every 함수를 사용할 수 있습니다.

const apiResponse = [
  { id: 1, name: "John" },
  { id: 2, name: "Jane" },
  { id: 3, name: "Jack" },
];

const isValidResponse = apiResponse.every((user) => user.id && user.name);
console.log(isValidResponse); // true

이 예시에서는 모든 응답 객체가 idname을 가지고 있으므로 유효한 데이터로 판단됩니다.

6. 성능 고려 사항

every 함수는 첫 번째로 조건을 만족하지 않는 요소를 만나면 그 즉시 실행을 멈추고 false를 반환하므로 성능 측면에서 효율적입니다. 배열의 크기가 크더라도 조건을 빨리 만족하지 않으면 불필요한 요소에 대해 반복하지 않기 때문에 성능 최적화에 유리합니다.

const largeArray = Array(1000000)
  .fill(0)
  .map((_, index) => index);
const result = largeArray.every((num) => num < 1000);
console.log(result); // false

위의 예시에서는 첫 번째로 1000 이상의 숫자를 만났을 때 바로 false를 반환하므로 불필요한 반복이 방지됩니다.

7. 결론

JavaScript의 every 함수는 배열의 모든 요소가 특정 조건을 만족하는지 확인할 때 매우 유용한 도구입니다. 이 함수는 짧고 간결한 문법으로 복잡한 유효성 검사 작업을 쉽게 처리할 수 있으며, 조건을 만족하지 않는 요소가 있을 때 실행을 즉시 멈춰 성능도 뛰어납니다. 또한 객체 배열을 다루는 실전 코드에서도 쉽게 활용할 수 있어 개발 생산성을 높이는 데 도움이 됩니다.

every 함수는 특히 배열의 데이터가 동일한 형식으로 유지되었는지, 모든 데이터가 특정 규칙을 준수하는지 확인하는 데 적합합니다. 조건이 하나라도 불만족할 경우 결과를 바로 처리할 수 있는 효율성 또한 큰 장점입니다. 실전 프로젝트에서 배열 데이터 유효성 검사나 API 응답 체크 등에 적극 활용할 수 있습니다.