자바스크립트에 for문 안에 변수에 값을 넣는 방법이 궁금합니다.

조회수 3660회

문제가 3개 나오는 퀴즈모듈에 대한 질문입니다. 변수를 3개 선언하였습니다. 각각 퀴즈를 맞췄을 때 정답이면 "O" 오답이면 "X"가 변수에 값으로 들어가도록 표현하고 싶었습니다. 문항의 갯수는 무한으로 증식할 가능성이 있어서 for문을 사용하였는데요.

var myScore = 0; 
var qNum_1 = ""; //1번 정오답 여부(O/X) 
var qNum_2 = ""; //2번 정오답 여부(O/X) 
var qNum_3 = ""; //3번 정오답 여부(O/X)

for(i=1;i<4;i++)
{ 
    if(myArray[i] == quizDap[i]){ 
    myScore++; 
    "qNum_" + i = "O" //이렇게 하니 오류만 뜨네요 
    }else{
    //console.log("qNum_" + i + " = X ")
     //qNum_[i] = "X" //이렇게 하니 오류만 뜨네요
     }
 }

alert(qNum_1);
  • (•́ ✖ •̀)
    알 수 없는 사용자

2 답변

  • window["qNum_" + i] = "O"
    

    에러나는 윗 줄만 이렇게 바꾸면 되긴 합니다만 이 방법은 별로 추천하지 않구요. 아래처럼 해보시죠.

    var myObj = {
        qNum_1: "",
        qNum_2: "",
        qNum_3: ""
    }
    
    for (let i = 1; i < 4; i++) {
        myObj["qNum_" + i] = "O"
    }
    
    console.log(myObj);
    
  • 지금 전역변수 n개를 만들어서 거기에 정오답 여부를 저장하고 그 변수를 얻기 위해 보간하는 법을 찾고 계신 건데... 일단 보안상 안 좋습니다. F12 눌러서 개발자도구 콘솔에서 이런거 한번 해보세요. 사용자가 "아닌데?? 나는 다 정답인데?!" 하고 조작하는 게 가능합니다.

    이미지

    클로저라는 것을 사용하면 이를 방지할 수 있습니다.

    그리고 무엇보다 너무 비체계적입니다. 저라면, 어차피 문제가 얼마든지 늘어날 수 있으니, 문제의 목록을 들고 다니면서, 그 목록의 인덱스를 가지고 뭔가를 하는 접근으로 풀겠습니다.

    let quizTeacher = (function () {
      let questions = [
        {
          statement: "지구는 둥글다.",
          trueFalse: true,
          isCorrect: null,
        },
        {
          statement: "아니다. 지구는 평평하다.",
          trueFalse: false,
          isCorrect: null,
        },
        {
          statement: "당신이 지구를 둥글다고 믿게 된 것은 음모 공작의 결과이다.",
          trueFalse: false,
          isCorrect: null,
        }
      ];
    
      // quizTeacher.questions 목록의 i번째 객체를 가지고 HTML을 그려서 문제를 출제합니다.
      let showQuestion = function (i) {
        let question = this.questions[i];
        let statement = '<h3>Q' + (i + 1) + '. ' + question.statement + '</h3>';
        let buttons = '<button class="btn btn-primary" onclick="quizTeacher.getAnswer(' + i + ', true);">O</button> <button class="btn btn-danger" onclick="quizTeacher.getAnswer(' + i + ', false);">X</button>';
        let html = '<div class="question">' + statement + '<div class="text-center">' + buttons + '</div></div>';
        return this.showHtml(html);
      };
    
      return {
        // 시험을 시작하려면?
        startQuiz: function () {
          // 첫번째 문제를 출제합니다.
          return showQuestion(0);
        }
      };
    })();
    
    quizTeacher.startQuiz();
    

    그렇게 구현한 데모가 이것인데요. 참고가 되면 좋겠네요.

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)