중앙정보기술인재개발원 개발자 과정 15일차 기록입니다.

오늘은 선생님이 바뀌시고 첫 자바 수업을 들었습니다.

 

인텔리j를 설치하고 설정을 하면서 오전 시간은 거의 썼고,

오후에는 가볍게 헬로자바 출력하는것과 변수 정도만 훑어봤습니다.

 

저녁 자습시간에는, 이미 다 알고 있던 개념이지만, 혹시나 놓치고 있는 것들이 있을까봐 책을 처음부터 쭉 읽었습니다.

 

역시나 모르던 것들이 있었고, 약간씩 구멍난 지식을 메웠습니다.

 

오늘은 노트를 깜빡하고 안가져가서 자습하면서 필기를 못했습니다.

 

기억나는 것은, 낮에 별도로 혼자 함수 공부를 하다가 콜백 함수를 알고있다고 생각했는데,

한 블로그의 예제가 이해안돼서 한참을 애먹었습니다.

 

한두시간쯤 헤매다 저보다 잘하는 동료 수강생 분에게 도움을 청했고,

 

코드에 대해서 이게 이래서 이해가 안된다면서 질문을 하는 와중에 번뜩 이해가 됐고,

 

다른 사람하고 얘기를 하는것도 역시 도움이 많이 된다는 걸 느꼈습니다.

 

 

 

그 코드는 이랬습니다. JS 코드만 봐주시면 됩니다.

 

혹시 코드가 이해가 안되시면 맨 밑의 설명을 읽어주시면 됩니다.

 

See the Pen Untitled by smarto (@arbiterkdh) on CodePen.

F12 눌러보시면, 잘 찍히는 걸 알 수 있습니다.

지금은 이해됐으니까, 안보고 스스로 적었습니다만,

아까 이해가 안됐던 부분은 ,

 

SayHello 함수의 매개변수가 name과 callback인데,

밑의 anything 함수가 인자값으로 전달되면서 그 안의 매개변수 또한, name 이라는 이름을 갖고 있어서,

이해하기가 어려웠습니다.

 

결론은 위의 name 과 아래의 name은 무관한 녀석들이었고,

 

각 실행문 안에서만 짝지어지는 녀석들이었습니다. 원글쓴이는 왜 저렇게 헷갈리게 코드를 썼을까요 허허...

 

아무튼, 이것의 코드가 읽히는 순서를 매 줄마다 console.log로 찍어보면서 이해를 하는것이 도움이 된다는 또 동료 수강생분의 조언을 듣고, 여러번 반복숙달하면서 이해를 했습니다.

 

 

 

 

 

 

 

 

 

 

여기서부터 이제 코드의 흐름을 짚으면서 설명해보겠습니다.

설명이 기니까, 같은 창을 두 개 띄워서 하나는 코드 보시고, 하나는 글을 읽으시는 것도 좋을 것 같습니다.

 

 

일단 window.onload=function(){}; 이건 전역에 있는 JS코드가 다 종료되고 나서 읽히게 되고, 그러기로 문법이 정해진 코드입니다. 

 

다음, 위 SayHello = function(name,callback{              이 줄을 읽기 시작하는데,

SayHello 함수의 매개변수가 인자값을 필요로 하기 때문에 여기서 이 함수를 읽는 걸 중단하고 넘어갑니다.

 

다음, 아래 SayHello("킹갓왕동현", function anything(name){              이 줄을 읽기 시작하고,

인자값을 받았으니 다시 위로 돌아가서 SayHello 함수에 인자값을 넣어서 읽기 시작합니다.

 

다음, 다시 위 SayHello 함수 내부의

const words = "제 닉네임은 킹갓왕동현 입니다.";           를 읽고, 바로 다음

callback(words);              를 읽는데, 이 callback 이 바로 오늘의 주인공 콜백함수 입니다.

 

(참고로, words 의 name은 이미 인자값을 받았기 때문에 저기서 저렇게 읽히게 됩니다.)

 

 

이 callback 은 위 SayHello의 매개변수이면서 동시에 함수여서 인자값으로 함수, 즉, 실행문을 받을 수 있는데,

그것이 anything 함수여서 이제 이 녀석을 읽기 시작합니다.

 

여기서 헷갈리면 안되는게, anything 함수를 읽는것 자체가 저 callback(words)를 실행하고 있는 것입니다.

 

우린 지금 callback(words)  함수 안에 들어와 있는 겁니다.

(혹은 anything 함수를 이 callback 함수에 집어넣었다고 생각해도 될 것 같습니다.)

 

 

아무튼, anything(name) 함수 안에 console.log(name); 즉, 콘솔창에 anything의 name을 출력하라고 쓰여있고 , 

 

(위 SayHello의 매개변수 name과 상관없는 이름만 같은 name 입니다.)

 

이미 words 라는 인자값을 받아놨기 때문에,

console에는  words의 내용인  "제 닉네임은 킹갓왕동현 입니다."  가 찍히게 됩니다.

 

그리고 anything 함수가 종료되고, 마찬가지로 아마 동시에?혹은 바로 뒤에? callback 함수도 종료됩니다.

 

그렇게 되면, SayHello 함수의 정의와 호출이 다 끝나고, 나머지 전역의 코드도 다 실행이 끝나고~,

그 후에 window.onload 안의 내용이 실행되고 끝나게 됩니다.

 

혹시나 궁금하실까봐 콘솔을 직접 찍은 코드를 또 가져와봤습니다.

 

아래에 코드를 봐주시면 되겠습니다.

 

 

See the Pen Untitled by smarto (@arbiterkdh) on CodePen.

name이 헷갈리실까봐 일부러 아래 anything 함수에는 name1로 바꿨습니다.

 

 

 

ps. 오늘은 너무 늦어서 추신 쓰느니 빨리 씻고 자야겠습니다...