상세 컨텐츠

본문 제목

[ES6] 6) Some, Every

Javascript/ES6

by www_dev 2020. 8. 12. 19:26

본문

# Some

 

개인적으로 진행하고 있는 프로젝트에서 회원가입 필터 기능을 구현하고 있는 중이다.

 

대략적으로 기능을 설명하면,

 

 

( === test ===> 를 통과할 경우 true 반환 )

1)  input [ 아이디 ]  === test ==> 이메일 정규식  

2)  input [ 닉네임 ]  === test ==> 4글자 이상

3)  input [ 비밀번호 ]  === test ==> 비밀번호 정규식(영문, 숫자, 특수문자 포함 8 ~ 16자)

4)  input [ 비밀번호 확인 ]  === test ==> 위 비밀번호와 일치여부

 

 

네 가지의 사용자 입력창이 있고 최종적으로 [회원가입 완료] 버튼을 누를 때, 위 네 가지 통과기준에 하나라도 부합하지 않을 경우 회원가입을 못하게 처리를 했어야 됬다.

 

 

그래서 이에 적합한 Javascript 메서드로써, some( )을 이용할 수 있다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/some

 

Array.prototype.some()

some() 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트합니다.

developer.mozilla.org

 

 

아래 코드를 일단 보자.

 

위 코드를 보게 되면

하나라도 some( ) 내부에 정의한 조건에 걸리게 되면, true 값을 리턴한다. 

 

 

 

조금 더 응용해서, 어떤 값이 기준을 통과 못했는지 알 수 있게,

Array의 속성을 잘 이용한다면 위와 같은 사례 말고도,

다양하게 본인이 원하는 값을 some( )을 통해 뽑아 낼 수 있을 것 같다.

 

 

 

 

+ 번외편 indexOf( )

 

 

아무튼 some( )을 통해,

배열 내부 요소들을, 자신이 정의한 조건에 따라 검출할 수 있다는 것으로 마무리 지으면 될 듯 하다.

 

그렇다면 some의 반대 뜻이 될 수 있는 every 는 어떻게 사용하는지 한번 보자.

 

 

 

 

# Every

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/every

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/every

 

Array.prototype.every()

every() 메서드는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트합니다.

developer.mozilla.org

 

정리하자면,

every( )를 통해 본인이 정의한 조건을 모두 만족할 경우 true를 반환, 

하나라도 만족하지 않을 경우 false를 반환한다.

 

 

 

아래 코드로 한번 보자.

 

배열 내부의 모든 요소가 'string' 타입인지를 검사하는 코드를 every( )를 통해 작성해봤다.

 

결과로 [2]번 인덱스가 'number' 타입이므로 결과는 false를 반환한다.

 

즉, 내부에 정의한 조건을 모두 만족하지 않는다는 뜻이 되겠다.

 

 

 

 

자 그렇다면, 큼지막하게 some( )과 every( )를 어떻게 다루지는 지 알아보았는데,

 

대체 이걸 씀으로써 어떤 장점이 있는 지 한번 보자.

 

 

우리가 만약 some( )과 every( )라는 것을 모르고, 배열 내부의 요소를 forEach( )를 통해

검사한다고 가정해보자.

 

그러면 아래와 같은 코드가 될 것이다.

 

 

 

위의 forEach( )를 통해서도 충분히 some( )every( )를 써서 구현한 것과 동일한 결과를 나오게 할 수 있다.

 

하지만, 문제점은 forEach( ) 같은 경우 배열 내부의 모든 요소를 '싹 다' 검사한다는 것이다.

 

 

바로 아래와 같이,

이런 식으로 말이다.

 

 

 

아! 그럼 'string' 타입이 아닌 요소를 만났을 때 return 코드를 아래 적어주면 되지 않나? 

 

안된다. 기본적으로 forEach( )는 멈추지 않고 모든 요소를 돌아야 실행이 멈춘다.

조건식 내부에 return을 넣어도 다음 요소를 계속 검색한다.

 

 

 

그렇다면, 일반 for문으로 바꿔서?

그렇게 되면 아래코드 처럼 바꿀 수 있을 것이다.

 

위 코드와 같이,

일반 for문에서 본인이 정의한 조건에 해당되는 경우, break를 통해 반복을 멈출 수는 있다.

 

 

하지만 some( ), every( )는 기본적으로 본인이 정해놓은 조건에 해당되는 요소를 만났을 때,

다음 요소를 검사하지 않고 실행을 멈추게 되어있다.

 

 

 

결론은,

 

굳이 다 배열 내부를 싹다 뒤질 필요 없이,

 

해당하는 조건에 만났을 때 바로 빠져나오면 되는,

 

그런 기능을 구현할 때는 some( ), every( )를 사용하면 된다는 뜻!

 

 

 

 

 

'Javascript > ES6' 카테고리의 다른 글

[ES6] 7) FindIndex  (0) 2020.08.14
[ES6] 5) Map, Filter  (0) 2020.07.20
[ES6] 4) 트리(Tree)  (0) 2020.07.15
[ES6] 3) 큐(Queue) / 스택(Stack)  (0) 2020.07.13
[ES6] 2) Class  (0) 2020.07.09

관련글 더보기

댓글 영역