나는 리액트 + 타입스크립트를 학습한 배경을 바탕으로 장바구니 개인 토이 프로젝트를 진행 중이다. 이걸 제작하면서 자바스크립트에서 every라는 함수를 알게 되었다..
// 배열의 모든 요소가 true일때만 true를 반환함
const allChecked = items.every((v) => v); // 전체 선택 상태every는 배열의 모든 요소가 주어진 조건을 만족할 때만 true를 반환하는 메서드다.
위 코드에서는 items 배열이 true/false 값을 담고 있는 체크 상태 배열이라고 가정했을 때, 모든 항목이 선택되었는지 확인하는 데 사용된다.
즉, 배열 안의 값들이 모두 true라면 allChecked는 true가 되어 "전체 선택됨" 상태로 간주할 수 있다.
반대로 하나라도 false가 있다면 every는 즉시 false를 반환하기 때문에, 효율적으로 "전체 선택 여부"를 판별할 수 있는 방법이다.
이걸 활용해서 전체 선택 체크박스를 제어하거나, 일부 항목이 해제되었을 때 전체 선택 체크를 해제하는 등의 로직을 깔끔하게 구현할 수 있다.
단순 반복문보다 직관적이고, 코드도 짧아지는 점이 좋았다. 이걸 알고나니 뭔가 한없이 깊은 우물에 있는 개구리가 나라는 생각이 들었다.
✅ every() 함수 개념
every()는 배열의 모든 요소가 주어진 조건을 만족하면 true를 반환하는 메서드
🧠 사용 예시
const allChecked = items.every((v) => v); 여기서 items는 체크 여부(true / false)를 담은 배열이라고 가정
-
예: [true, true, true] ➝ ✅ true 반환
-
예: [true, false, true] ➝ ❌ false 반환
⚙️ 작동 방식
배열 요소를 앞에서부터 하나씩 검사
조건을 만족하지 않는 요소(false)를 발견하면 ❗ 즉시 false 반환하고 종료
끝까지 모두 통과하면 ✅ true 반환
🛒 장바구니 프로젝트에서의 활용
전체 항목이 선택되었는지 확인할 때 사용
예: 전체 선택 체크박스 상태 판단
💡 장점
👀 가독성 좋음 → 조건 검사 의도가 명확
🔁 반복문보다 코드가 간결
🚀 일부 조건만 봐도 빠르게 중단 가능 → 성능적으로도 이점
