이번 글에서는 사용자가 직접 문자열을 입력할 수 있는 입력창을 제공하고, 그 값이 미리 정의된 배열 안에 존재하는지 확인하는 자바스크립트 프로그램을 작성해 보겠습니다.
프로그램은 입력받은 값을 코드에 하드코딩된 배열의 요소들과 비교합니다. 만약 입력한 문자열이 배열에 포함되어 있다면 화면에 true를 출력하고, 포함되어 있지 않다면 false를 출력해야 합니다.
핵심 메서드: Array.prototype.includes()
이 문제는 자바스크립트의 내장 메서드인 includes()를 활용하면 매우 간단하게 해결할 수 있습니다. includes() 메서드는 배열에 특정 요소가 포함되어 있는지 판별하여, 포함되어 있으면 true, 그렇지 않으면 false를 반환합니다. 단, 이 메서드는 대소문자를 구분하므로 'Chelsea'와 'chelsea'는 서로 다른 값으로 처리된다는 점에 유의해야 합니다.
예제 코드
전체 구현 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CHECK EXISTENCE</title>
</head>
<body>
<script>
const arr = ['arsenal', 'chelsea', 'everton', 'fulham',
'swansea'];
const checkExistence = () => {
const userInput = document.getElementById("input").value;
const exists = arr.includes(userInput);
document.getElementById('result').innerText = exists;
};
</script>
<input type="text" id="input">
<button onclick="checkExistence()">Check</button>
<p id='result'></p>
</body>
</html>코드 동작 원리
위 코드의 동작 흐름을 단계별로 살펴보면 다음과 같습니다.
1. 배열 arr에는 'arsenal', 'chelsea', 'everton', 'fulham', 'swansea'라는 다섯 개의 축구팀 이름이 미리 저장되어 있습니다.
2. 사용자가 입력창에 값을 입력하고 Check 버튼을 클릭하면 checkExistence() 함수가 실행됩니다.
3. 함수 내부에서는 document.getElementById("input").value를 통해 사용자가 입력한 값을 가져옵니다.
4. arr.includes(userInput)를 호출하여 해당 값이 배열에 존재하는지 확인한 뒤, 그 결과(true 또는 false)를 결과 영역에 출력합니다.
실행 결과
프로그램을 실행하면 화면에 텍스트 입력창과 Check 버튼이 나타납니다. 배열에 존재하는 단어(예: chelsea)를 입력하고 버튼을 클릭하면 true가 표시되고, 존재하지 않는 단어(예: liverpool)를 입력하면 false가 표시됩니다.
추가 팁: 대소문자 구분 없이 확인하기
사용자의 입력을 대소문자와 관계없이 처리하고 싶다면, 입력값과 배열 요소를 모두 소문자로 변환한 후 비교하면 됩니다.
const userInput = document.getElementById("input").value.trim().toLowerCase();
const exists = arr.some(item => item.toLowerCase() === userInput);이처럼 toLowerCase()와 some() 메서드를 조합하면 'CHELSEA'나 'Chelsea'처럼 대소문자가 다르게 입력되더라도 정확하게 일치 여부를 판별할 수 있습니다.