[JS] 디버깅 - 스탭오버, 스탭인, 넥스트

JavaScript 디버깅: 스텝 오버, 스텝 인, 넥스트 예시

가정할 코드 예시:

function add(a, b) {
    let result = a + b;
    return result;
}

function multiply(x, y) {
    let product = x * y;
    let added = add(product, 10);
    return added;
}

let finalResult = multiply(3, 4);
console.log(finalResult);

스텝 오버 (Step Over)

스텝 오버는 한 줄씩 코드를 실행하며 함수 호출 간의 흐름을 따라갈 수 있는 기능입니다.

1. multiply 함수 호출: multiply(3, 4)가 실행됩니다.
2. multiply 함수 내부 진입: product = 12, added = add(12, 10)이라는 변수들이 생성됩니다.
3. add 함수 호출: add(12, 10)이 실행됩니다.
4. add 함수 내부 진입: result = 22가 생성됩니다.
5. add 함수 종료: return result;을 통해 add 함수를 빠져나와 added = 22가 됩니다.
6. multiply 함수 종료: return added;를 통해 multiply 함수를 빠져나와 finalResult = 22가 됩니다.
7. 로그 출력: console.log(finalResult);가 실행되어 콘솔에 22가 출력됩니다.

스텝 인 (Step Into)

스텝 인은 함수 호출 내부로 진입하여 해당 함수의 내부 코드를 따라가는 기능입니다.

1. multiply 함수 호출: multiply(3, 4)가 실행됩니다.
2. multiply 함수 내부 진입: product = 12, added = add(12, 10); 이라는 변수들이 생성됩니다.
3. add 함수 내부 진입: add(12, 10)이라는 함수 호출 위치에서 Step Into를 사용하여 add 함수 내부로 진입합니다.
4. add 함수 내부 진행: result = a + b;에서 a = 12, b = 10으로 설정되어 result = 22가 됩니다.
5. add 함수 종료: return result;를 통해 add 함수를 빠져나오고, added = 22가 됩니다.
6. multiply 함수 종료: return added;를 통해 multiply 함수를 빠져나오고, finalResult = 22가 됩니다.
7. 로그 출력: console.log(finalResult);가 실행되어 콘솔에 22가 출력됩니다.

넥스트 (Next)

넥스트는 현재 위치의 다음 줄로 실행을 진행하는 기능입니다.

1. multiply 함수 호출: multiply(3, 4)가 실행됩니다.
2. multiply 함수 내부 진입: product = 12, added = add(12, 10)이라는 변수들이 생성됩니다.
3. 넥스트 실행: 넥스트를 사용하여 let finalResult = multiply(3, 4); 다음 줄인 console.log(finalResult);로 이동합니다.
4. 로그 출력: console.log(finalResult);가 실행되어 콘솔에 22가 출력됩니다.

이 예제를 통해 스텝 오버, 스텝 인, 넥스트의 각각의 동작을 이해할 수 있습니다. 각 기능은 코드의 다른 부분을 디버깅할 때 유용하게 사용됩니다.