웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트의 배열에 사용되는 많은 메소드 중에서 every()에 대하여 알아봅니다.
# 자바스크립트 배열 메소드 every()
배열에 사용하는 every() 메소드는 ES 5에 추가되었으며 대부분의 브라우저에서 지원됩니다. every()는 배열에 사용하는데 배열이 가진 모두 값을 검증하여 그 결과를 불리언인 true/false로 반환할 수 있습니다. 예를들어 배열의 값이 특정 값보다 큰지 아닌지를 알아보거나 짝수인지 홀수인지도 확인할 수 있습니다. 그럼 간단한 문법을 알아봅니다.
Array.every(function, this[option])
간단한 문법은 위와 같으며 함수와 this 값을 인자로 받습니다. 필수값인 함수의 경우는 아래와 같은 값들을 사용하게 됩니다.
function(currentValue, index, array) {
}
}
* fuction에 사용되는 인자 값들
currentValue [Required] // 현재 순서의 배열값
index [Optional] // 현재의 인덱스 값
array [Optional] // 모든 배열의 값
위와 같이 현재 값 이 외에는 모두 Optional로 필수값이 아닙니다. 추가로 필요한 경우 this 값을 지정할 수 있습니다.
앞에도 설명했지만 every() 메소드는 배열의 모든 값이 조건에 true/ false 여부를 확인하여 boolean으로 반환하는 기능을 수행합니다. 그러므로 함수는 항상 값을 반환하는 조건이 필요합니다.
function() {
return condition
}
return condition
}
! 자바스크립트 every() 함수 예제보기
간단한 예제를 만들고 알아보도록 하겠습니다. 아래의 두 가지 예제는 각각 every()를 사용하여 배열의 값에 특정 조건을 검증하고자 합니다.
예제 1) 특정 숫자보다 크거나 작은지 알아내기
특정 값보다 큰지 안 큰지 알아보기 위해서 변수 test를 만들고 아래와 같이 실행해보았으며 결과는 다음과 같습니다.
test = [1, 2, 3]
test.every((i) => { return i > 0; })
test.every((i) => { return i > -1; })
// Result
모두 true
test.every((i) => { return i > 0; })
test.every((i) => { return i > -1; })
// Result
모두 true
위 예제들은 모두 0, -1 보다 크므로 조건에 만족하게됩니다. 그래서 true를 반환합니다. 만약 조건에 부합하지 않는 아래의 경우들은 false를 반환합니다.
test.every((i) => { return i > 1; })
test.every((i) => { return i > 2; })
test.every((i) => { return i > 3; })
// Result
모두 false
test.every((i) => { return i > 2; })
test.every((i) => { return i > 3; })
// Result
모두 false
예제 2) 배열 값에 음수가 있는지 확인하기
이번 예제는 만약 값에 음수가 포함되어 있는지 알아보기 위해서 코드를 작성하였습니다. 0보다 작다면 음수값을 가졌을 거라 예상할 수 있겠습니다.
test = [1 , 0, 10, -2]
test.every((i) => { return i < 0; })
// Result
true
test.every((i) => { return i < 0; })
// Result
true
위 결과는 배열 test에 -2인 음수가 포함되었으므로 true를 반환하게 됩니다.
여기까지 배열의 내장함수, 메소드인 every()에 대하여 간략하게 알아보았습니다.
특정 엘리먼트로 스크롤을 천천히 이동시키는 방법, scrollIntoView smooth
해당 카테고리 최신 글
