본문 바로가기

코딩/Javascript

자바스크립트 - 배열의 모든 요소가 조건문을 통과하는지 확인하기 (every() 함수)

반응형

[100, 300, 50, 400, 20]이라는 배열이 존재할 때, 아래 같은 결과를 내고 싶은 함수가 필요하다

모든 요소가 30을 넘기면 true를 반환, 그러지 않으면 (요소 한 개라도 30을 넘기지 못하면) false를 반환.

이런 경우 every() 함수가 사용하면 간결하게 코드를 짤 수 있다.

 

 

const nums = [1, 2, 3];

console.log(nums.every()); // TypeError: undefined is not a function

every() 함수에 반드시 함수를 인수로 넣어야 한다 그렇지 않으면 에러가 발생한다.

 

 

 

const nums = [1, 2, 3];

console.log(nums.every(function a(num){
	return num > 0;
})); // true

a()라는 함수의 이름은 아무 이름이어도 되고 이름이 없는 익명 함수여도 된다, 예: function (element) { ... }

 

위에 코드가 실행되는 원리:

1. every() 함수는 a() 함수에 현재 배열의 요소를 인수로 넣고 호출한다 (첫 호출된 a() 함수엔 첫 배열의 요소인 1을 넣는다).

3. a() 함수는 num이라는 매개변수의 값을 0과 비교하고, num의 값이 0보다 높으면 true를 반환한다 (첫 호출된 a() 함수에 num 값은 1).

4. every() 함수는 배열의 요소 숫자만큼 a() 함수를 반복 호출한다, 이때 a() 함수에 넣는 인수는 현재 배열의 요소의 다음 요소다.

4. 최종적으로 호출된 모든 a() 함수가 true를 반환하면 every() 함수도 true를 반환한다 그러지 않으면 false를 반환한다.

 

 

 

const nums = [1, 2, 3];

console.log(nums.every(num => num > 0)); // true

이 코드는 위에 코드와 동일하게 작동되는 코드지만 화살표 함수를 활용해 코드가 간결하다.

 

 

 

const nums = [1, 2, 3];

function isOverZero(num) {
	return num > 0;	
}

console.log(nums.every(isOverZero)); // true

동일한 코드지만 마지막 코드 줄은 마치 인간의 언어 같다, 해석하자면 콘솔 창.기록하다(숫자들.모든(0보다 크다));.

 

 

 

const nums = [1, 2, 3];

console.log(nums.every((num, idx, arr) => {
	console.log(num, idx, arr);
	return true;

	// 1 0 [ 1, 2, 3 ]
	// 2 1 [ 1, 2, 3 ]
	// 3 2 [ 1, 2, 3 ]
})); // true

every() 함수 사용 시, 배열의 요소 외에 현재 요소의 인덱스 그리고 배열 전체도 접근할 수 있다.

마지막에 return true; 줄이 존재하는 이유는, every() 함수 속의 함수가 false를 반환 시, every() 함수는 즉시 종료하기 때문이다.

 

return true; 줄을 삭제하고 위에 코드를 실행하면 배열의 모든 요소를 접근도 못하고 첫 요소만 접근했다는 걸 증명하는 1 0 [ 1, 2, 3 ]만 출력된다.

 

 

 

 

 

 

 

 

 

반응형