틱택토 게임 강의 중 질문

Question

function   비동기콜백 ( event ) {    event . preventDefault ();    // 칸을 클릭했을 때 몇 줄 몇 칸인지 알기 위해서    var   몇줄  =  줄들 . indexOf ( event . target . parentNode );    var   몇칸  =  칸들 [ 몇줄 ]. indexOf ( event . target );    console . log ( "몇줄 ? "  +  몇줄  +  " 몇칸 ? "  +  몇칸 );    var   다참  =  false ;    if  ( 칸들 [ 몇줄 ][ 몇칸 ]. textContent  ===  "" ) {      칸들 [ 몇줄 ][ 몇칸 ]. textContent  =  턴 ;      // 가로줄 검사      if  (        칸들 [ 몇줄 ][ 0 ]. textContent  ===  턴  &&        칸들 [ 몇줄 ][ 1 ]. textContent  ===  턴  &&        칸들 [ 몇줄 ][ 2 ]. textContent  ===  턴     ) {        다참  =  true ;     }      // 세로줄 검사      if  (        칸들 [ 0 ][ 몇칸 ]. textContent  ===  턴  &&        칸들 [ 1 ][ 몇칸 ]. textContent  ===  턴  &&        칸들 [ 2 ][ 몇칸 ]. textContent  ===  턴     ) {        다참  =  true ;     }      // 대각선 검사      if  ( 몇줄  -  몇칸  ===  0 ) {        if  (          칸들 [ 0 ][ 0 ]. textContent  ===  턴  &&          칸들 [ 1 ][ 1 ]. textContent  ===  턴  &&          칸들 [ 2 ][ 2 ]. textContent  ===  턴       ) {          다참  =  true ;       }     }      if  ( Math . abs ( 몇줄  -  몇칸  ===  2 )) {        if  ( 칸들 [ 0 ][ 2 ] ===  턴  &&  칸들 [ 1 ][ 1 ] ===  턴  &&  칸들 [ 2 ][ 0 ] ===  턴 ) {          다참  =  true ;       }     } 제가 이 부분에서 질문드리고 싶은 것은 앞에서 몇줄, 몇칸인지 검사하는 것을 따로 함수로 정의하여 그 함수를 호출하여 사용하고, 가로줄, 세로줄 , 대각선 검사하여 승리자를 판별하는 것을 따로 함수로 정의하여 그 함수를 호출하여 사용하고 싶었는데 함수로 정의하여 사용하다 보니까  몇줄, 몇칸이라는 변수가 비동기콜백함수 안에 지역변수로 정의되어 있다 보니까 함수를 호출하여 사용하면 그 함수 안에서는 정의되지 않은 변수라서 계속해서 error가 발생했습니다.  위와 같은 것들을 함수로 따로 정의해서 사용하는 것은 불가능한가요??? 여러가지 해결책에 대해 생각해봤는데 아직 제 수준에서는 해결이 안되서 이렇게 질문을 올리게 되었습니다.

pbc92365942 · Answer

function   승리자체크 ( 칸들 ,  다참 ,  몇줄 ,  몇칸 ,  턴 ) {    // 가로줄 검사    if  (      칸들 [ 몇줄 ][ 0 ]. textContent  ===  턴  &&      칸들 [ 몇줄 ][ 1 ]. textContent  ===  턴  &&      칸들 [ 몇줄 ][ 2 ]. textContent  ===  턴   ) {      다참  =  true ;   }    // 세로줄 검사    if  (      칸들 [ 0 ][ 몇칸 ]. textContent  ===  턴  &&      칸들 [ 1 ][ 몇칸 ]. textContent  ===  턴  &&      칸들 [ 2 ][ 몇칸 ]. textContent  ===  턴   ) {      다참  =  true ;   }    // 대각선 검사    if  ( 몇줄  -  몇칸  ===  0 ) {      if  (        칸들 [ 0 ][ 0 ]. textContent  ===  턴  &&        칸들 [ 1 ][ 1 ]. textContent  ===  턴  &&        칸들 [ 2 ][ 2 ]. textContent  ===  턴     ) {        다참  =  true ;     }   }    if  ( Math . abs ( 몇줄  -  몇칸  ===  2 )) {      if  ( 칸들 [ 0 ][ 2 ] ===  턴  &&  칸들 [ 1 ][ 1 ] ===  턴  &&  칸들 [ 2 ][ 0 ] ===  턴 ) {        다참  =  true ;     }   } } function   비동기콜백 ( event ) {    event . preventDefault ();    // 칸을 클릭했을 때 몇 줄 몇 칸인지 알기 위해서    var   몇줄  =  줄들 . indexOf ( event . target . parentNode );    var   몇칸  =  칸들 [ 몇줄 ]. indexOf ( event . target );    줄칸체크 ( 몇줄 ,  몇칸 );    var   다참  =  false ;    if  ( 칸들 [ 몇줄 ][ 몇칸 ]. textContent  ===  "" ) {      칸들 [ 몇줄 ][ 몇칸 ]. textContent  =  턴 ;      승리자체크 ( 칸들 ,  다참 ,  몇줄 ,  몇칸 ,  턴 ); 제 생각대로라면, 칸을 클릭하고 나서 그에 따라 비동기콜백 함수가 동작하는데 이 함수 안에서 이미 칸들, 다참, 몇줄, 몇칸, 턴이라는 변수들에 각각 값들이 담겨 있고  승리자체크라는 함수 안에는 이 변수들이 들어 있어서 매개변수로 칸들,다참,몇줄,몇칸,턴을 포함시켰습니다. 그리고 비동기콜백 함수 안에서 이 함수를 호출 시 그 값들을 담고 있는 변수들을 인자로 포함시켰는데 동작하지가 않습니다. 동작하지가 않는다는 것은 제가 argument로 포함시켜준 변수들의 값이 함수에 전달이 안되었다는 것인데 분명히 저 함수 안에서 각각 변수들에 값이 저장되어 있다는 것을 확인하였습니다. 왜 값들을 가진 변수를 인자로 삼았는데 그 값이 함수 호출 시 전달되지 않는 걸까요?

zerocho · Answer

함수로 만들 때 매개변수로 몇줄 몇칸을 만들어 호출 시 인자로 넘겨주시면 됩니다.