JavaScript로 이메일·비밀번호 일치 여부 확인하기

문제 상황

소셜 네트워킹 플랫폼의 수많은 사용자 중 두 명의 로그인 정보를 담고 있는 다음과 같은 더미(dummy) 배열이 있다고 가정해 보겠습니다.

const array = [{
    email: 'usman@gmail.com',
    password: '123'
},
{
    email: 'ali@gmail.com',
    password: '123'
}];

여기서 요구되는 것은 이메일 문자열과 비밀번호 문자열을 인자로 받는 JavaScript 함수입니다. 이 함수는 입력된 자격 증명(credential)에 해당하는 사용자가 배열, 즉 데이터베이스에 존재하는지 여부에 따라 true 또는 false 불리언 값을 반환해야 합니다.

해결 방법

배열 내에서 조건에 맞는 요소를 찾아내는 Array.prototype.find() 메서드를 활용하면 간단하게 구현할 수 있습니다. 코드는 다음과 같습니다.

const array = [{
    email: 'usman@gmail.com',
    password: '123'
}, {
    email: 'ali@gmail.com',
    password: '123'
}];

const matchCredentials = (email, password) => {
    const match = array.find(el => {
        return el.email === email && el.password === password;
    });
    return !!match;
};

console.log(matchCredentials('usman@gmail.com', '123'));
console.log(matchCredentials('usman@gmail.com', '1423'));

실행 결과

위 코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다.

true
false

코드 설명

find() 메서드는 주어진 조건을 만족하는 첫 번째 요소를 반환하며, 조건을 만족하는 요소가 없으면 undefined를 반환합니다. 따라서 일치하는 사용자가 있으면 객체가, 없으면 undefined가 변수 match에 할당됩니다.

마지막의 이중 부정 연산자 !!는 이 값을 명확한 불리언 값으로 변환하는 역할을 합니다. 객체나 문자열 등 어떤 값이든 !!를 적용하면 참 같은 값(truthy)은 true, 거짓 같은 값(falsy)은 false로 변환되므로, 함수가 항상 깔끔한 true/false를 반환하도록 보장할 수 있습니다.

첫 번째 호출은 이메일과 비밀번호가 모두 일치하므로 true를, 두 번째 호출은 비밀번호가 틀렸기 때문에 false를 출력합니다.