시작 전에...
이 과제는 개인적으로 로또 번호보다는 시간이 덜 걸려서 작은 기능 하나만 추가해보았다.
과제 설명
주어진 코드의 오류를 고쳐 MBTI 테스트가 잘 작동 할 수 있도록 완성시키기. 
추가한 부분
완성시키고 이것 저것 눌러보다가 아래의 경우를 발견했다.
아무것도 선택이 되어있지 않아도 결과가 뜬다는 것이었다. 이 경우를 방지하는 기능을 넣어보면 좋을 것 같아서 만들어보았다. 아래는 완성된 기능!
아무것도 선택이 안 되어있거나 4개의 문항이 모두 선택되지 않았을 경우 경고문이 뜨도록 추가한 기능이다.
검색했던 부분
이 과제에서는 각 성향을 딕셔너리에 저장하고 있다.
let score = { E: 0, I: 0, S: 0, N: 0, T: 0, F: 0, J: 0, P: 0 };그래서 결과 확인하기 버튼을 누르기 전에 score의 value들의 합이 4가 아니면 경고문을 띄우는 체크포인트를 만들었다. for반복문을 사용할까 하다가 다른 방법이 있길래 한 번 사용해보았다.
reduce()
.reduce()함수는 딕셔너리 아닌 배열에 사용할 수 있는 함수로 값을 누산할 수 있는 기능이 있다. 참고: reduce() 이용한 데이터 처리
참고한 velog에서 reduce()의 작동원리를 잘 설명해준다.
// 예시 코드
myArray = [1, 2, 3]
myArray.reduce((accumulator, value) =>
accumulator + value, // {}이랑 return 없이 사용할 경우
0);accumulator라는 값은 계속되는 연산에서 그 전의 값을 저장하는 값이다. initialValue를 0으로 지정하면 0에서 시작하면서 모든 배열의 값을 더해간다. value는 배열의 원소값을 처음부터 차례로 지정된다.
이렇게 배열의 있는 모든 값을 하나의 값으로 반환하는데 이 과제의 경우 모든 값이 더해져서 4가 되는지 확인하면 된다. 그래서 사용한 코드가
// 아무것도 입력 하지 않을 시 방지
const checkFour = Object.values(score).reduce(
(accumulator, value) => accumulator + value,
0
);
if (checkFour < 4) {
alert("선택지를 모두 선택해주세요!");
return;
}배열에만 사용가능한 함수이기에, 딕셔너리의 value들을 배열로 만들어주는 Object.values(dictionary)를 사용했다. 이를 결과 확인하기 전에 대입하면 사용자가 모든 선택지를 선택했을 때만 결과가 나오게 된다.
마치며...
reduce()의 사용법이 많은 것 같던데 알아보다가 머리가 터질 것 같았다. 그래도 for반복문 외의 다른 방법을 찾아본 것 같아서 유익한 시도였다.
