zerocho js 4

4-1 비동기 & 숫자야구 순서도

 

코드는 위에서 순서대로 한줄씩 실행됨(동기)

그 예외가 

1. 조건문

2. 반복문

3. 저번 시간에 한 콜백함수

폼.addEventListener('submit', function 콜백함수 (a) { }여기서 노란색 부분까지만 실행되고

뒷부분 콜백함수는 실행은 안되고 컴퓨터가 기억만 해두고 있음.

이렇게 코드 상의 순서대로 실행되지 않는 코드를 비동기라고 함.

비동기는 실행되기 전까지는 언제 실행될지 모름.

언젠가는 실행될거니까 대비는 해야 됨

 

코딩의 핵심은 반복을 최소화하고 재사용하는 것.

 

숫자야구 시작!순서도를 만든다.

 

 

 

4-2 배열 메서드 - push, pop, shift, unshift

숫자후보 = [1,2,3,4,5,6,7,8,9];
숫자배열 = [];
for(var i = 0; i < 4; i+=1) {
   var 뽑은것 = 숫자후보.ㅁ();
   숫자배열.ㅇ(뽑은것);
}

console.log(뽑은것);

이렇게 했을 때,

1)

ㅁ = pop : 마지막 것부터 뽑음 

ㅇ = push : 마지막에 추가(그냥 보통 나열하는 방식)

-> [9, 8, 7, 6]

 

2)

ㅁ = shift :처음 것부터 뽑음

ㅇ = push

-> [1, 2, 3, 4]

 

3)

ㅁ = shift

ㅇ = unshift : 뽑은 것을 맨앞에 추가(역순)

-> [4, 3, 2, 1]

 

 

4-3 배열 splice

ㅁ = splice(위치, 개수): 위치로부터 개수만큼 배열에서 뽑음

n번째 위치에서부터 몇개.. 이런 식으로.

개수를 입력 안하고 숫자 한개만 입력한다면?

예를 들어 숫자배열.splice(5); 를 했다면

5번째 위치부터 끝까지 뽑아옴.

(숫자 세는 순서는 알다시피 0부터 셈)

 

그런데 이런 배열 메서드들이 숫자를 뽑아오면

숫자배열 = [ ] 안에서 그대로 숫자를 가져옴.

1 2 3 4 를 가져온다면

var 숫자배열 = [5,6,7,8,9]가 남음

 

 

숫자야구 방식대로 4개의 숫자를 랜덤하게 뽑으려면,

var 숫자후보 = [1,2,3,4,5,6,7,8,9];

var 숫자배열 = [];

for ( var i = 0; i < 4; i++) {

   var 뽑은것 = 숫자후보.splice( Math.floor (Math.random () * (9 - i) ), 1 )[0];

   숫자배열.push(뽑은것);

}

 

음,, 해석하자면

1. splice( 랜덤한 숫자, 1)

랜덤한 숫자 위치에서 한개를 뽑겠다는 의미.

근데 0~8번째 위치에서 뽑아야하니까 (컴퓨터는 0부터 세니까)

소수점내리는 Math.floor() 로 해준다.

즉, splice( x , 1)

x에는 0~8이 올 수 있음

0~8이 오게 하기 위해.

 

2.

끝에 [0]을 넣어주는 이유는,

[0]을 넣지 않으면 배열로 뽑히니까,,(splice의 특성)

Array(1), Array(1), Array(1), Array(1)

이런 식으로... 배열, 배열, 배열, 배열 이렇게 나옴

여기서 화살표 눌러보면

0 : [3]

1 : [6]

2 : [7]

3 : [1]

이런 식으로 나옴..

즉, 각 배열의 첫번째 숫자를 뽑아오겠다는 의미

 

3. 

랜덤한 숫자 - i

를 해줘야 함.

첫번째로 숫자를 뽑고나면 그 숫자는 이제 배열에서 없음

그래서 undefined가 뽑일 수 있음

1~9 중에 하나가 뽑혔으면 이제 length가 8 -> 7이 되었음!!!

즉, splice( x , 1)

x에는 이제 0~7이 들어갈 수 있음

0~7이 오려면 Math.random() * 8 로 줄여야 됨.

그러니 이제 랜덤 숫자 8개 중에 뽑아야 하고(0~7번째 자릿수)

두번째로 숫자를 뽑고나면

이제 랜덤 숫자 7개 중에(0~6번째) 뽑아야 하니까  

i가 1씩 늘고 있는 점을 활용하여

i를 빼준다!

 

 

혹은, 

(9 - i)자리에 숫자후보.length 를 넣어줘도 됨

해당 변수의 길이만큼 곱해줘야 하니까.

 

 

*참조

Math.random * N

이라는 수식이 있을 때,

• Math.floor는 0 ~ N-1 의 랜덤한 정수가 나온다.
• Math.ceil은 1 ~ N 의 랜덤한 정수가 나온다.
• Math.round를 사용할 경우 처음과 마지막 수가 나올 확률이 적어진다.

velog.io/@hope9405/%EC%99%9C-%EB%9E%9C%EB%8D%A4-%EC%A0%95%EC%88%98%EB%A5%BC-%EB%A7%8C%EB%93%A4%EB%95%8C-Math.floor%EB%A5%BC-%EC%93%B8%EA%B9%8C

왜 랜덤 정수를 만들때 Math.floor를 쓸까?

 

4-4 split & join

이제 우리가 답을 입력하는 걸 만들 시간.

var 답 = input.value;

이런 변수를 선언해주자.

 

이제 답 === 숫자배열 인지를 비교하면서 if문을 만들어야할텐데

그전에 콘솔로그로 테스트를 해보면,,

 

console.log(답, 숫자배열, 답===숫자배열);을 하면내가 정답을 입력한다쳐도!

1234 [1, 2, 3, 4] false 이렇게 나와버림..왜냐면은 숫자배열 이 녀석이 배열 형태로 나오기 때문..

 

그래서 문자<->배열 바꾸는 걸 배울거임

 

문자.split(구분자) -> 배열

배열.join(구분자) -> 문자

 

숫자배열.join('');

"1234"

숫자배열.join(',');

"1,2,3,4"

 

답 = '1234'

답.split(' ');

['1', '2', '3', '4']

 

이런 식으로!

 

그래서 호출하는 곳에 숫자배열이 아니라

숫자배열.join('') 을 입력해야 함!

 

이제

if ( 답 === 숫자배열.join('') ) { 
  ballCount.textContent = '홈런!'; 
  input.value = ' '; 
  input.focus();
}  else  {

 

4-5 indexOf & 숫자구현

이제 홈런이 아닐 경우를 만들어야 함

if문의 else 부분.

이제 숫자 하나하나를 비교해서 스트라이크/볼을 판별해야하니까

var 답배열 = 숫자배열.split(' ');을 선언해줌

배열 형태로 비교하면서 판정내릴거임,,

 

var 스트라이크 = 0;

var 볼 = 0;

for ( var i = 0; i <3; +=1) {

    if ( 답배열[i] === 숫자배열 [i] ) {} 이렇게..

 

 

배열.indexOf(값)

값의 위치를 알 수 있음.

 

예를 들어,

var a = [1,2,3,4] 일 때a.indexOf(3); 을 치면3의 자릿수 2가 나옴!

 

없는 값이면 -1 이 나옴.

 

이 특징을 활용해서!

 

for ( var i = 0; i < 4; +=i) {

   if ( 답배열[i] === 숫자배열[i] ) {

     스트라이크 +=1;

    }  else if ( 숫자배열.indexOf(답배열[i]) > -1 ) {

     볼 += 1;

    }

 }

ballcount.textCount = 스크라이크 + '스트라이크' + 볼 + '볼입니다';

input.value = ' ';

input.focus();