코딩일기 function vs arrowFunction, forEach vs map 차이점

자바스크립트 동작원리

function test(){
   setTimeout(function(){
      console.log("타이머 끝!!");
   },0);

   for(let i=0; i<4; i++){
      console.log(i);
   }
}

test();
console.log("메인끝");

/*
1. queue test() --> setTimeout (web api)
2. for문 실행
3. console 메인실행
4. setTimeout을 web api가 실행하고 안쪽의 콜백함수를 다시 queue에 등록
5. 이벤트루프를 통해서 마지막으로 callstack에 등록
*/

ES5에서의 비동기 --> 동기화 (콜백함수를 활용)
   1. callstack이 처음 delay함수를 호출
   2. 첫번째 delay안쪽의 setTImeout을 web api가 호출하면 콜백으로 들어가있는 두번쨰 delay함수를

       다시 callstack에 전달
   3. callstack이 두번째 delay함수를 호출
   4. 두번째 delay안쪽의 setTimeout을 web api가 호출하면 콜백으로 들어가있는 세번째 delay함수를 다시 callstck에 전달
   5. 위의 과정이 반복

function vs arrowFunction, forEach vs map 차이점

//function문

a.on("click",function(e){
   e.preventDefault();
   console.log(this);
});

//화살표 함수
a.on("click",(e)=>{
   e.preventDefault();
   console.log(e.currentTarget);
});

const arr = ["tom","david","andy"];

$(arr).each(function(index, el){
   console.log(this);
});


$(arr).each( index => console.log(index) );


function vs arrowFunction
-ES5의 익명함수의 경우 해당 함수가 실행되는 코드에 따라서 내부적으로 전달받는 this값이 계속 변경 

-ES6의 화살표함수 내부에 전달받는 this는 값이 고정

- 화살표함수에서 인수가 여러개일떄 괄호 생략 가능
- 화살표함수에서 실행할 코드가 한줄일떄 중괄호 생략가능



forEach, map (배열을 반복도는 내장함수)
forEach (반복 기능만 있음)
map (반복을 하면서 해당 배열을 복사해서 새로운 배열 반환)


const numbers = [1,2,3,4,5];
//numbers.forEach(el => console.log(el));

//forEach는 리턴값 없음
const result2 = numbers.forEach(el=>el*3);
console.log(result2);

//map은 리턴값 있음
const result = numbers.map(el=>el*2);
console.log(result);

//map함수에서 반환되는 코드가 중괄호(불록)으로 감싸져 있으면 앞에 return키워드를 써줘야지 최종적으로 함수 밖으로 값을 내보낼수 있음
const result3 = numbers.map(el=>{
   return el*2;
});
console.log(result3);

const lists = document.querySelectorAll("ul li");//유사배열
const lists_arr = Array.prototype.slice.call(lists); //순수배열로 변환

//forEach는 유사배열로 반복 가능
lists.forEach(el=>console.log(el));

//map은 순수배열만 반복가능
lists.map(el=>console.log(el));

map은 아직 잘 모르겠다...