[ JS ] 모든 input태그가 채워져야만 submit 버튼 활성화 (with 객체)

방충림·2023년 4월 6일
4

Code Repository

목록 보기
7/8
post-thumbnail

구현하고자 하는 기능

객체의 모든 키의 값이 ""(빈 문자열)이 아닐 경우에만 어떠한 동작을 실행해야하는 경우가 있다.
가령 회원가입 시 모든 정보가 작성되어만 완료 버튼이 활성화 되는 경우가 이에 해당한다.


거두절미하고 코드는 아래와 같다.

로직

다음은 주어진 객체의 모든 키의 값이 ""(빈 문자열)이 아닌 경우 true를, 그렇지 않은 경우 false를 반환하는 삼항 연산자다.

Copy code
const obj = { /* 객체 */ };
const allValuesNotEmpty = Object.values(obj).every(val => val !== "");

const result = allValuesNotEmpty ? true : false;

위 코드에서 Object.values(obj)를 사용하여 객체의 값(value)들을 배열로 변환하고, every() 메서드를 사용하여 배열의 모든 요소가 ""(빈 문자열)이 아닌지 확인한다. every() 메서드는 모든 요소가 주어진 조건을 만족하면 true를 반환한다.

마지막으로, 삼항 연산자를 사용하여 allValuesNotEmpty 변수가 true인 경우 true를 반환하고, 그렇지 않은 경우 false를 반환한다. 따라서 result 변수에는 true 또는 false가 할당된다.

결과화면


+ 추가 내용

모든 값말고 일부 값은 비워도 되도록 예외를 둘 순 없을까?

특정 프로퍼티는 빈칸이어도 true를 반환하도록 하고싶은데 코드를 어떻게해야할까?
예를들어 아래와 같은 객체가 있을 때, pwd와 pwdCheck는 비워져 있을 때에도 ture값을 반환하게 만들고 싶다. 가능할까?

const sessionUserInfo = {
answer: "서울",
birth: "91333",
createdAt: "2023-04-07T12:06:33.000Z",
email: "hhb1331@naver.com",
emailDomains: "@naver.com",
emailId: "hhb1331",
gender: "남성",
id: "bcl0206",
name: "임꺽정",
no: 1,
phone: "01042221244",
quiz: "hometown",
updatedAt: "2023-04-07T12:06:33.000Z",
pwd: "",
pwdCheck: "",
}

가능하다 다음같이 코드를 작성하면 된다.

const allValuesNotEmptyExceptPwd = Object.entries(sessionUserInfo).filter(
  ([key]) => key !== "pwd" && key !== "pwdCheck"
).every(([key, val]) => val !== "");

Object.entries(sessionUserInfo)sessionUserInfo 객체의 프로퍼티와 값을 [key, value] 형태의 배열로 반환한다.

.filter(([key]) => key !== "pwd" && key !== "pwdCheck")"pwd""pwdCheck" 프로퍼티를 제외한 나머지 프로퍼티를 선택한다.

.every(([key, val]) => val !== "")는 선택된 프로퍼티의 값이 모두 비어있지 않은지 검사한다.

따라서, 위의 코드에서 allValuesNotEmptyExceptPwd 변수는 "pwd""pwdCheck" 프로퍼티를 제외한 모든 프로퍼티의 값이 비어있지 않으면 true를 반환하고, 그렇지 않으면 false를 반환한다.

참고

위 코드에서 사용된 ([key])는 배열 디스트럭처링 구문으로, 객체의 속성을 배열 형태로 분해할 때 사용된다.

예를 들어, 객체 person이 다음과 같다고 가정해보자.

const person = {
  name: "HHB",
  age: 28,
  occupation: "Programmer"
};

Object.entries를 사용하면, person 객체의 key-value 쌍을 각각 배열로 반환한다.

Object.entries(person);
// [ ["name", "John"], ["age", 30], ["occupation", "Programmer"] ]

이 때, [key]는 각 배열의 첫 번째 요소인 속성 이름을 의미한다.
따라서 ([key]) => key !== "pwd" && key !== "pwdCheck"는 객체에서 pwdpwdCheck 속성을 제외하고 나머지 속성들에 대해서만 every 함수를 적용하기 위한 필터링 역할을 한다.

비밀번호는 바꾸고 싶을 때만 입력하면 되도록, 빈칸의 되는 것을 허용해두었다 ㅎㅎ

profile
최선이 반복되면 최고가 된다.

0개의 댓글