JavaScript 루프 디버깅 팁 예시
지금부터 저는 여러분에게 코드에서 오류를 찾는 방법을 가르쳐 드리겠습니다. 이전 수업의 조언을 따르지 않아서 작동하지 않는 코드를 얻게 되었다고 상상해 봅시다. 오류를 찾아서 코드가 작동하도록 만드는 방법을 살펴보겠습니다.
많은 초보자들은 잘못된 검색 방법을 사용합니다. 그들은 코드를 보고, 실수를 알아차리길 바라며 몇 시간 동안 쳐다봅니다. 이것은 효과적이지 않습니다.
올바른 방법은 변수를 콘솔에 출력하고, 필요한 것이 거기에 있는지 아닌지를 확인하는 것입니다. 이때 문제가 있다고 추정되는 지점부터 시작하여 코드를 위쪽으로 이동해야 합니다. 실제로 살펴봅시다.
예를 들어, 두 자리 숫자 배열을 순회하고 첫 번째 숫자가 두 번째 숫자보다 하나 큰 숫자를 찾는 작업이 있다고 가정해 봅시다. 간단하게 하기 위해 배열에는 문자열 형태의 숫자가 저장되어 있다고 가정합니다.
문제를 해결한 후 다음과 같은 코드를 얻었다고 가정해 봅시다:
let arr = ['21', '32', '34', '43', '45', '54', '55'];
let sum = 0;
for (let elem of arr) {
if (elem[0] === elem[1] + 1) {
sum += elem;
}
}
console.log(sum); // 0을 출력함
그러나 코드는 0을 출력합니다.
이 경우 먼저 확인해야 할 것은,
변수에 무엇이 들어가는지 보는 것입니다.
if 문 안으로 코드 실행이 들어가는지 확인합시다.
if 문 안에 콘솔에 무엇인가를 출력해 봅시다:
let arr = ['21', '32', '34', '43', '45', '54', '55'];
let sum = 0;
for (let elem of arr) {
if (elem[0] === elem[1] + 1) {
console.log('!'); // 아무것도 출력하지 않음
sum += elem;
}
}
console.log(sum);
콘솔에 아무것도 나타나지 않았으므로, 코드 실행이 조건문 안으로 들어가지 않는다는 의미입니다. 우리 자신의 눈으로 무엇을 비교하고 있는지 봅시다:
let arr = ['21', '32', '34', '43', '45', '54', '55'];
let sum = 0;
for (let elem of arr) {
console.log(elem[0], elem[1] + 1); // '2' 와 '11', '3' 와 '21' ...
if (elem[0] === elem[1] + 1) {
sum += elem;
}
}
console.log(sum);
결과적으로 두 번째 피연산자가 두 자리 숫자라는 것이 바로 보입니다. 이는 1이 문자열로 더해지기 때문이라는 것을 쉽게 알 수 있습니다. 문제를 수정해 봅시다:
let arr = ['21', '32', '34', '43', '45', '54', '55'];
let sum = 0;
for (let elem of arr) {
if (+elem[0] === +elem[1] + 1) { // 수정
sum += elem;
}
}
console.log(sum); // '021324354'
수정 후, 우리는 이제 sum 변수에
부정확하지만 뭔가 나타났다는 것을 볼 수 있습니다.
그러나 우리에게 필요한 것이 거기에 있지만,
숫자가 아닌 문자열로 합쳐졌다는 것을 알 수 있습니다.
문제를 수정해 봅시다:
let arr = ['21', '32', '34', '43', '45', '54', '55'];
let sum = 0;
for (let elem of arr) {
if (+elem[0] === +elem[1] + 1) {
sum += +elem; // 수정
}
}
console.log(sum); // 모두 작동함
다음 코드에서 발생한 오류를 수정하세요:
let obj = {a: 10, b: 20, c: 30, d: 40, e: 50};
let sum = 0;
for (let elem in obj) {
if (elem[0] === '1' && elem[0] === '2') {
sum += +elem;
}
}
console.log(sum);
