231108 TIL

chillakilla·2023년 11월 8일

베이직 과제

5번

js 파일의 for문을 이용하여 현재 브라우저의 1,2,3 숫자에 10을 더해보세요.
<body>
	<div class="number">1</div>
	<div class="number">2</div>
	<div class="number">3</div>
	<script src="index.js"></script>
</body>

솔루션 코드

<script>
const number = document.querySelectorAll('.number');

for (let i = 0; i < number.length; i++) {
  let divNumber = parseInt(number[i].textContent, 10);
  let newNumber = divNumber + 10;
  number[i].textContent = newNumber;
}                                  
</script>

div영역의 숫자를 바꿔줘야함.
클래스는 지정되어있으니 쿼리셀렉터올로 불러와서 변수로 선언
for 문으로 현재 바꿔줄 요소의 개수만큼 돌려줌(number.length)
parseInt를 사용해 텍스트 내용을 정수로 바꾸고, divNumber에 변수로 저장
newNumber에는 위에서 처리된 divNumber에 10을 더해준 것을 변수로 저장
textContent를 newNumber로 업데이트

배운 것

parseInt( )

이 함수는 문자열 인자를 파싱하여,

특정 진수(수의 진법체계에서 기준이 되는 값)의 정수를 반환

참고 : mdn web docs

구문
parseInt(str);
parseInt(str, radix);

알고리듬 풀 때 도움이 많이 될 것 같다.
그런 생각이 든 김에 chatGPT에게 parseInt를 사용해야만 하는 문제를 하나 만들어달라고 했다.

parseInt 문제

<script>
function reverseInteger(num) {
    // Your code here
}
</script>

정수를 입력 받고 그 반댓값을 정수로 반환하라고 한다.

첫 솔루션 코드 - 오류

<script>
function reverseInteger(num) {
  let result = parseInt(num, 10);
  let splitNum = result.split('');
  let reverseArr = splitNum.reverse();
  let joinArr = reverseArr.join('');

  return joinArr;
}
</script>

당연히 동작하지 않고 오류가 났다.
그저 어디서 보고 일단 넣어본 티가 팍팍 난다.

솔루션 코드

<script>
function reverseInteger(num) {
  let numStr = num.toString();
  let returnStr = numStr.split('').reverse().join('');
  let reverseNum = parseInt(returnStr, 10);

  return reverseNum;
}
</script>