240426 TIL_개인 프로젝트1 (영화 검색 사이트 제작) > JS 문법 (화살표 함수, forEach), JS 강의 (콜백 함수 | 비동기 함수)

[JS 함수]

콜백 함수

콜백 함수란?
다른 코드의 인자로 넘겨주는 함수 e.g. forEach, setTimeout... : 해당 함수는 주체로, 제어권이 위 함수에게 존재함.
=> 콜백 함수에서 매서드로써 호출해도 어쨌든 함수이기 때문에 this는 전역 객체를 받음

콜백 지옥이란?
콜백 함수 안에 있는 콜백 함수 안에 있는 콜백 함수 안에 있는 콜백함수 안에 있는 콜백 함수가 들어있는.....
가독성이 일단 지옥(HELL) => 유지 보수가 정말 어렵다!

동기 vs 비동기

동기 함수란? sync

1번이 처음부터 끝까지 실행 -> 2번이 처음부터 끝까지 실행 -> 3번이 처음부터 끝까지 실행
즉, 현재 실행 중인 코드가 끝나야 다음 코드를 실행

비동기 함수란? async (a + sync)

실행 중인 코드의 완료와 무방함. 즉시 다음 코드로 넘어감.
별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드
e.g. setTimeout, addEventListner

비동기 작업의 특성은 순서를 보장하지 않음

Promise

비동기 처리에 대해, 처리가 끝나면 알려달라는 '약속'
new 연산자로 호출한 Promise 인자로 넘어가는 콜백은 바로 실행
내부에서 resolve(또는 reject) 함수로 호출하는 구문이 있을 경우 둘 중 하나가 실행되기 전까지 다음(then), 오류(catch)로 넘어가지 않는다.

async, await

promise를 반환할 경우, await를 만나면 무조건 끝날 때까지 기다림

refactoring

비효율적인 코드를 효율적인 코드로 바꾸기

Generator

반복할 수 있는 이터러블 (iterator(:반복할 수 있는)) 객체가 반환
일드 (Yield:양보하다, 미루다)
즉, 비동기 작업이 완료되는 시점마다 next 매서드를 호출해주면 위에서 아래로 순차적으로 진행됨

*붙은 함수가 제너레이터 함수
이 함수를 실행하면 iterator 객체 반환 !

[개인 과제]

오늘의 깨달음... return이 필요한 친구들도 화살표 함수, 단일 표현식으로 하면 return 생략된 채로 알아서 해준다....
현재 내가 쓴 filter의 경우도 단일 표현식이기 떄문에 return이 명시하지 않아도 작동한다! 단, {} 안에 있다면 return 값 필수~~! (단, forEach는 {}에 리턴 없어도 된다. 자세한 것은 아래)

화살표 함수일 시

const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // 출력: [2, 4]

일반 함수일 시

const evenNumbers = numbers.filter(function(number) {
    **return** number % 2 === 0;
});
console.log(evenNumbers); // 출력: [2, 4]

forEach()

forEach() 메서드는 순회 메서드. map()과 달리 forEach()는 항상 undefined를 반환하므로 체이닝할 수 없다. 즉, return을 어느 순간이나 안 써도 됨. 화살표든 뭐든 간에.

변수 할당과 함수 실행

코딩의 ㅋ조차 다 못 본 나는 변수 할당과 함수 실행이 개념적으로 잡히지 않아 끝없는 의문에 빠지기도 한다...

function @@ () {} 이것과 -> 호출 필요
const @@ = array.forEach() -> 단순 변수 할당으로 변수에 값을 할당하는 거다. 사실 이것도 변수를 이용하지 않으면 쓸모 없으므로, 변수를 이용하는 것 자체가 필요하다고 할 수 있음... (@@ 안 이용하면 무쓸모)

함수를 호출해야 할 때 vs 함수를 호출하지 않아도 웹에 알아서 실행될 때

[추측 중....] 어싱크/어웨이트를 배우면서 굉장히 헷갈린 부분! 이것 때문에 하루종일 붙잡고 있었다.. 좀 더 확인해봐야 하지만, 나는 주로 변수 할당을 즐겨썼다. 변수를 집어넣은 값을 내가 알아서 활용하면 내가 알아서 동기적으로 활용할 수 있으니까... 그런데 변수 할당이더라도 어싱크/어웨이트가 들아가면... 음🧐... 어떤 식으로 쓰는지 확인해봐야겠다. (이벤트 함수로 사용자가 클릭하는 등의 움직임이 있을 때 제외)