자바스크립트 - 반복문 사용하기

숫자야구 게임 구현하기

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. 전체 코드 및 후기