자바스크립트 - 반복문 사용하기
숫자야구 게임 구현하기
1. 무작위로 숫자 뽑기
Math.random()
: 무작위로 숫자 뽑는 함수 (0 <= x < 1)
Math.random() * 9
: 0 <= x < 9
Math.random() * 9 + 1
: 1 <= x < 10
Math.floor(Math.random() * 9 + 1)
: 1 <= x <= 9 (정수만)
Math.floor: 소수 내림
Math.round: 반올림
Math.ceil: 올림
- Math.random()은 암호학적으로 완전한 무작위가 아니므로 보안과 관련된 작업 시에는
window.crypto.getRandomValues()
함수를 사용하자.
- 로직을 짜고 반드시 검증하는 과정을 거쳐야한다. 끝 값에서 극단적인 케이스가 발생할 수 있으니 끝 값을 넣어서 반드시 돌려볼 것. 예외 발견하기!!
2. 입력값 검증하기
- $form 태그에 submit 이벤트를 달게 되면 form 제출 시 버튼을 클릭하지 않고 enter를 눌러도 제출 가능함
- submit 이벤트 발생 시 기본으로 브라우저를 새로고침한다. 하지만 숫자야구 페이지에서 새로고침 시 초기화 되므로 이를 막아야 한다. 이를 위해 사용하는 함수가 바로
event.preventDefault();
이다.
event.preventDefault()
: 기본 동작을 막는 함수
new Set()
: 중복을 허용하지 않는 특수한 배열
ex) new Set('1231') -> Set 내부에는 1, 2, 3만 들어감
Set의 요소 개수를 구할 때는 length가 아닌 size를 사용한다.
.join('')
: 배열을 문자열로 바꿔주는 메서드 ([3, 1, 4, 6] -> '3146')
.join()의 기본값: .join(',') -> '3,1,4,6'으로 바꿔줌
.join(':') -> '3:1:4:6'
.split()
: 문자열을 배열로 바꿔주는 메서드 ('3146' -> ["3146"]
.split('') -> ["3", "1", "4", "6"]
.split('1') -> ["3", "46"]
- .textContent: 모든 글자를 문자열로 인식
- .innerHTML: HTML 태그는 태그로 인식
.append(document.createTextNode('text'))
: 텍스트 추가
.append(document.createElement('br'))'
: 태그 추가
textContent나 innerHTML은 간편하게 작성할 수는 있지만, 기존 textContent가 사라지기 때문에 이전 텍스트에 추가로 텍스트를 넣고 싶을 때 이전의 textContent와 함께 작성해주어야 한다.
createTextNode는 텍스트를 따로 생성해주는 것이기 때문에 또 작성하지 않아도 된다.
3. Self-Check
- 0S 0B일 때 OUT 표시하기
outCount 변수를 추가하고 0S 0B일 경우 +1을 해준다.
outCount 변수를 이벤트 리스너 함수 바깥에 선언해야 한다.
- 3OUT 시 Lost
outCount가 3이면 Fail 메시지를 출력한다.
- Lost 시 더이상 입력 받지 않기
removeEventListener 학습 후 해보기
- Lost 시 메시지 출력 함수로 중복 제거
- 0 입력 시 error 메시지 출력하기
- 몇 번 더 입력할 수 있는지 출력하기
4. 배열 forEach, map, fill
1. forEach
forEach: 배열 요소를 반복하는 반복문
- forEach는 인수로 함수를 받고, 배열 요소 하나하나에 인수로 받은 함수를 각각 적용한다. 이때 요소 순서대로 함수를 적용하므로 반복문의 역할을 하게 된다.
.forEach((number, index) => {})
answer.forEach((number, aIndex) => {
const index = value.indexOf(String(number));
if (index > -1) { // 일치하는 숫자 발견
if (index === aIndex) { // 자릿수도 같음
strike += 1;
} else { // 숫자만 같음
ball += 1;
}
}
});
- forEach 메서드는 for 문보다 성능은 좋지 않지만, 배열 메서드는 연달아 사용할 때 편리한 점이 많다.
2. map & fill
- map: 요소들을 일대일로 짝지어서 다른 값으로 변환하는 메서드
forEach처럼 함수를 인수로 받지만 return 값에 따라 새로운 요소를 반환한다.
const array = [1, 2, 3, 4];
array.map((element, index) => {
return element * 2;
}) // [2, 4, 6, 8]
- fill: 배열의 요소로 undefined를 채워 넣는 메서드
Array(9); // 길이가 9인 빈 배열 생성
Array(9).fill(); //undefined 9개 채워진 배열
Array(9).fill(0); //0이 9개 채워진 배열
Array(9).fill(0).map((element, index) => {
return index + 1;
}) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
- 배열의 메서드를 익히면 긴 반복문을 짧게 줄일 수 있다.
5. 전체 코드 및 후기
Math.random()
: 무작위로 숫자 뽑는 함수 (0 <= x < 1)Math.random() * 9
: 0 <= x < 9Math.random() * 9 + 1
: 1 <= x < 10Math.floor(Math.random() * 9 + 1)
: 1 <= x <= 9 (정수만)Math.floor: 소수 내림
Math.round: 반올림
Math.ceil: 올림
window.crypto.getRandomValues()
함수를 사용하자.event.preventDefault();
이다.event.preventDefault()
: 기본 동작을 막는 함수new Set()
: 중복을 허용하지 않는 특수한 배열ex) new Set('1231') -> Set 내부에는 1, 2, 3만 들어감
Set의 요소 개수를 구할 때는 length가 아닌 size를 사용한다.
.join('')
: 배열을 문자열로 바꿔주는 메서드 ([3, 1, 4, 6] -> '3146').join()의 기본값: .join(',') -> '3,1,4,6'으로 바꿔줌
.join(':') -> '3:1:4:6'
.split()
: 문자열을 배열로 바꿔주는 메서드 ('3146' -> ["3146"].split('') -> ["3", "1", "4", "6"]
.split('1') -> ["3", "46"]
.append(document.createTextNode('text'))
: 텍스트 추가.append(document.createElement('br'))'
: 태그 추가textContent나 innerHTML은 간편하게 작성할 수는 있지만, 기존 textContent가 사라지기 때문에 이전 텍스트에 추가로 텍스트를 넣고 싶을 때 이전의 textContent와 함께 작성해주어야 한다.
createTextNode는 텍스트를 따로 생성해주는 것이기 때문에 또 작성하지 않아도 된다.
outCount 변수를 추가하고 0S 0B일 경우 +1을 해준다.
outCount 변수를 이벤트 리스너 함수 바깥에 선언해야 한다.
outCount가 3이면 Fail 메시지를 출력한다.
removeEventListener 학습 후 해보기
forEach: 배열 요소를 반복하는 반복문
.forEach((number, index) => {})
answer.forEach((number, aIndex) => {
const index = value.indexOf(String(number));
if (index > -1) { // 일치하는 숫자 발견
if (index === aIndex) { // 자릿수도 같음
strike += 1;
} else { // 숫자만 같음
ball += 1;
}
}
});
forEach처럼 함수를 인수로 받지만 return 값에 따라 새로운 요소를 반환한다.
const array = [1, 2, 3, 4];
array.map((element, index) => {
return element * 2;
}) // [2, 4, 6, 8]
Array(9); // 길이가 9인 빈 배열 생성
Array(9).fill(); //undefined 9개 채워진 배열
Array(9).fill(0); //0이 9개 채워진 배열
Array(9).fill(0).map((element, index) => {
return index + 1;
}) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
- 숫자야구는 영어로 bulls and cows라고 한다. 이름만 bulls and cows고 진행 방식은 숫자야구인 이상한 게임이 되어버렸다.
- JS로 넘어오고 진행속도가 느려진 거 같지만 확실하게 이해하고 넘어가야할 것 같아서 후루룩 해버리지는 못하겠다. 초반에 기초를 잘 잡아두면 나중엔 수월하게 할 수 있겠지🥲
- 코드를 구현하면서 기존에 배웠던 개념들을 다시 복습하게 되는데 내용이 기억이 안나서 자꾸 찾아보게 된다. 그리고 자꾸 for문에 let이 아닌 int를 입력하고 있는 나...😇 언제쯤 익숙해지려나 ㅠㅋㅋ
- HTML/CSS도 꾸준히 하려고 예제 코드를 입맛대로 살짝씩 수정하는데, 디자인이 넘 마음에 안든다. 디자인도 잘하고 싶다..
- 그동안의 코딩 습관을 싹 버리고 코더가 아닌 프로그래머가 되려고 노력하는 중. 서치 잘하는 거 중요하지만 서치만 잘하는 건 중요하지 않다.
Author And Source
이 문제에 관하여(자바스크립트 - 반복문 사용하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@theseda2s/자바스크립트-반복문-사용하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)