<자바스크립트 Javascript> 선택지 만들기(심리테스트 알고리즘 이용) (4)

결과 페이지를 위한 코드 구현 시, 방법이 없다고 판단하여 일일이 나열하는 것으로 마무리했었다. 그런데 다시 생각해보니 반복문으로 코드 길이를 줄이면서 더 효율적으로 코드 구현이 가능한 전제 조건은 이미 마련되어 있었다. 그것은 바로 반복분에서 사용하는 '인덱스'를 활용하는 것이었다.

 

따라서 차례로 다음과 같이 코드를 변경하였다.

//변경 전 코드
function result() {
	const r1 = JSON.parse(localStorage.getItem('a1'));
	const r2= JSON.parse(localStorage.getItem('a2'));
	const r3= JSON.parse(localStorage.getItem('a3'));
	
	const result = [r1.a1, r2.a2, r3.a3];;
	const result1 = ['0', '0', '0'];
	const result2 = ['0', '0', '1'];
	const result3 = ['0', '1', '0'];
	const result4 = ['0', '1', '1'];
	const result5 = ['1', '0', '0'];
	const result6 = ['1', '0', '1'];
	const result7 = ['1', '1', '0'];
	const result8 = ['1', '1', '1'];
	const result9 = ['2', '0', '0'];
	const result10 = ['2', '0', '1'];
	const result11 = ['2', '1', '0'];
	const result12 = ['2', '1', '1'];
	const result13 = ['3', '0', '0'];
	const result14 = ['3', '0', '1'];
	const result15 = ['3', '1', '0'];
	const result16 = ['3', '1', '1'];

무식했다(...)

 

//변경 후 코드

//결과 출력 후 해당 페이지로 이동
function result() {
	const r1 = JSON.parse(localStorage.getItem('a1'));
	const r2= JSON.parse(localStorage.getItem('a2'));
	const r3= JSON.parse(localStorage.getItem('a3'));
	
	//선택된 결과
	const result = [r1.a1, r2.a2, r3.a3];
	
	//존재하는 결과들 14개
	const results = [
		["0", "0", "0"],
		["0", "0", "1"],
		["1", "0", "0"],
		["1", "0", "1"],
		["1", "1", "0"],
		["1", "1", "1"],
		["2", "0", "0"],
		["2", "0", "1"],
		["2", "1", "0"],
		["2", "1", "1"],
		["3", "0", "0"],
		["3", "0", "1"],
		["3", "1", "0"],
		["3", "1", "1"],
	];

선택된 결과를 나타내는 result 배열 객체까지는 이전과 동일하나, 미리 구현해놓은 결과들에 대한 객체는 하나의 배열 객체에 차례로 담아주었다. 이렇게 구현한 이유는 다음 코드에서 알 수 있다.

 

//변경 전 코드
    if(JSON.stringify(result) == JSON.stringify(result1)) {
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result2)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result3)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result4)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result5)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result6)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result7)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result8)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result9)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result10)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result11)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result12)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result13)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result14)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result15)){
		location.href="결과페이지";
	}else if(JSON.stringify(result) == JSON.stringify(result16)){
		location.href="결과페이지";
	}else {
		return;
	}

//변경 후 코드
    for(let i=0;i<14;i++){
		if(JSON.stringify(result) == JSON.stringify(results[i])){
			location.href="../result/"+i;
		}else {
		}	
	}
}

짠! 보시다시피 for 반복문 하나로 그 긴 코드들이 깔끔하게 정리되었다. 결과로 받은 result와 기존에 미리 구현해둔 결과값을 각각 result에 번호를 붙여 변수명을 지정했었으나, 이러한 각각의 result 객체들을 하나로 모아 배열 객체로 만들면 굳이 번호를 지정해주지 않아도 차례로 인덱스가 붙을테니 앞에서처럼 수정해준 것이다.

 

그리고 for 반복문으로 결과로 받은 result와 미리 구현해둔 결과값을 비교할 때에 result 객체들을 모아둔 배열 객체인 results에 인덱스를 붙여서주고, 링크 또한 각각의 result 객체와 상응하도록 인덱스 값으로 변경해주어 해당 페이지로 이동할 수 있도록 변경해주었다.

 

이렇게해서 깨달은 점은, 순차적으로 진행되어야 할 코드 구현이 필요한 경우 처음부터 배열로 만들어주거나 혹은 이름 자체를 인덱스와 똑같은 번호로 만들어주면 이들을 배열로 컨트롤이 가능하다는 것이다. 아주 유익한 깨달음이었다.