배열 문제

모던 자바스크립트 과제를 풀어보다 이해해보고자 작성합니다..

입력한 숫자의 합 구하기

아래 조건을 만족하는 함수 sumInput()을 작성해 봅시다.

1. prompt 창을 띄워 사용자에게 숫자를 입력해 달라고 요청한 후, 입력받은 값들을 배열에 저장합니다.
2. 숫자가 아닌 값, 혹은 빈 문자열을 입력하거나 ‘Cancel’ 버튼을 누르면 질문을 멈춥니다.
3. 배열 요소의 합을 계산하고 리턴합니다.

주의: 숫자 0은 유효한 숫자이므로, 사용자가 0을 입력하더라도 질문이 멈추지 말아야 합니다.

답:

<script>
function sumInput() {

  let numbers = []; 

  while (true) {

    let value = prompt("숫자를 입력해 주세요.", 0);

    // 입력받는 것을 정지해야 하는 경우
    if (value === "" || value === null || !isFinite(value)) break;

    numbers.push(+value);
  }

  let sum = 0;
  for (let number of numbers) {
    sum += number;
  }
  return sum;
}

alert( sumInput() );
</script>

해석 해보기:

<script>
function sumInput() { // 함수를 만들고

  let numbers = []; // 입력받은 값을 배열에 저장

  // prompt창을 계속 띄워 값을 받아야 하기 때문에 while문을 사용
  while (true) {
    let value = prompt("숫자를 입력해 주세요.", 0); // 숫자형으로 바꾸지 않는다.

    /** 입력받는 것을 정지해야 하는 경우. 
    if 빈 문자열이거나, 취소했거나, 유효한 숫자가 아닌경우 break **/
    if (value === "" || value === null || !isFinite(value)) break;
	// 0을 입력하더라도 멈추지 말아야 합니다. 는 !isFinite로 작성

	// number 배열에 value를 숫자형으로 바꿔 차례대로 push
    numbers.push(+value); // 여기서 숫자형으로 바꾼다.
  }

  // sum을 숫자로 초기화 시켜주고
  let sum = 0;
  
  // numbers 배열을 순회
  for (let number of numbers) {
    sum += number; // numbers를 순회하며 sum에 하나씩 더해준다.
  }
  return sum; // 반환
}

alert( sumInput() ); // 함수 호출
</script>

prompt 값을 입력할 당시 숫자로 바꾸지 않은 이유:

<script>
let value = +prompt(`숫자를 입력해 주세요`);
</script>

위처럼 작성하면 prompt값을 받아올 때 부터 숫자형으로 형 변환을 하는데,
숫자형으로 먼저 형 변환시
null == 0
true == 1
false == 0
" "(빈 문자열) == 0
undefined == NaN 이 된다.

<script>
if (value === "" || value === null || !isFinite(value)) break;
</script>

빈 문자열과 null도 0으로 형 변환 되기 때문에 정지하지 않는다.
isFinite()로 0도 숫자에 포함시켰기 때문이다.

<script>
numbers.push(+value);
</script>

따라서 배열에 추가할 때 숫자로 바꿔서 추가한다.