함수를 실행하고 결과값을 담는 위치 및 시점 [자바스크립트]

아직도 숫자야구게임 만드는 중.

 

입력값과 난수를 비교한 뒤 점수(몇 스트라이크 몇 볼)를 화면에 표시해야 함.

 

최초 시도는

// 입력값과 난수 비교
var playBall = function () {
    strikeCount = 0;
    ballCount = 0;
    
    // blah blah
    
    return [strikeCount, ballCount];
}

// 점수 표시
document.getElementById('button').addEventListener('click', function () {
    document.getElementById('forScore').innerHTML = `${playBall()[0]} Strike ${playBall()[1]} Ball`
});

하지만 playBall이라는 함수를 너무 자주 실행해야 해서 비효율적이라 생각.

 

그래서 playBall이 return한 값을 변수에 저장한 다음 필요할 때마다 꺼내쓰려 시도.

// 입력값과 난수 비교
var playBall = function () {
    strikeCount = 0;
    ballCount = 0;
    
    // blah blah
    
    return [strikeCount, ballCount];
}

var score = playBall();

// 점수 표시
document.getElementById('button').addEventListener('click', function () {
    document.getElementById('forScore').innerHTML = `${score[0]} Strike ${score[1]} Ball`
});

그런데 또 문제 발생. 무조건 '3 Strike 3 Ball'을 뱉어냄.

입력값을 넣었을 때(click) 함수가 돌아가야 하는데 애초 웹페이지를 부를 때 함수를 실행해 버리기 때문.

 

따라서 click이라는 이벤트가 일어난 뒤에야 1) 함수를 실행하고 2) 함수 결과값을 저장하고 3) 점수를 화면에 표출이라는 일련의 과정이 일어나도록 수정.

// 입력값과 난수 비교
var playBall = function () {
    strikeCount = 0;
    ballCount = 0;
    
    // blah blah
    
    return [strikeCount, ballCount];
}

// 점수 표시
document.getElementById('button').addEventListener('click', function () {
    var score = playBall();
    document.getElementById('forScore').innerHTML = `${score[0]} Strike ${score[1]} Ball`
});

---

 

변수 정의 위치와 함수 [자바스크립트]