react를 하면서 js에 대한 지식의 밑천이 드러났다.
당장 로직을 짜도 문제가 내가 작성을 하기 힘들다는 것이었다.
진심으로 하나를 파도 제대로 파야한다는 중요성을 실감했다(...)
차근차근 공부했던 것을 정리한다!
Callback 콜백콜백 몇번이나 쓰면서 그래서 이게 정확히 뭐를 말하는데?말하면 순간 말문이 막힌다.....!
그때마다 나는 ................
StackOverflow를 찾는다....진심 최고다......StackOverflow 만세
여하튼 StackOverflow에 답변이 제일 간단명료하게 나와있다.
Developers are often confused by what a callback is because of the name of the damned thing.
A callback function is a function which is:
accessible by another function, and
is invoked after the first function if that first function completes
A nice way of imagining how a callback function works is that it is a function that is "called at the back" of the function it is passed into.
Maybe a better name would be a "call after" function.
This construct is very useful for asynchronous behaviour where we want an activity to take place whenever a previous event completes.
대충 해석해보니, 콜백 함수는 다른 함수에 접근 할 수 있고 첫번째 함수가 완료되면 첫번째 함수 다음에 호출 된다고 한다! (콜백함수 이름 구리다고 한마디 함.)
이게 어떻게 동작하는지 생각하는 좋은 방법은 전달된 함수 뒤에 호출 되는 것이다.
그래서 이 많은 좋아요 수를 받은 답변에는 덧붙이기로는 콜백 함수 네이밍이 구리다면서 더 나은 이름으로는 이후 호출 정도가 좋을 것 같다고 했다.
즉,콜백함수는 이전 함수가 완료될 때마다 활동이 발생하기를 원하는 비동기적 동작에 유용하다는 것이다.
...그리고 또 의문이었던 것은 화살표 함수는 단순히 코드수를 줄이기 위해서 쓰는 것일까?하는 궁금증이 있었다.
일단 이 부분도 공부한 부분을 차근차근 적어보려고 한다.
const level = function () {} 이것과
const level = () => {} 이것은 같다.
()안에는 parameter 인자가 들어가고 => 이 화살표는 무언가를 반환하는 식이 있을 것이다.
사실상 코드수가 줄었지만 진짜 이것 때문에?????라는 의문점이 계속 들었다.
찾아보니, function으로 선언된 함수는 자신만의 스코프를 가지게 되지만 화살표 함수는 그렇지 않다고 한다.
그래서 또 스코프는 뭔데!?해서 또 후다닥 찾아봤다.
쉽게 말해서 함수 내에 변수 또는 다른 표현식이 해당 내에 있지 않으면 사용할 수 없다는 것이다.
function exampleFunction() {
var x = "declared inside function";
// x는 오직 exampleFunction 내부에서만 사용 가능.
console.log("Inside function");
console.log(x);
}
console.log(x); // 에러 발생```
(위 상황은 유효하지 않음!!!!)
var x = "declared outside function";
exampleFunction();
function exampleFunction() {
console.log("Inside function");
console.log(x);
}
console.log("Outside function");
console.log(x);
(위 상황은 변수가 함수 외부의 전역에서 선언되어서 유효함)
출처:mdn
✍✔ 다시 처음부터 시작한다는 마음으로 공부하기 시작했다.그러니 전보다 코드가 읽기 쉬워졌고 컴퓨터는 이걸 어떻게 받아들이는지에 대한 개념이 아주 조금은 잡혀지기 시작했다. 아마 앞으로 쭉 해당 부분을 체크하면서 로직을 짜지 않을까 싶다 :-)
