개발하다가 막힐 때 로그를 안찍어볼 이유가 전혀 없습니다

코딩하면서 겪는 문제중 비중인 큰것이 코드를 작성했는데 생각대로 작동을 안하는경우인 경우가 대부분이죠.
생각대로 작동을 안한다는 말은 달리 표현하자면 내가 작성한 코드가 어떤 이유에서인지 실행이 안된다는것이겠죠.
이때 아무것도 모르는 상태에서도 해볼수 있는게 그냥 모든 라인에 로그찍는 코드를 넣어보는거에요.
그러면 흐름을 눈으로 볼 수 있죠.
실행을 원했던 코드가 있는 부분에 찍은 로그가 찍히느냐 안찍히느냐에 따라 해당라인이 실행되었는지를 곧바로 알수 있는거죠.
그런 다음 왜 이러한 흐름으로 코드가 흘러갔는지는 흐름을 확인 해본 후 값들을 확인해보면서 알아갈수 있는것이지요.

문제를 겪었을때 로그를 안찍어볼 이유가 전혀 없고, 로그를 찍기 위해 문제가 되는 코드에 대한 이해가 있어야 하는것도 전혀 아닙니다.
알아야할 것은 console.log('hello') 를 라인에 포함시키면 콘솔탭에 hello가 표시된다는 점뿐입니다.

문제의 상황이 아래에 있습니다
"저는 변수 val 에 배열을 준비하고 이 배열에 hello를 push 하고 push를 통해 넣은 첫번째 요소를 출력하고자 했는데 잘 안됩니다. 왜 그런지 알고싶습니다."

bGV0IHZhbDsKc2V0VGltZW91dCgoKT0+ewogICAgdmFsID0gW107Cn0pCnF1ZXVlTWljcm90YXNrKCgpPT57CiAgICB2YWwucHVzaCgnaGVsbG8nKTsKfSkKZnVuY3Rpb24gYWJjKCl7CiAgICBjb25zb2xlLmxvZyh2YWxbMF0pOwp9CmFiYygpOw==


let val;
setTimeout(()=>{
    val = [];
})
queueMicrotask(()=>{
    val.push('hello');
})
function abc(){
    console.log(val[0]);
}
abc();

어떻게해야할까요?
안되는 이유를 아는 방법이 질문밖에 없을까요?
물론 질문이나 구글링을 해보는것도 방법일 수 있겠죠.
그런데 스스로 뭔가 생각해볼 방법은 전혀 없는걸까요?

Y29uc29sZS5sb2coJ2FhYTAnKQpsZXQgdmFsOwpjb25zb2xlLmxvZygnYWFhMScpCnNldFRpbWVvdXQoKCkgPT4gewogICAgY29uc29sZS5sb2coJ2FhYTInKQogICAgdmFsID0gW107CiAgICBjb25zb2xlLmxvZygnYWFhMycpCn0pCmNvbnNvbGUubG9nKCdhYWE0JykKcXVldWVNaWNyb3Rhc2soKCkgPT4gewogICAgY29uc29sZS5sb2coJ2FhYTUnKQogICAgdmFsLnB1c2goJ2hlbGxvJyk7CiAgICBjb25zb2xlLmxvZygnYWFhNicpCn0pCmNvbnNvbGUubG9nKCdhYWE3JykKZnVuY3Rpb24gYWJjKCkgewogICAgY29uc29sZS5sb2coJ2FhYTgnKQogICAgY29uc29sZS5sb2codmFsWzBdKTsKICAgIGNvbnNvbGUubG9nKCdhYWE5JykKfQpjb25zb2xlLmxvZygnYWFhMTAnKQphYmMoKTsKY29uc29sZS5sb2coJ2FhYTExJyk=


console.log('aaa0')
let val;
console.log('aaa1')
setTimeout(() => {
    console.log('aaa2')
    val = [];
    console.log('aaa3')
})
console.log('aaa4')
queueMicrotask(() => {
    console.log('aaa5')
    val.push('hello');
    console.log('aaa6')
})
console.log('aaa7')
function abc() {
    console.log('aaa8')
    console.log(val[0]);
    console.log('aaa9')
}
console.log('aaa10')
abc();
console.log('aaa11')

그냥 이렇게 모든라인에 다 콘솔찍어보는건 못할일일까요?
이것은 아무것도 몰라도 할수 있죠.
이렇게 해서 실행해본 결과는 다음과 같습니다.

Vk0yMDoxIGFhYTAKVk0yMDozIGFhYTEKVk0yMDo5IGFhYTQKVk0yMDoxNSBhYWE3ClZNMjA6MjEgYWFhMTAKVk0yMDoxNyBhYWE4ClZNMjA6MTEgYWFhNQpWTTIwOjEyIFVuY2F1Z2h0IFR5cGVFcnJvcjogQ2Fubm90IHJlYWQgcHJvcGVydGllcyBvZiB1bmRlZmluZWQgKHJlYWRpbmcgJ3B1c2gnKQogICAgYXQgPGFub255bW91cz46MTI6OQooYW5vbnltb3VzKSBAIFZNMjA6MTIKVk0yMDoxOCBVbmNhdWdodCBUeXBlRXJyb3I6IENhbm5vdCByZWFkIHByb3BlcnRpZXMgb2YgdW5kZWZpbmVkIChyZWFkaW5nICcwJykKICAgIGF0IGFiYyAoPGFub255bW91cz46MTg6MjApCiAgICBhdCA8YW5vbnltb3VzPjoyMjoxCmFiYyBAIFZNMjA6MTgKKGFub255bW91cykgQCBWTTIwOjIyClZNMjA6NSBhYWEyClZNMjA6NyBhYWEz


VM20:1 aaa0
VM20:3 aaa1
VM20:9 aaa4
VM20:15 aaa7
VM20:21 aaa10
VM20:17 aaa8
VM20:11 aaa5
VM20:12 Uncaught TypeError: Cannot read properties of undefined (reading 'push')
    at <anonymous>:12:9
(anonymous) @ VM20:12
VM20:18 Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at abc (<anonymous>:18:20)
    at <anonymous>:22:1
abc @ VM20:18
(anonymous) @ VM20:22
VM20:5 aaa2
VM20:7 aaa3

결과에서 보니 aaa6와 aaa9가 안찍혔다는것을 알수있습니다.
그리고 몇번째 라인에서 어떤 이유로 에러가 발생했다는 내용까지 표시되어있지요.
그러면 이 상태에서 질문을 한다하더라도 처음질문이였던 "이 코드 왜 작동을 안하나요?" 가 아니라 "왜 aaa6와 aaa9가 안찍힐까요? 다른말로 왜 console.log(val[0]); 라인과 val.push('hello'); 라인에서 에러가 생길까요?" 라는 좀더 구체적인 질문이 될수도 있는것이지요

로그를 안찍어볼 이유가 전혀 없습니다