PostIT

[JavaScript]Javascript에서 사용하면 좋은 Array Method - Some 본문

Script/JavaScript

[JavaScript]Javascript에서 사용하면 좋은 Array Method - Some

shun10114 2017. 12. 11. 14:51

Javascript의 Some이란?

JavaScript를 사용하여 과제 중 Some을 통해 어려움을 해결할 수 있었습니다.
forEach를 사용하면 list 안의 유효성 검사를 하고 문제가 생길 시 return하는 부분에 대한 불완전성이 있었습니다. 하지만, Array의 Some을 사용하여 이를 해결할 수 있었습니다.

과제의 내용은 react와 비슷한 mithril 과제였습니다. 참고자료는 Mithril JS Example 에서 보실 수 있습니다.

  1. Some이란?
  • 배열의 모든 요소에 대해 지정된 콜백 함수가 true를 반환하는지 여부를 결정합니다.
  • 설명
    • callbackfn 함수가 true를 반환할 때까지 some 메서드는 각 배열 요소에 대해 오름차순 인덱스 순서로 callbackfn 함수를 호출합니다. callbackfn에서 true를 반환하게 하는 요소가 있으면 some 메서드는 즉시 true를 반환합니다.콜백이 모든 요소에 대해 true를 반환하지 않으면 some 메서드가 false를 반환합니다.
  1. 문법?
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


Comments