Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
Tags
- LIST
- learning
- error
- java
- Linux
- 인공지능
- Server
- framework
- Github
- Numpy
- data
- 함수
- mariaDB
- DeepLearning
- Web
- interface
- Spring
- centos
- ai
- Analysis
- git
- javascript
- Deep
- SSH
- Pattern
- 자바
- db
- Python
- mysql
- Security
Archives
- Today
- Total
PostIT
[JavaScript]Javascript에서 사용하면 좋은 Array Method - Some 본문
Script/JavaScript
[JavaScript]Javascript에서 사용하면 좋은 Array Method - Some
shun10114 2017. 12. 11. 14:51Javascript의 Some이란?
JavaScript를 사용하여 과제 중 Some을 통해 어려움을 해결할 수 있었습니다.
forEach를 사용하면 list 안의 유효성 검사를 하고 문제가 생길 시 return하는 부분에 대한 불완전성이 있었습니다. 하지만, Array의 Some을 사용하여 이를 해결할 수 있었습니다.
과제의 내용은 react와 비슷한 mithril 과제였습니다. 참고자료는 Mithril JS Example 에서 보실 수 있습니다.
- Some이란?
- 배열의 모든 요소에 대해 지정된 콜백 함수가 true를 반환하는지 여부를 결정합니다.
- 설명
- callbackfn 함수가 true를 반환할 때까지 some 메서드는 각 배열 요소에 대해 오름차순 인덱스 순서로 callbackfn 함수를 호출합니다. callbackfn에서 true를 반환하게 하는 요소가 있으면 some 메서드는 즉시 true를 반환합니다.콜백이 모든 요소에 대해 true를 반환하지 않으면 some 메서드가 false를 반환합니다.
- 문법?
array1.some(callbackfn[, thisArg])
array1
- 필수 사항 Array 개체입니다.
callbackfn
- 필수 사항 최대 3개까지 인수를 허용하는 함수입니다. some 메서드는 callbackfn에서 true를 반환하거나 배열이 끝날 때까지 array1의 각 요소에 대해 callbackfn 함수를 호출합니다.
thisArg
- 선택 사항입니다. this 키워드가 callbackfn 함수에서 참조할 수 있는 개체입니다. thisArg가 생략되면 undefined가 this로 사용됩니다.
반환 값
- callbackfn 함수가 배열 요소에 대해 true를 반환할 경우 true이고 그렇지 않으면 false입니다.
예외
- callbackfn 인수가 함수 개체가 아닌 경우 TypeError예외가 throw됩니다.
- 간단한 예제를 살펴보면 쉽습니다. 저는 userForm 함수를 통해 JSX로 해당 DOM을 그렸습니다. userForm 함수 안에는 userFormModel이란 객체가 존재하는데, 해당 객체를 이용하면, Dom의 Attribute 값을 지정하여 DOM 쉽게 그릴 수 있습니다.
- 문제는 해당 값들에 validate() 함수를 갖고 있습니다. 이 함수가 모두
true
여야지만 Submit이 가능하게끔 만들어줘야 했습니다. 이를 해결하기 위해서 Array.Some(callBackFn () => {})을 사용하였습니다. 해당 객체 안에 false가 존재한다면 해당 list를 멈추고 해당 부분의 유효성 문제를 return 시켜주는 것이죠.
// When bool is false, this have a error.
const commonFormCtrl = {
validateAll(model): boolean {
let bool = true
Object.keys(model).some((field) => {
bool = model[field].validate()
return bool === false
})
return bool
}
}
function userForm() {
const userFormModel = {
nicknameField: {
type: 'text',
value: stream(''),
placeholder: 'Nickname',
errorMsg: '',
validate(): boolean {
let bool = commonCtrl.isNickname(this.value())
this.errorMsg = bool ?
UserForm.methods().isNicknameDuplicated(userFormModel.nicknameField.value()) ? '' : 'Already this nickname is registered.'
: 'Enter a 4~20 characters and Use digits and alphabets'
return this.errorMsg.length === 0
}
},
emailField: {
type: 'email',
value: stream(''),
placeholder: 'Email ',
errorMsg: '',
validate(): boolean {
let bool = this.value().length < 1
this.errorMsg = bool ? 'Require a Email' : ''
return this.errorMsg.length === 0
}
}
}
}
Reference
'Script > JavaScript' 카테고리의 다른 글
[HTML/JavaScript] Html의 이벤트 종류들 (0) | 2017.07.11 |
---|---|
[Javascript/File] Html5에서 File Upload 전에 파일 정보 체크하기 (0) | 2017.03.29 |
[Javascript/Request] Get URI, Protocol, Host in Javacsript(자바스크립트) (0) | 2017.03.08 |
[Javascript/Ajax] JavaScript에서의 변수 담아내기 - async(동기 Ajax) (0) | 2017.03.06 |
[Javascript/Object] 자바스크립트에서의 상속 - Object.create()에 설명 (0) | 2017.02.14 |
Comments